Skip to content
GitLab
Commit 4869c19e authored by David Trattnig's avatar David Trattnig
Browse files

Multiple fixes and improvements. #1

parent a9053a1e
Show whitespace changes
Inline Side-by-side
public/index.html
View file @ 4869c19e
......@@ -15,11 +15,14 @@
<body style="background-color: black;">
<aura-clock
name="Studio Clock"
name="Radio Orange"
logo="https://o94.at/themes/custom/radio_orange/logo1.png"
logosize="180px"
api="http://localhost:3333/api/v1/"
css="http://localhost:3333/css/aura.css">
api="http://localhost:8008/api/v1/"
css="http://localhost:8008/css/aura.css"
unknowntitle="Unbekannter Titel"
noschedulemessage="Keine weiteren Sendungen!"
playoffset=3>
</aura-clock>
</body>
......
src/StudioClock.svelte
View file @ 4869c19e
......@@ -3,14 +3,16 @@
<script>
import { onMount } from 'svelte';
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 logo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
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 queryCurrent = "/clock";
let queryCurrent = "clock";
let rootElement;
let data;
let currentTrack = null;
......@@ -25,7 +27,7 @@
data = fetchApi(queryCurrent);
/* When component is mounted to the DOM */
onMount(() => {
const interval = setInterval(() => {
time = new Date();
......@@ -43,6 +45,7 @@
};
});
/* Load Clock data from the API */
async function fetchApi(query) {
let response;
let data;
......@@ -50,7 +53,7 @@
try {
response = await fetch(api+query);
} catch {
throw new Error("Cannot connect to Engine!");
throw new Error(`Cannot connect to Engine API at "${api}"!`);
}
try {
......@@ -68,6 +71,7 @@
}
}
/* Initialize the component */
function initComponent(info) {
/* Load external CSS */
......@@ -81,22 +85,27 @@
let t = time - Date.parse(info.current_track.track_start);
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);
}
return "";
}
/* Display the title of a track */
function displayTitle(track) {
if (track != null) {
let artist = "";
if (track.track_artist != "")
let title = unknowntitle;
if (track.track_artist != null && 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 "";
}
/* Format the time */
function formatTime(seconds) {
if (seconds != null && Number.isInteger(seconds)) {
let d = new Date(null);
......@@ -112,16 +121,18 @@
return "";
}
/* Display the name of a show */
function displayShowName(schedule) {
let name = ""
if (schedule == null || schedule.show_name == null) {
name = '<span class="error">'+noScheduleMessage+'</span>';
name = '<span class="error">'+noschedulemessage+'</span>';
} else {
name = schedule.show_name;
}
return name;
}
/* Display the schedule of a show */
function displayShowSchedule(schedule) {
let str = "";
......@@ -152,15 +163,22 @@
return str;
}
/* Check if the given track is currently playing */
function isActive(entry, currentTrack) {
if (currentTrack != null && entry.track_num == currentTrack.track_num) {
// 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 false;
}
/* Hack to load external CSS into the Web Component */
function loadExternalCss(root, file) {
let element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
......@@ -169,6 +187,15 @@
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>
<style>
......@@ -176,7 +203,6 @@
#station-header {
width: 100%;
height: 50px;
/* margin: 20px 100px; */
padding: 40px 100px;
}
......@@ -201,7 +227,6 @@
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
/* border: 2px solid #333; */
flex-direction: row;
}
......@@ -228,7 +253,8 @@
#current-schedule .schedule-title {
color: #ccc;
font-size: 3.5em;
font-size: 3.3em;
text-align: center;
}
#next-schedule .schedule-title {
color: gray !important;
......@@ -267,9 +293,14 @@
background-color: rgb(34, 32, 32);
}
#playlist ol {
margin-left: 33px;
}
.playlist-entry {
font-size: 1.9em;
padding-left: 53px;
padding-bottom: 13px;
}
#current-track * {
......@@ -282,14 +313,15 @@
}
.is-active {
color: green;
color: rgb(43, 241, 36);
font-weight: bold;
padding-left: 0;
}
.is-active .track-title::before {
content: "\00a0\00a0▶\00a0\00a0\00a0";
font-size: larger;
color: green;
color: rgb(43, 241, 36);
}
.is-active .track-time-left {
......@@ -339,10 +371,6 @@
stroke: rgb(180,0,0);
}
/* .second-counterweight {
stroke-width: 3;
} */
footer {
width: 100%;
text-align: center;
......@@ -357,7 +385,6 @@
}
footer #aura-logo {
/* opacity: 0.5; */
filter: invert(100%);
width: 75px;
margin: 0 0 20px 0;
......@@ -453,7 +480,7 @@
<li class="playlist-entry">
<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>
{/if}
......@@ -471,7 +498,7 @@
{/if}
</div>
<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>
{/if}
......@@ -479,12 +506,12 @@
<div class="error"><p>{error}</p></div>
{/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>
<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