Display playlist entries and state.

src/StudioClock.svelte

@@ -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,8 +136,14 @@
 		return str;
 	}
 
+	function isActive(entry, currentTrack) {
+		if (currentTrack != null && entry.id == currentTrack.id) {
+			return true;
+		}
+		return false;
+	}
+
 
-	
 	
 </script>
 
@@ -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="current-track">
-					<h2>
-						<span class="play-icon">&#9654;</span>
-						<span class="active track-title">{displayTitle(value)}</span>
-						<span class="track-time-left">({formatTime(timeLeft)})</span>
-					</h2>
-				</div>
+			<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="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>