From 7c05830637c33e201f008fd0acea5ad1a693e1d7 Mon Sep 17 00:00:00 2001
From: David Trattnig <david.trattnig@o94.at>
Date: Thu, 5 Mar 2020 16:38:00 +0100
Subject: [PATCH] Updated client for new trackservice structure.
---
contrib/aura-player/src/TrackService.svelte | 54 ++++++++++++++++-----
1 file changed, 43 insertions(+), 11 deletions(-)
diff --git a/contrib/aura-player/src/TrackService.svelte b/contrib/aura-player/src/TrackService.svelte
index 66c99cca..10e43c72 100644
--- a/contrib/aura-player/src/TrackService.svelte
+++ b/contrib/aura-player/src/TrackService.svelte
@@ -1,7 +1,11 @@
<style>
.card {
margin-bottom: 38px;
- }
+ }
+
+ card.active-track {
+ border: 3px solid greenyellow;
+ }
</style>
<script>
@@ -9,9 +13,14 @@ import { fly } from 'svelte/transition';
export let data;
let currentDate = "";
-function getDate(track) {
- if (currentDate != track.track_start) {
- currentDate = track.track_start;
+function getDate(item) {
+ let track_date = "";
+ if (item.track_start != null)
+ track_date = item.track_start.split('T')[0];
+
+ if (currentDate != track_date) {
+
+ currentDate = track_date;
let date = new Date(currentDate);
let options = {
weekday: "long", year: "numeric", month: "short",
@@ -23,8 +32,8 @@ function getDate(track) {
}
}
-function getTime(track) {
- let date = new Date(track.track_start);
+function getTime(item) {
+ let date = new Date(item.track_start);
let options = {
hour: "2-digit", minute: "2-digit"
@@ -32,15 +41,38 @@ function getTime(track) {
return date.toLocaleTimeString("de-at", options);
}
-</script>
+function isActive(item) {
+ if (item.track.duration != null && parseInt(item.track.duration) > 0) {
+ let startDate = new Date(item.track_start);
+ let endDate = new Date(startDate.getTime() + item.track.duration*1000);
+ let now = new Date();
+
+ if (startDate < now < endDate) {
+ return "active-track";
+ } else {
+ return "";
+ }
+ } else {
+ return "";
+ }
+}
+
+function printDuration(item) {
+ if (item.track.duration != null && parseInt(item.track.duration) > 0) {
+ return "("+item.track.duration+")";
+ } else {
+ return "";
+ }
+}
+</script>
-{#each data as track}
- <h4>{getDate(track)}</h4>
- <div class="card mt-5" transition:fly="{{ y: 150, duration: 500 }}">
+{#each data as item}
+ <h4>{getDate(item)}</h4>
+ <div class="card mt-5 {isActive(item)}" transition:fly="{{ y: 150, duration: 500 }}">
<div class="card-body">
- <h5 class="card-title"><b>{getTime(track)}</b> | {track.artist} - {track.title} ({track.duration})</h5>
+ <h5 class="card-title"><b>{getTime(item)}</b> | {item.track.artist} - {item.track.title} {printDuration(item)}</h5>
</div>
</div>
{/each}
--
GitLab