StudioClock.svelte 16.4 KB
Newer Older
1
<svelte:options tag="aura-clock"/>
2
<main bind:this={rootElement}></main>
David Trattnig's avatar
David Trattnig committed
3
<script>
4
	import { onMount, afterUpdate } from 'svelte';
David Trattnig's avatar
David Trattnig committed
5
6
7
8
9
10

	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;
11
12
	export let nocurrenttimeslot = globalConfig.NO_CURRENT_TIMESLOT;
	export let nonexttimeslot = globalConfig.NO_NEXT_TIMESLOT;
David Trattnig's avatar
David Trattnig committed
13
14
	export let unknowntitle = globalConfig.UNKNOWN_TITLE;
	export let playoffset = globalConfig.PLAY_OFFSET;
15
	export let fallbacktext = globalConfig.FALLBACK_TEXT;
16

David Trattnig's avatar
David Trattnig committed
17
	let version = "APP_VERSION";
18
	let time = new Date(); 
19
	let queryCurrent = "clock";
20
	let rootElement;
21
22
23
24
	let promise;
	let prevClockData = null;
	let clockData = null;
	let currentTrackElement = null;
25
	let timeLeft;
26
	let timeslotTimeLeft = 0;
David Trattnig's avatar
David Trattnig committed
27
	let reloadTime = 10;
28
	let reloadWait = 0;
David Trattnig's avatar
David Trattnig committed
29
30
31
32
33
34
35

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

36
37
	promise = fetchApi(queryCurrent);

38

39
	/* When component is mounted to the DOM */
David Trattnig's avatar
David Trattnig committed
40
41
42
	onMount(() => {
		const interval = setInterval(() => {
			time = new Date();
43
			timeLeft -= 1;
44
			timeslotTimeLeft -= 1;
45
		
46
47
			/* End of track or end of timeslot - load new data */
			if (timeLeft <= 0 || timeslotTimeLeft <= 0) {
48
				/* For some seconds refresh every second, to work around API timing delays */
49
				if (timeLeft <= 0 && timeLeft >= -3 || timeslotTimeLeft <= 0 && timeslotTimeLeft >= -3 || reloadWait == 0) {
50
51
52
53
					promise = fetchApi(queryCurrent);
					reloadWait = reloadTime;
				}
				reloadWait -= 1;				
54
			}
55
						
David Trattnig's avatar
David Trattnig committed
56
57
58
59
		}, 1000);

		return () => {
			clearInterval(interval);
60
		};		
David Trattnig's avatar
David Trattnig committed
61
	});
62

63
64
65
66
67
68
69
70

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


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

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

81
82
83
84
85
86
		try {
			data = await response.json();
		} catch(e) {
			console.log("Error while converting response to JSON!", e);
			throw new Error(response.statusText);
		}
87
88
89
90

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

96
	/* Initialize the component */
97
	function initComponent(value) {
98
99
100
101
102
103

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

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

108
			if (value.current_track != null && value.current_track.track_duration > 0) {
109
110
111
112
				let t = time - Date.parse(value.current_track.track_start);
				t = parseInt(t/1000);
				timeLeft = value.current_track.track_duration - t - playoffset;
			}
113
			
114
115
116
117
			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;
118
119
			} else {
				/* Decrease time left in any case to avoid reloading too often */
120
				timeslotTimeLeft -= 1;
121
			}
122
123
124
125
		}
		return "";
	}

126
127
128
129
130
131
	/* 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;
132
133
134
135
136
137
138
				if (diff >= 0)
					return true;
			}
		}
		return false;
	}

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

144
145
146
147
148
149
150
151
152
153
		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;
154
155
	}

156
	/* Display the title of a track */
157
158
	function displayTitle(track) {
		if (track != null) {
159
			let artist = "";
David Trattnig's avatar
David Trattnig committed
160
161
162
			let title = "";
			if (track.track_type == 0)
				title = unknowntitle;
163
			if (track.track_artist != null && track.track_artist != "")
David Trattnig's avatar
David Trattnig committed
164
				artist = track.track_artist + " - ";
165
166
167
			if (track.track_title != null && track.track_title != "")
				title = track.track_title;
			return artist + title;
168
169
170
171
		}
		return "";
	}

David Trattnig's avatar
David Trattnig committed
172
173
174
175
176
177
178
179
180
181
182
	/* 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;
	}
183

184
	/* Format the time */
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
	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 "";
	}

200
	/* Display the name of a show */
201
	function displayShowName(timeslot, defaultText) {
202
		let name = ""
203
		if (timeslot == null || timeslot.show_name == null || timeslot.show_name == "") {
204
			name = '<span class="error">'+defaultText+'</span>';
205
		} else {
206
			name = timeslot.show_name;
207
		}
208
209
210
		return name;
	}

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

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

219
220
221
			if (timeslot.timeslot_start != null) {
				let timeslotStart = new Date(Date.parse(timeslot.timeslot_start));
				timeslotStart = timeslotStart.toLocaleTimeString(navigator.language, {
222
223
224
					hour: '2-digit',
					minute:'2-digit'
				});
225
				str = timeslotStart;
226
			}
227
228
229
			if (timeslot.timeslot_end != null) {
				timeslotEnd = new Date(Date.parse(timeslot.timeslot_end));
				timeslotEnd = timeslotEnd.toLocaleTimeString(navigator.language, {
230
231
232
					hour: '2-digit',
					minute:'2-digit'
				});
233
				str = str + " - " + timeslotEnd + "";
234
			} else {
235
				str += "";
236
237
238
			}

		}
239
240
241
242

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

245
246
	/* Indicates if some fallback timeslot is playing */
	function isFallbackTimeslot(value) {
247
		if ("current_timeslot" in value)
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
			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)
263
			return true;
264
265
		/* 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)
266
267
268
			return true;
		return false;
	}
269
	
270

271
	/* Check if the given track is currently playing */
272
	function isActive(entry, currentTrack) {
273
		if (currentTrack != null && entry.track_start == currentTrack.track_start) {
274
275
276
277
278
			return true;
		}
		return false;
	}

279
280
281
282
283
284
285
286
287
	/* 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;
	}
288

289
	/* Hack to load external CSS into the Web Component */
290
291
292
293
294
295
296
	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);
	}
297
	
298

299
300
301
302
	/* Scrolls to the track currently playing */
	function scrollToActiveTrack() {
		if (currentTrackElement != null)
			currentTrackElement.scrollIntoView();
303
	}
304

David Trattnig's avatar
David Trattnig committed
305
306
307
</script>

<style>
308

David Trattnig's avatar
David Trattnig committed
309
310
	* {
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
311
312
	}

313
314
	#studio-clock {
		width: calc(100% - 200px);
315
		height: calc(70% - 300px);
David Trattnig's avatar
David Trattnig committed
316
		margin: 0 50px 50px 50px;
317
318
319
320
321
322
323
324
325
326
327
328
329
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
	}

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

	#right-column {
		width: 70%;
David Trattnig's avatar
David Trattnig committed
330
		margin-top: 220px;
331
		padding: 25px 25px 25px 50px;
332
333
	}

David Trattnig's avatar
David Trattnig committed
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
	#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%);
	}

360
	#current-timeslot {
361
362
363
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
364
		height: 700px;
365
366
	}

367
368
	#current-timeslot,
	#next-timeslot {
369
370
371
		margin: 0 0 40px 20px;
	}

372
	#next-timeslot {
373
374
375
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
376
		/* text-align: center;		 */
377
378
	}

379
	#current-timeslot .timeslot-title {
380
381
		height: 100px;
    	overflow: revert;		
382
383
	}

384
	#current-timeslot .timeslot-title h1 {
385
386
387
388
		color: #ccc;
		font-size: 2.8em;		
		position: relative;
		top: 30%;
389
		padding-left: 50px;
390
	}
391

392
	#next-timeslot .timeslot-title {
393
394
		color: gray !important;
		font-size: 2em;
395
		padding-left: 50px;
396
397
	}

398
	#playlist {
399
		height: calc(100% - 155px);
400
401
		overflow-y: auto;
		scroll-behavior: smooth; 
402
		padding: 10px;
403
		display: flex;
404
	   	align-items: center;
405
		border-top: 1px solid #333;
406
		width: 99%;
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
	}

	#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);
427
428
	}

429
430
	#playlist ol {
		margin-left: 33px;
431
		height: 95%;
432
		width: 90%;
433
434
	}

435
	.playlist-entry {
David Trattnig's avatar
David Trattnig committed
436
		font-size: 1.9em;
437
		padding-left: 53px;
David Trattnig's avatar
David Trattnig committed
438
		padding-bottom: 23px;
439
		color: #AAA;
440
441
	}

442
	#current-track * {
David Trattnig's avatar
David Trattnig committed
443
		font-size: 1.5em;
444
445
	}

David Trattnig's avatar
David Trattnig committed
446
447
448
449
	.track-duration {
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
450
		float: right;
David Trattnig's avatar
David Trattnig committed
451
	}
452
	.track-time-left {
453
454
455
		padding: 5px 33px;
		float: right;
		border-radius: 25px;				
David Trattnig's avatar
David Trattnig committed
456
		border: 1px solid gray;
457
458
	}

459
460
461
462
463
464
465
466
467
	.fallback-indicator {
		margin: 25px 50px;
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
		background-color: red;
		color: white;
	}

468
	.is-active {
469
470
		color: rgb(43, 241, 36);
		font-weight: bold;
471
472
473
		padding-left: 0;
	}

David Trattnig's avatar
David Trattnig committed
474
475
476
477
478
479
480
481
482
483
484
	.track-type {
		border-radius: 25px;
  		background: #73AD21;
		color: white;
		padding: 5px 33px;
	}

	.track-type:empty {
		display: none;
	}

485
486
	.is-active .track-title::before {
		content: "\00a0\00a0▶\00a0\00a0\00a0";
487
		font-size: larger; 
488
		color: rgb(43, 241, 36);
489
490
	}

491
492
493
	.is-active .track-time-left {
		color: rgb(43, 241, 36);
		background-color: #222;
494
495
496
497
	}

	.red {
		color:red;
498
499
500
	}

	.error {
David Trattnig's avatar
David Trattnig committed
501
		font-size: 0.8em;
502
503
504
505
506
507
508
		color:red;
		height:100%;
		display : flex;
		align-items : center;
		justify-content: center;
	}

David Trattnig's avatar
David Trattnig committed
509
510
511
512
513
	svg {
		width: 100%;
	}

	.clock-face {
514
515
		stroke: rgb(66, 66, 66);
		fill: black;
David Trattnig's avatar
David Trattnig committed
516
517
518
	}

	.minor {
519
		stroke: rgb(132, 132, 132);
David Trattnig's avatar
David Trattnig committed
520
521
522
523
		stroke-width: 0.5;
	}

	.major {
524
		stroke: rgb(162, 162, 162);
David Trattnig's avatar
David Trattnig committed
525
526
527
528
		stroke-width: 1;
	}

	.hour {
529
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
530
531
532
	}

	.minute {
533
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
534
535
536
537
538
539
	}

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

David Trattnig's avatar
David Trattnig committed
540
541
542
543
544
	footer {
		width: 100%;
		text-align: center;
		font-size: 0.8em;
		color: gray;
545
		opacity: 0.5;
David Trattnig's avatar
David Trattnig committed
546
	}
547
548
549
550
551
552
553

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


David Trattnig's avatar
David Trattnig committed
554
555
</style>

556
557


558
559
<div id="studio-clock">
	<div id="left-column" class="column">
David Trattnig's avatar
David Trattnig committed
560
561
562
563
564
565
566
567

		<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>

568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
		<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})'
			/>
David Trattnig's avatar
David Trattnig committed
597

598
			<!-- minute hand -->
David Trattnig's avatar
David Trattnig committed
599
			<line
600
601
602
603
				class='minute'
				y1='4'
				y2='-30'
				transform='rotate({6 * minutes + seconds / 10})'
David Trattnig's avatar
David Trattnig committed
604
			/>
605
606
607
608
609
610
611
612
613
614
615

			<!-- 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">

616
		{#await promise}
617
618
619
620
			<div class="spinner-border mt-5" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		{:then value}
621
			{initComponent(value)}
622
623
						

624
625
				<div id="current-timeslot">
					<div class="timeslot-title">
626
					<div style="width: 70%; float: left; text-align: left">
627
						<h1>
628
							{#if hasValidTimeslot(value)}						
629
								{@html displayShowName(value.current_timeslot, nocurrenttimeslot)} {displayShowTimes(value.current_timeslot)}
630
							{:else}
631
632
								<span class="red">{nocurrenttimeslot}</span>
							{/if}																				
633
						</h1>
634
635
636
637
638
639
						</div>						
						<div style="width: 30%; float: right; text-align: right;">
							{#if isFallbackTimeslot(value)}	
								<h1><span class="fallback-indicator">{fallbacktext}</span></h1>
							{/if}
						</div>					
640
641
642
					</div>
					<div id="playlist">

643
						<!-- {#if hasValidPlaylist(value)} -->
644
							<ol>
645
646
647

							<!-- Render playlog currently playing -->
							{#each value.current_playlogs as entry, index}
648
649
650
651
652
								{#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>
David Trattnig's avatar
David Trattnig committed
653
									<span class="track-type">{displayType(entry)}</span>
654
655
656
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}									
David Trattnig's avatar
David Trattnig committed
657
									<span class="track-time-left">{formatTime(timeLeft)}</span>
658
659
								</li>

660
								<!-- Render playlogs before the one currently playing -->
661
662
663
664
								{:else}

								<li class="playlist-entry">
									<span class="track-title">{displayTitle(entry)}</span>
David Trattnig's avatar
David Trattnig committed
665
									<span class="track-type">{displayType(entry)}</span>
666
667
668
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}
669
670
671
									{#if entry.track_duration > 0 }
										<span class="track-duration">{formatTime(entry.track_duration)}</span>
									{/if}
672
673
674
675
676
								</li>	

								{/if}

							{/each}
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691

							<!-- 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}

692
							</ol>
693
						<!-- {:else}
694
695
696
							{#if value.current_track}
								<div id="current-track" class="is-active">
									<h2>
David Trattnig's avatar
David Trattnig committed
697
										<span class="track-title">{displayTitle(value.current_track)}</span>
698
699
										<span class="track-type">{displayType(value.current_track)}</span>									
										<span class="fallback-indicator">{fallbacktext}</span>									
700
701
702
										<span class="track-time-left">{formatTime(timeLeft)}</span>
									</h2>
								</div>
703
704
							{/if}								 -->
						<!-- {/if} -->
705
706
707
					</div>

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

713
		{:catch error}
714
			<div class="error"><p>{error}</p></div>
715
		{/await}
716

717
718

		<footer>
David Trattnig's avatar
David Trattnig committed
719
			<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>
720
		</footer>
721
722
	</div>

David Trattnig's avatar
David Trattnig committed
723
724
</div>