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

Display playlist entries and state.

parent 7691bbe0
......@@ -66,16 +66,17 @@
t = parseInt(t/1000);
timeLeft = info.track.duration - t - 4;
console.log("Current Data", info);
}
return "";
}
function displayTitle(info) {
if (info != null && info.track != null) {
function displayTitle(track) {
if (track != null) {
let artist = "";
if (info.track.artist != "")
artist = info.track.artist + " - ";
return artist + info.track.title;
if (track.artist != "")
artist = track.artist + " - ";
return artist + track.title;
}
return "";
}
......@@ -135,6 +136,12 @@
return str;
}
function isActive(entry, currentTrack) {
if (currentTrack != null && entry.id == currentTrack.id) {
return true;
}
return false;
}
......@@ -166,18 +173,30 @@
margin: 0 0 40px 20px;
}
#track-list {
#playlist {
border: 2px solid #333;
margin: 20px 20px 40px 20px;
padding: 10px;
}
.playlist-entry {
font-size: 1.4em;
padding-left: 53px;
}
.play-icon,
.track-time-left {
margin: 12px;
}
.active {
.is-active {
color: green;
padding-left: 0;
}
.is-active::before {
content: "\00a0\00a0▶\00a0\00a0";
font-size: larger;
color: green;
}
......@@ -290,14 +309,39 @@
<div class="schedule-details">
<b>Type:</b> {value.current.type}, <b>Host:</b> {value.current.host}</div>
</div>
<div id="track-list">
<div id="playlist">
{#if value.current.playlist}
<ol>
{#each value.current.playlist.entries as entry, index}
{#if isActive(entry, value.track)}
<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="play-icon">&#9654;</span>
<span class="active track-title">{displayTitle(value)}</span>
<span class="track-title is-active">{displayTitle(value.track)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span>
</h2>
</div>
{/if}
</div>
<div id="next-schedule">
<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