better player bindings

src/components/Viewer.svelte

@@ -7,6 +7,7 @@
             class="playerBig__iframe"
             paused={$paused}
             volume={$volume}
+            on:loadstart={onLoadStart}
             on:canplay={onCanPlay}
             on:play={onPlay}
             on:pause={onPause}
@@ -113,20 +114,24 @@
     const loading = getContext('loading')
     const selectNext = getContext('selectNext')
 
-    let ready = null
+    let ready = false
     let currentTime = null
     let duration = null
 
+    const onLoadStart = () => {
+        ready = false
+    }
+
     const onCanPlay = () => {
         ready = true
     }
 
     const onPlay = () => {
-        // $paused = false
+        $paused = false
     }
 
     const onPause = () => {
-        // $paused = true
+        $paused = true
     }
 
     const onTimeUpdate = event => {

src/components/YoutubePlayer.svelte

@@ -5,18 +5,19 @@
     import { loadIframeApi, STATE } from '/services/youtube.js'
     import { queue } from '/services/misc.js'
 
-    let element
-    let player
-    let animationFrameId
-
-    let currentTime
-    let duration
-
     // input props
     export let id
     export let paused
     export let volume
 
+    let element
+    let player
+    let animationFrameId
+
+    let loaded = false
+    let currentTime = null
+    let duration = null
+
     const dispatch = createEventDispatcher()
 
     $: load(id)
@@ -28,9 +29,12 @@
     const { enqueue, run } = queue()
 
     export const load = (id) => enqueue((player) => {
+        loaded = false
         currentTime = null
         duration = null
 
+        dispatch('loadstart')
+
         player.cueVideoById(id)
 
         if (!paused) {
@@ -77,23 +81,30 @@
                     break
 
                 case STATE.PLAYING:
-                    dispatch('play')
-
                     const newDuration = player.getDuration()
 
                     if (duration !== newDuration) {
                         duration = newDuration
-                        dispatch('durationchange', duration)
+                    }
+
+                    if (loaded) {
+                        dispatch('play')
                     }
 
                     break
 
                 case STATE.PAUSED:
+                    if (loaded) {
                         dispatch('pause')
+                    }
 
                     break
 
                 case STATE.CUED:
+                    if (!loaded) {
+                        loaded = true
+                    }
+
                     dispatch('canplay')
 
                     break