Commit 4869c19e authored by david's avatar david
Browse files

Multiple fixes and improvements. #1

parent a9053a1e
...@@ -15,11 +15,14 @@ ...@@ -15,11 +15,14 @@
<body style="background-color: black;"> <body style="background-color: black;">
<aura-clock <aura-clock
name="Studio Clock" name="Radio Orange"
logo="https://o94.at/themes/custom/radio_orange/logo1.png" logo="https://o94.at/themes/custom/radio_orange/logo1.png"
logosize="180px" logosize="180px"
api="http://localhost:3333/api/v1/" api="http://localhost:8008/api/v1/"
css="http://localhost:3333/css/aura.css"> css="http://localhost:8008/css/aura.css"
unknowntitle="Unbekannter Titel"
noschedulemessage="Keine weiteren Sendungen!"
playoffset=3>
</aura-clock> </aura-clock>
</body> </body>
......
...@@ -3,14 +3,16 @@ ...@@ -3,14 +3,16 @@
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let css = ""; export let css = "";
export let api = "http://localhost:8008/api/v1"; export let api = "http://localhost:8008/api/v1/";
export let name = "Studio Clock"; export let name = "Studio Clock";
export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png"; export let logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
export let logosize = "100px"; export let logosize = "100px";
export let noScheduleMessage = "Nothing scheduled!"; export let noschedulemessage = "Nothing scheduled next!";
export let unknowntitle = "Unknown Title";
export let playoffset = 3;
let time = new Date(); let time = new Date();
let queryCurrent = "/clock"; let queryCurrent = "clock";
let rootElement; let rootElement;
let data; let data;
let currentTrack = null; let currentTrack = null;
...@@ -25,7 +27,7 @@ ...@@ -25,7 +27,7 @@
data = fetchApi(queryCurrent); data = fetchApi(queryCurrent);
/* When component is mounted to the DOM */
onMount(() => { onMount(() => {
const interval = setInterval(() => { const interval = setInterval(() => {
time = new Date(); time = new Date();
...@@ -43,6 +45,7 @@ ...@@ -43,6 +45,7 @@
}; };
}); });
/* Load Clock data from the API */
async function fetchApi(query) { async function fetchApi(query) {
let response; let response;
let data; let data;
...@@ -50,7 +53,7 @@ ...@@ -50,7 +53,7 @@
try { try {
response = await fetch(api+query); response = await fetch(api+query);
} catch { } catch {
throw new Error("Cannot connect to Engine!"); throw new Error(`Cannot connect to Engine API at "${api}"!`);
} }
try { try {
...@@ -68,6 +71,7 @@ ...@@ -68,6 +71,7 @@
} }
} }
/* Initialize the component */
function initComponent(info) { function initComponent(info) {
/* Load external CSS */ /* Load external CSS */
...@@ -81,22 +85,27 @@ ...@@ -81,22 +85,27 @@
let t = time - Date.parse(info.current_track.track_start); let t = time - Date.parse(info.current_track.track_start);
t = parseInt(t/1000); t = parseInt(t/1000);
timeLeft = info.current_track.track_duration - t - 3; /* FIXME improve timings in coordination with scheduler/trackservice/LQS */ timeLeft = info.current_track.track_duration - t - playoffset;
console.log("Current Data", info); console.log("Current Data", info);
} }
return ""; return "";
} }
/* Display the title of a track */
function displayTitle(track) { function displayTitle(track) {
if (track != null) { if (track != null) {
let artist = ""; let artist = "";
if (track.track_artist != "") let title = unknowntitle;
if (track.track_artist != null && track.track_artist != "")
artist = track.track_artist + " - "; artist = track.track_artist + " - ";
return artist + track.track_title; if (track.track_title != null && track.track_title != "")
title = track.track_title;
return artist + title;
} }
return ""; return "";
} }
/* Format the time */
function formatTime(seconds) { function formatTime(seconds) {
if (seconds != null && Number.isInteger(seconds)) { if (seconds != null && Number.isInteger(seconds)) {
let d = new Date(null); let d = new Date(null);
...@@ -112,16 +121,18 @@ ...@@ -112,16 +121,18 @@
return ""; return "";
} }
/* Display the name of a show */
function displayShowName(schedule) { function displayShowName(schedule) {
let name = "" let name = ""
if (schedule == null || schedule.show_name == null) { if (schedule == null || schedule.show_name == null) {
name = '<span class="error">'+noScheduleMessage+'</span>'; name = '<span class="error">'+noschedulemessage+'</span>';
} else { } else {
name = schedule.show_name; name = schedule.show_name;
} }
return name; return name;
} }
/* Display the schedule of a show */
function displayShowSchedule(schedule) { function displayShowSchedule(schedule) {
let str = ""; let str = "";
...@@ -152,15 +163,22 @@ ...@@ -152,15 +163,22 @@
return str; return str;
} }
/* Check if the given track is currently playing */
function isActive(entry, currentTrack) { function isActive(entry, currentTrack) {
if (currentTrack != null && entry.track_num == currentTrack.track_num) { if (currentTrack != null && entry.track_num == currentTrack.track_num) {
// Scroll to current playlist entry // Scroll to current playlist entry
location.hash = "#current-playlist-entry"; // location.hash = "#current-playlist-entry";
var element = document.querySelector("#current-playlist-entry");
if (element != null)
element.scrollIntoView();
return true; return true;
} }
return false; return false;
} }
/* Hack to load external CSS into the Web Component */
function loadExternalCss(root, file) { function loadExternalCss(root, file) {
let element = document.createElement("link"); let element = document.createElement("link");
element.setAttribute("rel", "stylesheet"); element.setAttribute("rel", "stylesheet");
...@@ -169,6 +187,15 @@ ...@@ -169,6 +187,15 @@
root.appendChild(element); root.appendChild(element);
} }
/* Called when the clock finished rendering */
function finalize_rendering() {
/* Sroll to currently playing track */
var element = document.querySelector("#current-playlist-entry");
if (element != null)
element.scrollIntoView();
return ""
}
</script> </script>
<style> <style>
...@@ -176,7 +203,6 @@ ...@@ -176,7 +203,6 @@
#station-header { #station-header {
width: 100%; width: 100%;
height: 50px; height: 50px;
/* margin: 20px 100px; */
padding: 40px 100px; padding: 40px 100px;
} }
...@@ -201,7 +227,6 @@ ...@@ -201,7 +227,6 @@
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
/* border: 2px solid #333; */
flex-direction: row; flex-direction: row;
} }
...@@ -228,7 +253,8 @@ ...@@ -228,7 +253,8 @@
#current-schedule .schedule-title { #current-schedule .schedule-title {
color: #ccc; color: #ccc;
font-size: 3.5em; font-size: 3.3em;
text-align: center;
} }
#next-schedule .schedule-title { #next-schedule .schedule-title {
color: gray !important; color: gray !important;
...@@ -267,9 +293,14 @@ ...@@ -267,9 +293,14 @@
background-color: rgb(34, 32, 32); background-color: rgb(34, 32, 32);
} }
#playlist ol {
margin-left: 33px;
}
.playlist-entry { .playlist-entry {
font-size: 1.9em; font-size: 1.9em;
padding-left: 53px; padding-left: 53px;
padding-bottom: 13px;
} }
#current-track * { #current-track * {
...@@ -282,14 +313,15 @@ ...@@ -282,14 +313,15 @@
} }
.is-active { .is-active {
color: green; color: rgb(43, 241, 36);
font-weight: bold;
padding-left: 0; padding-left: 0;
} }
.is-active .track-title::before { .is-active .track-title::before {
content: "\00a0\00a0▶\00a0\00a0\00a0"; content: "\00a0\00a0▶\00a0\00a0\00a0";
font-size: larger; font-size: larger;
color: green; color: rgb(43, 241, 36);
} }
.is-active .track-time-left { .is-active .track-time-left {
...@@ -339,10 +371,6 @@ ...@@ -339,10 +371,6 @@
stroke: rgb(180,0,0); stroke: rgb(180,0,0);
} }
/* .second-counterweight {
stroke-width: 3;
} */
footer { footer {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -357,7 +385,6 @@ ...@@ -357,7 +385,6 @@
} }
footer #aura-logo { footer #aura-logo {
/* opacity: 0.5; */
filter: invert(100%); filter: invert(100%);
width: 75px; width: 75px;
margin: 0 0 20px 0; margin: 0 0 20px 0;
...@@ -453,7 +480,7 @@ ...@@ -453,7 +480,7 @@
<li class="playlist-entry"> <li class="playlist-entry">
<span class="track-title">{displayTitle(entry)}</span> <span class="track-title">{displayTitle(entry)}</span>
<span class="track-duration">({formatTime(entry.duration)})</span> <span class="track-duration">({formatTime(entry.track_duration)})</span>
</li> </li>
{/if} {/if}
...@@ -471,7 +498,7 @@ ...@@ -471,7 +498,7 @@
{/if} {/if}
</div> </div>
<div id="next-schedule"> <div id="next-schedule">
<h3 class="schedule-title">Next: {@html displayShowName(value.next_schedule)} {displayShowSchedule(value)}</h3> <h3 class="schedule-title">{@html displayShowName(value.next_schedule)} {displayShowSchedule(value)}</h3>
</div> </div>
{/if} {/if}
...@@ -479,12 +506,12 @@ ...@@ -479,12 +506,12 @@
<div class="error"><p>{error}</p></div> <div class="error"><p>{error}</p></div>
{/await} {/await}
<footer>
<!-- {finalize_rendering()} -->
<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>
</div> </div>
</div> </div>
<footer>
<a href="https://gitlab.servus.at/aura/meta"><img id="aura-logo" src="https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png" alt="Aura Logo" /></a>
<br/>
Studio Clock is powered by <a href="https://gitlab.servus.at/autoradio">Aura Engine</a>
</footer>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment