more controls, metadata

2020-01-10 03:02:46 +01:00
parent 3783f0fa3a
commit 7e4038386e
12 changed files with 461 additions and 251 deletions
--- a/src/components/App.svelte
+++ b/src/components/App.svelte
@ -0,0 +1,122 @@
+<main class="app">
+    <header class="header">
+        <h1>Eldritch Radio</h1>
+    </header>
+
+    <section class="viewer">
+        <Viewer></Viewer>
+    </section>
+
+    <section class="queue">
+        <div>
+            {#each $entries as entry}
+                <div class="entry" class:active={entry === $currentEntry} on:click={() => $currentEntry = entry}>
+                    <div>{entry.metadata.title}</div>
+                    <b>{entry.status.account.username} <small>{entry.status.account.acct}</small></b>
+                    <small>{entry.tags}</small>
+                </div>
+            {/each}
+        </div>
+
+        <button on:click={() => entries.load(5)}>LOAD MOAR</button>
+    </section>
+
+    <section class="controls">
+        <Controls></Controls>
+    </section>
+</main>
+
+
+<script>
+    import { onMount } from 'svelte'
+    import Controls from '/components/Controls.svelte'
+    import Viewer from '/components/Viewer.svelte'
+    import { playing, loading, entry as currentEntry, entries } from '/store.js'
+
+    onMount(() => {
+        const unsub = entries.subscribe(async (xs) => {
+            if (xs.length) {
+                const [firstEntry] = xs
+                currentEntry.set(firstEntry)
+                unsub()
+            }
+
+        })
+
+        entries.load(7)
+    })
+</script>
+
+<style>
+    .app {
+        min-width: 100%;
+        min-height: 100%;
+
+        display: grid;
+
+        grid-template-columns: 1fr;
+
+        grid-template-areas:
+            "header"
+            "viewer"
+            "queue"
+            "controls";
+    }
+
+    .header {
+        grid-area: header;
+        position: sticky;
+        top: 0;
+        background: blueviolet;
+        color: whitesmoke;
+
+        padding: 0.4rem 0.8rem;
+    }
+
+    .header h1 {
+        margin: 0;
+    }
+
+    .viewer {
+        grid-area: viewer;
+    }
+
+    .queue {
+        grid-area: queue;
+    }
+
+    .controls {
+        grid-area: controls;
+        width: 100%;
+
+        position: sticky;
+        bottom: 0;
+
+        background: whitesmoke;
+    }
+
+    @media (min-width: 992px) {
+        .app {
+            grid-template-columns: 2fr 3fr;
+            grid-template-rows: auto 1fr auto;
+
+            grid-template-areas:
+                "header queue"
+                "viewer queue"
+                "controls controls"
+        }
+    }
+
+    .entry {
+        cursor: pointer;
+        border: 1px solid black;
+    }
+
+    .entry:hover {
+        background-color: rgb(219, 184, 219);
+    }
+
+    .entry.active {
+        background-color: plum;
+    }
+</style>