Updated client for new trackservice structure.

contrib/aura-player/src/TrackService.svelte

 <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}