diff --git a/css/style.css b/css/style.css index db1d20e78d3ffa0e2003a95f3db76f267c8565e7..e99bdd803baa04bea6b0ebb9c1619d66dd279486 100644 --- a/css/style.css +++ b/css/style.css @@ -350,6 +350,7 @@ img.appicon-settings { } + @media (prefers-color-scheme: light) { input[type=text], input[type=url] { background: var(--gray-1); diff --git a/index.html b/index.html index c777cc6c19bbf9b8bbb44c5f879d221e6471c808..2ac64caed925f84dea61da073348f9516d87581d 100644 --- a/index.html +++ b/index.html @@ -161,7 +161,7 @@ </div> </div> - <div class="ship song compact nextup stack h"> + <div id="nextup" class="ship song compact nextup stack h"> <img src="img/radio-icon.png" alt="No album art" class="rounded" id="next-song-art"> <div class="stack v nogap justify-center"> <span class="subtitle">Next up:</span> @@ -172,7 +172,7 @@ </div> </div> - <h2 style="margin: 0.5rem 0">History</h2> + <h2 id="history-title" style="margin: 0.5rem 0">History</h2> <div id="history" class="stack v"> No history :( </div> diff --git a/js/app.js b/js/app.js index 4d56621f9a219093ac5979e5d10ce86e91c8cb01..fe1ee0d576ea4fd1ec26608591bc36921de7c2e1 100644 --- a/js/app.js +++ b/js/app.js @@ -131,7 +131,7 @@ player.addEventListener("loadeddata", _ =>{ function convertSecondsToMinutes(secs) { const minutes = Math.floor(secs / 60); const seconds = secs - minutes * 60; - return `${minutes}:${seconds}` + return `${minutes}:${seconds.toString().padStart(2, "0")}` } // The following code handles giving browsers and operating systems media information @@ -162,27 +162,40 @@ async function updateMetadata(title="", artist="", album="radio waves", artUrl=" playingStatus = playingStatus.toLowerCase() !== "playing" ? "paused" : "playing"; // or this navigator.mediaSession.playbackState = playingStatus; - currentSongDuration.innerText = `${convertSecondsToMinutes(duration)}` - currentSongProgress.max = (duration * 1000); - currentSongProgress.dataset.duration = duration; - currentSongProgress.dataset.startTime = startTime; - currentSongProgress.value = Date.now() - startTime - - if (elapsed) { - navigator.mediaSession.setPositionState({ - duration: duration, - position: elapsed, - playbackRate: 1 - }) - currentSongProgress.dataset.offset = Math.round(elapsed - ((Date.now() - startTime) / 1000)) - currentSongElapsed.innerText = `${convertSecondsToMinutes(elapsed)}`; + + if (duration === Infinity) { + currentSongProgress.hidden = true; + currentSongElapsed.hidden = true; + currentSongDuration.innerText = "Live"; } else { - navigator.mediaSession.setPositionState({ - duration: duration, - position: Math.min(Math.round((Date.now() - startTime) / 1000), duration), - playbackRate: 1 - }) - currentSongElapsed.innerText = `${convertSecondsToMinutes(Math.min(Math.round((Date.now() - startTime) / 1000), duration))}`; + currentSongProgress.hidden = false; + currentSongElapsed.hidden = false; + + currentSongProgress.max = (duration * 1000); + currentSongProgress.dataset.duration = duration; + currentSongProgress.dataset.startTime = startTime; + if (!currentSongProgress.dataset.offset) { + currentSongProgress.dataset.offset = 0; + } + currentSongProgress.value = (Date.now() - startTime) + (Number(currentSongProgress.dataset.offset) * 1000); + + if (elapsed) { + navigator.mediaSession.setPositionState({ + duration: duration, + position: elapsed, + playbackRate: 1 + }) + currentSongProgress.dataset.offset = Math.round(elapsed - ((Date.now() - startTime) / 1000)) + currentSongElapsed.innerText = `${convertSecondsToMinutes(elapsed)}`; + } else { + navigator.mediaSession.setPositionState({ + duration: duration, + position: Math.min(Math.round((Date.now() - startTime) / 1000), duration), + playbackRate: 1 + }) + currentSongElapsed.innerText = `${convertSecondsToMinutes(Math.min(Math.round((Date.now() - startTime) / 1000), duration))}`; + } + currentSongDuration.innerText = `${convertSecondsToMinutes(duration)}` } } @@ -362,8 +375,27 @@ const viewFunctions = { // These run when a view is loaded. document.getElementById("station_name").innerText = json.name; document.getElementById("station_description").innerText = json.description; + + document.getElementById("nextup").hidden = false; + document.getElementById("nextup").removeAttribute("style"); + + document.getElementById("history").hidden = false; + document.getElementById("history").removeAttribute("style"); + + document.getElementById("history-title").hidden = false; + document.getElementById("history-title").removeAttribute("style"); } else { - stationThingy.innerHTML = "Yeah this is icecast, metadata coming soon." + document.getElementById("station_name").innerText = currentStation.name; + document.getElementById("station_description").innerText = currentStation.url; + + document.getElementById("nextup").hidden = true; + document.getElementById("nextup").style.display = "none"; + + document.getElementById("history").hidden = true; + document.getElementById("history").style.display = "none"; + + document.getElementById("history-title").hidden = true; + document.getElementById("history-title").style.display = "none"; } }, "#fullscreen": async function () { @@ -481,7 +513,7 @@ async function getCurrentSongInfoFromAzuracastStation(server, shortcode) { } async function getCurrentSongInfoFromIceCastStation(streamUrl) { - return; + return {title: currentStation.name, artist: "", duration: Infinity, startTime: 0, art: "img/radio-icon.png"}; } async function updateLoop() { @@ -490,6 +522,7 @@ async function updateLoop() { await updateMetadata("Not tuned", "waves") return; } + if (currentStation.metadata_type === "azuracast") { metadata = await getCurrentSongInfoFromAzuracastStation(currentStation.azuracast_server_url, currentStation.azuracast_station_shortcode); } else { @@ -508,7 +541,7 @@ setInterval(updateLoop, 3000); async function updateProgressBars() { try { - currentSongProgress.value = Date.now() - currentSongProgress.dataset.startTime; + currentSongProgress.value = (Date.now() - currentSongProgress.dataset.startTime) + (Number(currentSongProgress.dataset.offset) * 1000); } catch (e) { currentSongProgress.value = 0