StudioClock.svelte 13.8 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
11
12
13
14

	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;
	export let nocurrentschedule = globalConfig.NO_CURRENT_SCHEDULE;
	export let nonextschedule = globalConfig.NO_NEXT_SCHEDULE;
	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
27
28
	let scheduleTimeLeft = 0;
	let reloadTime = 10;
	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
45
46
47
48
49
50
51
52
53
			scheduleTimeLeft -= 1;
		
			/* End of track or end of schedule - load new data */
			if (timeLeft <= 0 || scheduleTimeLeft <= 0) {
				/* For some seconds refresh every second, to work around API timing delays */
				if (timeLeft <= 0 && timeLeft >= -3 || scheduleTimeLeft <= 0 && scheduleTimeLeft >= -3 || reloadWait == 0) {
					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
109
110
111
112
113
		if (value != null) {
			clockData = value;
			console.log("Current Data", value);

			if (value.current_track != null) {
				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
119
120
121
122
			if (value.current_schedule != null) {
				let schedule_end = Date.parse(value.current_schedule.schedule_end);
				schedule_end = parseInt(schedule_end/1000);
				scheduleTimeLeft = schedule_end - time;
			} else {
				/* Decrease time left in any case to avoid reloading too often */
				scheduleTimeLeft -= 1;
			}
123
124
125
126
		}
		return "";
	}

127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

	/* Checks if there's an existing, valid schedule */
	function hasValidSchedule(value) {
		if (value.current_schedule != null) {
			if (value.current_schedule.schedule_end != null) {
				let schedule_end = Date.parse(value.current_schedule.schedule_end);
				let diff = schedule_end - time;
				if (diff >= 0)
					return true;
			}
		}
		return false;
	}


	/* Checks if there is an existing valid playlist */
	function hasValidPlaylist(value) {
		if (hasValidSchedule(value))
			if (value.current_playlist != null)
				return true;
		return false;
	}


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

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

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

195

196
	/* Display the name of a show */
David Trattnig's avatar
David Trattnig committed
197
	function displayShowName(schedule) {
198
		let name = ""
David Trattnig's avatar
David Trattnig committed
199
		if (schedule == null || schedule.show_name == null) {
200
			name = '<span class="error">'+nonextschedule+'</span>';
201
		} else {
David Trattnig's avatar
David Trattnig committed
202
			name = schedule.show_name;
203
		}
204
205
206
		return name;
	}

207

208
	/* Display the schedule of a show */
209
210
211
212
213
214
215
216
217
218
219
220
221
	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'
				});
222
				str = "" + scheduleStart;
223
224
225
226
227
228
229
			}
			if (schedule.schedule_end != null) {
				scheduleEnd = new Date(Date.parse(schedule.schedule_end));
				scheduleEnd = scheduleEnd.toLocaleTimeString(navigator.language, {
					hour: '2-digit',
					minute:'2-digit'
				});
230
				str = str + " - " + scheduleEnd + "";
231
			} else {
232
				str += "";
233
234
235
236
			}

		}
		return str;
237
	}
238
	
239
240
241
242
243
244
245
246
247

	/* Indicates if some fallback is playing */
	function isFallback(current_schedule) {
		if (current_schedule.fallback_type > 0)
			return true;
		return false;
	}


248
	/* Check if the given track is currently playing */
249
	function isActive(entry, currentTrack) {
David Trattnig's avatar
David Trattnig committed
250
		if (currentTrack != null && entry.track_num == currentTrack.track_num) {
251
252
253
254
255
			return true;
		}
		return false;
	}

256

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

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

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

<style>
276

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

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

David Trattnig's avatar
David Trattnig committed
302
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
	#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%);
	}

328
329
330
331
332
333
334
	#current-schedule {
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
		height: 100%;
	}

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

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

	#current-schedule .schedule-title {
348
		text-align: center;
349
350
351
352
353
354
355
356
357
		height: 100px;		
	}

	#current-schedule .schedule-title h1 {
		color: #ccc;
		font-size: 2.8em;		
		position: relative;
		top: 30%;
		transform: translateY(-50%);		
358
	}
359

360
361
362
363
364
	#next-schedule .schedule-title {
		color: gray !important;
		font-size: 2em;
	}

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

	#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);
393
394
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


David Trattnig's avatar
David Trattnig committed
515
516
</style>

517
518


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

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

529
530
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
		<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
558

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

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

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

585
586
587
				<div id="current-schedule">
					<div class="schedule-title">
						<h1>
588
							{#if hasValidSchedule(value)}						
589
								{@html displayShowName(value.current_schedule)} {displayShowSchedule(value.current_schedule)}
590
591
592
								{#if isFallback(value.current_schedule)}	
									<span class="fallback-indicator">{fallbacktext}</span>
								{/if}	
593
594
							{:else}
								<span class="error">{nocurrentschedule}</span>
595
							{/if}													
596
597
598
599
600
601
602
603
604
605
606
607
						</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
608
609
									<span class="track-type">{displayType(entry)}</span>
									<span class="track-time-left">{formatTime(timeLeft)}</span>
610
611
612
613
614
615
								</li>

								{:else}

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

								{/if}

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

				</div> 
638
639


640

641
642
643
644
645
			{#if value.current_schedule}
				<div id="next-schedule">
					<h3 class="schedule-title">{@html displayShowName(value.next_schedule)} {displayShowSchedule(value)}</h3>
				</div>		
			{/if}				
646
		{:catch error}
647
			<div class="error"><p>{error}</p></div>
648
		{/await}
649

650
651

		<footer>
David Trattnig's avatar
David Trattnig committed
652
			<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>
653
		</footer>
654
655
	</div>

David Trattnig's avatar
David Trattnig committed
656
657
</div>