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

	/* Indicates if some fallback is playing */
240
	function isFallback(value) {
241
		if ("current_timeslot" in value)
242
			return true;
243
		if (current_timeslot.fallback_type > 0)
244
245
246
247
248
			return true;
		return false;
	}


249
	/* Check if the given track is currently playing */
250
	function isActive(entry, currentTrack) {
251
		if (currentTrack != null && entry.track_start == currentTrack.track_start) {
252
253
254
255
256
			return true;
		}
		return false;
	}

257

258
	/* Hack to load external CSS into the Web Component */
259
260
261
262
263
264
265
	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);
	}
266
	
267

268
269
270
271
	/* Scrolls to the track currently playing */
	function scrollToActiveTrack() {
		if (currentTrackElement != null)
			currentTrackElement.scrollIntoView();
272
	}
273

David Trattnig's avatar
David Trattnig committed
274
275
276
</script>

<style>
277

David Trattnig's avatar
David Trattnig committed
278
279
	* {
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
280
281
	}

282
283
	#studio-clock {
		width: calc(100% - 200px);
284
		height: calc(70% - 300px);
David Trattnig's avatar
David Trattnig committed
285
		margin: 0 50px 50px 50px;
286
287
288
289
290
291
292
293
294
295
296
297
298
		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
299
		margin-top: 220px;
300
		padding: 25px 25px 25px 50px;
301
302
	}

David Trattnig's avatar
David Trattnig committed
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
	#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%);
	}

329
	#current-timeslot {
330
331
332
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
333
		height: 700px;
334
335
	}

336
337
	#current-timeslot,
	#next-timeslot {
338
339
340
		margin: 0 0 40px 20px;
	}

341
	#next-timeslot {
342
343
344
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
David Trattnig's avatar
David Trattnig committed
345
		text-align: center;		
346
347
	}

348
	#current-timeslot .timeslot-title {
349
		text-align: center;
350
351
		height: 100px;
    	overflow: revert;		
352
353
	}

354
	#current-timeslot .timeslot-title h1 {
355
356
357
358
359
		color: #ccc;
		font-size: 2.8em;		
		position: relative;
		top: 30%;
		transform: translateY(-50%);		
360
	}
361

362
	#next-timeslot .timeslot-title {
363
364
365
366
		color: gray !important;
		font-size: 2em;
	}

367
	#playlist {
368
		height: calc(100% - 155px);
369
370
		overflow-y: auto;
		scroll-behavior: smooth; 
371
		padding: 10px;
372
		display: flex;
373
	   	align-items: center;
374
		border-top: 1px solid #333;
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
	}

	#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);
395
396
	}

397
398
	#playlist ol {
		margin-left: 33px;
399
		height: 95%;
400
401
	}

402
	.playlist-entry {
David Trattnig's avatar
David Trattnig committed
403
		font-size: 1.9em;
404
		padding-left: 53px;
David Trattnig's avatar
David Trattnig committed
405
		padding-bottom: 23px;
406
		color: #AAA;
407
408
	}

409
	#current-track * {
David Trattnig's avatar
David Trattnig committed
410
		font-size: 1.5em;
411
412
	}

David Trattnig's avatar
David Trattnig committed
413
414
415
416
417
	.track-duration {
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
	}
418
	.track-time-left {
419
		margin: 25px 50px;
David Trattnig's avatar
David Trattnig committed
420
421
422
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
423
424
	}

425
426
427
428
429
430
431
432
433
	.fallback-indicator {
		margin: 25px 50px;
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
		background-color: red;
		color: white;
	}

434
	.is-active {
435
436
		color: rgb(43, 241, 36);
		font-weight: bold;
437
438
439
		padding-left: 0;
	}

David Trattnig's avatar
David Trattnig committed
440
441
442
443
444
445
446
447
448
449
450
	.track-type {
		border-radius: 25px;
  		background: #73AD21;
		color: white;
		padding: 5px 33px;
	}

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

451
452
	.is-active .track-title::before {
		content: "\00a0\00a0▶\00a0\00a0\00a0";
453
		font-size: larger; 
454
		color: rgb(43, 241, 36);
455
456
	}

457
458
459
460
461
462
463
	.is-active .track-time-left {
		color: rgb(43, 241, 36);
		background-color: #222;
		padding: 5px 15px;
	}

	.error {
David Trattnig's avatar
David Trattnig committed
464
		font-size: 0.8em;
465
466
467
468
469
470
471
		color:red;
		height:100%;
		display : flex;
		align-items : center;
		justify-content: center;
	}

David Trattnig's avatar
David Trattnig committed
472
473
474
475
476
	svg {
		width: 100%;
	}

	.clock-face {
477
478
		stroke: rgb(66, 66, 66);
		fill: black;
David Trattnig's avatar
David Trattnig committed
479
480
481
	}

	.minor {
482
		stroke: rgb(132, 132, 132);
David Trattnig's avatar
David Trattnig committed
483
484
485
486
		stroke-width: 0.5;
	}

	.major {
487
		stroke: rgb(162, 162, 162);
David Trattnig's avatar
David Trattnig committed
488
489
490
491
		stroke-width: 1;
	}

	.hour {
492
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
493
494
495
	}

	.minute {
496
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
497
498
499
500
501
502
	}

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

David Trattnig's avatar
David Trattnig committed
503
504
505
506
507
	footer {
		width: 100%;
		text-align: center;
		font-size: 0.8em;
		color: gray;
508
		opacity: 0.5;
David Trattnig's avatar
David Trattnig committed
509
	}
510
511
512
513
514
515
516

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


David Trattnig's avatar
David Trattnig committed
517
518
</style>

519
520


521
522
<div id="studio-clock">
	<div id="left-column" class="column">
David Trattnig's avatar
David Trattnig committed
523
524
525
526
527
528
529
530

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

531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
		<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
560

561
			<!-- minute hand -->
David Trattnig's avatar
David Trattnig committed
562
			<line
563
564
565
566
				class='minute'
				y1='4'
				y2='-30'
				transform='rotate({6 * minutes + seconds / 10})'
David Trattnig's avatar
David Trattnig committed
567
			/>
568
569
570
571
572
573
574
575
576
577
578

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

579
		{#await promise}
580
581
582
583
			<div class="spinner-border mt-5" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		{:then value}
584
			{initComponent(value)}
585
586
						

587
588
				<div id="current-timeslot">
					<div class="timeslot-title">
589
						<h1>
590
591
							{#if hasValidTimeslot(value)}						
								{@html displayShowName(value.current_timeslot, nocurrenttimeslot)} {displayShowTimeslot(value.current_timeslot)}
592
							{:else}
593
								<span class="error">{nocurrenttimeslot}</span>
594
							{/if}													
595
596
597
							{#if isFallback(value)}	
								<span class="fallback-indicator">{fallbacktext}</span>
							{/if}								
598
599
600
601
602
603
604
605
606
607
608
609
						</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>
David Trattnig's avatar
David Trattnig committed
610
611
									<span class="track-type">{displayType(entry)}</span>
									<span class="track-time-left">{formatTime(timeLeft)}</span>
612
613
614
615
616
617
								</li>

								{:else}

								<li class="playlist-entry">
									<span class="track-title">{displayTitle(entry)}</span>
David Trattnig's avatar
David Trattnig committed
618
									<span class="track-type">{displayType(entry)}</span>
619
620
621
									{#if entry.track_duration > 0 }
										<span class="track-duration">{formatTime(entry.track_duration)}</span>
									{/if}
622
623
624
625
626
627
								</li>	

								{/if}

							{/each}
							</ol>
628
						{:else}
629
630
631
							{#if value.current_track}
								<div id="current-track" class="is-active">
									<h2>
David Trattnig's avatar
David Trattnig committed
632
633
										<span class="track-title">{displayTitle(value.current_track)}</span>
										<span class="track-type">{displayType(value.current_track)}</span>
634
635
636
637
										<span class="track-time-left">{formatTime(timeLeft)}</span>
									</h2>
								</div>
							{/if}								
638
						{/if}
639
640
641
					</div>

				</div> 
642
643


644

645
646
647
			{#if value.current_timeslot}
				<div id="next-timeslot">
					<h3 class="timeslot-title">{@html displayShowName(value.next_timeslot, nonexttimeslot)} {displayShowTimeslot(value)}</h3>
648
649
				</div>		
			{/if}				
650
		{:catch error}
651
			<div class="error"><p>{error}</p></div>
652
		{/await}
653

654
655

		<footer>
David Trattnig's avatar
David Trattnig committed
656
			<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>
657
		</footer>
658
659
	</div>

David Trattnig's avatar
David Trattnig committed
660
661
</div>