octo
/
mastoradio
forked from Mastodon/mastoradio-la-radio-di-mastodon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update store and views for new ui

This commit is contained in:
wryk 2020-01-20 04:49:38 +01:00
parent c27804bcb0
commit 133bd05558
4 changed files with 75 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/App.svelte
View File

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

49
src/components/Queue.svelte
View File

@ -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>{track.metadata.title}</div>
<div>
<b>{track.status.account.username} <small style="color: dimgray">{track.status.account.acct}</small></b>
{track.data.url}
</div>
</div>
<div class="title">{track.metadata.title}</div>
<div class="user">by {track.status.account.acct}</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(() => {
enqueue().then(() => {
$: if ($queue.length === 0 && $index === null && $next !== null) {
$queue = [$next]
$next = null
$index = 0
})
})
$: if ($index !== null && $index === $queue.length - 1) {
enqueue()
}
</script>
<style>
.entry {
display: flex;
border: 1px solid black;
}
.entry:hover {
background-color: rgb(219, 184, 219);
padding: 1em 2em;
}
.entry.active {

2
src/components/Viewer.svelte
View File

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

67
src/store.js
View File

@ -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 () => {
export const paused = writable(true)
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) {
queue.update($queue => [...$queue, newTrack])
next.set(newTrack)
}
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)
}
}
}