StudioClock.svelte 12.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';
5
	export let css = "";
6
	export let api = "http://localhost:8008/api/v1/";
7
8
9
	export let name = "Studio Clock";
	export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
	export let logosize  = "100px";
10
11
	export let nocurrentschedule = "Right now, there's no show playing";
	export let nonextschedule = "Nothing scheduled next!";
12
13
	export let unknowntitle = "Unknown Title";
	export let playoffset = 3;
14
15

	let time = new Date(); 
16
	let queryCurrent = "clock";
17
	let rootElement;
18
19
20
21
	let promise;
	let prevClockData = null;
	let clockData = null;
	let currentTrackElement = null;
22
	let timeLeft;
23
24
25
	let scheduleTimeLeft = 0;
	let reloadTime = 10;
	let reloadWait = 0;
David Trattnig's avatar
David Trattnig committed
26
27
28
29
30
31
32

	// these automatically update when `time`
	// changes, because of the `$:` prefix
	$: hours = time.getHours();
	$: minutes = time.getMinutes();
	$: seconds = time.getSeconds();

33
34
	promise = fetchApi(queryCurrent);

35

36
	/* When component is mounted to the DOM */
David Trattnig's avatar
David Trattnig committed
37
38
39
	onMount(() => {
		const interval = setInterval(() => {
			time = new Date();
40
			timeLeft -= 1;
41
42
43
44
45
46
47
48
49
50
			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;				
51
			}
52
						
David Trattnig's avatar
David Trattnig committed
53
54
55
56
		}, 1000);

		return () => {
			clearInterval(interval);
57
		};		
David Trattnig's avatar
David Trattnig committed
58
	});
59

60
61
62
63
64
65
66
67

	/* Called after the component has been updated */
	afterUpdate(async () => {
		scrollToActiveTrack();
	});


	/* Load clock data from the API */
68
	async function fetchApi(query) {
69
		let response;
70
71
		let data;

72
		try {
73
			response = await fetch(api+query);
74
		} catch {
75
			throw new Error(`Cannot connect to Engine API at "${api}"!`);
76
77
		}

78
79
80
81
82
83
		try {
			data = await response.json();
		} catch(e) {
			console.log("Error while converting response to JSON!", e);
			throw new Error(response.statusText);
		}
84
85
86
87

		if (response.ok) {
			return data;
		} else {
88
89
90
91
92
			console.log("Error:", data);
			throw new Error(data.message);
		}
	}

93

94
	/* Initialize the component */
95
	function initComponent(value) {
96
97
98
99
100
101

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

		/* Set currently loaded data */
102
103
104
105
106
107
108
109
110
		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;
			}
111
			
112
113
114
115
116
117
118
119
			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;
			}
120
121
122
123
		}
		return "";
	}

124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147

	/* 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;
	}


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

162

163
	/* Format the time */
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
	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 "";
	}

179

180
	/* Display the name of a show */
David Trattnig's avatar
David Trattnig committed
181
	function displayShowName(schedule) {
182
		let name = ""
David Trattnig's avatar
David Trattnig committed
183
		if (schedule == null || schedule.show_name == null) {
184
			name = '<span class="error">'+nonextschedule+'</span>';
185
		} else {
David Trattnig's avatar
David Trattnig committed
186
			name = schedule.show_name;
187
		}
188
189
190
		return name;
	}

191

192
	/* Display the schedule of a show */
193
194
195
196
197
198
199
200
201
202
203
204
205
	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'
				});
206
				str = "" + scheduleStart;
207
208
209
210
211
212
213
			}
			if (schedule.schedule_end != null) {
				scheduleEnd = new Date(Date.parse(schedule.schedule_end));
				scheduleEnd = scheduleEnd.toLocaleTimeString(navigator.language, {
					hour: '2-digit',
					minute:'2-digit'
				});
214
				str = str + " - " + scheduleEnd + "";
215
			} else {
216
				str += "";
217
218
219
220
			}

		}
		return str;
221
	}
222
	
223
	/* Check if the given track is currently playing */
224
	function isActive(entry, currentTrack) {
David Trattnig's avatar
David Trattnig committed
225
		if (currentTrack != null && entry.track_num == currentTrack.track_num) {
226
227
228
229
230
			return true;
		}
		return false;
	}

231

232
	/* Hack to load external CSS into the Web Component */
233
234
235
236
237
238
239
	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);
	}
240
	
241

242
243
244
245
	/* Scrolls to the track currently playing */
	function scrollToActiveTrack() {
		if (currentTrackElement != null)
			currentTrackElement.scrollIntoView();
246
	}
247

David Trattnig's avatar
David Trattnig committed
248
249
250
</script>

<style>
251
252
253
254
255
256
257
258
259
260
261

	#station-header {
		width: 100%;
		height: 50px;
		padding: 40px 100px;
	}

	#station-name {
		margin: 0;
    	font-size: 3em;
		line-height: 80px;
262
		color: #AAA;	
263
264
265
266
267
268
	}

	#station-logo {
		align-content: left;
		text-align: right;
		margin: 0 40px 0 10px;
269
		opacity: 0.88;
270
271
272
		filter: invert(100%);
	}

273
274
	#studio-clock {
		width: calc(100% - 200px);
275
276
		height: calc(100% - 500px);
		margin: 100px;
277
278
279
280
281
282
283
284
285
286
287
288
289
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
	}

	#left-column {
		width: 30%;
		padding: 25px;
	}

	#right-column {
		width: 70%;
290
		padding: 25px 25px 25px 50px;
291
292
	}

293
294
295
296
297
298
299
	#current-schedule {
		border: 2px solid #333;
		margin: 20px 20px 40px 20px;
		background-color: #111;		
		height: 100%;
	}

300
301
302
303
304
	#current-schedule,
	#next-schedule {
		margin: 0 0 40px 20px;
	}

305
306
307
308
309
310
311
	#next-schedule {
		background-color:rgb(24, 24, 24);
		margin-right: 20px;
		padding: 12px;
	}

	#current-schedule .schedule-title {
312
		text-align: center;
313
314
315
316
317
318
319
320
321
		height: 100px;		
	}

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

324
325
326
327
328
	#next-schedule .schedule-title {
		color: gray !important;
		font-size: 2em;
	}

329
	#playlist {
330
		height: calc(100% - 155px);
331
332
		overflow-y: auto;
		scroll-behavior: smooth; 
333
		padding: 10px;
334
		display: flex;
335
336
	   	align-items: center;
		border-top: 1px solid #333;;
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
	}

	#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);
357
358
	}

359
360
	#playlist ol {
		margin-left: 33px;
361
		height: 95%;
362
363
	}

364
	.playlist-entry {
David Trattnig's avatar
David Trattnig committed
365
		font-size: 1.9em;
366
		padding-left: 53px;
367
		padding-bottom: 13px;
368
		color: #AAA;
369
370
	}

371
	#current-track * {
David Trattnig's avatar
David Trattnig committed
372
		font-size: 1.5em;
373
374
	}

375
376
	.play-icon,
	.track-time-left {
377
		margin: 25px 50px;
378
379
	}

380
	.is-active {
381
382
		color: rgb(43, 241, 36);
		font-weight: bold;
383
384
385
		padding-left: 0;
	}

386
387
	.is-active .track-title::before {
		content: "\00a0\00a0▶\00a0\00a0\00a0";
388
		font-size: larger; 
389
		color: rgb(43, 241, 36);
390
391
	}

392
393
394
395
396
397
398
	.is-active .track-time-left {
		color: rgb(43, 241, 36);
		background-color: #222;
		padding: 5px 15px;
	}

	.error {
399
		font-size: 1.1em;
400
401
402
403
404
405
406
		color:red;
		height:100%;
		display : flex;
		align-items : center;
		justify-content: center;
	}

David Trattnig's avatar
David Trattnig committed
407
408
409
410
411
412
	svg {
		width: 100%;
		height: 100%;
	}

	.clock-face {
413
414
		stroke: rgb(66, 66, 66);
		fill: black;
David Trattnig's avatar
David Trattnig committed
415
416
417
	}

	.minor {
418
		stroke: rgb(132, 132, 132);
David Trattnig's avatar
David Trattnig committed
419
420
421
422
		stroke-width: 0.5;
	}

	.major {
423
		stroke: rgb(162, 162, 162);
David Trattnig's avatar
David Trattnig committed
424
425
426
427
		stroke-width: 1;
	}

	.hour {
428
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
429
430
431
	}

	.minute {
432
		stroke: rgba(255, 255, 255, 0.705);
David Trattnig's avatar
David Trattnig committed
433
434
435
436
437
438
	}

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

David Trattnig's avatar
David Trattnig committed
439
440
441
442
443
	footer {
		width: 100%;
		text-align: center;
		font-size: 0.8em;
		color: gray;
444
		opacity: 0.5;
David Trattnig's avatar
David Trattnig committed
445
	}
446
447
448
449
450
451
452

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


David Trattnig's avatar
David Trattnig committed
453
454
</style>

455
456
457


<div id="station-header">
458
459
	<img id="station-logo" src="{logo}" style="width:{logosize}" alt="Radio Station" align="left" />
	<h1 id="station-name">{name}</h1>
460
461
</div>

462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<div id="studio-clock">
	<div id="left-column" class="column">
		<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
493

494
			<!-- minute hand -->
David Trattnig's avatar
David Trattnig committed
495
			<line
496
497
498
499
				class='minute'
				y1='4'
				y2='-30'
				transform='rotate({6 * minutes + seconds / 10})'
David Trattnig's avatar
David Trattnig committed
500
			/>
501
502
503
504
505
506
507
508
509
510
511

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

512
		{#await promise}
513
514
515
516
			<div class="spinner-border mt-5" role="status">
				<span class="sr-only">Loading...</span>
			</div>
		{:then value}
517
			{initComponent(value)}
518
519
						

520
521
522
523
524
525
526
527
528
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
				<div id="current-schedule">
					<div class="schedule-title">
						<h1>
						{#if hasValidSchedule(value)}						
								{@html displayShowName(value.current_schedule)} {displayShowSchedule(value.current_schedule)}
							{:else}
								<span class="error">{nocurrentschedule}</span>
							{/if}						
						</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>
									<span class="track-time-left">({formatTime(timeLeft)})</span>
								</li>

								{:else}

								<li class="playlist-entry">
									<span class="track-title">{displayTitle(entry)}</span>
									<span class="track-duration">({formatTime(entry.track_duration)})</span>
								</li>	

								{/if}

							{/each}
							</ol>
554
						{:else}
555
556
557
558
559
560
561
562
							{#if value.current_track}
								<div id="current-track" class="is-active">
									<h2>
										<span class="track-title">{displayTitle(value.track)}</span>
										<span class="track-time-left">{formatTime(timeLeft)}</span>
									</h2>
								</div>
							{/if}								
563
						{/if}
564
565
566
					</div>

				</div> 
567
568


569

570
571
572
573
574
			{#if value.current_schedule}
				<div id="next-schedule">
					<h3 class="schedule-title">{@html displayShowName(value.next_schedule)} {displayShowSchedule(value)}</h3>
				</div>		
			{/if}				
575
		{:catch error}
576
			<div class="error"><p>{error}</p></div>
577
		{/await}
578

579
580
581
582

		<footer>
			<a href="https://gitlab.servus.at/aura/engine-clock">Engine Clock</a> is fuelled by <a href="https://gitlab.servus.at/aura/engine">AURA Engine</a>
		</footer>
583
584
	</div>

David Trattnig's avatar
David Trattnig committed
585
586
</div>