play/pause works

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

View file

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

View file

@ -124,7 +124,7 @@ func wsServe(c echo.Context) error {
c.Logger().Error(err)
break
} else {
log.Println(msg)
// log.Print(msg)
if strings.ToLower(msg) == "#status" {
status, err := mpdConn.Status()
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 VOLUME_STEP = 5;
@ -130,21 +132,21 @@ control_update_db.addEventListener("click", e => {
});
control_previous.addEventListener("click", e => {
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}`);
}
});
});
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 => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
} else { // Pause
fetch(`${API_URL}/play`).then(async r => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
@ -152,21 +154,21 @@ control_play_pause.addEventListener("click", e => {
});
control_stop.addEventListener("click", e => {
fetch(`${API_URL}/stop`).then(async r => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
});
control_next.addEventListener("click", e => {
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}`);
}
});
});
control_progress.addEventListener("change", e => {
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}`);
}
});
@ -180,7 +182,7 @@ control_repeat.addEventListener("click", e => {
e.target.dataset.state = "on";
}
fetch(`${API_URL}/repeat`).then(async r => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
@ -194,7 +196,7 @@ control_shuffle.addEventListener("click", e => {
e.target.dataset.state = "on";
}
fetch(`${API_URL}/random`).then(async r => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
@ -202,7 +204,7 @@ control_shuffle.addEventListener("click", e => {
control_xfade_minus.addEventListener("click", e => {
// TODO: not yet implemented
fetch(`${API_URL}/xfade`).then(async r => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
@ -210,7 +212,7 @@ control_xfade_minus.addEventListener("click", e => {
control_xfade_plus.addEventListener("click", e => {
// TODO: not yet implemented
fetch(`${API_URL}/xfade`).then(async r => {
if (200 >= r.status < 300) {
if (r.status >= 400) {
console.error(`API returned ${r.status}: ${r.statusText}`);
}
});
@ -218,7 +220,7 @@ control_xfade_plus.addEventListener("click", e => {
control_volume_up.addEventListener("click", e => {
const v = Math.min(parseInt(control_volume.value) + VOLUME_STEP, 100);
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}`);
}
});
@ -228,7 +230,7 @@ control_volume_up.addEventListener("click", e => {
control_volume_down.addEventListener("click", e => {
const v = Math.max(parseInt(control_volume.value) - VOLUME_STEP, 0);
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}`);
}
});
@ -236,7 +238,7 @@ control_volume_down.addEventListener("click", e => {
});
control_volume.addEventListener("change", e => {
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}`);
}
});

View file

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