StudioClock.svelte 16.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
	/* 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
		return "(" + str + ")";
240
	}
241

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

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

276

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

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

David Trattnig's avatar
David Trattnig committed
293
294
295
</script>

<style>
296

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

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

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

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

355
356
	#current-timeslot,
	#next-timeslot {
357
358
359
		margin: 0 0 40px 20px;
	}

360
	#next-timeslot {
361
362
363
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
364
		/* text-align: center;		 */
365
366
	}

367
	#current-timeslot .timeslot-title {
368
369
		height: 100px;
    	overflow: revert;		
370
371
	}

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

380
	#next-timeslot .timeslot-title {
381
382
		color: gray !important;
		font-size: 2em;
383
		padding-left: 50px;
384
385
	}

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

	#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);
415
416
	}

417
418
	#playlist ol {
		margin-left: 33px;
419
		height: 95%;
420
		width: 90%;
421
422
	}

423
	.playlist-entry {
David Trattnig's avatar
David Trattnig committed
424
		font-size: 1.9em;
425
		padding-left: 53px;
David Trattnig's avatar
David Trattnig committed
426
		padding-bottom: 23px;
427
		color: #AAA;
428
429
	}

430
	#current-track * {
David Trattnig's avatar
David Trattnig committed
431
		font-size: 1.5em;
432
433
	}

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

447
448
449
450
451
452
453
454
455
	.fallback-indicator {
		margin: 25px 50px;
		border-radius: 25px;		
		padding: 5px 33px;		  
		border: 1px solid gray;
		background-color: red;
		color: white;
	}

456
	.is-active {
457
458
		color: rgb(43, 241, 36);
		font-weight: bold;
459
460
461
		padding-left: 0;
	}

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

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

473
474
	.is-active .track-title::before {
		content: "\00a0\00a0▶\00a0\00a0\00a0";
475
		font-size: larger; 
476
		color: rgb(43, 241, 36);
477
478
	}

479
480
481
	.is-active .track-time-left {
		color: rgb(43, 241, 36);
		background-color: #222;
482
483
484
485
	}

	.red {
		color:red;
486
487
488
	}

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

David Trattnig's avatar
David Trattnig committed
497
498
499
500
501
	svg {
		width: 100%;
	}

	.clock-face {
502
503
		stroke: rgb(66, 66, 66);
		fill: black;
David Trattnig's avatar
David Trattnig committed
504
505
506
	}

	.minor {
507
		stroke: rgb(132, 132, 132);
David Trattnig's avatar
David Trattnig committed
508
509
510
511
		stroke-width: 0.5;
	}

	.major {
512
		stroke: rgb(162, 162, 162);
David Trattnig's avatar
David Trattnig committed
513
514
515
516
		stroke-width: 1;
	}

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

	.minute {
521
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
522
523
524
525
526
527
	}

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

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

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


David Trattnig's avatar
David Trattnig committed
542
543
</style>

544
545


546
547
<div id="studio-clock">
	<div id="left-column" class="column">
David Trattnig's avatar
David Trattnig committed
548
549
550
551
552
553
554
555

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

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
581
582
583
584
		<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
585

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

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

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

612
613
				<div id="current-timeslot">
					<div class="timeslot-title">
614
					<div style="width: 70%; float: left; text-align: left">
615
						<h1>
616
							{#if hasValidTimeslot(value)}						
617
								{@html displayShowName(value.current_timeslot, nocurrenttimeslot)} {displayShowTimes(value.current_timeslot)}
618
							{:else}
619
620
								<span class="red">{nocurrenttimeslot}</span>
							{/if}																				
621
						</h1>
622
623
624
625
626
627
						</div>						
						<div style="width: 30%; float: right; text-align: right;">
							{#if isFallbackTimeslot(value)}	
								<h1><span class="fallback-indicator">{fallbacktext}</span></h1>
							{/if}
						</div>					
628
629
630
					</div>
					<div id="playlist">

631
						<!-- {#if hasValidPlaylist(value)} -->
632
							<ol>
633
634
635

							<!-- Render playlog currently playing -->
							{#each value.current_playlogs as entry, index}
636
637
638
639
640
								{#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
641
									<span class="track-type">{displayType(entry)}</span>
642
643
644
									{#if isFallbackEntry(value, entry)}	
										<span class="fallback-indicator">{fallbacktext}</span>
									{/if}									
David Trattnig's avatar
David Trattnig committed
645
									<span class="track-time-left">{formatTime(timeLeft)}</span>
646
647
								</li>

648
								<!-- Render playlogs before the one currently playing -->
649
650
651
652
								{:else}

								<li class="playlist-entry">
									<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}
657
658
659
									{#if entry.track_duration > 0 }
										<span class="track-duration">{formatTime(entry.track_duration)}</span>
									{/if}
660
661
662
663
664
								</li>	

								{/if}

							{/each}
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679

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

680
							</ol>
681
						<!-- {:else}
682
683
684
							{#if value.current_track}
								<div id="current-track" class="is-active">
									<h2>
David Trattnig's avatar
David Trattnig committed
685
										<span class="track-title">{displayTitle(value.current_track)}</span>
686
687
										<span class="track-type">{displayType(value.current_track)}</span>									
										<span class="fallback-indicator">{fallbacktext}</span>									
688
689
690
										<span class="track-time-left">{formatTime(timeLeft)}</span>
									</h2>
								</div>
691
692
							{/if}								 -->
						<!-- {/if} -->
693
694
695
					</div>

				</div> 
696

697
			{#if value.next_timeslot}
698
				<div id="next-timeslot">
699
					<h3 class="timeslot-title">{@html displayShowName(value.next_timeslot, nonexttimeslot)} {displayShowTimes(value.next_timeslot)}</h3>
700
701
				</div>		
			{/if}				
702

703
		{:catch error}
704
			<div class="error"><p>{error}</p></div>
705
		{/await}
706

707
708

		<footer>
David Trattnig's avatar
David Trattnig committed
709
			<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>
710
		</footer>
711
712
	</div>

David Trattnig's avatar
David Trattnig committed
713
714
</div>