From d64b384203e42abbc42f9f046080e450dbca177b Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Tue, 3 Mar 2020 22:09:45 +0100
Subject: [PATCH] add smooth entering transition on tracks

---
 src/assets/scss/5-modules/track.scss | 17 +++++++++++++++++
 src/components/Queue.svelte          |  4 ++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/5-modules/track.scss b/src/assets/scss/5-modules/track.scss
index 617b73e..b9899d3 100644
--- a/src/assets/scss/5-modules/track.scss
+++ b/src/assets/scss/5-modules/track.scss
@@ -7,6 +7,20 @@
   display: flex;
   margin-right: -1rem;
   padding: 1rem 0;
+  transform-origin: center;
+  animation: trackIn .3s;
+}
+
+@keyframes trackIn {
+  from {
+    opacity: 0;
+    transform: scale(.7, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
 .track--active::before {
@@ -34,6 +48,7 @@
 
 .track__title {
   overflow: hidden;
+  min-height: 1.14em;
   color: $color-secondary;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -47,8 +62,10 @@
 
 .track__subtitle {
   margin-top: .2rem;
+  min-height: 1.5em;
   color: $color-grey-1;
   font-size: 1.2rem;
+  line-height: 1.5em;
 }
 
 .track__username {
diff --git a/src/components/Queue.svelte b/src/components/Queue.svelte
index d403aed..a7ac631 100644
--- a/src/components/Queue.svelte
+++ b/src/components/Queue.svelte
@@ -27,8 +27,8 @@
 
     <div class="queue__section">
         <div class="queue__sectionTitle">History</div>
-        {#each history as track}
-            <div class="track" class:track--active={track === $current} class:track--playing={!$paused}>
+        {#each history as track, i (track.referer.url)}
+            <div class="track track--history" class:track--active={track === $current} class:track--playing={!$paused}>
                 <div class="track__main" on:click={() => select(track)}>
                     <div class="track__title">{track.media.title}</div>
                     <div class="track__subtitle">