add share large support

src/components/Radio.svelte

@@ -6,7 +6,7 @@
     <Header></Header>
 
     <section class="viewer">
-        <Viewer></Viewer>
+        <Viewer large={large}></Viewer>
     </section>
 
     <section class="queue">
@@ -28,6 +28,7 @@
     import DeepSet from '/services/deep-set.js'
 
     export let share
+    export let large
 
     const cache = new DeepSet()
 

src/components/Viewer.svelte

@@ -1,5 +1,5 @@
-<div class="player" class:playerBig={isBigPlayer}>
+<div class="player" class:playerBig={large}>
-    <div class="playerBig__player" class:placeholder={!ready} class:hidden={!isBigPlayer}>
+    <div class="playerBig__player" class:placeholder={!ready} class:hidden={!large}>
         {#if $current}
         <YoutubePlayer
             id={$current ? $current.media.credentials.id : null}
@@ -23,12 +23,12 @@
         </button>
         {/if}
     </div>
-    {#if !isBigPlayer}
+    {#if !large}
     <div class="playerMini">
         <div class="playerCover" class:placeholder={!$current}>
             {#if $current}
-                <img 
+                <img
-                    class="playerCover__img" 
+                    class="playerCover__img"
                     src={'https://img.youtube.com/vi/' + $current.media.credentials.id + '/mqdefault.jpg'}
                     alt="cover"
                 >
@@ -61,7 +61,7 @@
         <!--<button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>-->
     </div>
 
-    <Controls isBigPlayer={isBigPlayer}></Controls>
+    <Controls large={large}></Controls>
 </div>
 
 
@@ -75,6 +75,8 @@
     import YoutubePlayer from '/components/YoutubePlayer'
     import Progress from '/components/player/Progress'
 
+    export let large
+
     const paused = getContext('paused')
     const volume = getContext('volume')
     const current = getContext('current')
@@ -87,7 +89,6 @@
     let currentTime = null
     let duration = null
     let seek = null
-    let isBigPlayer = false
 
     $: if (ended || error) {
         selectNext()
@@ -99,10 +100,6 @@
     }
 
     const switchBigPlayer = () => {
-        
+        large = !large
-        isBigPlayer = !isBigPlayer
-        console.log('switch player');
-        console.log($current.media);
-        
     }
 </script>

src/routes/Home.svelte

@@ -1,4 +1,4 @@
-<Radio share={null} />
+<Radio share={null} large={false} />
 
 <script>
     import Radio from '/components/Radio.svelte'

src/routes/Share.svelte

@@ -1,4 +1,4 @@
-<Radio share={refererCredentials} />
+<Radio share={refererCredentials} large={large} />
 
 <script>
     import Radio from '/components/Radio.svelte'
@@ -6,6 +6,8 @@
     export let domain
     export let id
 
+    let large = (new URL(location)).searchParams.has('large')
+
     const refererCredentials = {
         type: 'mastodon',
         domain,