update youtube player bindings

src/components/Viewer.svelte

@@ -2,16 +2,18 @@
     <div class="playerBig__player" class:placeholder={!ready} class:hidden={!large}>
         {#if $current}
         <YoutubePlayer
-            id={$current ? $current.media.credentials.id : null}
+            bind:this={player}
+            id={$current.media.credentials.id}
             class="playerBig__iframe"
             paused={$paused}
             volume={$volume}
-            bind:ready
-            bind:ended
-            bind:error
-            bind:currentTime
-            bind:duration
-            bind:seek={seek}
+            on:canplay={onCanPlay}
+            on:play={onPlay}
+            on:pause={onPause}
+            on:timeupdate={onTimeUpdate}
+            on:durationchange={onDurationChange}
+            on:ended={onEnded}
+            on:error={onError}
         ></YoutubePlayer>
         <div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
         <button
@@ -28,7 +30,7 @@
             {#if $current}
                 <img
                     class="playerCover__img"
-                    src={'https://img.youtube.com/vi/' + $current.media.credentials.id + '/mqdefault.jpg'}
+                    src={$current.media.cover}
                     alt="cover"
                 >
                 <button
@@ -42,11 +44,11 @@
     </div>
 
     <Progress
-        duration={duration}
         currentTime={currentTime}
+        duration={duration}
         ready={ready}
-        on:input={event => updateCurrentTime(event.target.value, false)}
-        on:change={event => updateCurrentTime(event.target.value, true)}
+        on:input={event => seek(event.target.value, true)}
+        on:change={event => seek(event.target.value, true)}
     ></Progress>
 
     <div class="playerTrack">
@@ -81,8 +83,8 @@
                     duration={duration}
                     currentTime={currentTime}
                     ready={ready}
-                    on:input={event => updateCurrentTime(event.target.value, false)}
-                    on:change={event => updateCurrentTime(event.target.value, true)}
+                    on:input={event => seek(event.target.value, true)}
+                    on:change={event => seek(event.target.value, true)}
                 ></Progress>
                 <div class="playerSticky__referer">shared by <span class="playerTrack__username">{$current.referer.username}</div>
             </div>
@@ -103,6 +105,8 @@
     export let large
     export let sticky
 
+    let player
+
     const paused = getContext('paused')
     const volume = getContext('volume')
     const current = getContext('current')
@@ -110,23 +114,43 @@
     const selectNext = getContext('selectNext')
 
     let ready = null
-    let ended = null
-    let error = null
     let currentTime = null
     let duration = null
-    let seek = null
 
-    $: if (ended || error) {
+    const onCanPlay = () => {
+        ready = true
+    }
+
+    const onPlay = () => {
+        $paused = false
+    }
+
+    const onPause = () => {
+        $paused = true
+    }
+
+    const onTimeUpdate = event => {
+        currentTime = event.detail
+    }
+
+    const onDurationChange = event => {
+        duration = event.detail
+    }
+
+    const onEnded = () => {
         selectNext()
     }
 
-    const updateCurrentTime = (seconds, seekAhead) => {
-        seek(seconds, seekAhead)
-        currentTime = seconds
+    const onError = event => {
+        console.error(event.detail)
+        selectNext()
+    }
+
+    const seek = (seconds, seekAhead) => {
+        player.seek(seconds, seekAhead)
     }
 
     const switchBigPlayer = () => {
         large = !large
     }
-
 </script>

src/components/YoutubePlayer.svelte

@@ -1,7 +1,7 @@
 <div bind:this={element}></div>
 
 <script>
-    import { onMount, onDestroy } from 'svelte'
+    import { createEventDispatcher, onMount, onDestroy } from 'svelte'
     import { loadIframeApi, STATE } from '/services/youtube.js'
     import { queue } from '/services/misc.js'
 
@@ -9,48 +9,41 @@
     let player
     let animationFrameId
 
-    // output props
-    export let ready = false
-    export let ended = false
-    export let error = false
-    export let duration = null
-    export let currentTime = null
+    let currentTime
+    let duration
 
     // input props
     export let id
     export let paused
     export let volume
 
+    const dispatch = createEventDispatcher()
+
     $: load(id)
-    $: setPaused(paused)
+    $: paused ? pause() : play()
     $: setVolume(volume)
+    $: dispatch('timeupdate', currentTime)
+    $: dispatch('durationchange', duration)
 
     const { enqueue, run } = queue()
 
     export const load = (id) => enqueue((player) => {
-        ready = false
-        ended = false
-        error = false
         currentTime = null
         duration = null
 
-        if (paused) {
-            player.cueVideoById(id)
-        } else {
-            player.loadVideoById(id)
+        player.cueVideoById(id)
+
+        if (!paused) {
+            player.playVideo()
         }
     })
 
-    const setPaused = paused => enqueue(player => {
-        if (paused) {
-            if (player.getPlayerState() === STATE.PLAYING) {
-                player.pauseVideo()
-            }
-        } else {
-            if (player.getPlayerState() !== STATE.PLAYING) {
-                player.playVideo()
-            }
-        }
+    export const play = () => enqueue((player) => {
+        player.playVideo()
+    })
+
+    export const pause = () => enqueue((player) => {
+        player.pauseVideo()
     })
 
     const setVolume = volume => enqueue(player => {
@@ -61,68 +54,82 @@
         player.seekTo(seconds, allowSeekAhead)
     })
 
-    onMount(() => {
-        loadIframeApi().then(api => {
-            element.id = Math.random().toString(16).slice(2, 8)
+    onMount(async () => {
+        const api = await loadIframeApi()
 
-            const onReady = ({ target: player }) => {
-                if (player.isMuted()) {
-                    player.unMute()
-                }
+        element.id = Math.random().toString(16).slice(2, 8)
 
-                run(player)
+        const onReady = ({ target: player }) => {
+            if (player.isMuted()) {
+                player.unMute()
             }
 
-            const onStateChange = ({ data: state, target: player }) => {
-                switch (state) {
-                    case STATE.UNSTARTED:
-                        ready = true
-                        break
+            run(player)
+        }
 
-                    case STATE.PLAYING:
-                        if (duration === null) {
-                            duration = player.getDuration()
-                        }
+        const onStateChange = ({ data: state, target: player }) => {
+            switch (state) {
+                case STATE.UNSTARTED:
+                    break
 
-                        break
+                case STATE.ENDED:
+                    dispatch('ended')
+                    break
 
-                    case STATE.ENDED:
-                        ended = true
-                        break
-                }
+                case STATE.PLAYING:
+                    dispatch('play')
 
-                if (state === STATE.PLAYING) {
-                    const step = () => {
-                        currentTime = player.getCurrentTime()
-                        animationFrameId = requestAnimationFrame(step)
+                    const newDuration = player.getDuration()
+
+                    if (duration !== newDuration) {
+                        duration = newDuration
+                        dispatch('durationchange', duration)
                     }
 
+                    break
+
+                case STATE.PAUSED:
+                    dispatch('pause')
+
+                    break
+
+                case STATE.CUED:
+                    dispatch('canplay')
+
+                    break
+            }
+
+            if (state === STATE.PLAYING) {
+                const step = () => {
+                    currentTime = player.getCurrentTime()
                     animationFrameId = requestAnimationFrame(step)
-                } else {
-                    if (animationFrameId) {
-                        cancelAnimationFrame(animationFrameId)
-                    }
+                }
+
+                step()
+            } else {
+                if (animationFrameId) {
+                    cancelAnimationFrame(animationFrameId)
                 }
             }
+        }
 
-            const onError = () => {
-                error = true
+        const onError = error => {
+            dispatch('error', error)
+        }
+
+        player = new api.Player(element.id, {
+            playerVars: {
+                autoplay: 0,
+                controls: 0,
+                enablejsapi: 1,
+                modestbranding: 1,
+                rel: 0
+            },
+            events: {
+                onReady,
+                onStateChange,
+                onError
             }
-
-            player = new api.Player(element.id, {
-                playerVars: {
-                    autoplay: 0,
-                    controls: 0,
-                    enablejsapi: 1,
-                    modestbranding: 1,
-                    rel: 0
-                },
-                events: {
-                    onReady,
-                    onStateChange,
-                    onError
-                }
-            })
         })
     })
 

src/components/player/Progress.svelte

@@ -10,7 +10,7 @@
             value={value}
             on:input
             on:change
-            disabled={currentTime === null || duration === null}
+            disabled={disabled}
         >
     </div>
     <div class="playerProgress__timecode">
@@ -21,13 +21,16 @@
 <script>
     import { secondsToElapsedTime } from '/services/misc.js'
 
-    export let duration
-    export let currentTime
     export let ready
+    export let currentTime
+    export let duration
 
     $: value = currentTime != null ? currentTime : 0
-    $: max = duration != null ? duration : 100
-    $: currentPercent = currentTime != null ? (currentTime / duration) * 100 : 0
+    $: max = duration != null ? duration : 0
+    $: disabled = currentTime == null || duration == null
+
     $: currentTimeText = currentTime != null ? secondsToElapsedTime(currentTime) : '--:--'
     $: durationText = duration != null ? secondsToElapsedTime(duration) : '--:--'
+
+    $: currentPercent = currentTime != null ? (currentTime / duration) * 100 : 0
 </script>

src/services/misc.js

@@ -25,6 +25,7 @@ export const queue = () => {
 
     const enqueue = f => {
         promise = promise.then(tap(f))
+        return promise
     }
 
     return { enqueue, run: deferred.resolve }
@@ -89,6 +90,7 @@ export async function* tracksIterator(refererGenerator, cache) {
                     media: {
                         title: metadata.title,
                         url: mediaUrl,
+                        cover: `https://img.youtube.com/vi/${mediaCredentials.id}/mqdefault.jpg`,
                         credentials: mediaCredentials
                     }
                 }