Skip to content
Snippets Groups Projects
Commit a83e2d72 authored by David Trattnig's avatar David Trattnig
Browse files

Layout, dark mode, configuration options.

parent 26709ef5
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
contrib/aura-clock/src/StudioClock.svelte
+ 148
− 31
View file @ a83e2d72
<script> <script>
import { onMount } from 'svelte'; import { onMount } from 'svelte';
export let apiUrl = "http://localhost:3333/api/v1"; export let apiUrl = "http://localhost:3333/api/v1";
export let stationName = "Studio Clock";
export let stationLogo = "https://gitlab.servus.at/aura/meta/-/raw/master/images/aura-logo.png";
export let stationLogoSize = "100px";
export let noScheduleMessage = "Nothing scheduled!";
let time = new Date(); let time = new Date();
let queryCurrent = "/clock"; let queryCurrent = "/clock";
...@@ -40,9 +43,15 @@ ...@@ -40,9 +43,15 @@
async function fetchApi(query) { async function fetchApi(query) {
let response = await fetch(apiUrl+query); let response;
let data; let data;
try {
response = await fetch(apiUrl+query);
} catch {
throw new Error("Cannot connect to Engine!");
}
try { try {
data = await response.json(); data = await response.json();
} catch(e) { } catch(e) {
...@@ -65,7 +74,7 @@ ...@@ -65,7 +74,7 @@
let t = time - Date.parse(info.track_start); let t = time - Date.parse(info.track_start);
t = parseInt(t/1000); t = parseInt(t/1000);
timeLeft = info.track.duration - t - 4; timeLeft = info.track.duration - t - 3; /* FIXME improve timings in coordination with scheduler/trackservice/LQS */
console.log("Current Data", info); console.log("Current Data", info);
} }
return ""; return "";
...@@ -99,7 +108,7 @@ ...@@ -99,7 +108,7 @@
function displayShowName(show) { function displayShowName(show) {
let name = "" let name = ""
if (show == null || show.name == null) { if (show == null || show.name == null) {
name = '<span class="error">No show scheduled!</span>'; name = '<span class="error">'+noScheduleMessage+'</span>';
} else { } else {
name = show.name; name = show.name;
} }
...@@ -138,6 +147,8 @@ ...@@ -138,6 +147,8 @@
function isActive(entry, currentTrack) { function isActive(entry, currentTrack) {
if (currentTrack != null && entry.id == currentTrack.id) { if (currentTrack != null && entry.id == currentTrack.id) {
// Scroll to current playlist entry
location.hash = "#current-playlist-entry";
return true; return true;
} }
return false; return false;
...@@ -148,13 +159,36 @@ ...@@ -148,13 +159,36 @@
</script> </script>
<style> <style>
#station-header {
width: 100%;
height: 50px;
/* margin: 20px 100px; */
padding: 40px 100px;
}
#station-name {
margin: 0;
font-size: 3em;
line-height: 80px;
}
#station-logo {
align-content: left;
text-align: right;
margin: 0 40px 0 10px;
opacity: 0.5;
filter: invert(100%);
}
#studio-clock { #studio-clock {
width: calc(100% - 200px); width: calc(100% - 200px);
margin:100px; height: calc(100% - 500px);
margin: 100px;
display: -webkit-flex; display: -webkit-flex;
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
border: 2px solid #333; /* border: 2px solid #333; */
flex-direction: row; flex-direction: row;
} }
...@@ -165,7 +199,7 @@ ...@@ -165,7 +199,7 @@
#right-column { #right-column {
width: 70%; width: 70%;
padding: 25px; padding: 25px 25px 25px 50px;
} }
#current-schedule, #current-schedule,
...@@ -173,20 +207,66 @@ ...@@ -173,20 +207,66 @@
margin: 0 0 40px 20px; margin: 0 0 40px 20px;
} }
#next-schedule {
background-color:rgb(24, 24, 24);
margin-right: 20px;
padding: 12px;
}
#current-schedule .schedule-title {
color: #ccc;
font-size: 3.5em;
}
#next-schedule .schedule-title {
color: gray !important;
font-size: 2em;
}
#playlist { #playlist {
border: 2px solid #333; border: 2px solid #333;
margin: 20px 20px 40px 20px; margin: 20px 20px 40px 20px;
padding: 10px; padding: 10px;
height: calc(80% - 100px);
overflow-y: auto;
scroll-behavior: smooth;
background-color: #111;
display: flex;
align-items: center;
}
#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);
} }
.playlist-entry { .playlist-entry {
font-size: 1.4em; font-size: 1.5em;
padding-left: 53px; padding-left: 53px;
} }
#current-track * {
font-size: 1.75em;
/* margin: 20% 0; */
}
.play-icon, .play-icon,
.track-time-left { .track-time-left {
margin: 12px; margin: 25px 50px;
} }
.is-active { .is-active {
...@@ -194,38 +274,53 @@ ...@@ -194,38 +274,53 @@
padding-left: 0; padding-left: 0;
} }
.is-active::before { .is-active .track-title::before {
content: "\00a0\00a0▶\00a0\00a0"; content: "\00a0\00a0▶\00a0\00a0\00a0";
font-size: larger; font-size: larger;
color: green; color: green;
} }
.is-active .track-time-left {
color: rgb(43, 241, 36);
background-color: #222;
padding: 5px 15px;
}
.error {
font-size: 1.3em;
color:red;
height:100%;
display : flex;
align-items : center;
justify-content: center;
}
svg { svg {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.clock-face { .clock-face {
stroke: #333; stroke: rgb(66, 66, 66);
fill: white; fill: black;
} }
.minor { .minor {
stroke: #999; stroke: rgb(132, 132, 132);
stroke-width: 0.5; stroke-width: 0.5;
} }
.major { .major {
stroke: #333; stroke: rgb(162, 162, 162);
stroke-width: 1; stroke-width: 1;
} }
.hour { .hour {
stroke: #333; stroke: rgba(255, 255, 255, 0.705);
} }
.minute { .minute {
stroke: #666; stroke: rgba(255, 255, 255, 0.705);
} }
.second, .second-counterweight { .second, .second-counterweight {
...@@ -233,7 +328,7 @@ ...@@ -233,7 +328,7 @@
} }
.second-counterweight { .second-counterweight {
stroke-width: 3; /* stroke-width: 3; */
} }
footer { footer {
...@@ -241,9 +336,30 @@ ...@@ -241,9 +336,30 @@
text-align: center; text-align: center;
font-size: 0.8em; font-size: 0.8em;
color: gray; color: gray;
opacity: 0.5;
} }
footer a {
color: gray;
text-decoration: underline;
}
footer #aura-logo {
/* opacity: 0.5; */
filter: invert(100%);
width: 75px;
margin: 0 0 20px 0;
}
</style> </style>
<div id="station-header">
<img id="station-logo" src="{stationLogo}" style="width:{stationLogoSize}" alt="Radio Station" align="left" />
<h1 id="station-name">{stationName}</h1>
</div>
<div id="studio-clock"> <div id="studio-clock">
<div id="left-column" class="column"> <div id="left-column" class="column">
<svg viewBox='-50 -50 100 100'> <svg viewBox='-50 -50 100 100'>
...@@ -306,9 +422,9 @@ ...@@ -306,9 +422,9 @@
<div id="current-schedule"> <div id="current-schedule">
<h1 class="schedule-title">{@html displayShowName(value.current.show)} {displayShowSchedule(value.current)}</h1> <h1 class="schedule-title">{@html displayShowName(value.current.show)} {displayShowSchedule(value.current)}</h1>
<div class="schedule-details"> <!-- <div class="schedule-details">
<b>Type:</b> {value.current.type}, <b>Host:</b> {value.current.host}</div> <b>Type:</b> {value.current.show.type}, <b>Host:</b> {value.current.show.host}</div>-->
</div> </div>
<div id="playlist"> <div id="playlist">
{#if value.current.playlist} {#if value.current.playlist}
...@@ -316,7 +432,7 @@ ...@@ -316,7 +432,7 @@
{#each value.current.playlist.entries as entry, index} {#each value.current.playlist.entries as entry, index}
{#if isActive(entry, value.track)} {#if isActive(entry, value.track)}
<li class="playlist-entry is-active"> <li id="current-playlist-entry" class="playlist-entry is-active">
<!-- <span class="play-icon">&#9654;</span> --> <!-- <span class="play-icon">&#9654;</span> -->
<span class="track-title">{displayTitle(entry)}</span> <span class="track-title">{displayTitle(entry)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span> <span class="track-time-left">({formatTime(timeLeft)})</span>
...@@ -335,28 +451,29 @@ ...@@ -335,28 +451,29 @@
</ol> </ol>
{:else} {:else}
<div id="current-track"> <div id="current-track" class="is-active">
<h2> <h2>
<span class="track-title is-active">{displayTitle(value.track)}</span> <span class="track-title">{displayTitle(value.track)}</span>
<span class="track-time-left">({formatTime(timeLeft)})</span> <span class="track-time-left">{formatTime(timeLeft)}</span>
</h2> </h2>
</div> </div>
{/if} {/if}
</div> </div>
<div id="next-schedule"> <div id="next-schedule">
<h2 class="schedule-title">Next: {@html displayShowName(value.next.show)} {displayShowSchedule(value)}</h2> <h3 class="schedule-title">Next: {@html displayShowName(value.next.show)} {displayShowSchedule(value)}</h3>
<div class="schedule-details">
<b>Type:</b> {value.next.type}, <b>Host:</b> {value.next.host}
</div>
</div> </div>
{/if} {/if}
{:catch error} {:catch error}
<p style="color:red">{error}</p> <div class="error"><p>{error}</p></div>
{/await} {/await}
</div> </div>
</div> </div>
<footer>Studio Clock is powered by <a href="https://gitlab.servus.at/autoradio">Aura Engine</a></footer> <footer>
\ No newline at end of file <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
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