diff options
| author | Carl Hetherington <cth@carlh.net> | 2026-01-24 23:27:45 +0100 |
|---|---|---|
| committer | Carl Hetherington <cth@carlh.net> | 2026-02-03 21:37:04 +0100 |
| commit | c9f0c73f4365fd6592e8c1d502d506bf0b057e01 (patch) | |
| tree | 8cd1acddbe59d4ce68e68d0054fd5f73e85ff97c | |
| parent | f7840d22575fbaa0ee5f2059f8d54f46ed3a8eff (diff) | |
Start adding playlists etc. to the transport page.
| -rw-r--r-- | web/index.html | 153 |
1 files changed, 136 insertions, 17 deletions
diff --git a/web/index.html b/web/index.html index a9f4d5629..db313c48e 100644 --- a/web/index.html +++ b/web/index.html @@ -3,25 +3,104 @@ <head> <link rel="stylesheet" href="common.css"> <script> - setInterval(function() { - status = fetch("/api/v1/status").then(response => { - response.json().then(data => { - if (data.playing) { - document.getElementById('playing').innerHTML = "Playing"; - } else { - document.getElementById('playing').innerHTML = "Stopped"; - } - document.getElementById('dcp_name').innerHTML = data.dcp_name; - document.getElementById('position').innerHTML = data.position; - }); + +setInterval(function() { + status = fetch("/api/v1/status").then(response => { + response.json().then(data => { + if (data.playing) { + document.getElementById('playing').innerHTML = "Playing"; + } else { + document.getElementById('playing').innerHTML = "Stopped"; + } + document.getElementById('dcp_name').innerHTML = data.dcp_name; + document.getElementById('position').innerHTML = data.position; }); - }, 250); - function play() { - fetch("/api/v1/play", { method: "POST" }); + }); +}, 250); +function play() { + fetch("/api/v1/play", { method: "POST" }); +} +function stop() { + fetch("/api/v1/stop", { method: "POST" }); +} + +function selectedPlaylistId() +{ + var children = document.getElementById("content-and-playlists-inner").children; + for (var i = 0; i < children.length; i++) { + if (children[i].classList.contains("selected")) { + return children[i].uuid; + } + } + + return null; +} + + +function setSelectedPlaylist(uuid) +{ + var children = document.getElementById("content-and-playlists-inner").children; + for (var i = 0; i < children.length; i++) { + var child = children[i]; + if (child.uuid == uuid) { + child.classList.add("selected"); + } else { + child.classList.remove("selected"); + } + } +}; + + +// Fetch all playlists and put them in the shared content/playlists div +function showPlaylists() +{ + var div = document.getElementById('content-and-playlists-inner'); + if (div) { + div.innerHTML = ""; } - function stop() { - fetch("/api/v1/stop", { method: "POST" }); + + fetch("/api/v1/playlists").then(response => { + response.json().then(data => { + data.forEach(playlist => { + var li = document.createElement("li"); + li.classList.add("playlist"); + li.appendChild(document.createTextNode(playlist.name)); + li.uuid = playlist['uuid']; + li.onclick = function() { + setSelectedPlaylist(playlist['uuid']); + }; + document.getElementById('content-and-playlists-inner').appendChild(li); + }); + + document.getElementById('playlists-tab').classList.add('selected'); + document.getElementById('content-tab').classList.remove('selected'); + }); + }); +} + +function showContent() +{ + var div = document.getElementById('content-and-playlists-inner'); + if (div) { + div.innerHTML = ""; } + + fetch("/api/v1/content").then(response => { + response.json().then(data => { + data.forEach(content => { + var li = document.createElement("li"); + li.classList.add("playlist"); + li.appendChild(document.createTextNode(content.name)); + document.getElementById('content-and-playlists-inner').appendChild(li); + + document.getElementById('content-tab').classList.add('selected'); + document.getElementById('playlists-tab').classList.remove('selected'); + }); + }); + }) +} + +showPlaylists(); </script> <style> @@ -43,6 +122,34 @@ td { text-align: left; border: 1px solid black; } + +div.tab { + padding: 6px; + border: 0.5px solid black; + background-color: #eeeeee; + width: fit-content; + display: inline-block; + cursor: pointer; + margin: 2px; +} + +div.tab.selected { + background-color: #cccccc; +} + +li.playlist { + border: 1px solid black; + background-color: #a7bad9; + padding: 3px; + list-style-type: none; + cursor: pointer; +} + +li.playlist.selected { + background-color: #d343e0; + cursor: pointer; +} + </style> <title>TITLE</title> @@ -50,8 +157,9 @@ td { </head> <body> - SIDEBAR +SIDEBAR +<div id="controls" style="float: left; width: 20%;"> <button name="play" value="play" onclick="play()">Play</button> <button name="stop" value="stop" onclick="stop()">Stop</button> <table> @@ -59,5 +167,16 @@ td { <tr><td>State</td><td><p id="playing"></td></tr> <tr><td>Position</td><td><p id="position"></td></tr> </table> +</div> + +<div id="current-playlist" style="float: left; width: 20%;"> +Current playlist: +</div> + +<div id="content-and-playlists" style="float: left; width: 20%;"> +<div id="playlists-tab" onclick="showPlaylists();" class="tab selected">Playlists</div> +<div id="content-tab" onclick="showContent();" class="tab">Content</div> +<div id="content-and-playlists-inner" style="margin-top: 5pt; margin-bottom: 5pt;"></div> +</div> </body> </html> |