add js controls
This commit is contained in:
parent
dd41374467
commit
114d6ba4da
SSH key fingerprint:
SHA256:FGp51kRvGOcWnTHiOI39ImwVO4A3fpvR30nPX3LpV7g
98
static/controls.js
vendored
Normal file
98
static/controls.js
vendored
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
const API_URL = `${document.location.protocol}://${document.location.host}/api`;
|
||||
|
||||
// Get control elements
|
||||
|
||||
const control_update_db = document.getElementById("control-update-db");
|
||||
const control_previous = document.getElementById("control-previous");
|
||||
const control_play_pause = document.getElementById("control-play-pause");
|
||||
const control_stop = document.getElementById("control-stop");
|
||||
const control_next = document.getElementById("control-next");
|
||||
const control_progress = document.getElementById("control-progress");
|
||||
const control_repeat = document.getElementById("control-repeat");
|
||||
const control_shuffle = document.getElementById("control-shuffle");
|
||||
const control_xfade = document.getElementById("control-xfade");
|
||||
const control_xfade_minus = document.getElementById("control-xfade-minus");
|
||||
const control_xfade_plus = document.getElementById("control-xfade-plus");
|
||||
const queue_table = document.querySelector("#queue tbody");
|
||||
|
||||
// Add API calls to controls
|
||||
|
||||
control_update_db.addEventListener("click", e => {
|
||||
fetch(`${API_URL}/update_db`);
|
||||
});
|
||||
control_previous.addEventListener("click", e => {
|
||||
fetch(`${API_URL}/previous_track`);
|
||||
});
|
||||
control_play_pause.addEventListener("click", e => {
|
||||
if (e.target.innerText === "⏵︎") { // Play
|
||||
fetch(`${API_URL}/pause`);
|
||||
} else { // Pause
|
||||
fetch(`${API_URL}/play`);
|
||||
}
|
||||
});
|
||||
control_stop.addEventListener("click", e => {
|
||||
fetch(`${API_URL}/stop`);
|
||||
});
|
||||
control_next.addEventListener("click", e => {
|
||||
fetch(`${API_URL}/next_track`);
|
||||
});
|
||||
control_progress.addEventListener("change", e => {
|
||||
fetch(`${API_URL}/seek/${e.target.value}`)
|
||||
});
|
||||
control_repeat.addEventListener("click", e => {
|
||||
fetch(`${API_URL}/repeat`);
|
||||
});
|
||||
control_shuffle.addEventListener("click", e => {
|
||||
fetch(`${API_URL}/shuffle`);
|
||||
});
|
||||
control_xfade_minus.addEventListener("click", e => {
|
||||
// TODO: not yet implemented
|
||||
fetch(`${API_URL}/xfade`);
|
||||
});
|
||||
control_xfade_plus.addEventListener("click", e => {
|
||||
// TODO: not yet implemented
|
||||
fetch(`${API_URL}/xfade`);
|
||||
});
|
||||
|
||||
// Create WebSocket connection.
|
||||
const socket = new WebSocket(`${document.location.protocol === "https" ? "wss" : "ws"}://${document.location.host}/ws`);
|
||||
|
||||
// Connection opened
|
||||
socket.addEventListener("open", (e) => {
|
||||
socket.send("Hello Server!");
|
||||
});
|
||||
|
||||
// Listen for messages
|
||||
socket.addEventListener("message", (e) => {
|
||||
console.log("Message from server");
|
||||
const msg = JSON.parse(e.data);
|
||||
if ("error" in msg.mpd_status) {
|
||||
console.error(msg.mpd_status.error);
|
||||
}
|
||||
|
||||
if ("updating_db" in msg.mpd_status) {
|
||||
control_update_db.disable();
|
||||
} else {
|
||||
control_update_db.enable();
|
||||
}
|
||||
if ("state" in msg.mpd_status && msg.mpd_status.state === "play") {
|
||||
control_play_pause.innerText = "⏸︎"; // Pause
|
||||
} else {
|
||||
control_play_pause.innerText = "⏵︎"; // Play
|
||||
}
|
||||
if ("elapsed" in msg.mpd_status) {
|
||||
control_progress.value = msg.mpd_status.elapsed;
|
||||
}
|
||||
if ("duration" in msg.mpd_status) {
|
||||
control_progress.max = msg.mpd_status.duration;
|
||||
}
|
||||
if ("repeat" in msg.mpd_status) {
|
||||
control_repeat.checked = msg.mpd_status.repeat;
|
||||
}
|
||||
if ("random" in msg.mpd_status) {
|
||||
control_shuffle.checked = msg.mpd_status.random;
|
||||
}
|
||||
if ("xfade" in msg.mpd_status) {
|
||||
control_xfade.value = msg.mpd_status.xfade;
|
||||
}
|
||||
});
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<title>Sanic</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48 64x64" type="image/png" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
|
|
@ -11,21 +12,39 @@
|
|||
<div>
|
||||
<button>Login</button>
|
||||
<button>Config</button>
|
||||
<button id="control-update-db" disabled="disabled">Update DB</button>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<button>⏮︎</button> <!-- ⏮️ Last Track Button -->
|
||||
<button>⏹︎</button> <!-- ⏹️ Stop Button -->
|
||||
<button>⏯︎</button> <!-- ⏯️ Play or Pause Button -->
|
||||
<button>⏭︎</button> <!-- ⏭️ Next Track Button -->
|
||||
<button id="control-previous">⏮︎</button> <!-- ⏮️ Last Track Button -->
|
||||
<button id="control-stop">⏹︎</button> <!-- ⏹️ Stop Button -->
|
||||
<button id="control-play-pause">⏵︎</button> <!-- ▶️ Play or ⏸️ Pause Button -->
|
||||
<button id="control-next">⏭︎</button> <!-- ⏭️ Next Track Button -->
|
||||
</div>
|
||||
<div>
|
||||
<label for="progress"></label>
|
||||
<input type="range" id="progress" name="progress" min="0" max="100" value="0" />
|
||||
<label for="control-progress"></label>
|
||||
<input type="range" id="control-progress" name="progress" min="0" step="1" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
baz
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<label for="control-repeat">repeat</label>
|
||||
<input type="checkbox" id="control-repeat" name="repeat" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="control-shuffle">shuffle</label>
|
||||
<input type="checkbox" id="control-shuffle" name="shuffle" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="control-xfade">xfade</label>
|
||||
<button id="control-xfade-minus">➖</button>
|
||||
<input type="number" id="control-xfade" name="xfade" value="00" />
|
||||
<button id="control-xfade-plus">➕</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="queue">
|
||||
|
|
@ -40,15 +59,16 @@
|
|||
<td>Actions</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="queue_table"></tbody>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="browser">browser</div>
|
||||
<div id="result">result</div>
|
||||
</main>
|
||||
<script src="controls.js"></script>
|
||||
<script>
|
||||
// create example elements in queue
|
||||
const queue = document.getElementById("queue_table");
|
||||
const queue = document.querySelector("#queue tbody");
|
||||
for (let i = 0; i < 100; i++) {
|
||||
const tr = document.createElement("tr");
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
/* #################### */
|
||||
/* ####### main ####### */
|
||||
/* #################### */
|
||||
|
||||
html, body { margin: 0; height: 100%; }
|
||||
|
||||
main {
|
||||
|
|
@ -20,8 +24,6 @@ main {
|
|||
display: flex;
|
||||
}
|
||||
|
||||
#nav
|
||||
|
||||
#result {
|
||||
grid-area: result;
|
||||
overflow: auto;
|
||||
|
|
@ -35,8 +37,28 @@ table {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
/* #################### */
|
||||
/* ###### debug ####### */
|
||||
/* #################### */
|
||||
|
||||
/* debug */
|
||||
div {
|
||||
border: 1px solid blue;
|
||||
}
|
||||
|
||||
/* #################### */
|
||||
/* ### pretty stuff ### */
|
||||
/* #################### */
|
||||
|
||||
/* Disable arrows in input */
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
#control-xfade::-webkit-outer-spin-button,
|
||||
#control-xfade::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
#control-xfade[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue