Display track type. #6

src/StudioClock.svelte

@@ -151,7 +151,9 @@
 	function displayTitle(track) {
 		if (track != null) {
 			let artist = "";
-			let title = unknowntitle;
+			let title = "";
+			if (track.track_type == 0)
+				title = unknowntitle;
 			if (track.track_artist != null && track.track_artist != "")
 				artist = track.track_artist + " - ";
 			if (track.track_title != null && track.track_title != "")
@@ -161,6 +163,17 @@
 		return "";
 	}
 
+	/* Display the type of a track */
+	function displayType(track) {
+		let tracktype = "";
+		if (track != null) {
+			if (track.track_type == 2)	
+				tracktype = "STREAM";
+			else if (track.track_type == 3) 
+				tracktype = "LIVE STUDIO";
+		}
+		return tracktype;
+	}
 
 	/* Format the time */
 	function formatTime(seconds) {
@@ -318,6 +331,7 @@
 		background-color:rgb(24, 24, 24);
 		margin-right: 20px;
 		padding: 12px;
+		text-align: center;		
 	}
 
 	#current-schedule .schedule-title {
@@ -376,7 +390,7 @@
 	.playlist-entry {
 		font-size: 1.9em;
 		padding-left: 53px;
-		padding-bottom: 13px;
+		padding-bottom: 23px;
 		color: #AAA;
 	}
 
@@ -384,8 +398,16 @@
 		font-size: 1.5em;
 	}
 
+	.track-duration {
+		border-radius: 25px;		
+		padding: 5px 33px;		  
+		border: 1px solid gray;
+	}
 	.track-time-left {
 		margin: 25px 50px;
+		border-radius: 25px;		
+		padding: 5px 33px;		  
+		border: 1px solid gray;
 	}
 
 	.is-active {
@@ -394,6 +416,17 @@
 		padding-left: 0;
 	}
 
+	.track-type {
+		border-radius: 25px;
+  		background: #73AD21;
+		color: white;
+		padding: 5px 33px;
+	}
+
+	.track-type:empty {
+		display: none;
+	}
+
 	.is-active .track-title::before {
 		content: "\00a0\00a0▶\00a0\00a0\00a0";
 		font-size: larger; 
@@ -550,14 +583,16 @@
 								<li id="current-playlist-entry" class="playlist-entry is-active" bind:this={currentTrackElement}>
 									<!-- <span class="play-icon">&#9654;</span> -->
 									<span class="track-title">{displayTitle(entry)}</span>
-									<span class="track-time-left">({formatTime(timeLeft)})</span>
+									<span class="track-type">{displayType(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.track_duration)})</span>
+									<span class="track-type">{displayType(entry)}</span>
+									<span class="track-duration">{formatTime(entry.track_duration)}</span>
 								</li>	
 
 								{/if}
@@ -568,7 +603,8 @@
 							{#if value.current_track}
 								<div id="current-track" class="is-active">
 									<h2>
-										<span class="track-title">{displayTitle(value.track)}</span>
+										<span class="track-title">{displayTitle(value.current_track)}</span>
+										<span class="track-type">{displayType(value.current_track)}</span>
 										<span class="track-time-left">{formatTime(timeLeft)}</span>
 									</h2>
 								</div>