From 98fe8a405d81f73852720ba32cbd59f678ce9746 Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
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 @@
+<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 -1 0 80)" fill="#635776">
+    <rect width="10" height="20" rx="3">
+      <animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+    <rect x="15" width="10" height="80" rx="3">
+      <animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+    <rect x="30" width="10" height="50" rx="3">
+      <animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+    <rect x="45" width="10" height="30" rx="3">
+      <animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/>
+    </rect>
+  </g>
+</svg>
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 @@
-<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg" fill="#222">
+<svg width="55" height="80" viewBox="0 0 55 80" xmlns="http://www.w3.org/2000/svg">
   <g transform="matrix(1 0 0 -1 0 80)" fill="#635776">
-    <rect width="10" height="20" rx="3">
-      <animate attributeName="height" begin="0s" dur="4.3s" values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20" calcMode="linear" repeatCount="indefinite"/>
-    </rect>
-    <rect x="15" width="10" height="80" rx="3">
-      <animate attributeName="height" begin="0s" dur="2s" values="80;55;33;5;75;23;73;33;12;14;60;80" calcMode="linear" repeatCount="indefinite"/>
-    </rect>
-    <rect x="30" width="10" height="50" rx="3">
-      <animate attributeName="height" begin="0s" dur="1.4s" values="50;34;78;23;56;23;34;76;80;54;21;50" calcMode="linear" repeatCount="indefinite"/>
-    </rect>
-    <rect x="45" width="10" height="30" rx="3">
-      <animate attributeName="height" begin="0s" dur="2s" values="30;45;13;80;56;72;45;76;34;23;67;30" calcMode="linear" repeatCount="indefinite"/>
-    </rect>
+    <rect width="10" height="30" rx="3"/>
+    <rect x="15" width="10" height="20" rx="3"/>
+    <rect x="30" width="10" height="70" rx="3"/>
+    <rect x="45" width="10" height="50" rx="3"/>
   </g>
-</svg>
+</svg>
\ 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 @@
     <div class="queue__section">
         <div class="queue__sectionTitle">History</div>
         {#each history as track}
-            <div class="track" class:track--active={track === $current} on:click={() => select(track)}>
+            <div class="track" class:track--active={track === $current} class:track--playing={!$paused} on:click={() => select(track)}>
                 <div class="track__main">
                     <div class="track__title">{track.title}</div>
                     <div class="track__subtitle">
@@ -42,7 +42,6 @@
                 </div>
             </div>
         {/if}
-
     </div>
 </div>
 
@@ -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()
 </script>