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

extract queue into a component

This commit is contained in:
wryk 2020-01-13 14:39:22 +01:00
parent bc16948f16
commit d9b4bf98df
2 changed files with 68 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/components/App.svelte
View File

@ -8,32 +8,9 @@
</section>
<section class="queue">
<div>
{#each $entries as entry}
<div class="entry" class:active={entry === $currentEntry}>
<div>
<button on:click={() => toggleEntry(entry)}>
{#if entry === $currentEntry && !$paused}
⏸️
{:else}
▶️
{/if}
</button>
</div>
<Queue></Queue>
<div>
<div>{entry.metadata.title}</div>
<div>
<b>{entry.status.account.username} <small style="color: dimgray">{entry.status.account.acct}</small></b>
{entry.data.url}
</div>
</div>
</div>
{/each}
</div>
<button on:click={() => entries.load(5)}>LOAD 5 MOAR</button>
</section>
<section class="controls">
@ -43,30 +20,9 @@
<script>
import { onMount } from 'svelte'
import Controls from '/components/Controls.svelte'
import Queue from '/components/Queue.svelte'
import Viewer from '/components/Viewer.svelte'
import { paused, entry as currentEntry, entries } from '/store.js'
const toggleEntry = (entry) => {
if (entry !== $currentEntry) {
$currentEntry = entry
} else {
$paused = !$paused
}
}
onMount(() => {
const unsubscribe = entries.subscribe(async (xs) => {
if (xs.length) {
const [firstEntry] = xs
currentEntry.set(firstEntry)
unsubscribe()
}
})
entries.load(1)
})
</script>
<style>
@ -128,17 +84,4 @@
"controls controls"
}
}
.entry {
display: flex;
border: 1px solid black;
}
.entry:hover {
background-color: rgb(219, 184, 219);
}
.entry.active {
background-color: plum;
}
</style>

66
src/components/Queue.svelte Normal file
View File

@ -0,0 +1,66 @@
<div>
{#each $entries as entry}
<div class="entry" class:active={entry === $currentEntry}>
<div>
<button on:click={() => toggleEntry(entry)}>
{#if entry === $currentEntry && !$paused}
⏸️
{:else}
▶️
{/if}
</button>
</div>
<div>
<div>{entry.metadata.title}</div>
<div>
<b>{entry.status.account.username} <small style="color: dimgray">{entry.status.account.acct}</small></b>
{entry.data.url}
</div>
</div>
</div>
{/each}
<button on:click={() => entries.load(5)}>LOAD 5 MOAR</button>
</div>
<script>
import { onMount } from 'svelte'
import { paused, entry as currentEntry, entries } from '/store.js'
const toggleEntry = (entry) => {
if (entry !== $currentEntry) {
$currentEntry = entry
} else {
$paused = !$paused
}
}
onMount(() => {
const unsubscribe = entries.subscribe(async (xs) => {
if (xs.length) {
const [firstEntry] = xs
currentEntry.set(firstEntry)
unsubscribe()
}
})
entries.load(1)
})
</script>
<style>
.entry {
display: flex;
border: 1px solid black;
}
.entry:hover {
background-color: rgb(219, 184, 219);
}
.entry.active {
background-color: plum;
}
</style>