convert playing state to paused

src/components/App.svelte

@@ -34,7 +34,7 @@
     import { onMount } from 'svelte'
     import Controls from '/components/Controls.svelte'
     import Viewer from '/components/Viewer.svelte'
-    import { playing, loading, entry as currentEntry, entries } from '/store.js'
+    import { entry as currentEntry, entries } from '/store.js'
 
     onMount(() => {
         const unsubscribe = entries.subscribe(async (xs) => {

src/components/Controls.svelte

@@ -19,7 +19,7 @@
 
     <div class="controls-group">
         <button on:click={() => entry.previous()}>⏮️</button>
-        <button on:click={() => $playing = !$playing}>{#if $playing}⏸️{:else}▶️{/if}</button>
+        <button on:click={() => $paused = !$paused}>{#if $paused}▶️{:else}⏸️{/if}</button>
         <button on:click={() => entry.next()}>⏭️</button>
     </div>
 
@@ -30,7 +30,7 @@
 </div>
 
 <script>
-    import { playing, volume, muted, entry } from '/store.js'
+    import { paused, volume, muted, entry } from '/store.js'
 </script>
 
 <style>

src/components/Viewer.svelte

@@ -1,27 +1,52 @@
 <div>
-    <div bind:this={element}></div>
+    <div>
+        <div bind:this={element}></div>
+    </div>
+
+    {#if duration}
+        {Math.round(currentTime)} / {Math.round(duration)}
+        <input type="range" min="0" max={duration} value={currentTime} disabled>
+    {/if}
+
 </div>
 
 <script>
-    import { onMount } from 'svelte'
+    import { onMount, onDestroy } from 'svelte'
     import { get } from 'svelte/store'
     import YoutubePlayer from 'yt-player'
-    import { entry, playing, muted, volume } from '/store.js'
+    import { entry, paused, muted, volume } from '/store.js'
 
     let element
     let player
 
+    let currentTime = null
+    let duration = null
+
     $: updateEntry($entry)
-    $: updatePlaying($playing)
+    $: updatePaused($paused)
     $: updateMuted($muted)
     $: updateVolume($volume)
 
-    const updateEntry = (entry) => {
+    const updateViewerDurationCallback = () => {
-        if (player && entry) player.load(entry.data.id, get(playing))
+        console.log('update')
+        if (player) {
+            duration = player.getDuration()
+            currentTime = player.getCurrentTime()
+        }
     }
 
-    const updatePlaying = (playing) => {
+    const updateEntry = (entry) => {
-        if (player) playing ? player.play() : player.pause()
+        if (player && entry) {
+            duration = null
+            currentTime = null
+            player.off('playing', updateViewerDurationCallback)
+
+            player.load(entry.data.id, !$paused)
+        }
+    }
+
+    const updatePaused = (paused) => {
+        if (player) paused ? player.pause() : player.play()
     }
 
     const updateMuted = (muted) => {
@@ -32,11 +57,13 @@
         if (player) player.setVolume(volume)
     }
 
+
+
     onMount(() => {
         player = new YoutubePlayer(element, {
             width: 300,
             height: 300,
-            autoplay: $playing,
+            autoplay: !$paused,
             controls: false,
             keyboard: false,
             fullscreen: false,
@@ -44,10 +71,26 @@
             related: false
         })
 
-        updatePlaying($playing)
+        updatePaused($paused)
         updateMuted($muted)
         updateVolume($volume)
 
+        // player.on('playing', () => {
+        //     $paused = false
+        // })
+
+        // player.on('paused', () => {
+        //     $paused = true
+        // })
+
+        player.on('unstarted', () => {
+            player.once('playing', updateViewerDurationCallback)
+        })
+
+        player.on('timeupdate', (time) => {
+            currentTime = time
+        })
+
         player.on('ended', () => entry.next())
 
         player.on('unplayable', (...args) => {
@@ -55,6 +98,12 @@
             entry.next()
         })
     })
+
+    onDestroy(() => {
+        if (player) {
+            player.destroy()
+        }
+    })
 </script>
 
 <style>

src/store.js

@@ -10,7 +10,7 @@ export const hashtags = writableLocalStorage('hashtags', [
     'pouetradio'
 ])
 
-export const playing = writable(true)
+export const paused = writable(false)
 export const muted = writableLocalStorage('muted', false)
 export const volume = writableLocalStorage('volume', 100)
 

src/util.js

@@ -62,8 +62,6 @@ async function statusToEntry(status) {
 async function urlToEntry(urlAsString) {
     const url = new URL(urlAsString)
 
-    console.log(url.hostname)
-
     if (['youtube.com', 'music.youtube.com'].includes(url.hostname) && url.searchParams.has('v')) {
         return await mkYoutubeEntry(url.searchParams.get('v'))
     } else if (url.hostname === 'youtu.be') {