add sticky header

src/assets/scss/4-base/_04-main.scss

@@ -3,7 +3,7 @@
 /* ----------------------------------------------------------- */
 
 body {
-  background-color: #f9f9f7;
+  background-color: $color-bg;
   color: $color-dark-text;
   font-family: $fontstack1;
 

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

@@ -0,0 +1,122 @@
+/* ----------------------------------------------------------- */
+/* == Player sticky */
+/* ----------------------------------------------------------- */
+
+.playerSticky {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  padding: .7rem 0;
+  width: 100%;
+  border-bottom: .1rem solid rgba($color-primary, .15);
+  background-color: $color-bg;
+  transition: .15s;
+  transform: translateY(0);
+}
+
+.playerSticky.hidden {
+  display: block;
+  transform: translateY(-103%);
+}
+
+.playerSticky > .container {
+  position: relative;
+  display: flex;
+}
+
+/* Cover
+-------------------------------------------------------------- */
+
+.playerSticky__cover {
+  position: relative;
+  flex-shrink: 0;
+  overflow: hidden;
+  margin-right: 2rem;
+  width: 4.6rem;
+  height: 4.6rem;
+  border-radius: .3rem;
+  background: rgba($color-primary, .15);
+}
+
+.playerSticky__coverImg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  object-fit: cover;
+}
+
+/* Controls
+-------------------------------------------------------------- */
+
+.playerSticky .controls {
+  flex-shrink: 0;
+  margin-right: 3rem;
+}
+
+.playerSticky .controls__menu {
+  display: none;
+}
+
+.playerSticky .controls__volume {
+  position: absolute;
+  right: .7rem;
+}
+
+.playerSticky .controls__prevnext {
+  padding: .5rem;
+}
+
+.playerSticky .controls__playpause {
+  margin: 0 .5rem;
+}
+
+.playerSticky .controls__playpause svg {
+  width: 3rem;
+  height: 3rem;
+}
+
+/* Infos part
+-------------------------------------------------------------- */
+
+.playerSticky__infos {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex-grow: 1;
+  margin-right: 7.3rem;
+}
+
+.playerSticky__track {
+  margin-top: .5rem;
+  color: $color-secondary;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.2em;
+}
+
+.playerSticky__referer {
+  font-size: .9rem;
+  line-height: 1.2em;
+}
+
+.playerSticky .playerProgress {
+  margin: .5rem 0;
+}
+
+.playerSticky .playerProgress__timecode {
+  display: none;
+}
+
+.playerSticky .playerProgress__progressBg,
+.playerSticky .playerProgress__progressBgProgress,
+.playerSticky .playerProgress__progressInput {
+  height: .2rem;
+}
+
+.playerSticky .playerProgress__progressInput::range-lower {
+  height: .2rem;
+}

src/assets/scss/_colors.scss

@@ -9,6 +9,7 @@ $color-primary: #635776;
 $color-secondary: #453959;
 $color-tertiary: #312334;
 $color-info: #2185d0;
+$color-bg: #f9f9f7;
 
 // texts
 // --------------------------------------------------------------

src/assets/scss/style.scss

@@ -64,6 +64,7 @@
 @import "5-modules/placeholder";
 @import "5-modules/player-big";
 @import "5-modules/player-layout";
+@import "5-modules/player-sticky";
 @import "5-modules/player-cover";
 @import "5-modules/player-progress";
 @import "5-modules/player-track";

src/components/Radio.svelte

@@ -5,8 +5,10 @@
 <div class="app container">
     <Header></Header>
 
-    <section class="viewer">
-        <Viewer large={large}></Viewer>
+    <section class="viewer" bind:this={viewerEl}>
+        <div class="container">
+            <Viewer large={large} sticky={sticky}></Viewer>
+        </div>
     </section>
 
     <section class="queue">
@@ -18,7 +20,7 @@
 </div>
 
 <script>
-    import { setContext } from 'svelte'
+    import { setContext, onMount } from 'svelte'
     import Header from '/components/layout/Header.svelte'
     import Footer from '/components/layout/Footer.svelte'
     import Queue from '/components/Queue.svelte'
@@ -29,6 +31,8 @@
 
     export let share
     export let large
+    let viewerEl
+    let sticky
 
     const cache = new DeepSet()
 
@@ -135,4 +139,15 @@
     $: if ($queue.length === 1 && $next != null && $current == null) {
         select($next)
     }
+
+    onMount(() => {
+        const stickyObserver = new IntersectionObserver( 
+            ([e]) => {
+                sticky = (e.intersectionRatio === 0) 
+            },
+            {threshold: [0]}
+        )
+
+        stickyObserver.observe(viewerEl)
+    })
 </script>

src/components/Viewer.svelte

@@ -23,8 +23,7 @@
         </button>
         {/if}
     </div>
-    {#if !large}
-    <div class="playerMini">
+    <div class="playerMini" class:hidden="{large}">
         <div class="playerCover" class:placeholder={!$current}>
             {#if $current}
                 <img
@@ -41,7 +40,6 @@
             {/if}
         </div>
     </div>
-    {/if}
 
     <Progress
         duration={duration}
@@ -65,6 +63,33 @@
 </div>
 
 
+<!-- Sticky player -->
+<div class="playerSticky" class:hidden={!sticky}>
+    <div class="container">
+        {#if $current}
+            <div class="playerSticky__cover">
+                <img
+                    class="playerSticky__coverImg"
+                    src={'https://img.youtube.com/vi/' + $current.media.credentials.id + '/mqdefault.jpg'}
+                    alt="cover"
+                >
+            </div>
+            <Controls large={false}></Controls>
+            <div class="playerSticky__infos">
+                <div class="playerSticky__track">{$current.media.title}</div>
+                <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="playerSticky__referer">shared by <span class="playerTrack__username">{$current.referer.username}</div>
+            </div>
+        {/if}
+    </div>
+</div>
+
 
 <script>
     import { getContext } from 'svelte'
@@ -76,6 +101,7 @@
     import Progress from '/components/player/Progress'
 
     export let large
+    export let sticky
 
     const paused = getContext('paused')
     const volume = getContext('volume')
@@ -102,4 +128,5 @@
     const switchBigPlayer = () => {
         large = !large
     }
+
 </script>