From 1c74227227e40822531f46187041fc736268b55a Mon Sep 17 00:00:00 2001
From: Tixie <admin@glitch.family>
Date: Sun, 16 Feb 2020 19:54:55 +0100
Subject: [PATCH] add current track infos

---
 .../scss/5-modules/player-progress.scss       |  5 +-
 src/assets/scss/5-modules/player-track.scss   | 77 +++++++++++++++++++
 src/assets/scss/style.scss                    |  1 +
 src/components/Viewer.svelte                  | 13 ++++
 src/components/icons/Heart.svelte             |  4 +
 src/services/misc.js                          |  6 +-
 6 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/scss/5-modules/player-track.scss
 create mode 100644 src/components/icons/Heart.svelte

diff --git a/src/assets/scss/5-modules/player-progress.scss b/src/assets/scss/5-modules/player-progress.scss
index ea39b3e..8c9da4a 100644
--- a/src/assets/scss/5-modules/player-progress.scss
+++ b/src/assets/scss/5-modules/player-progress.scss
@@ -2,10 +2,13 @@
 /* == Player progress module */
 /* ----------------------------------------------------------- */
 
+.playerBig .playerProgress {
+  margin-bottom: 3rem;
+}
+
 /* Progress bar
 -------------------------------------------------------------- */
 
-
 .playerProgress__progress {
   position: relative;
 }
diff --git a/src/assets/scss/5-modules/player-track.scss b/src/assets/scss/5-modules/player-track.scss
new file mode 100644
index 0000000..daccd0b
--- /dev/null
+++ b/src/assets/scss/5-modules/player-track.scss
@@ -0,0 +1,77 @@
+/* ----------------------------------------------------------- */
+/* == Player track infos module */
+/* ----------------------------------------------------------- */
+
+.playerTrack {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: .8rem;
+  max-width: 100%;
+}
+
+.playerBig .playerTrack {
+  margin-bottom: 3rem;
+}
+
+/* Infos
+-------------------------------------------------------------- */
+
+.playerTrack__infos {
+  flex-grow: 1;
+  min-width: 0;
+}
+
+.playerTrack__name {
+  display: -webkit-box;
+  display: box;
+  overflow: hidden;
+  margin-bottom: .8rem;
+  color: $color-secondary;
+  text-overflow: ellipsis;
+  font-weight: 600;
+  font-size: 1.8rem;
+  line-height: 1.16em;
+
+  -webkit-box-orient: vertical;
+  box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.playerTrack__referer {
+  overflow: hidden;
+  color: $color-grey-1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 1.4rem;
+}
+
+.playerTrack__username {
+  text-transform: capitalize;
+}
+
+/* Fav
+-------------------------------------------------------------- */
+
+.playerTrack__fav {
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin-top: -.9rem;
+  margin-right: -1rem;
+  margin-left: 1rem;
+  padding: 1rem;
+  border: none;
+  background-color: transparent;
+  color: rgba($color-primary, .8);
+  font-size: 0;
+}
+
+.playerTrack__fav:hover,
+.playerTrack__fav:active,
+.playerTrack__fav:focus {
+  color: $color-primary;
+}
+
+.playerTrack__fav svg .filled {
+  display: none;
+}
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index aeb1353..d4f2e3e 100755
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -63,6 +63,7 @@
 
 @import "5-modules/player-big";
 @import "5-modules/player-progress";
+@import "5-modules/player-track";
 
 
 // --------------------------------------------------------------
diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte
index a084357..14c0135 100644
--- a/src/components/Viewer.svelte
+++ b/src/components/Viewer.svelte
@@ -28,11 +28,24 @@
         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>
+        </div>
+        <button class="playerTrack__fav" aria-label="Fav"><IconHeart></IconHeart></button>
+    </div>
 </div>
 
+
+
 <script>
     import { get } from 'svelte/store'
     import IconReduce from '/components/icons/player/Reduce.svelte'
+    import IconHeart from '/components/icons/Heart.svelte'
     import YoutubePlayer from '/components/YoutubePlayer'
     import Progress from '/components/player/Progress'
     import { paused, muted, volume, current, selectNext, loading } from '/store.js'
diff --git a/src/components/icons/Heart.svelte b/src/components/icons/Heart.svelte
new file mode 100644
index 0000000..3034352
--- /dev/null
+++ b/src/components/icons/Heart.svelte
@@ -0,0 +1,4 @@
+<svg width="20" height="18" viewBox="0 0 20 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path class="filled" fill="currentColor" d="M5.32179 0C3.95217 0 2.58262 0.538718 1.54918 1.62483C-0.517727 3.79701 -0.515062 7.27775 1.54918 9.45138L9.43882 17.7605C9.58396 17.9135 9.78514 18 9.99551 18C10.2059 18 10.4071 17.9135 10.5522 17.7605C13.184 14.9945 15.818 12.2254 18.4499 9.45941C20.5167 7.28719 20.5167 3.80509 18.4499 1.63287C16.383 -0.539336 12.9715 -0.539382 10.9046 1.63287L9.99951 2.57399L9.09441 1.62483C8.06096 0.538723 6.6914 0 5.32179 0V0Z" />
+<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M1.54918 1.62483C2.58262 0.538718 3.95217 0 5.32179 0C6.6914 0 8.06096 0.538723 9.09441 1.62483L9.99951 2.57399L10.9046 1.63287C12.9715 -0.539382 16.383 -0.539336 18.4499 1.63287C20.5167 3.80509 20.5167 7.28719 18.4499 9.45941C17.1152 10.8621 15.78 12.2655 14.4449 13.669C13.1471 15.0331 11.8494 16.3972 10.5522 17.7605C10.4071 17.9135 10.2059 18 9.99551 18C9.78514 18 9.58396 17.9135 9.43882 17.7605L1.54918 9.45138C-0.515062 7.27775 -0.517727 3.79701 1.54918 1.62483ZM7.98909 2.69463C7.24045 1.90785 6.27789 1.51221 5.32181 1.51221C4.36574 1.51221 3.41118 1.90785 2.66256 2.69463C1.16531 4.26815 1.1661 6.81382 2.66256 8.3896L9.99953 16.1035C11.2189 14.822 12.4386 13.5414 13.6583 12.2608C14.8844 10.9734 16.1106 9.68601 17.3365 8.39763C18.8338 6.82407 18.8338 4.27623 17.3365 2.70268C15.8393 1.12912 13.5073 1.12908 12.01 2.70268L10.5602 4.23098C10.4151 4.3839 10.2139 4.47044 10.0035 4.47044C9.79318 4.47044 9.592 4.3839 9.44687 4.23098L7.98909 2.69463Z" />
+</svg>
diff --git a/src/services/misc.js b/src/services/misc.js
index 269157b..a8b8c91 100644
--- a/src/services/misc.js
+++ b/src/services/misc.js
@@ -158,7 +158,11 @@ const notKnown = cache => track => {
 
 const completeTrack = async track => {
     const metadata = await fetchMetadata(track.media)
-    return { ...track, title: metadata.title }
+    return {
+        ...track,
+        title: metadata.title,
+        cover: metadata.thumbnail_url
+    }
 }
 
 export const urlsToMedia = urls => {