switch from websockets to sse
This commit is contained in:
parent
67335c97b4
commit
534077bad3
SSH key fingerprint:
SHA256:jxWM2RTHvxxcncXycwwWkP7HCWb4VREN05UGJTbIPZg
13 changed files with 384 additions and 233 deletions
|
|
@ -197,7 +197,6 @@
|
|||
<div id="playlist-browser" style="display: none">
|
||||
<label for="control-playlist-list"></label>
|
||||
<select id="control-playlist-list" size="15">
|
||||
<option value="1">basedrive</option><!-- TODO: Remove this line -->
|
||||
</select><!--/#control-playlist-list-->
|
||||
<div>
|
||||
<button id="control-refresh-playlists">🔄 Refresh</button><!-- 🔄 Counterclockwise Arrows Button -->
|
||||
|
|
@ -223,62 +222,9 @@
|
|||
</table>
|
||||
</div><!--/#result-->
|
||||
<footer>
|
||||
<a href="https://git.berlin.ccc.de/cccb/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon © 2023
|
||||
<a href="https://gitlab.com/XenGi/sanic"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92"><defs><clipPath id="a"><path d="M0 .113h91.887V92H0Zm0 0"/></clipPath></defs><g clip-path="url(#a)"><path style="stroke:none;fill-rule:nonzero;fill:#ffffff;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.913 5.913 0 0 0-8.368 0l-8.332 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.043 7.043 0 0 1 1.673 7.277l10.183 10.184a7.026 7.026 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.045 7.045 0 0 1-9.961 0 7.038 7.038 0 0 1-1.532-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.034 7.034 0 0 1 2.308-1.539V33.926a7.001 7.001 0 0 1-2.308-1.535 7.049 7.049 0 0 1-1.516-7.7L29.242 14.273 1.734 41.777a5.918 5.918 0 0 0 0 8.371L41.855 90.27a5.92 5.92 0 0 0 8.368 0l39.933-39.934a5.925 5.925 0 0 0 0-8.371"/></g></svg></a> Sanic MPD Web UI 0.1.0 - by XenGi and coon © 2023
|
||||
</footer>
|
||||
</main>
|
||||
<script src="index.js"></script>
|
||||
<script>
|
||||
const table = document.querySelector("#queue > table > tbody");
|
||||
for (let i = 1; i <= 100; i++) {
|
||||
const tr = document.createElement("tr");
|
||||
if (i === 1) {
|
||||
tr.classList.add("playing");
|
||||
tr.dataset.song_id = i;
|
||||
}
|
||||
const pos = document.createElement("td");
|
||||
pos.innerText = i.toString();
|
||||
const artist = document.createElement("td");
|
||||
artist.innerText = `Artist ${i.toString()} with a super long name that should finally bring the length to a maximum`;
|
||||
const track = document.createElement("td");
|
||||
track.innerText = `Track ${i.toString()} with super long name that could potentially expand the table by a lot!`;
|
||||
const album = document.createElement("td");
|
||||
album.innerText = `Album ${i.toString()}`;
|
||||
const length = document.createElement("td");
|
||||
length.innerText = "01:00:00";
|
||||
const actions = document.createElement("td");
|
||||
actions.classList.add("actions");
|
||||
// TODO: maybe use a instead of button?
|
||||
const moveUp = document.createElement("button");
|
||||
moveUp.classList.add("borderless");
|
||||
moveUp.innerHTML = "🔺"; // 🔺 Red Triangle Pointed Down
|
||||
moveUp.addEventListener("click", event => {
|
||||
console.log(`DEBUG: move song ${i} up`);
|
||||
});
|
||||
// TODO: maybe use a instead of button?
|
||||
const moveDown = document.createElement("button");
|
||||
moveDown.classList.add("borderless");
|
||||
moveDown.innerHTML = "🔻"; // 🔻 Red Triangle Pointed Up
|
||||
moveDown.addEventListener("click", event => {
|
||||
console.log(`DEBUG: move song ${i} down`);
|
||||
});
|
||||
// TODO: maybe use a instead of button?
|
||||
const remove = document.createElement("button");
|
||||
remove.classList.add("borderless");
|
||||
remove.innerHTML = "❌"; // ❌ Cross mark
|
||||
remove.addEventListener("click", event => {
|
||||
console.log(`DEBUG: remove song ${i} from queue`);
|
||||
});
|
||||
actions.appendChild(moveUp);
|
||||
actions.appendChild(moveDown);
|
||||
actions.appendChild(remove);
|
||||
tr.appendChild(pos);
|
||||
tr.appendChild(artist);
|
||||
tr.appendChild(track);
|
||||
tr.appendChild(album);
|
||||
tr.appendChild(length);
|
||||
tr.appendChild(actions);
|
||||
table.appendChild(tr);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -392,8 +392,28 @@ control_volume.addEventListener("change", event => {
|
|||
});
|
||||
});
|
||||
|
||||
// Server-Sent-Events
|
||||
|
||||
if (typeof (EventSource) !== "undefined") {
|
||||
const sse = new EventSource("/sse");
|
||||
sse.addEventListener("status", (event) => {
|
||||
const status = JSON.parse(event.data);
|
||||
console.log("test: " + event.data);
|
||||
|
||||
connection_state.innerHTML = "❌ Disconnected"; // ✅ Check Mark Button
|
||||
});
|
||||
|
||||
sse.onmessage = function (event) {
|
||||
console.log("sse message: " + event.data);
|
||||
};
|
||||
} else {
|
||||
console.log("Sorry, your browser does not support server-sent events...");
|
||||
}
|
||||
|
||||
// Websocket logic
|
||||
|
||||
/*
|
||||
|
||||
// Create WebSocket connection.
|
||||
const socket = new WebSocket(`${document.location.protocol === "https:" ? "wss" : "ws"}://${document.location.host}/ws`);
|
||||
|
||||
|
|
@ -409,9 +429,9 @@ socket.addEventListener("message", event => {
|
|||
|
||||
const msg = JSON.parse(event.data);
|
||||
|
||||
if ("mpd_status" in msg) {
|
||||
if ("status" in msg) {
|
||||
if (msg.mpd_status == null) {
|
||||
connection_state.innerHTML = "❌ Disconnected"; // ✅ Check Mark Button
|
||||
|
||||
} else {
|
||||
// print error if present
|
||||
if ("error" in msg.mpd_status) {
|
||||
|
|
@ -480,7 +500,7 @@ socket.addEventListener("message", event => {
|
|||
}
|
||||
|
||||
// update song info
|
||||
if ("mpd_current_song" in msg && msg.mpd_current_song != null) {
|
||||
if ("current_song" in msg && msg.mpd_current_song != null) {
|
||||
let track;
|
||||
if ("Artist" in msg.mpd_current_song && "Title" in msg.mpd_current_song) {
|
||||
track = `${msg.mpd_current_song.Artist} - ${msg.mpd_current_song.Title}`
|
||||
|
|
@ -493,7 +513,7 @@ socket.addEventListener("message", event => {
|
|||
}
|
||||
|
||||
// update queue
|
||||
if ("mpd_queue" in msg && msg.mpd_queue != null) {
|
||||
if ("queue" in msg && msg.mpd_queue != null) {
|
||||
const tbody = document.createElement("tbody");
|
||||
msg.mpd_queue.forEach(song => {
|
||||
const tr = document.createElement("tr");
|
||||
|
|
@ -557,7 +577,7 @@ socket.addEventListener("message", event => {
|
|||
}
|
||||
}
|
||||
|
||||
if ("mpd_error" in msg) {
|
||||
if ("error" in msg) {
|
||||
console.error(`MPD Error: ${msg.mpd_error}`)
|
||||
}
|
||||
});
|
||||
|
|
@ -572,3 +592,4 @@ window.setInterval(() => {
|
|||
}
|
||||
}, 1000);
|
||||
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue