StudioClock.svelte

<svelte:options tag="aura-clock"/>
<main bind:this={rootElement}></main>
<script>
	import { onMount, afterUpdate } from 'svelte';

	export let css = globalConfig.CSS;
	export let api =  globalConfig.API_URL;
	export let name = globalConfig.NAME;
	export let logo = globalConfig.LOGO;
	export let logosize = globalConfig.LOGO_SIZE;
	export let nocurrenttimeslot = globalConfig.NO_CURRENT_TIMESLOT;
	export let nonexttimeslot = globalConfig.NO_NEXT_TIMESLOT;
	export let unknowntitle = globalConfig.UNKNOWN_TITLE;
	export let playoffset = globalConfig.PLAY_OFFSET;
	export let fallbacktext = globalConfig.FALLBACK_TEXT;

	let version = "APP_VERSION";
	let time = new Date(); 
	let queryCurrent = "clock";
	let rootElement;
	let promise;
	let prevClockData = null;
	let clockData = null;
	let currentTrackElement = null;
	let timeLeft;
	let timeslotTimeLeft = 0;
	let reloadTime = 10;
	let reloadWait = 0;

	// these automatically update when `time`
	// changes, because of the `$:` prefix
	$: hours = time.getHours();
	$: minutes = time.getMinutes();
	$: seconds = time.getSeconds();

	promise = fetchApi(queryCurrent);


	/* When component is mounted to the DOM */
	onMount(() => {
		const interval = setInterval(() => {
			time = new Date();
			timeLeft -= 1;
			timeslotTimeLeft -= 1;
		
			/* End of track or end of timeslot - load new data */
			if (timeLeft <= 0 || timeslotTimeLeft <= 0) {
				/* For some seconds refresh every second, to work around API timing delays */
				if (timeLeft <= 0 && timeLeft >= -3 || timeslotTimeLeft <= 0 && timeslotTimeLeft >= -3 || reloadWait == 0) {
					promise = fetchApi(queryCurrent);
					reloadWait = reloadTime;
				}
				reloadWait -= 1;				
			}
						
		}, 1000);

		return () => {
			clearInterval(interval);
		};		
	});


	/* Called after the component has been updated */
	afterUpdate(async () => {
		scrollToActiveTrack();
	});


	/* Load clock data from the API */
	async function fetchApi(query) {
		let response;
		let data;

		try {
			response = await fetch(api+query);
		} catch {
			throw new Error(`Cannot connect to Engine API at "${api}"!`);
		}

		try {
			data = await response.json();
		} catch(e) {
			console.log("Error while converting response to JSON!", e);
			throw new Error(response.statusText);
		}

		if (response.ok) {
			return data;
		} else {
			console.log("Error:", data);
			throw new Error(data.message);
		}
	}

	/* Initialize the component */
	function initComponent(value) {

		/* Load external CSS */
		if (css != null)
			loadExternalCss(rootElement, css);

		/* Set currently loaded data */
		if (value != null) {
			clockData = value;
			console.log("Current Data", value);

			if (value.current_track != null && value.current_track.track_duration > 0) {
				let t = time - Date.parse(value.current_track.track_start);
				t = parseInt(t/1000);
				timeLeft = value.current_track.track_duration - t - playoffset;
			}
			
			if (value.current_timeslot != null) {
				let timeslot_end = Date.parse(value.current_timeslot.timeslot_end);
				timeslot_end = parseInt(timeslot_end/1000);
				timeslotTimeLeft = timeslot_end - time;
			} else {
				/* Decrease time left in any case to avoid reloading too often */
				timeslotTimeLeft -= 1;
			}
		}
		return "";
	}

	/* Checks if there's an existing, valid timeslot */
	function hasValidTimeslot(value) {
		if (value.current_timeslot != null) {
			if (value.current_timeslot.timeslot_end != null) {				
				let timeslot_end = Date.parse(value.current_timeslot.timeslot_end);
				let diff = timeslot_end - time;
				if (diff >= 0)
					return true;
			}
		}
		return false;
	}

	/* Retrieve planned playlist items after the current one */
	function getFuturePlaylistItems(value) {
		let items = [];
		let now = Date();

		if ("planned_playlist" in value) {
			if (value.planned_playlist) {				
				for (let i in items) {
					let track_start = Date.parse(i.track_start)
					if (track_start > now)
						items.push(i);
				}
			}
		}
		return items;
	}

	/* Display the title of a track */
	function displayTitle(track) {
		if (track != null) {
			let artist = "";
			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 != "")
				title = track.track_title;
			return artist + title;
		}
		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) {
		if (seconds != null && Number.isInteger(seconds)) {
			let d = new Date(null);
			d.setSeconds(seconds);

			let s;
			if (seconds > 3600)
				s = d.toISOString().substr(11, 8);
			else
				s = d.toISOString().substr(14, 5);
			return s;
		}
		return "";
	}

	/* Display the name of a show */
	function displayShowName(timeslot, defaultText) {
		let name = ""
		if (timeslot == null || timeslot.show_name == null || timeslot.show_name == "") {
			name = '<span class="error">'+defaultText+'</span>';
		} else {
			name = timeslot.show_name;
		}
		return name;
	}

	/* Display the start end end time of a show */
	function displayShowTimes(timeslot) {
		let str = "";

		if (timeslot != null && timeslot.timeslot_start != null && timeslot.show_name != "") {
			let timeslotStart = ""
			let timeslotEnd = "";

			if (timeslot.timeslot_start != null) {
				let timeslotStart = new Date(Date.parse(timeslot.timeslot_start));
				timeslotStart = timeslotStart.toLocaleTimeString(navigator.language, {
					hour: '2-digit',
					minute:'2-digit'
				});
				str = timeslotStart;
			}
			if (timeslot.timeslot_end != null) {
				timeslotEnd = new Date(Date.parse(timeslot.timeslot_end));
				timeslotEnd = timeslotEnd.toLocaleTimeString(navigator.language, {
					hour: '2-digit',
					minute:'2-digit'
				});
				str = str + " - " + timeslotEnd + "";
			} else {
				str += "";
			}

		}

		if (str != "")
			str = "(" + str + ")";
		return str;
	}

	/* Indicates if some fallback timeslot is playing */
	function isFallbackTimeslot(value) {
		if ("current_timeslot" in value)
			if (value.current_timeslot == null)
				return true;
			if (value.current_timeslot.fallback_type > 0)
				return true;
		return false;
	}

	/* Indicates if some fallback entry is playing */
	function isFallbackEntry(value, entry) {

		/* If the whole timeslot is a fallback, then don't indicate this on entries again */
		if (isFallbackTimeslot(value))
			return false;
		/* If it's a fallback without a valid playlist, with a valid timeslot, let's indicate it */
		else if (entry.playlist_id == -1)
			return true;
		/* If the playlist id doesn't match the planned playlist, let's display it as fallback */
		else if (entry.playlist_id != value.current_timeslot.playlist_id)
			return true;
		return false;
	}
	

	/* Check if the given track is currently playing */
	function isActive(entry, currentTrack) {
		if (currentTrack != null && entry.track_start == currentTrack.track_start) {
			return true;
		}
		return false;
	}

	/* Displays any following timeslot */
	function displayNextTimeslot(value) {
		let html = "";
		if ('next_timeslot' in value) {
			html += displayShowName(value.next_timeslot, nonexttimeslot)
			html += " " + displayShowTimes(value.next_timeslot);
		}
		return html;
	}

	/* Hack to load external CSS into the Web Component */
	function loadExternalCss(root, file) {
		let element = document.createElement("link");
		element.setAttribute("rel", "stylesheet");
		element.setAttribute("type", "text/css");
		element.setAttribute("href", file);
		root.appendChild(element);
	}
	

	/* Scrolls to the track currently playing */
	function scrollToActiveTrack() {
		if (currentTrackElement != null)
			currentTrackElement.scrollIntoView();
	}

</script>

<style>

	* {
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}

	#studio-clock {
		width: calc(100% - 200px);
		height: calc(70% - 300px);
		margin: 0 50px 50px 50px;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
	}

	#left-column {
		width: 30%;
		padding: 25px;
	}

	#right-column {
		width: 70%;
		margin-top: 220px;
		padding: 25px 25px 25px 50px;
	}

	#station-header {
		width: 100%;
		height: 220px;
		padding: 0 0 130px 0;
	}

	#station-wrapper {
		text-align: center;
	}

	#station-name {
		margin: 0;
    	font-size: 3em;
		line-height: 60px;
		color: #CCC;	
		font-variant: all-small-caps;
	}

	#station-logo {
		align-content: left;
		text-align: right;
		margin: 0 0 0 0;
		opacity: 0.88;
		filter: invert(100%);
	}

	#current-timeslot {
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
		height: 700px;
	}

	#current-timeslot,
	#next-timeslot {
		margin: 0 0 40px 20px;
	}

	#next-timeslot {
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
		/* text-align: center;		 */
	}

	#current-timeslot .timeslot-title {
		height: 100px;
    	overflow: revert;		
	}

	#current-timeslot .timeslot-title h1 {
		color: #ccc;
		font-size: 2.8em;		
		position: relative;
		top: 30%;
		padding-left: 50px;
	}

	#next-timeslot .timeslot-title {
		color: gray !important;
		font-size: 2em;
		padding-left: 50px;
	}

	#playlist {
		height: calc(100% - 155px);
		overflow-y: auto;
		scroll-behavior: smooth; 
		padding: 10px;
		display: flex;
	   	align-items: center;
		border-top: 1px solid #333;
		width: 99%;
	}

	#playlist::-webkit-scrollbar-track
	{
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
		background-color: rgb(77, 73, 73);
	}

	#playlist::-webkit-scrollbar
	{
		width: 12px;
		background-color: rgb(0, 0, 0);
	}

	#playlist::-webkit-scrollbar-thumb
	{
		border-radius: 10px;
		-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
		background-color: rgb(34, 32, 32);
	}

	#playlist ol {
		margin-left: 33px;
		height: 95%;
		width: 90%;
	}

	.playlist-entry {
		font-size: 1.9em;
		padding-left: 53px;
		padding-bottom: 23px;
		color: #AAA;
	}

	#current-track * {
		font-size: 1.5em;
	}

	.track-duration {
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
		float: right;
	}
	.track-time-left {
		padding: 5px 33px;
		float: right;
		border-radius: 25px;				
		border: 1px solid gray;
	}

	.fallback-indicator {
		margin: 25px 50px;
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
		background-color: red;
		color: white;
	}

	.is-active {
		color: rgb(43, 241, 36);
		font-weight: bold;
		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; 
		color: rgb(43, 241, 36);
	}

	.is-active .track-time-left {
		color: rgb(43, 241, 36);
		background-color: #222;
	}

	.red {
		color:red;
	}

	.error {
		font-size: 0.8em;
		color:red;
		height:100%;
		display : flex;
		align-items : center;
		justify-content: center;
	}

	svg {
		width: 100%;
	}

	.clock-face {
		stroke: rgb(66, 66, 66);
		fill: black;
	}

	.minor {
		stroke: rgb(132, 132, 132);
		stroke-width: 0.5;
	}

	.major {
		stroke: rgb(162, 162, 162);
		stroke-width: 1;
	}

	.hour {
		stroke: rgba(255, 255, 255, 0.705);
	}

	.minute {
		stroke: rgba(255, 255, 255, 0.705);
	}

	.second, .second-counterweight {
		stroke: rgb(180,0,0);
	}

	footer {
		width: 100%;
		text-align: center;
		font-size: 0.8em;
		color: gray;
		opacity: 0.5;
	}

	footer a {
		color: gray;
		text-decoration: underline;
	}


</style>



<div id="studio-clock">
	<div id="left-column" class="column">

		<div id="station-header">
			<div id="station-wrapper">
				<img id="station-logo" src="{logo}" style="width:{logosize}" alt="Radio Station" align="center" />
				<h1 id="station-name">{name}</h1>
			</div>		
		</div>

		<svg viewBox='-50 -50 100 100'>
			<circle class='clock-face' r='48'/>

			<!-- markers -->
			{#each [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55] as minute}
				<line
					class='major'
					y1='35'
					y2='45'
					transform='rotate({30 * minute})'
				/>

				{#each [1, 2, 3, 4] as offset}
					<line
						class='minor'
						y1='42'
						y2='45'
						transform='rotate({6 * (minute + offset)})'
					/>
				{/each}
			{/each}

			<!-- hour hand -->
			<line
				class='hour'
				y1='2'
				y2='-20'
				transform='rotate({30 * hours + minutes / 2})'
			/>

			<!-- minute hand -->
			<line
				class='minute'
				y1='4'
				y2='-30'
				transform='rotate({6 * minutes + seconds / 10})'
			/>

			<!-- second hand -->
			<g transform='rotate({6 * seconds})'>
				<line class='second' y1='10' y2='-38'/>
				<line class='second-counterweight' y1='10' y2='2'/>
			</g>
		</svg>
	</div>

	<div id="right-column" class="column">

		{#await promise}
			<div class="spinner-border mt-5" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		{:then value}
			{initComponent(value)}
						

				<div id="current-timeslot">
					<div class="timeslot-title">
					<div style="width: 70%; float: left; text-align: left">
						<h1>
							{#if hasValidTimeslot(value)}						
								{@html displayShowName(value.current_timeslot, nocurrenttimeslot)} {displayShowTimes(value.current_timeslot)}
							{:else}
								<span class="red">{nocurrenttimeslot}</span>
							{/if}																				
						</h1>
						</div>						
						<div style="width: 30%; float: right; text-align: right;">
							{#if isFallbackTimeslot(value)}	
								<h1><span class="fallback-indicator">{fallbacktext}</span></h1>
							{/if}
						</div>					
					</div>
					<div id="playlist">

						<!-- {#if hasValidPlaylist(value)} -->
							<ol>

							<!-- Render playlog currently playing -->
							{#each value.current_playlogs as entry, index}
								{#if isActive(entry, value.current_track)}
								
								<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-type">{displayType(entry)}</span>
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}									
									<span class="track-time-left">{formatTime(timeLeft)}</span>
								</li>

								<!-- Render playlogs before the one currently playing -->
								{:else}

								<li class="playlist-entry">
									<span class="track-title">{displayTitle(entry)}</span>
									<span class="track-type">{displayType(entry)}</span>
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}
									{#if entry.track_duration > 0 }
										<span class="track-duration">{formatTime(entry.track_duration)}</span>
									{/if}
								</li>	

								{/if}

							{/each}

							<!-- Render planned playlist items which are in the future -->
							{#each getFuturePlaylistItems(value) as entry, index}
								<li class="playlist-entry">
									<span class="track-title">{displayTitle(entry)}</span>
									<span class="track-type">{displayType(entry)}</span>
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}
									{#if entry.track_duration > 0 }
										<span class="track-duration">{formatTime(entry.track_duration)}</span>
									{/if}
								</li>	
							{/each}

							</ol>
						<!-- {:else}
							{#if value.current_track}
								<div id="current-track" class="is-active">
									<h2>
										<span class="track-title">{displayTitle(value.current_track)}</span>
										<span class="track-type">{displayType(value.current_track)}</span>									
										<span class="fallback-indicator">{fallbacktext}</span>									
										<span class="track-time-left">{formatTime(timeLeft)}</span>
									</h2>
								</div>
							{/if}								 -->
						<!-- {/if} -->
					</div>

				</div> 
			
				<div id="next-timeslot">
					<h3 class="timeslot-title">{@html displayNextTimeslot(value)}</h3>
				</div>						

		{:catch error}
			<div class="error"><p>{error}</p></div>
		{/await}


		<footer>
			<a href="https://gitlab.servus.at/aura/dashboard-clock">Dashboard Clock v{version}</a> is fuelled by <a href="https://gitlab.servus.at/aura/engine">AURA Engine</a>
		</footer>
	</div>

</div>