update youtube player bindings
This commit is contained in:
wryk
parent
4263abe3e4
commit
656d250852
@ -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>
|
||||
|
||||
@ -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
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@ -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>
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user