initial commit

src/routes/streams/[stream_id]/StreamPage.svelte

@@ -0,0 +1,53 @@
+<script>
+    import { currentStream, currentSongIndex } from '$lib/stores.js';
+    import {} from 'svelte';
+    import { jumpToTrack } from './Player.svelte';
+
+    function prettyPrintTime(s) {
+        return new Date(s * 1000).toISOString().slice(11, 19);
+    }
+</script>
+
+<div class="description-bubble">
+    {$currentStream.description === '' ? 'No description available.' : $currentStream.description}
+</div>
+
+<div>
+    <table>
+        <tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
+        {#each $currentStream.tracks as track, i}
+            <tr on:click={() => jumpToTrack(track[0])} class:current={i == $currentSongIndex}>
+                <td>{prettyPrintTime(track[0])}</td>
+                <td>{track[1]}</td>
+                <td>{track[2]}</td>
+            </tr>
+        {/each}
+    </table>
+</div>
+
+<style>
+    .current {
+        background-color: gray;
+    }
+    .description-bubble {
+        position: relative;
+        background-color: #fff;
+        border: 1px solid #ccc;
+        padding: 10px;
+        margin: 10px;
+        border-radius: 5px;
+        width: 200px;
+    }
+
+    .description-bubble::after {
+        content: '';
+        position: absolute;
+        border-style: solid;
+        border-width: 10px 0 10px 10px;
+        border-color: transparent transparent transparent #ccc;
+        top: 0;
+        right: -10px;
+        width: 0;
+        height: 0;
+    }
+</style>