StudioClock.svelte

<svelte:options tag="aura-clock"/>
<main bind:this={rootElement}></main>
<script>
	import { onMount } from 'svelte';
	export let css = "";
	export let api = "http://localhost:8008/api/v1/";
	export let name = "Studio Clock";
	export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
	export let logosize  = "100px";
	export let noschedulemessage = "Nothing scheduled next!";
	export let unknowntitle = "Unknown Title";
	export let playoffset = 3;

	let time = new Date(); 
	let queryCurrent = "clock";
	let rootElement;
	let data;
	let currentTrack = null;
	let timeLeft;


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

	data = fetchApi(queryCurrent);

	/* When component is mounted to the DOM */
	onMount(() => {
		const interval = setInterval(() => {
			time = new Date();
			timeLeft -= 1;

			if (timeLeft <= 0 || data == null) {
				currentTrack = null;
				data = null;
				data = fetchApi(queryCurrent);
			}
		}, 1000);

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

	/* 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(info) {

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

		/* Set currently loaded data */
		if (currentTrack == null && info != null && info.current_track != null) {
			currentTrack = info;
			
			let t = time - Date.parse(info.current_track.track_start);
			t = parseInt(t/1000);

			timeLeft = info.current_track.track_duration - t - playoffset;
			console.log("Current Data", info);
		}
		return "";
	}

	/* 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">'+noschedulemessage+'</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) {
			// Scroll to current playlist entry
			// location.hash = "#current-playlist-entry";

			var element = document.querySelector("#current-playlist-entry");
			if (element != null)
				element.scrollIntoView();

			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);
	}
	
	/* Called when the clock finished rendering */
	function finalize_rendering() {

		/* Sroll to currently playing track */
		var element = document.querySelector("#current-playlist-entry");
		if (element != null)
			element.scrollIntoView();
		return ""
	}
</script>

<style>

	#station-header {
		width: 100%;
		height: 50px;
		padding: 40px 100px;
	}

	#station-name {
		margin: 0;
    	font-size: 3em;
		line-height: 80px;
	}

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

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

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

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

	#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 {
		color: #ccc;
		font-size: 3.3em;
		text-align: center;
	}
	#next-schedule .schedule-title {
		color: gray !important;
		font-size: 2em;
	}

	#playlist {
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		padding: 10px;
		height: calc(80% - 100px);
		overflow-y: auto;
		scroll-behavior: smooth; 
		background-color: #111;
		display: flex;
   		align-items: center;
	}

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

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

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

	.play-icon,
	.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: 1.3em;
		color:red;
		height:100%;
		display : flex;
		align-items : center;
		justify-content: center;
	}

	svg {
		width: 100%;
		height: 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;
	}

	footer #aura-logo {
		filter: invert(100%);
		width: 75px;
		margin: 0 0 20px 0;
	}

</style>



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

<div id="studio-clock">
	<div id="left-column" class="column">
		<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 data}
			<div class="spinner-border mt-5" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		{:then value}
			{initComponent(value)}
			
			{#if value.current_schedule}

			<div id="current-schedule">
				<h1 class="schedule-title">{@html displayShowName(value.current_schedule)} {displayShowSchedule(value.current_schedule)}</h1>
				<!-- <div class="schedule-details">
					<b>Type:</b> {value.current_schedule}, <b>Host:</b> {value.current_schedule}</div>-->
			</div> 
			<div id="playlist">

				{#if value.current_playlist}
					<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">
							<!-- <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}

					<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}
			</div>
			<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>
			<!-- {finalize_rendering()} -->
			<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>