add small player

src/assets/scss/5-modules/player-big.scss

@@ -2,10 +2,6 @@
 /* == Big player */
 /* ----------------------------------------------------------- */
 
-.playerBig {
-  margin-bottom: 6rem;
-}
-
 .playerBig__player {
   position: relative;
   overflow: hidden;

src/assets/scss/5-modules/player-cover.scss

@@ -0,0 +1,49 @@
+/* ----------------------------------------------------------- */
+/* == Player cover */
+/* ----------------------------------------------------------- */
+
+.playerCover {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border-radius: 4px;
+  background-color: #f2f2f2;
+}
+
+.playerCover::before {
+  display: block;
+  padding-bottom: 100%;
+  content: "";;
+}
+
+.playerCover__img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+}
+
+.playerCover__expand,
+.playerCover__expand:visited {
+  position: absolute;
+  right: .5rem;
+  bottom: .5rem;
+  padding: .5rem;
+  width: 2.4rem;
+  height: 2.4rem;
+  border: none;
+  border-radius: .3rem;
+  background: none;
+  color: rgba(#fff, .6);
+  font-size: 0;
+}
+
+.playerCover:hover .playerCover__expand,
+.playerCover:active .playerCover__expand,
+.playerCover:focus .playerCover__expand {
+  background-color: rgba($color-primary, .6);
+  color: #fff;
+}

src/assets/scss/5-modules/player-layout.scss

@@ -0,0 +1,65 @@
+/* ----------------------------------------------------------- */
+/* == Player layout */
+/* ----------------------------------------------------------- */
+
+/* Small player
+-------------------------------------------------------------- */
+
+.player {
+  display: grid;
+  margin-bottom: 5rem;
+
+  grid-template-columns: 1fr 2fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 0;
+}
+
+.playerBig__player,
+.playerMini {
+  grid-area: 1 / 1 / 4 / 2;
+}
+
+.playerTrack {
+  grid-area: 1 / 2 / 2 / 3;
+}
+
+.playerProgress {
+  grid-area: 2 / 2 / 3 / 3;
+}
+
+.controls {
+  grid-area: 3 / 2 / 4 / 3;
+}
+
+/* Big player
+-------------------------------------------------------------- */
+
+.playerBig {
+  display: grid;
+  margin-bottom: 6rem;
+
+  grid-template-columns: 1fr;
+  grid-row-gap: 0;
+  grid-column-gap: 0;
+}
+
+.playerBig .playerBig__player,
+.playerBig .playerMini {
+  grid-area: 1 / 1 / 2 / 2;
+}
+
+.playerBig .playerMini {
+  display: none;
+}
+
+.playerBig .playerTrack {
+  grid-area: 3 / 1 / 4 / 2;
+}
+
+.playerBig .playerProgress {
+  grid-area: 2 / 1 / 3 / 2;
+}
+
+.playerBig .controls {
+  grid-area: 4 / 1 / 5 / 2;
+}

src/assets/scss/5-modules/player-progress.scss

@@ -17,11 +17,12 @@
   position: absolute;
   width: 100%;
   height: .5rem;
-  border-radius: .2rem;
+  border-radius: .5rem;
   background-color: #e5e5e5;
 }
 
 .playerBig .playerProgress__progressBg {
+  border-radius: .2rem;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }
@@ -30,8 +31,8 @@
   position: absolute;
   width: 0;
   height: .5rem;
-  border-top-left-radius: .2rem;
-  border-bottom-left-radius: .2rem;
+  border-top-left-radius: .5rem;
+  border-bottom-left-radius: .5rem;
   background-color: $color-primary;
 }
 
@@ -50,7 +51,7 @@
   width: 100%;
   height: .5rem;
   border: none;
-  border-radius: .2rem;
+  border-radius: .5rem;
   background-color: transparent;
   box-shadow: none;
   cursor: pointer;

src/assets/scss/style.scss

@@ -63,6 +63,8 @@
 
 @import "5-modules/placeholder";
 @import "5-modules/player-big";
+@import "5-modules/player-layout";
+@import "5-modules/player-cover";
 @import "5-modules/player-progress";
 @import "5-modules/player-track";
 @import "5-modules/volume";

src/components/Viewer.svelte

@@ -1,5 +1,5 @@
-<div class="playerBig">
-    <div class="playerBig__player" class:placeholder={!ready}>
+<div class="player" class:playerBig={isBigPlayer}>
+    <div class="playerBig__player" class:placeholder={!ready} class:hidden={!isBigPlayer}>
         {#if $current}
         <YoutubePlayer
             id={$current ? $current.media.credentials.id : null}
@@ -14,9 +14,34 @@
             bind:seek={seek}
         ></YoutubePlayer>
         <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
-        <button class="playerBig__reduce" class:active={ready && $paused}>Reduce<IconReduce></IconReduce></button>
+        <button
+            class="playerBig__reduce"
+            class:active={ready && $paused}
+            on:click|stopPropagation={() => switchBigPlayer()}
+        >
+            Reduce<IconReduce></IconReduce>
+        </button>
         {/if}
     </div>
+    {#if !isBigPlayer}
+    <div class="playerMini">
+        <div class="playerCover" class:placeholder={$current}>
+            {#if $current}
+                <img 
+                    class="playerCover__img" 
+                    src={'https://img.youtube.com/vi/' + $current.media.credentials.id + '/mqdefault.jpg'}
+                    alt="cover"
+                >
+                <button
+                    class="playerCover__expand"
+                    aria-label="Expand player"
+                    title="Expand player"
+                    on:click={() => switchBigPlayer()}
+                ><IconExpand></IconExpand></button>
+            {/if}
+        </div>
+    </div>
+    {/if}
 
     <Progress
         duration={duration}
@@ -36,7 +61,7 @@
         <!--<button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>-->
     </div>
 
-    <Controls></Controls>
+    <Controls isBigPlayer={isBigPlayer}></Controls>
 </div>
 
 
@@ -45,6 +70,7 @@
     import { getContext } from 'svelte'
     import Controls from '/components/Controls.svelte'
     import IconReduce from '/components/icons/player/Reduce.svelte'
+    import IconExpand from '/components/icons/player/Expand.svelte'
     import IconHeart from '/components/icons/Heart.svelte'
     import YoutubePlayer from '/components/YoutubePlayer'
     import Progress from '/components/player/Progress'
@@ -61,6 +87,7 @@
     let currentTime = null
     let duration = null
     let seek = null
+    let isBigPlayer = false
 
     $: if (ended || error) {
         selectNext()
@@ -70,4 +97,12 @@
         seek(seconds, seekAhead)
         currentTime = seconds
     }
+
+    const switchBigPlayer = () => {
+        
+        isBigPlayer = !isBigPlayer
+        console.log('switch player');
+        console.log($current.media);
+        
+    }
 </script>

src/services/misc.js

@@ -88,7 +88,6 @@ export async function* tracksIterator(refererGenerator, cache) {
                     referer,
                     media: {
                         title: metadata.title,
-                        cover: metadata.thumbnail_url,
                         url: mediaUrl,
                         credentials: mediaCredentials
                     }