Skip to content

Commit 5f15365

Browse files
longshadowdevlongshadowdev
authored
Merge pull request #16 from longshadowdev/main
Add Settings and more
2 parents 2f8c045 + 1df57a2 commit 5f15365

File tree

11 files changed

+194
-42
lines changed

11 files changed

+194
-42
lines changed

‎index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,15 @@
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
68
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
79
<title>Lyrion Minim</title>
810
</head>
911

1012
<body>
1113
<div id="app"></div>
14+
<script type="text/javascript" src="js/materialize.min.js"></script>
1215
<script type="module" src="/src/main.ts"></script>
1316
</body>
14-
</html>
17+
</html>

‎package.json‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,15 @@
1010
"tauri": "tauri"
1111
},
1212
"dependencies": {
13-
"vue": "^3.5.13",
14-
"@tauri-apps/api": "^1"
13+
"@materializecss/materialize": "^2.2.1",
14+
"@tauri-apps/api": "^1",
15+
"vue": "^3.5.13"
1516
},
1617
"devDependencies": {
18+
"@tauri-apps/cli": "^1",
1719
"@vitejs/plugin-vue": "^5.2.1",
1820
"typescript": "~5.6.2",
1921
"vite": "^6.0.3",
20-
"vue-tsc": "^2.1.10",
21-
"@tauri-apps/cli": "^1"
22+
"vue-tsc": "^2.1.10"
2223
}
2324
}

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/css/materialize.min.css‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/images/lyrion-logo.png‎

22.2 KB
Loading

‎public/js/materialize.min.js‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/loading.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7+
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<title>Lyrion Minim</title>
10+
</head>
11+
<style>
12+
html, body, #wrapper {
13+
height: 100%;
14+
}
15+
</style>
16+
<body>
17+
<div id="wrapper" class="valign-wrapper">
18+
<div class="container">
19+
<div class="center-align">
20+
<div class="preloader-wrapper big active">
21+
<div class="spinner-layer spinner-blue-only">
22+
<div class="circle-clipper left">
23+
<div class="circle"></div>
24+
</div><div class="gap-patch">
25+
<div class="circle"></div>
26+
</div><div class="circle-clipper right">
27+
<div class="circle"></div>
28+
</div>
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
</div>
34+
<script type="text/javascript" src="js/materialize.min.js"></script>
35+
</body>
36+
</html>

‎src-tauri/src/main.rs‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ fn main() {
2222
CustomMenuItem::new("quit", "Quit")
2323
.accelerator("Cmd+Q")
2424
)
25+
.add_item(
26+
CustomMenuItem::new("config", "Configuration")
27+
)
2528
.add_item(CustomMenuItem::new("debug", "Toggle Debug Info"))
2629
)
2730
)
@@ -57,6 +60,9 @@ fn main() {
5760
"debug" => {
5861
window.emit("debug", ()).unwrap();
5962
},
63+
"config" => {
64+
window.emit("config", ()).unwrap();
65+
},
6066
_ => {}
6167
}
6268
_ => {}

‎src-tauri/tauri.conf.json‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
},
99
"package": {
1010
"productName": "lyrion-minim",
11-
"version": "0.2.4"
11+
"version": "0.2.5"
1212
},
1313
"tauri": {
1414
"allowlist": {
@@ -27,6 +27,10 @@
2727
"sidecar": true,
2828
"args": [
2929
"-n",
30+
{
31+
"validator": "\\S+"
32+
},
33+
"-M",
3034
{
3135
"validator": "\\S+"
3236
}
@@ -70,6 +74,9 @@
7074
"active": true,
7175
"targets": "all",
7276
"identifier": "com.lyrion-minim.app",
77+
"category": "Music",
78+
"shortDescription": "Lyrion Minim",
79+
"longDescription": "Lyrion Minim. A minimal desktop client for Lyrion Music Server.",
7380
"icon": [
7481
"icons/32x32.png",
7582
"icons/128x128.png",

‎src/App.vue‎

Lines changed: 113 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,58 +5,158 @@ import { listen } from "@tauri-apps/api/event";
55
import { process } from "@tauri-apps/api";
66
import { invoke } from "@tauri-apps/api/tauri";
77
8-
let iframeSrc = ref("loading.html");
9-
let debug = ref(true);
8+
let iframeSrc = ref("/loading.html");
9+
let debugMode = ref(false);
10+
let configMode = ref(false);
1011
let squeezeliteCommand: Command|null = null;
1112
let squeezeliteProcess: Child|null = null;
12-
let clientName = "Lyrion Minim";
13+
let clientName = ref("Lyrion Minim");
14+
let serverUrl = ref("");
1315
let pid = ref(0);
1416
1517
// Quite menu item clicked
1618
listen("quit", async () => {
1719
await stopSqueezelite();
18-
process.exit(0).then(console.log).catch(console.error).finally(console.log);
20+
process.exit(0)
21+
.then(console.log)
22+
.catch(console.error)
23+
.finally(console.log);
1924
});
2025
2126
// Debug menu item clicked
2227
listen("debug", async () => {
23-
debug.value = !debug.value;
28+
debugMode.value = !debugMode.value;
29+
});
30+
31+
// Debug menu item clicked
32+
listen("config", async () => {
33+
configMode.value = !configMode.value;
2434
});
2535
2636
async function startSqueezelite() {
37+
console.log('Starting squeezelite');
2738
// Don't start it twice!
28-
if (squeezeliteCommand !== null) {
39+
if (squeezeliteProcess !== null) {
2940
return;
3041
}
3142
32-
squeezeliteCommand = Command.sidecar("binaries/squeezelite", ["-n", clientName]);
43+
squeezeliteCommand = Command.sidecar("binaries/squeezelite", ["-n", clientName.value, "-M", "SqueezeLite" + getOS()]);
3344
squeezeliteProcess = await squeezeliteCommand.spawn();
3445
pid.value = squeezeliteProcess.pid;
3546
console.log('Squeezelite process started ' + squeezeliteProcess.pid);
3647
}
3748
3849
async function stopSqueezelite() {
3950
if (squeezeliteProcess !== null) {
51+
console.log('Stopping squeezelite');
4052
await squeezeliteProcess.kill();
4153
console.log('Squeezelite process stopped ' + squeezeliteProcess.pid);
4254
squeezeliteProcess = null;
4355
}
4456
}
4557
58+
function getOS() {
59+
const platform = window.navigator?.userAgentData?.platform || window.navigator.platform,
60+
macosPlatforms = ['macOS', 'Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
61+
windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'];
62+
let os = null;
63+
64+
if (macosPlatforms.indexOf(platform) !== -1) {
65+
os = 'Mac';
66+
} else if (windowsPlatforms.indexOf(platform) !== -1) {
67+
os = 'Windows';
68+
} else if (/Linux/.test(platform)) {
69+
os = 'Linux';
70+
} else {
71+
os = '';
72+
}
73+
74+
return os;
75+
}
76+
4677
async function init() {
78+
console.log('Init');
4779
await startSqueezelite();
48-
let lmsServer = await invoke("detect_lms_server");
49-
iframeSrc.value = "http://" + lmsServer + "/Material/now-playing?player=" + clientName;
80+
serverUrl.value = await invoke("detect_lms_server");
81+
showPlayer();
82+
}
83+
84+
function showPlayer() {
85+
iframeSrc.value = "http://" + serverUrl.value + "/Material/now-playing?player=" + clientName.value + "&layout=mobile";
5086
}
5187
88+
async function saveConfig() {
89+
// await invoke("save_config", {
90+
// clientName: clientName.value,
91+
// serverUrl: serverUrl.value
92+
// });
93+
console.log(clientName.value);
94+
console.log(serverUrl.value);
95+
await stopSqueezelite();
96+
await startSqueezelite();
97+
showPlayer();
98+
configMode.value = false;
99+
}
52100
53101
init();
102+
/**
103+
Config planning:
54104
105+
LMS Server:
106+
- Auto detect
107+
- Manually set
108+
109+
Squeezelite:
110+
- Client Name (on change, restart squeezelite)
111+
- Auto start / stop
112+
- Stop button
113+
- Start button
114+
- Show current status (including PID)
115+
116+
*/
55117
</script>
56118

57119
<template>
58-
<iframe :src="iframeSrc" scrolling="no"></iframe>
59-
<div id="debug" v-show="debug">Pid: {{pid}}<br> URL: {{iframeSrc}}</div>
120+
<iframe :src="iframeSrc" scrolling="no" v-show="!configMode"></iframe>
121+
122+
<div id="config" v-show="configMode" class="container" style="margin-top: 2em">
123+
124+
<div class="row container" style="gap: 2em;">
125+
126+
<div class="s12 m6 center">
127+
<img style="max-width: 20%; height:auto" src="/images/lyrion-logo.png">
128+
<h4>Lyrion Minim</h4>
129+
130+
<h5>Configuration</h5>
131+
</div>
132+
133+
<div class="s12 m6 input-field outlined">
134+
<input id="clientName" v-model="clientName" type="text" placeholder="Lyrion Minim" maxlength="20">
135+
<label for="clientName">Client Name</label>
136+
<span class="supporting-text">The name you want to give this client in Lyrion Music Server</span>
137+
</div>
138+
139+
<div class="s12 m6 input-field outlined">
140+
<input id="serverUrl" type="text" v-model="serverUrl" placeholder="http://" maxlength="20">
141+
<label for="serverUrl">Server Base URL</label>
142+
<span class="supporting-text">Override the auto-detected servere URL. Format: host:port</span>
143+
</div>
144+
145+
<div class="s12 m6 center">
146+
<button class="btn waves-effect waves-light blue-grey" name="action" @click="saveConfig">Save and Continue
147+
<i class="material-icons right">music_note</i>
148+
</button>
149+
</div>
150+
151+
</div>
152+
153+
</div>
154+
155+
<div id="debug" v-show="debugMode">
156+
Pid: {{pid}}<br>
157+
URL: {{iframeSrc}}
158+
</div>
159+
60160
</template>
61161

62162
<style>
@@ -69,20 +169,14 @@ html, body, #app {
69169
overflow: hidden;
70170
border-radius: 0.8em;
71171
}
72-
iframe, #config, #splash {
172+
iframe, #config {
73173
width: 100%;
74174
height: 100%;
75175
border: none;
76176
padding: 0;
77177
margin: 0;
78178
overflow: hidden;
79179
}
80-
#config, #splash {
81-
padding: 2em;
82-
background-color: black;
83-
opacity: 0.85;
84-
color: white;
85-
}
86180
input {
87181
color:white;
88182
}
@@ -94,5 +188,6 @@ input {
94188
color: white;
95189
font-size: 0.7em;
96190
z-index: 9;
191+
overflow: hidden;
97192
}
98193
</style>

0 commit comments

Comments
 (0)