From b0164d7a107d3eb48e27bde88beea98cfc60b8cd Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Sun, 16 Feb 2020 20:51:13 +0100
Subject: [PATCH] add animated placeholder to player

---
 src/assets/scss/5-modules/placeholder.scss    | 28 +++++++++++++++++++
 src/assets/scss/5-modules/player-big.scss     |  1 +
 .../scss/5-modules/player-progress.scss       |  4 +++
 src/assets/scss/5-modules/player-track.scss   |  2 ++
 src/assets/scss/style.scss                    |  1 +
 src/components/Radio.svelte                   |  6 ++--
 src/components/Viewer.svelte                  | 18 ++++++------
 src/components/player/Progress.svelte         |  5 ++--
 8 files changed, 49 insertions(+), 16 deletions(-)
 create mode 100644 src/assets/scss/5-modules/placeholder.scss

diff --git a/src/assets/scss/5-modules/placeholder.scss b/src/assets/scss/5-modules/placeholder.scss
new file mode 100644
index 0000000..c86ccc1
--- /dev/null
+++ b/src/assets/scss/5-modules/placeholder.scss
@@ -0,0 +1,28 @@
+/* ----------------------------------------------------------- */
+/* == Animated placeholder module */
+/* ----------------------------------------------------------- */
+
+@keyframes placeHolderShimmer {
+  0% {
+    background-position: -500px 0;
+  }
+
+  100% {
+    background-position: 500px 0;
+  }
+}
+
+.placeholder {
+  position: relative;
+  min-height: 1em;
+  background: #f2f2f2;
+  background: linear-gradient(to right, #eee 8%, rgb(223, 223, 223) 18%, #eee 33%);
+  background-size: 100rem 10.4rem;
+  color: transparent;
+  animation-name: placeHolderShimmer;
+  animation-duration: 1s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+
+  animation-fill-mode: forwards;
+}
diff --git a/src/assets/scss/5-modules/player-big.scss b/src/assets/scss/5-modules/player-big.scss
index 93e9226..6f9d061 100644
--- a/src/assets/scss/5-modules/player-big.scss
+++ b/src/assets/scss/5-modules/player-big.scss
@@ -7,6 +7,7 @@
   overflow: hidden;
   padding-bottom: calc(100% / (16/9));
   border-radius: .4rem .4rem 0 0;
+  background-color: #f2f2f2;
 }
 
 .playerBig__player > iframe {
diff --git a/src/assets/scss/5-modules/player-progress.scss b/src/assets/scss/5-modules/player-progress.scss
index 8c9da4a..f382b14 100644
--- a/src/assets/scss/5-modules/player-progress.scss
+++ b/src/assets/scss/5-modules/player-progress.scss
@@ -101,3 +101,7 @@
   color: $color-grey-1;
   font-size: 1.2rem;
 }
+
+.playerProgress__timecodeItem {
+  display: block;
+}
diff --git a/src/assets/scss/5-modules/player-track.scss b/src/assets/scss/5-modules/player-track.scss
index daccd0b..f07de11 100644
--- a/src/assets/scss/5-modules/player-track.scss
+++ b/src/assets/scss/5-modules/player-track.scss
@@ -26,6 +26,7 @@
   display: box;
   overflow: hidden;
   margin-bottom: .8rem;
+  width: 100%;
   color: $color-secondary;
   text-overflow: ellipsis;
   font-weight: 600;
@@ -40,6 +41,7 @@
 
 .playerTrack__referer {
   overflow: hidden;
+  width: 100%;
   color: $color-grey-1;
   text-overflow: ellipsis;
   white-space: nowrap;
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index d4f2e3e..42120f9 100755
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -61,6 +61,7 @@
 // == modules */
 // --------------------------------------------------------------
 
+@import "5-modules/placeholder";
 @import "5-modules/player-big";
 @import "5-modules/player-progress";
 @import "5-modules/player-track";
diff --git a/src/components/Radio.svelte b/src/components/Radio.svelte
index 178b3ad..99baf31 100644
--- a/src/components/Radio.svelte
+++ b/src/components/Radio.svelte
@@ -6,10 +6,8 @@
     <Header></Header>
 
     <section class="viewer">
-        {#if $current}
-            <Viewer></Viewer>
-            <Controls></Controls>
-        {/if}
+        <Viewer></Viewer>
+        <Controls></Controls>
     </section>
 
     <section class="queue">
diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte
index 14c0135..3cd989e 100644
--- a/src/components/Viewer.svelte
+++ b/src/components/Viewer.svelte
@@ -1,5 +1,6 @@
 <div class="playerBig">
-    <div class="playerBig__player">
+    <div class="playerBig__player" class:placeholder={!ready}>
+        {#if $current}
         <YoutubePlayer
             id={$current ? $current.media.credentials.id : null}
             class="playerBig__iframe"
@@ -13,30 +14,27 @@
             bind:duration
             bind:seek={seek}
         ></YoutubePlayer>
-
+        {/if}
         <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
         <button class="playerBig__reduce">Reduce<IconReduce></IconReduce></button>
     </div>
 
-    {#if !ready}
-        LOADING TRACK
-    {/if}
-
     <Progress
         duration={duration}
         currentTime={currentTime}
+        ready={ready}
         on:input={event => updateCurrentTime(event.target.value, false)}
         on:change={event => updateCurrentTime(event.target.value, true)}
     ></Progress>
 
     <div class="playerTrack">
         <div class="playerTrack__infos">
-            <div class="playerTrack__name">{$current.title}</div>
-            <div class="playerTrack__referer">
-                share by <span class="playerTrack__username">{$current.referer.username}</span>
+            <div class="playerTrack__name" class:placeholder={!$current}>{#if $current}{$current.title}{/if}</div>
+            <div class="playerTrack__referer" class:placeholder={!$current}>
+                {#if $current}shared by <span class="playerTrack__username">{$current.referer.username}</span>{/if}
             </div>
         </div>
-        <button class="playerTrack__fav" aria-label="Fav"><IconHeart></IconHeart></button>
+        <button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>
     </div>
 </div>
 
diff --git a/src/components/player/Progress.svelte b/src/components/player/Progress.svelte
index 082b40d..3df3372 100644
--- a/src/components/player/Progress.svelte
+++ b/src/components/player/Progress.svelte
@@ -14,8 +14,8 @@
         >
     </div>
     <div class="playerProgress__timecode">
-        <div class="playerProgress__timecodeItem">{currentTimeText}</div>
-        <div class="playerProgress__timecodeItem">{durationText}</div>
+        <div class="playerProgress__timecodeItem" class:placeholder={!ready}>{currentTimeText}</div>
+        <div class="playerProgress__timecodeItem" class:placeholder={!ready}>{durationText}</div>
     </div>
 </div>
 <script>
@@ -23,6 +23,7 @@
 
     export let duration
     export let currentTime
+    export let ready
 
     $: value = currentTime != null ? currentTime : 0
     $: max = duration != null ? duration : 100