StudioClock.svelte 15.2 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

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

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

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

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

127

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


	/* Checks if there is an existing valid playlist */
	function hasValidPlaylist(value) {
144
145
		if (value.current_playlist != null)
			return true;
146
147
148
149
		return false;
	}


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

David Trattnig's avatar
David Trattnig committed
166
167
168
169
170
171
172
173
174
175
176
	/* 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;
	}
177

178
	/* Format the time */
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
	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 "";
	}

194

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

206

207
208
	/* Display the timeslot of a show */
	function displayShowTimeslot(timeslot) {
209
210
		let str = "";

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

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

		}
235
		return "(" + str + ")";
236
	}
237
	
238

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

265
	/* Check if the given track is currently playing */
266
	function isActive(entry, currentTrack) {
267
		if (currentTrack != null && entry.track_start == currentTrack.track_start) {
268
269
270
271
272
			return true;
		}
		return false;
	}

273

274
	/* Hack to load external CSS into the Web Component */
275
276
277
278
279
280
281
	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);
	}
282
	
283

284
285
286
287
	/* Scrolls to the track currently playing */
	function scrollToActiveTrack() {
		if (currentTrackElement != null)
			currentTrackElement.scrollIntoView();
288
	}
289

David Trattnig's avatar
David Trattnig committed
290
291
292
</script>

<style>
293

David Trattnig's avatar
David Trattnig committed
294
295
	* {
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
296
297
	}

298
299
	#studio-clock {
		width: calc(100% - 200px);
300
		height: calc(70% - 300px);
David Trattnig's avatar
David Trattnig committed
301
		margin: 0 50px 50px 50px;
302
303
304
305
306
307
308
309
310
311
312
313
314
		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
315
		margin-top: 220px;
316
		padding: 25px 25px 25px 50px;
317
318
	}

David Trattnig's avatar
David Trattnig committed
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
	#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%);
	}

345
	#current-timeslot {
346
347
348
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
349
		height: 700px;
350
351
	}

352
353
	#current-timeslot,
	#next-timeslot {
354
355
356
		margin: 0 0 40px 20px;
	}

357
	#next-timeslot {
358
359
360
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
David Trattnig's avatar
David Trattnig committed
361
		text-align: center;		
362
363
	}

364
	#current-timeslot .timeslot-title {
365
366
		height: 100px;
    	overflow: revert;		
367
368
	}

369
	#current-timeslot .timeslot-title h1 {
370
371
372
373
		color: #ccc;
		font-size: 2.8em;		
		position: relative;
		top: 30%;
374
		padding-left: 50px;
375
	}
376

377
	#next-timeslot .timeslot-title {
378
379
380
381
		color: gray !important;
		font-size: 2em;
	}

382
	#playlist {
383
		height: calc(100% - 155px);
384
385
		overflow-y: auto;
		scroll-behavior: smooth; 
386
		padding: 10px;
387
		display: flex;
388
	   	align-items: center;
389
		border-top: 1px solid #333;
390
		width: 99%;
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
	}

	#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);
411
412
	}

413
414
	#playlist ol {
		margin-left: 33px;
415
		height: 95%;
416
		width: 90%;
417
418
	}

419
	.playlist-entry {
David Trattnig's avatar
David Trattnig committed
420
		font-size: 1.9em;
421
		padding-left: 53px;
David Trattnig's avatar
David Trattnig committed
422
		padding-bottom: 23px;
423
		color: #AAA;
424
425
	}

426
	#current-track * {
David Trattnig's avatar
David Trattnig committed
427
		font-size: 1.5em;
428
429
	}

David Trattnig's avatar
David Trattnig committed
430
431
432
433
	.track-duration {
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
434
		float: right;
David Trattnig's avatar
David Trattnig committed
435
	}
436
	.track-time-left {
437
438
439
		padding: 5px 33px;
		float: right;
		border-radius: 25px;				
David Trattnig's avatar
David Trattnig committed
440
		border: 1px solid gray;
441
442
	}

443
444
445
446
447
448
449
450
451
	.fallback-indicator {
		margin: 25px 50px;
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
		background-color: red;
		color: white;
	}

452
	.is-active {
453
454
		color: rgb(43, 241, 36);
		font-weight: bold;
455
456
457
		padding-left: 0;
	}

David Trattnig's avatar
David Trattnig committed
458
459
460
461
462
463
464
465
466
467
468
	.track-type {
		border-radius: 25px;
  		background: #73AD21;
		color: white;
		padding: 5px 33px;
	}

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

469
470
	.is-active .track-title::before {
		content: "\00a0\00a0▶\00a0\00a0\00a0";
471
		font-size: larger; 
472
		color: rgb(43, 241, 36);
473
474
	}

475
476
477
	.is-active .track-time-left {
		color: rgb(43, 241, 36);
		background-color: #222;
478
479
480
481
	}

	.red {
		color:red;
482
483
484
	}

	.error {
David Trattnig's avatar
David Trattnig committed
485
		font-size: 0.8em;
486
487
488
489
490
491
492
		color:red;
		height:100%;
		display : flex;
		align-items : center;
		justify-content: center;
	}

David Trattnig's avatar
David Trattnig committed
493
494
495
496
497
	svg {
		width: 100%;
	}

	.clock-face {
498
499
		stroke: rgb(66, 66, 66);
		fill: black;
David Trattnig's avatar
David Trattnig committed
500
501
502
	}

	.minor {
503
		stroke: rgb(132, 132, 132);
David Trattnig's avatar
David Trattnig committed
504
505
506
507
		stroke-width: 0.5;
	}

	.major {
508
		stroke: rgb(162, 162, 162);
David Trattnig's avatar
David Trattnig committed
509
510
511
512
		stroke-width: 1;
	}

	.hour {
513
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
514
515
516
	}

	.minute {
517
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
518
519
520
521
522
523
	}

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

David Trattnig's avatar
David Trattnig committed
524
525
526
527
528
	footer {
		width: 100%;
		text-align: center;
		font-size: 0.8em;
		color: gray;
529
		opacity: 0.5;
David Trattnig's avatar
David Trattnig committed
530
	}
531
532
533
534
535
536
537

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


David Trattnig's avatar
David Trattnig committed
538
539
</style>

540
541


542
543
<div id="studio-clock">
	<div id="left-column" class="column">
David Trattnig's avatar
David Trattnig committed
544
545
546
547
548
549
550
551

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

552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
		<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
581

582
			<!-- minute hand -->
David Trattnig's avatar
David Trattnig committed
583
			<line
584
585
586
587
				class='minute'
				y1='4'
				y2='-30'
				transform='rotate({6 * minutes + seconds / 10})'
David Trattnig's avatar
David Trattnig committed
588
			/>
589
590
591
592
593
594
595
596
597
598
599

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

600
		{#await promise}
601
602
603
604
			<div class="spinner-border mt-5" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		{:then value}
605
			{initComponent(value)}
606
607
						

608
609
				<div id="current-timeslot">
					<div class="timeslot-title">
610
					<div style="width: 70%; float: left; text-align: left">
611
						<h1>
612
613
							{#if hasValidTimeslot(value)}						
								{@html displayShowName(value.current_timeslot, nocurrenttimeslot)} {displayShowTimeslot(value.current_timeslot)}
614
							{:else}
615
616
								<span class="red">{nocurrenttimeslot}</span>
							{/if}																				
617
						</h1>
618
619
620
621
622
623
						</div>						
						<div style="width: 30%; float: right; text-align: right;">
							{#if isFallbackTimeslot(value)}	
								<h1><span class="fallback-indicator">{fallbacktext}</span></h1>
							{/if}
						</div>					
624
625
626
627
628
629
630
631
632
633
634
					</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>
David Trattnig's avatar
David Trattnig committed
635
									<span class="track-type">{displayType(entry)}</span>
636
637
638
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}									
David Trattnig's avatar
David Trattnig committed
639
									<span class="track-time-left">{formatTime(timeLeft)}</span>
640
641
642
643
644
645
								</li>

								{:else}

								<li class="playlist-entry">
									<span class="track-title">{displayTitle(entry)}</span>
David Trattnig's avatar
David Trattnig committed
646
									<span class="track-type">{displayType(entry)}</span>
647
648
649
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}
650
651
652
									{#if entry.track_duration > 0 }
										<span class="track-duration">{formatTime(entry.track_duration)}</span>
									{/if}
653
654
655
656
657
658
								</li>	

								{/if}

							{/each}
							</ol>
659
						{:else}
660
661
662
							{#if value.current_track}
								<div id="current-track" class="is-active">
									<h2>
David Trattnig's avatar
David Trattnig committed
663
										<span class="track-title">{displayTitle(value.current_track)}</span>
664
665
										<span class="track-type">{displayType(value.current_track)}</span>									
										<span class="fallback-indicator">{fallbacktext}</span>									
666
667
668
669
										<span class="track-time-left">{formatTime(timeLeft)}</span>
									</h2>
								</div>
							{/if}								
670
						{/if}
671
672
673
					</div>

				</div> 
674
675


676

677
			{#if value.next_timeslot}
678
679
				<div id="next-timeslot">
					<h3 class="timeslot-title">{@html displayShowName(value.next_timeslot, nonexttimeslot)} {displayShowTimeslot(value)}</h3>
680
681
				</div>		
			{/if}				
682
		{:catch error}
683
			<div class="error"><p>{error}</p></div>
684
		{/await}
685

686
687

		<footer>
David Trattnig's avatar
David Trattnig committed
688
			<a href="https://gitlab.servus.at/aura/engine-clock">Engine Clock v{version}</a> is fuelled by <a href="https://gitlab.servus.at/aura/engine">AURA Engine</a>
689
		</footer>
690
691
	</div>

David Trattnig's avatar
David Trattnig committed
692
693
</div>