cccb/sanic
cccb/sanic
11
1
Fork 0
Code Issues 5 Pull requests Packages Projects 1 Releases Activity

play/pause works

Browse source
This commit is contained in:
XenGi 2024-02-25 11:09:44 +01:00
parent 83297238c2
commit 671bcd300f
Signed by: xengi
SSH key fingerprint: SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
4 changed files with 24 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
NOTES.md
View file

@ -7,13 +7,13 @@
- [ ] Display config dialog (is this even needed?) - [ ] Display config dialog (is this even needed?)
- [x] `Update DB` button - [x] `Update DB` button
- [x] Disable if running update is detected - [x] Disable if running update is detected
- [ ] `Previous Track` button - [x] `Previous Track` button
- [ ] `Next Track` button - [x] `Next Track` button
- [x] `Stop` button - [x] `Stop` button
- [x] `Play` button - [x] `Play` button
- [ ] `Pause` button - [x] `Pause` button
- [x] Track seeker - [x] Track seeker
- [ ] `Repeat` toggle - [x] `Repeat` toggle
- [ ] `Shuffle` toggle - [ ] `Shuffle` toggle
- [ ] xfade - [ ] xfade
- [ ] decrease - [ ] decrease

2
server.go
View file

@ -124,7 +124,7 @@ func wsServe(c echo.Context) error {
c.Logger().Error(err) c.Logger().Error(err)
break break
} else { } else {
log.Println(msg) // log.Print(msg)
if strings.ToLower(msg) == "#status" { if strings.ToLower(msg) == "#status" {
status, err := mpdConn.Status() status, err := mpdConn.Status()
if err != nil { if err != nil {

30
static/controls.js vendored
View file

@ -1,3 +1,5 @@
// Configuration
const API_URL = `${document.location.protocol}//${document.location.host}/api`; const API_URL = `${document.location.protocol}//${document.location.host}/api`;
const VOLUME_STEP = 5; const VOLUME_STEP = 5;
@ -130,21 +132,21 @@ control_update_db.addEventListener("click", e => {
}); });
control_previous.addEventListener("click", e => { control_previous.addEventListener("click", e => {
fetch(`${API_URL}/previous_track`).then(async r => { fetch(`${API_URL}/previous_track`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
}); });
control_play_pause.addEventListener("click", e => { control_play_pause.addEventListener("click", e => {
if (e.target.innerHTML === "&#x23F5;&#xFE0E;") { // TODO: check is never true if (e.target.innerHTML === "⏸︎") { // pause // TODO: check is never true
fetch(`${API_URL}/pause`).then(async r => { fetch(`${API_URL}/pause`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
} else { // Pause } else { // Pause
fetch(`${API_URL}/play`).then(async r => { fetch(`${API_URL}/play`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -152,21 +154,21 @@ control_play_pause.addEventListener("click", e => {
}); });
control_stop.addEventListener("click", e => { control_stop.addEventListener("click", e => {
fetch(`${API_URL}/stop`).then(async r => { fetch(`${API_URL}/stop`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
}); });
control_next.addEventListener("click", e => { control_next.addEventListener("click", e => {
fetch(`${API_URL}/next_track`).then(async r => { fetch(`${API_URL}/next_track`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
}); });
control_progress.addEventListener("change", e => { control_progress.addEventListener("change", e => {
fetch(`${API_URL}/seek/${e.target.value}`).then(async r => { fetch(`${API_URL}/seek/${e.target.value}`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -180,7 +182,7 @@ control_repeat.addEventListener("click", e => {
e.target.dataset.state = "on"; e.target.dataset.state = "on";
} }
fetch(`${API_URL}/repeat`).then(async r => { fetch(`${API_URL}/repeat`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -194,7 +196,7 @@ control_shuffle.addEventListener("click", e => {
e.target.dataset.state = "on"; e.target.dataset.state = "on";
} }
fetch(`${API_URL}/random`).then(async r => { fetch(`${API_URL}/random`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -202,7 +204,7 @@ control_shuffle.addEventListener("click", e => {
control_xfade_minus.addEventListener("click", e => { control_xfade_minus.addEventListener("click", e => {
// TODO: not yet implemented // TODO: not yet implemented
fetch(`${API_URL}/xfade`).then(async r => { fetch(`${API_URL}/xfade`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -210,7 +212,7 @@ control_xfade_minus.addEventListener("click", e => {
control_xfade_plus.addEventListener("click", e => { control_xfade_plus.addEventListener("click", e => {
// TODO: not yet implemented // TODO: not yet implemented
fetch(`${API_URL}/xfade`).then(async r => { fetch(`${API_URL}/xfade`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -218,7 +220,7 @@ control_xfade_plus.addEventListener("click", e => {
control_volume_up.addEventListener("click", e => { control_volume_up.addEventListener("click", e => {
const v = Math.min(parseInt(control_volume.value) + VOLUME_STEP, 100); const v = Math.min(parseInt(control_volume.value) + VOLUME_STEP, 100);
fetch(`${API_URL}/volume/${v}`).then(async r => { fetch(`${API_URL}/volume/${v}`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -228,7 +230,7 @@ control_volume_up.addEventListener("click", e => {
control_volume_down.addEventListener("click", e => { control_volume_down.addEventListener("click", e => {
const v = Math.max(parseInt(control_volume.value) - VOLUME_STEP, 0); const v = Math.max(parseInt(control_volume.value) - VOLUME_STEP, 0);
fetch(`${API_URL}/volume/${v}`).then(async r => { fetch(`${API_URL}/volume/${v}`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });
@ -236,7 +238,7 @@ control_volume_down.addEventListener("click", e => {
}); });
control_volume.addEventListener("change", e => { control_volume.addEventListener("change", e => {
fetch(`${API_URL}/volume/${e.target.value}`).then(async r => { fetch(`${API_URL}/volume/${e.target.value}`).then(async r => {
if (200 >= r.status < 300) { if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`); console.error(`API returned ${r.status}: ${r.statusText}`);
} }
}); });

6
static/util.js
View file

@ -13,21 +13,21 @@ function addSongToQueue(song) {
length.innerText = song.length; length.innerText = song.length;
const actions = document.createElement("td"); const actions = document.createElement("td");
actions.classList.add("actions"); actions.classList.add("actions");
// TODO: maybe use a instead of button? // TODO: maybe use `a` instead of `button`?
const moveUp = document.createElement("button"); const moveUp = document.createElement("button");
moveUp.classList.add("borderless"); moveUp.classList.add("borderless");
moveUp.innerHTML = "&#x1F53A;"; // 🔺 Red Triangle Pointed Down moveUp.innerHTML = "&#x1F53A;"; // 🔺 Red Triangle Pointed Down
moveUp.addEventListener("click", event => { moveUp.addEventListener("click", event => {
console.log(`DEBUG: move song ${song.id} up`); console.log(`DEBUG: move song ${song.id} up`);
}); });
// TODO: maybe use a instead of button? // TODO: maybe use `a` instead of `button`?
const moveDown = document.createElement("button"); const moveDown = document.createElement("button");
moveDown.classList.add("borderless"); moveDown.classList.add("borderless");
moveDown.innerHTML = "$#x1F53B;"; // 🔻 Red Triangle Pointed Up moveDown.innerHTML = "$#x1F53B;"; // 🔻 Red Triangle Pointed Up
moveDown.addEventListener("click", event => { moveDown.addEventListener("click", event => {
console.log(`DEBUG: move song ${song.id} down`); console.log(`DEBUG: move song ${song.id} down`);
}); });
// TODO: maybe use a instead of button? // TODO: maybe use `a` instead of `button`?
const remove = document.createElement("button"); const remove = document.createElement("button");
remove.classList.add("borderless"); remove.classList.add("borderless");
remove.innerHTML = "$#x274C;"; // ❌ Cross mark; 🗑️ Wastebasket remove.innerHTML = "$#x274C;"; // ❌ Cross mark; 🗑️ Wastebasket