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
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
	let scheduleTimeLeft = 0;
27
	let reloadTime = 100;
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
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
		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
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

	/* Checks if there's an existing, valid schedule */
	function hasValidSchedule(value) {
		if (value.current_schedule != null) {
131
			if (value.current_schedule.schedule_end != null) {				
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
				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 */
197
	function displayShowName(schedule, defaultText) {
198
		let name = ""
199
200
		if (schedule == null || schedule.show_name == null || schedule.show_name == "") {
			name = '<span class="error">'+defaultText+'</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
	function displayShowSchedule(schedule) {
		let str = "";

212
		if (schedule != null && schedule.schedule_start != null && schedule.show_name != "") {
213
214
215
216
217
218
219
220
221
			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

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


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

258

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

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

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

<style>
278

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

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

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

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

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

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

	#current-schedule .schedule-title {
350
		text-align: center;
351
352
		height: 100px;
    	overflow: revert;		
353
354
355
356
357
358
359
360
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

520
521


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

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

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

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

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

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

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

								{:else}

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

								{/if}

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

				</div> 
643
644


645

646
647
			{#if value.current_schedule}
				<div id="next-schedule">
648
					<h3 class="schedule-title">{@html displayShowName(value.next_schedule, nonextschedule)} {displayShowSchedule(value)}</h3>
649
650
				</div>		
			{/if}				
651
		{:catch error}
652
			<div class="error"><p>{error}</p></div>
653
		{/await}
654

655
656

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

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