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 nocurrentschedule = globalConfig.NO_CURRENT_SCHEDULE;
	export let nonextschedule = globalConfig.NO_NEXT_SCHEDULE;
	export let unknowntitle = globalConfig.UNKNOWN_TITLE;
	export let playoffset = globalConfig.PLAY_OFFSET;

	let time = new Date(); 
	let queryCurrent = "clock";
	let rootElement;
	let promise;
	let prevClockData = null;
	let clockData = null;
	let currentTrackElement = null;
	let timeLeft;
	let scheduleTimeLeft = 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;
			scheduleTimeLeft -= 1;
		
			/* End of track or end of schedule - load new data */
			if (timeLeft <= 0 || scheduleTimeLeft <= 0) {
				/* For some seconds refresh every second, to work around API timing delays */
				if (timeLeft <= 0 && timeLeft >= -3 || scheduleTimeLeft <= 0 && scheduleTimeLeft >= -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) {
				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_schedule != null) {
				let schedule_end = Date.parse(value.current_schedule.schedule_end);
				schedule_end = parseInt(schedule_end/1000);
				scheduleTimeLeft = schedule_end - time;
			} else {
				/* Decrease time left in any case to avoid reloading too often */
				scheduleTimeLeft -= 1;
			}
		}
		return "";
	}


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


	/* Checks if there is an existing valid playlist */
	function hasValidPlaylist(value) {
		if (hasValidSchedule(value))
			if (value.current_playlist != null)
				return true;
		return false;
	}


	/* Display the title of a track */
	function displayTitle(track) {
		if (track != null) {
			let artist = "";
			let 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 "";
	}


	/* 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(schedule) {
		let name = ""
		if (schedule == null || schedule.show_name == null) {
			name = '<span class="error">'+nonextschedule+'</span>';
		} else {
			name = schedule.show_name;
		}
		return name;
	}


	/* Display the schedule of a show */
	function displayShowSchedule(schedule) {
		let str = "";

		if (schedule != null && schedule.schedule_start != null) {
			let scheduleStart = ""
			let scheduleEnd = "";

			if (schedule.schedule_start != null) {
				let scheduleStart = new Date(Date.parse(schedule.schedule_start));
				scheduleStart = scheduleStart.toLocaleTimeString(navigator.language, {
					hour: '2-digit',
					minute:'2-digit'
				});
				str = " — " + scheduleStart;
			}
			if (schedule.schedule_end != null) {
				scheduleEnd = new Date(Date.parse(schedule.schedule_end));
				scheduleEnd = scheduleEnd.toLocaleTimeString(navigator.language, {
					hour: '2-digit',
					minute:'2-digit'
				});
				str = str + " - " + scheduleEnd + "";
			} else {
				str += "";
			}

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


	/* 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(100% - 500px);
		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-schedule {
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
		height: 100%;
	}

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

	#next-schedule {
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
	}

	#current-schedule .schedule-title {
		text-align: center;
		height: 100px;		
	}

	#current-schedule .schedule-title h1 {
		color: #ccc;
		font-size: 2.8em;		
		position: relative;
		top: 30%;
		transform: translateY(-50%);		
	}

	#next-schedule .schedule-title {
		color: gray !important;
		font-size: 2em;
	}

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

	#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%;
	}

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

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

	.track-time-left {
		margin: 25px 50px;
	}

	.is-active {
		color: rgb(43, 241, 36);
		font-weight: bold;
		padding-left: 0;
	}

	.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;
		padding: 5px 15px;
	}

	.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-schedule">
					<div class="schedule-title">
						<h1>
						{#if hasValidSchedule(value)}						
								{@html displayShowName(value.current_schedule)} {displayShowSchedule(value.current_schedule)}
							{:else}
								<span class="error">{nocurrentschedule}</span>
							{/if}						
						</h1>
					</div>
					<div id="playlist">

						{#if hasValidPlaylist(value)}
							<ol>
							{#each value.current_playlist.entries 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-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>
								</li>	

								{/if}

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

				</div> 



			{#if value.current_schedule}
				<div id="next-schedule">
					<h3 class="schedule-title">{@html displayShowName(value.next_schedule)} {displayShowSchedule(value)}</h3>
				</div>		
			{/if}				
		{:catch error}
			<div class="error"><p>{error}</p></div>
		{/await}


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

</div>