@@ -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)}
>
shared by {$current.referer.username}
@@ -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
}
-
diff --git a/src/components/YoutubePlayer.svelte b/src/components/YoutubePlayer.svelte
index 0a2e8be..feb9c56 100644
--- a/src/components/YoutubePlayer.svelte
+++ b/src/components/YoutubePlayer.svelte
@@ -1,7 +1,7 @@