update store and views for new ui

src/components/App.svelte

@@ -6,17 +6,12 @@
     <section class="viewer">
         {#if $current}
             <Viewer></Viewer>
+            <Controls></Controls>
         {/if}
     </section>
 
     <section class="queue">
         <Queue></Queue>
-
-
-    </section>
-
-    <section class="controls">
-        <Controls></Controls>
     </section>
 </main>
 
@@ -33,59 +28,5 @@
     .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"
-        }
     }
 </style>

src/components/Queue.svelte

@@ -1,5 +1,19 @@
 <div>
-    {#each $queue as track, i}
+    <h6>PLAY NEXT</h6>
+    {#if $next}
+        <div class="entry">
+            <div class="title">{$next.metadata.title}</div>
+            <div class="user">by {$next.status.account.acct}</div>
+        </div>
+    {/if}
+
+    {#if $enqueueing}
+        LOADING NEXT
+    {/if}
+
+
+    <h6>HISTORY</h6>
+    {#each $queue as track, i (track.status.id)}
         <div class="entry" class:active={i === $index}>
             <div>
                 <button on:click={() => toggle(i)}>
@@ -15,25 +29,15 @@
                 </button>
             </div>
 
-            <div>
+            <div class="title">{track.metadata.title}</div>
-                <div>{track.metadata.title}</div>
+            <div class="user">by {track.status.account.acct}</div>
-
-                <div>
-                    <b>{track.status.account.username} <small style="color: dimgray">{track.status.account.acct}</small></b>
-                    {track.data.url}
-                </div>
-            </div>
         </div>
     {/each}
-
-    {#if $enqueueing}
-        LOADING ...
-    {/if}
 </div>
 
 <script>
     import { onMount } from 'svelte'
-    import { index, queue, paused, enqueueing, enqueue, loading } from '/store.js'
+    import { next, enqueueing, queue, index, paused, loading, canNext, selectNext } from '/store.js'
 
     const toggle = i => {
         if (i === $index) {
@@ -44,25 +48,16 @@
         }
     }
 
-    onMount(() => {
+    $: if ($queue.length === 0 && $index === null && $next !== null) {
-        enqueue().then(() => {
+        $queue = [$next]
-            $index = 0
+        $next = null
-        })
+        $index = 0
-    })
-
-    $: if ($index !== null && $index === $queue.length - 1) {
-        enqueue()
     }
 </script>
 
 <style>
     .entry {
-        display: flex;
+        padding: 1em 2em;
-        border: 1px solid black;
-    }
-
-    .entry:hover {
-        background-color: rgb(219, 184, 219);
     }
 
     .entry.active {

src/components/Viewer.svelte

@@ -1,5 +1,5 @@
 <div>
-    <div class="embed-container" class:hidden={!ready}>
+    <div class="embed-container">
         <YoutubePlayer
             id={$current ? $current.data.id : null}
             paused={$paused}

src/store.js

@@ -12,40 +12,63 @@ export const hashtags = writableLocalStorage('hashtags', [
     'pouetradio'
 ])
 
-export const paused = writable(true)
-export const muted = writableLocalStorage('muted', false)
-export const volume = writableLocalStorage('volume', 100)
-
-export const index = writable(null)
-export const queue = writable([])
-export const enqueueing = writable(false)
-export const current = derived([queue, index], ([$queue, $index]) => $queue[$index])
-
-export const canPrevious = derived([index], ([$index]) => $index !== null && $index > 0)
-export const canNext = derived([index, queue], ([$index, $queue]) => $index !== null && $index < $queue.length - 1)
-
-export const loading = writable(false)
-
-
-
-
-
-export const selectPrevious = () => { if (get(canPrevious)) index.update($index => $index - 1) }
-export const selectNext = () => { if (get(canNext)) index.update($index => $index + 1) }
 
 
 const tracksIterator = mkTracksIterator(hashtagIterator(get(domain), get(hashtags)[0]))
 
-export const enqueue = async () => {
-    if (!get(enqueueing)) {
-        enqueueing.set(true)
 
-        const { value: newTrack } = await tracksIterator.next()
 
-        if (newTrack) {
+export const paused = writable(true)
-            queue.update($queue => [...$queue, newTrack])
+export const muted = writableLocalStorage('muted', false)
+export const volume = writableLocalStorage('volume', 100)
+
+export const next = writable(null)
+export const enqueueing = writable(false)
+
+export const queue = writable([])
+export const index = writable(null)
+export const current = derived([queue, index], ([$queue, $index]) => $queue[$index])
+
+export const canPrevious = derived([index, queue], ([$index, $queue]) => $index !== null && $index < $queue.length - 1)
+export const canNext = derived([index, next], ([$index, $next]) => $index !== null && ($index > 0 || $next !== null))
+
+export const loading = writable(false)
+
+next.subscribe(async $next => {
+    if ($next === null) {
+        if (!get(enqueueing)) {
+            enqueueing.set(true)
+
+            const { value: newTrack } = await tracksIterator.next()
+
+            if (newTrack) {
+                next.set(newTrack)
+            }
+
+            enqueueing.set(false)
         }
+    }
+})
 
-        enqueueing.set(false)
+export const selectPrevious = () => {
+    if (get(canPrevious)) {
+        index.update($index => $index + 1)
+    }
+}
+
+export const selectNext = () => {
+    if (get(canNext)) {
+        const $index = get(index)
+
+        if ($index === 0) {
+            queue.update($queue => {
+                const $next = get(next)
+                next.set(null)
+
+                return [$next, ...$queue]
+            })
+        } else {
+            index.update($index => $index - 1)
+        }
     }
 }