initial commit

2023-06-30 16:22:08 +02:00
commit 78f3961b11
39 changed files with 5136 additions and 0 deletions
@@ -0,0 +1,62 @@
+<script>
+    import { goto } from '$app/navigation';
+    export let streams;
+
+    function formatSecondsToHms(s) {
+        s = Number(s);
+        var h = Math.floor(s / 3600);
+        var m = Math.ceil((s % 3600) / 60);
+
+        var hDisplay = h > 0 ? h + (h == 1 ? ' hr' : ' hrs') + (m > 0 ? ', ' : '') : '';
+        var mDisplay = m > 0 ? m + (m == 1 ? ' min' : ' mins') : '';
+        return hDisplay + mDisplay;
+    }
+
+    function formatDate(unix_timestamp) {
+        const date = new Date(unix_timestamp);
+        const formattedDate = date.toISOString().split('T')[0];
+        return formattedDate;
+    }
+</script>
+
+<h1>streams</h1>
+
+<div>
+    <ul class="stream-list">
+        {#each streams as stream}
+            <li class="stream-item" id="stream-{stream['id']}">
+                <button
+                    class="stream-item-button"
+                    on:click={() => goto('/streams/' + stream['id'])}
+                >
+                    <span class="stream-item-title">{stream['title']}</span>
+                    <span class="stream-item-date">{formatDate(stream['stream_date'])}</span>
+                    <span class="stream-item-length"
+                        >{formatSecondsToHms(stream['length_seconds'])}</span
+                    >
+                    <span class="stream-item-data">{JSON.stringify(stream)}</span>
+                </button>
+            </li>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    .stream-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+        border: 1px solid black;
+    }
+
+    .stream-item {
+        width: 100%;
+        overflow-wrap: anywhere;
+        border-bottom: 1px solid black;
+    }
+
+    .stream-item-button {
+        border-radius: 0;
+        border: none;
+    }
+</style>