add current track infos

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;
 }

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;
+}

src/assets/scss/style.scss

@@ -63,6 +63,7 @@
 
 @import "5-modules/player-big";
 @import "5-modules/player-progress";
+@import "5-modules/player-track";
 
 
 // --------------------------------------------------------------

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'

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>

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 => {