yonlu/yellowjacket
1
1
Fork 0
Code Issues 55 Pull Requests 6 Actions Packages Projects Releases 12 Wiki Activity

added pnpm, lit, manually load runtime on frontend

Browse Source
This commit is contained in:
logan
2025-03-27 17:43:51 -05:00
parent 078bd726f0
commit 30683d268d
19 changed files with 219 additions and 2918 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -1,2 +1,3 @@
node_modules
build
test_data
frontend/index.html
+9 -14
View File
@@ -2,13 +2,17 @@
<html lang="en">
<head>
<!-- manually including wails runtime -->
<meta name="wails-options" content="noautoinject" />
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" type="text/css" href="/node_modules/@picocss/pico/css/pico.css">
<title>yellowjacket</title>
<link rel="stylesheet" type="text/css" href="/src/assets/styles/pico.css">
</head>
<script type="module" src="/src/components/player.js"></script>
<script src="/src/assets/scripts/main.js" type="module"></script>
<script src="/index.js" type="module"></script>
<body>
<header class="container">
@@ -17,7 +21,7 @@
<li>
<hgroup>
<h1>YellowJacket</h1>
<p>Music how it was meant to be.</p>
<p>Music how it was meant to bee.</p>
</hgroup>
</li>
</ul>
@@ -29,7 +33,7 @@
</summary>
<ul>
<li>
<a href="/src/pages/config.html">
<a href="/src/pages/config/config.html">
<img src="/src/assets/images/icons/ui/settings.svg" />
</a>
</li>
@@ -41,15 +45,6 @@
</header>
<hr />
<main class="container">
<section id="library-selector">
<label id="library-directory-label">No Library Directory Selected</label>
<button onclick="dirPicker()">Choose Directory...</button>
</section>
<section>
<button onclick="onPlayPauseButtonClick()">
<img src="/src/assets/images/icons/music/play-solid.svg" id="playPauseButtonIcon" />
</button>
</section>
</main>
<footer>
<player-controls></player-controls>
frontend/index.js
+1
View File
@@ -0,0 +1 @@
import '/src/components/audio-player/audio-player.js';
frontend/package.json
+6
View File
@@ -0,0 +1,6 @@
{
"dependencies": {
"@picocss/pico": "^2.1.1",
"lit": "^3.2.1"
}
}
frontend/package.json.md5
Executable
+1
View File
@@ -0,0 +1 @@
59a625b8cd99cd466065cf0b9e6893e0
frontend/pnpm-lock.yaml
Generated
+67
View File
@@ -0,0 +1,67 @@
lockfileVersion: '9.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
importers:
.:
dependencies:
'@picocss/pico':
specifier: ^2.1.1
version: 2.1.1
lit:
specifier: ^3.2.1
version: 3.2.1
packages:
'@lit-labs/ssr-dom-shim@1.3.0':
resolution: {integrity: sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ==}
'@lit/reactive-element@2.0.4':
resolution: {integrity: sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==}
'@picocss/pico@2.1.1':
resolution: {integrity: sha512-kIDugA7Ps4U+2BHxiNHmvgPIQDWPDU4IeU6TNRdvXQM1uZX+FibqDQT2xUOnnO2yq/LUHcwnGlu1hvf4KfXnMg==}
'@types/trusted-types@2.0.7':
resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
lit-element@4.1.1:
resolution: {integrity: sha512-HO9Tkkh34QkTeUmEdNYhMT8hzLid7YlMlATSi1q4q17HE5d9mrrEHJ/o8O2D0cMi182zK1F3v7x0PWFjrhXFew==}
lit-html@3.2.1:
resolution: {integrity: sha512-qI/3lziaPMSKsrwlxH/xMgikhQ0EGOX2ICU73Bi/YHFvz2j/yMCIrw4+puF2IpQ4+upd3EWbvnHM9+PnJn48YA==}
lit@3.2.1:
resolution: {integrity: sha512-1BBa1E/z0O9ye5fZprPtdqnc0BFzxIxTTOO/tQFmyC/hj1O3jL4TfmLBw0WEwjAokdLwpclkvGgDJwTIh0/22w==}
snapshots:
'@lit-labs/ssr-dom-shim@1.3.0': {}
'@lit/reactive-element@2.0.4':
dependencies:
'@lit-labs/ssr-dom-shim': 1.3.0
'@picocss/pico@2.1.1': {}
'@types/trusted-types@2.0.7': {}
lit-element@4.1.1:
dependencies:
'@lit-labs/ssr-dom-shim': 1.3.0
'@lit/reactive-element': 2.0.4
lit-html: 3.2.1
lit-html@3.2.1:
dependencies:
'@types/trusted-types': 2.0.7
lit@3.2.1:
dependencies:
'@lit/reactive-element': 2.0.4
lit-element: 4.1.1
lit-html: 3.2.1
frontend/src/assets/scripts/main.js
-46
View File
@@ -1,46 +0,0 @@
import { DirectoryPicker } from '../../../wailsjs/go/frontendbindings/FrontendBindings';
import { GetDir as GetLibraryDir } from '../../../wailsjs/go/library/Library';
import { Play } from '../../../wailsjs/go/player/Player';
let libraryDirectoryLabel = document.getElementById("library-directory-label");
let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
GetLibraryDir().
then((result) => {
if (result.length === 0) { return; }
window.updateLibraryDirLabel(result);
}).catch((err) => { console.error(err) })
window.onPlayPauseButtonClick = function() {
try {
Play().then((result) => {
console.log(result)
playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
}).catch((err) => {
console.log("There is an error with playing")
console.error(err);
});
}
catch (err) {
console.error(err);
}
}
window.dirPicker = function() {
try {
DirectoryPicker()
.then((result) => { window.updateLibraryDirLabel(result); })
.catch((err) => {
console.log("There is an error with directory picker")
console.error(err);
});
}
catch (err) {
console.error(err);
}
}
window.updateLibraryDirLabel = function(value) {
libraryDirectoryLabel.innerText = value;
}
frontend/src/assets/styles/pico.css
-2835
View File
File diff suppressed because it is too large Load Diff
frontend/src/pages/config.html → frontend/src/components/audio-player/audio-player.js
View File
frontend/src/components/audio-player/controls/player-controls.css
View File
frontend/src/components/audio-player/controls/player-controls.html
+5
View File
@@ -0,0 +1,5 @@
<section>
<button onclick="onPlayPauseButtonClick()">
<img src="/src/assets/images/icons/music/play-solid.svg" id="playPauseButtonIcon" />
</button>
</section>
frontend/src/components/audio-player/controls/player-controls.js
+39
View File
@@ -0,0 +1,39 @@
import { LitElement, html } from 'lit';
import { Play } from '/wailsjs/go/player/Player';
export class Player extends LitElement {
static properties = {
version: {},
};
constructor() {
super();
this.version = 'STARTING';
}
render() {
return html`
<p>Welcome to the Lit tutorial!</p>
<p>This is the ${this.version} code.</p>
`;
}
onPlayPauseButtonClick = function() {
let playPauseButtonIcon = document.getElementById("playPauseButtonIcon");
try {
Play().then((result) => {
console.log(result)
playPauseButtonIcon.setAttribute("src", "/src/assets/images/icons/music/pause-solid.svg")
}).catch((err) => {
console.log("There is an error with playing")
console.error(err);
});
}
catch (err) {
console.error(err);
}
}
}
customElements.define('player-controls', Player);
frontend/src/components/audio-player/seekbar/seek-bar.css
View File
frontend/src/components/audio-player/seekbar/seek-bar.html
View File
frontend/src/components/audio-player/seekbar/seek-bar.js
View File
frontend/src/components/player.js
-21
View File
@@ -1,21 +0,0 @@
import {LitElement, html} from 'lit';
export class Player extends LitElement {
static properties = {
version: {},
};
constructor() {
super();
this.version = 'STARTING';
}
render() {
return html`
<p>Welcome to the Lit tutorial!</p>
<p>This is the ${this.version} code.</p>
`;
}
}
customElements.define('player-controls', Player);
frontend/src/pages/config/config.html
+57
View File
@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- manually including wails runtime -->
<meta name="wails-options" content="noautoinject" />
<script src="/wails/ipc.js"></script>
<script src="/wails/runtime.js"></script>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<link rel="stylesheet" type="text/css" href="/node_modules/@picocss/pico/css/pico.css">
<title>yellowjacket - config</title>
</head>
<script src="./config.js" type="module"></script>
<body>
<header class="container">
<nav>
<ul>
<li>
<hgroup>
<a href="/index.html">
<h1>YellowJacket</h1>
</a>
<p>Config</p>
</hgroup>
</li>
</ul>
<ul>
<li>
<details class="dropdown">
<summary role="button" class="outline">
YJ
</summary>
<ul>
<li>
<a href="/src/pages/config/config.html">
<img src="/src/assets/images/icons/ui/settings.svg" />
</a>
</li>
</ul>
</details>
</li>
</ul>
</nav>
</header>
<hr />
<main class="container">
<section id="library-selector">
<label id="library-directory-label">No Library Directory Selected</label>
<button onclick="dirPicker()">Choose Directory...</button>
</section>
</main>
</body>
</html>
frontend/src/pages/config/config.js
+31
View File
@@ -0,0 +1,31 @@
import { DirectoryPicker } from '/wailsjs/go/frontendbindings/FrontendBindings.js';
import { GetDir as GetLibraryDir } from '/wailsjs/go/library/Library.js';
let libraryDirectoryLabel = document.getElementById("library-directory-label");
window.updateLibraryDirLabel = function(value) {
libraryDirectoryLabel.innerText = value;
}
// on load update the library dir label
GetLibraryDir().
then((result) => {
if (result.length === 0) { return; }
window.updateLibraryDirLabel(result);
}).catch((err) => { console.error(err) })
window.dirPicker = function() {
try {
DirectoryPicker()
.then((result) => {
if (result.length === 0 ) { };
window.updateLibraryDirLabel(result); })
.catch((err) => {
console.error("There is an error with directory picker: " + err);
});
}
catch (err) {
console.error(err);
}
}
wails.json
+2 -2
View File
@@ -2,9 +2,9 @@
"$schema": "https://wails.io/schemas/config.v2.json",
"name": "yellowjacket",
"outputfilename": "yellowjacket",
"frontend:install": "",
"frontend:install": "pnpm install",
"frontend:build": "",
"frontend:dev:watcher": "",
"frontend:dev:watcher": "inotifywait -m -e modify,create,delete,move -r .",
"frontend:dev:serverUrl": "",
"author": {
"name": "",