Commit 7a453521 authored by David Trattnig's avatar David Trattnig
Browse files

Display playlist entries and state.

parent 7691bbe0
...@@ -66,16 +66,17 @@ ...@@ -66,16 +66,17 @@
t = parseInt(t/1000); t = parseInt(t/1000);
timeLeft = info.track.duration - t - 4; timeLeft = info.track.duration - t - 4;
console.log("Current Data", info);
} }
return ""; return "";
} }
function displayTitle(info) { function displayTitle(track) {
if (info != null && info.track != null) { if (track != null) {
let artist = ""; let artist = "";
if (info.track.artist != "") if (track.artist != "")
artist = info.track.artist + " - "; artist = track.artist + " - ";
return artist + info.track.title; return artist + track.title;
} }
return ""; return "";
} }
...@@ -135,8 +136,14 @@ ...@@ -135,8 +136,14 @@
return str; return str;
} }
function isActive(entry, currentTrack) {
if (currentTrack != null && entry.id == currentTrack.id) {
return true;
}
return false;
}
</script> </script>
...@@ -166,18 +173,30 @@ ...@@ -166,18 +173,30 @@
margin: 0 0 40px 20px; margin: 0 0 40px 20px;
} }
#track-list { #playlist {
border: 2px solid #333; border: 2px solid #333;
margin: 20px 20px 40px 20px; margin: 20px 20px 40px 20px;
padding: 10px; padding: 10px;
} }
.playlist-entry {
font-size: 1.4em;
padding-left: 53px;
}
.play-icon, .play-icon,
.track-time-left { .track-time-left {
margin: 12px; margin: 12px;
} }
.active { .is-active {
color: green;
padding-left: 0;
}
.is-active::before {
content: "\00a0\00a0▶\00a0\00a0";
font-size: larger;
color: green; color: green;
} }
...@@ -290,14 +309,39 @@ ...@@ -290,14 +309,39 @@
<div class="schedule-details"> <div class="schedule-details">
<b>Type:</b> {value.current.type}, <b>Host:</b> {value.current.host}</div> <b>Type:</b> {value.current.type}, <b>Host:</b> {value.current.host}</div>
</div> </div>
<div id="track-list"> <div id="playlist">
<div id="current-track">
<h2> {#if value.current.playlist}
<span class="play-icon">&#9654;</span> <ol>
<span class="active track-title">{displayTitle(value)}</span> {#each value.current.playlist.entries as entry, index}
<span class="track-time-left">({formatTime(timeLeft)})</span> {#if isActive(entry, value.track)}
</h2>
</div> <li class="playlist-entry is-active">
<!-- <span class="play-icon">&#9654;</span> -->
<span class="track-title">{displayTitle(entry)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span>
</li>
{:else}
<li class="playlist-entry">
<span class="track-title">{displayTitle(entry)}</span>
<span class="track-duration">({formatTime(entry.duration)})</span>
</li>
{/if}
{/each}
</ol>
{:else}
<div id="current-track">
<h2>
<span class="track-title is-active">{displayTitle(value.track)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span>
</h2>
</div>
{/if}
</div> </div>
<div id="next-schedule"> <div id="next-schedule">
<h2 class="schedule-title">Next: {@html displayShowName(value.next.show)} {displayShowSchedule(value)}</h2> <h2 class="schedule-title">Next: {@html displayShowName(value.next.show)} {displayShowSchedule(value)}</h2>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment