From 98fe8a405d81f73852720ba32cbd59f678ce9746 Mon Sep 17 00:00:00 2001 From: Tixie Date: Sat, 22 Feb 2020 00:13:04 +0100 Subject: [PATCH] animated track playbars only when paying --- src/assets/img/playbar-animate.svg | 16 ++++++++++++++++ src/assets/img/playbar.svg | 20 ++++++-------------- src/assets/scss/5-modules/track.scss | 4 ++++ src/components/Queue.svelte | 4 ++-- 4 files changed, 28 insertions(+), 16 deletions(-) create mode 100644 src/assets/img/playbar-animate.svg diff --git a/src/assets/img/playbar-animate.svg b/src/assets/img/playbar-animate.svg new file mode 100644 index 0000000..223ae6a --- /dev/null +++ b/src/assets/img/playbar-animate.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/assets/img/playbar.svg b/src/assets/img/playbar.svg index 2a9fb57..c553a2d 100644 --- a/src/assets/img/playbar.svg +++ b/src/assets/img/playbar.svg @@ -1,16 +1,8 @@ - + - - - - - - - - - - - - + + + + - + \ No newline at end of file diff --git a/src/assets/scss/5-modules/track.scss b/src/assets/scss/5-modules/track.scss index 641da36..2ceb015 100644 --- a/src/assets/scss/5-modules/track.scss +++ b/src/assets/scss/5-modules/track.scss @@ -21,6 +21,10 @@ content: ""; } +.track--playing::before { + background-image: url("/assets/img/playbar-animate.svg"); +} + .track__main { flex-grow: 1; min-width: 0; diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte index b67a9e1..470b9a3 100644 --- a/src/components/Queue.svelte +++ b/src/components/Queue.svelte @@ -23,7 +23,7 @@
History
{#each history as track} -
select(track)}> +
select(track)}>
{track.title}
@@ -42,7 +42,6 @@
{/if} -
@@ -56,6 +55,7 @@ const next = getContext('next') const queue = getContext('queue') const select = getContext('select') + const paused = getContext('paused') $: history = $queue.filter(x => x !== $next).reverse()