diff --git a/css/style.css b/css/style.css index 0674b1fa6778d572b50d1520b06aacae8efad04f..2126fa335730162c8831711575fdb1fc358f1c40 100644 --- a/css/style.css +++ b/css/style.css @@ -277,3 +277,21 @@ img.appicon-settings { .title { font-size: 1.5em; } + +.subtitle { + font-size: 0.9rem; + opacity: 0.7; +} + +.justify-center { + justify-content: center; +} + +.chip.song > img { + height: 128px; + object-fit: contain; +} + +#current-song-art { + height: 200px; +} diff --git a/index.html b/index.html index 684af75722d2dbb894dc33c0df4b74c4d4746606..1c929231b28901b011d927845439158f0c0b92b0 100644 --- a/index.html +++ b/index.html @@ -75,7 +75,7 @@ <a href="#add_station" class="button"><span class="fa-fw fa-solid fa-plus-circle"></span> Add a new station</a> </div> - <div class="stationList" id="tunerStationList"> + <div class="stack v" id="tunerStationList"> </div> @@ -127,7 +127,7 @@ <a href="#add_station">Add station manually</a> </div> - <label for="add_fromazcast_url">Azuracast Station URL</label> + <label for="add_fromazcast_url">Azuracast Server URL</label> <div id="add_azuracast_searcher" class="input_button_hybrid"> <input type="url" placeholder="https://example.com" name="add_fromazcast_url" id="add_fromazcast_url"> <button id="add_azcast_search"><span class="fa-fw fa-solid fa-search"></span> Search</button> @@ -140,7 +140,34 @@ <section id="station" hidden="hidden" aria-hidden="true"> + <h2 id="station_name">Loading...</h2> + <div id="station_info" class="info"><span class="fa-fw fa-solid fa-headphones"></span> <span id="live_listeners">0</span></div> + <p id="station_description"></p> + + <div class="stack v"> + <div class="chip song nowplaying stack h"> + <img src="img/radio-icon.png" alt="No album art" class="rounded" id="current-song-art"> + <div class="stack v nogap justify-center"> + <span class="subtitle">Now playing:</span> + <span id="current-song-title" class="title">Loading...</span> + <span id="current-song-artist" class="artist">Loading...</span> + </div> + </div> + + <div 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> + <span id="next-song-title" class="title">Loading...</span> + <span id="next-song-artist" class="artist">Loading...</span> + <span id="next-song-until" class="subtitle">in 3 minutes</span> + </div> + </div> + </div> + </section> + + <section id="settings" hidden="hidden" aria-hidden="true"> <h2>Settings</h2> diff --git a/js/app.js b/js/app.js index 5dd91387bf0282daac4a4c99d0a2907ff2dd0d26..bea1f6bd42600cba92bbd17697e946acb6ead886 100644 --- a/js/app.js +++ b/js/app.js @@ -5,8 +5,14 @@ const player = document.getElementById("player"); const audioSource = player.children.item(0); console.debug(audioSource); +const currentSongTitle = document.getElementById("current-song-title"); +const currentSongArtist = document.getElementById("current-song-artist"); +const currentSongArt = document.getElementById("current-song-art"); + // Important init stuff +let noise = null; + audioSource.src = "assets/audio/noise.wav"; let currentStation = null; @@ -66,6 +72,10 @@ function setVolume (volume) { player.volume = volume / 100; controlVolume.value = volume; controlRealVolume.value = volume; + + if (noise) { + noise.volume = (volume / 100) /4; + } } controlMute.addEventListener("click", toggleMute); @@ -138,9 +148,6 @@ async function updateMetadata(title="", artist="", album="radio waves", artUrl=" playbackRate: 1 }) - document.getElementById("songtitle").innerText = title; - document.getElementById("songartist").innerText = artist - } } @@ -301,7 +308,6 @@ const viewFunctions = { // These run when a view is loaded. const stationThingy = views['#station']; if (!currentStation) { - stationThingy.innerHTML = `<span class="fa-fw fa-solid fa-warning"></span> Not tuned.`; location.hash = "#tuner"; return; } @@ -310,15 +316,8 @@ const viewFunctions = { // These run when a view is loaded. let request = await fetch(currentStation.azuracast_server_url + `/api/station/${currentStation.azuracast_station_shortcode}`); let json = await request.json(); - // TODO: Make this better - stationThingy.innerHTML = ` - <h2>${json.name}</h2> - <div class="info"><code>${json.shortcode}</code> / <span class="fa-fw fa-solid fa-people"></span> <span id="live_listeners"></span></div> - <p>${json.description}</p> - <div class="chip"> - <h2 id="songtitle"></h2> - <p id="songartist"></p> -</div>` + document.getElementById("station_name").innerText = json.name; + document.getElementById("station_description").innerText = json.description; } else { stationThingy.innerHTML = "Yeah this is icecast, metadata coming soon." } @@ -408,14 +407,16 @@ async function updateLoop() { const isPlaying = player.paused ? "paused" : "playing"; await updateMetadata(metadata.title, metadata.artist, metadata.album, metadata.art, metadata.startTime, metadata.duration, isPlaying); + + currentSongTitle.innerText = metadata.title; + currentSongArtist.innerText = metadata.artist; + currentSongArt.src = metadata.art; } setInterval(updateLoop, 3000) // Give user feedback on buffering -let noise = null; - player.addEventListener('playing', function() { console.log('Playback started.'); noise.pause(); @@ -435,7 +436,7 @@ player.addEventListener('waiting', function() { console.log("Buffering..."); noise = new Audio("assets/audio/noise.wav"); noise.play(); - noise.volume = 0.4; + noise.volume = player.volume / 4; noise.loop = true; setPlayPauseButtonIcon("buffer");