2020-02-23 01:42:09 +01:00
|
|
|
<div class="player" class:playerBig={large}>
|
|
|
|
<div class="playerBig__player" class:placeholder={!ready} class:hidden={!large}>
|
2020-02-16 20:51:13 +01:00
|
|
|
{#if $current}
|
2020-01-18 17:57:02 +01:00
|
|
|
<YoutubePlayer
|
2020-02-24 23:18:51 +01:00
|
|
|
bind:this={player}
|
|
|
|
id={$current.media.credentials.id}
|
2020-02-15 20:13:33 +01:00
|
|
|
class="playerBig__iframe"
|
2020-01-18 17:57:02 +01:00
|
|
|
paused={$paused}
|
|
|
|
volume={$volume}
|
2020-02-24 23:18:51 +01:00
|
|
|
on:canplay={onCanPlay}
|
|
|
|
on:play={onPlay}
|
|
|
|
on:pause={onPause}
|
|
|
|
on:timeupdate={onTimeUpdate}
|
|
|
|
on:durationchange={onDurationChange}
|
|
|
|
on:ended={onEnded}
|
|
|
|
on:error={onError}
|
2020-01-18 17:57:02 +01:00
|
|
|
></YoutubePlayer>
|
2020-02-15 20:13:33 +01:00
|
|
|
<div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
|
2020-02-22 19:59:54 +01:00
|
|
|
<button
|
|
|
|
class="playerBig__reduce"
|
|
|
|
class:active={ready && $paused}
|
|
|
|
on:click|stopPropagation={() => switchBigPlayer()}
|
|
|
|
>
|
|
|
|
Reduce<IconReduce></IconReduce>
|
|
|
|
</button>
|
2020-02-16 20:53:29 +01:00
|
|
|
{/if}
|
2020-01-10 15:16:48 +01:00
|
|
|
</div>
|
2020-02-23 23:18:37 +01:00
|
|
|
<div class="playerMini" class:hidden="{large}">
|
2020-02-22 21:04:45 +01:00
|
|
|
<div class="playerCover" class:placeholder={!$current}>
|
2020-02-22 19:59:54 +01:00
|
|
|
{#if $current}
|
2020-02-23 01:42:09 +01:00
|
|
|
<img
|
|
|
|
class="playerCover__img"
|
2020-02-24 23:18:51 +01:00
|
|
|
src={$current.media.cover}
|
2020-02-22 19:59:54 +01:00
|
|
|
alt="cover"
|
|
|
|
>
|
|
|
|
<button
|
|
|
|
class="playerCover__expand"
|
|
|
|
aria-label="Expand player"
|
|
|
|
title="Expand player"
|
|
|
|
on:click={() => switchBigPlayer()}
|
|
|
|
><IconExpand></IconExpand></button>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</div>
|
2020-01-10 15:16:48 +01:00
|
|
|
|
2020-02-15 23:10:03 +01:00
|
|
|
<Progress
|
|
|
|
currentTime={currentTime}
|
2020-02-24 23:18:51 +01:00
|
|
|
duration={duration}
|
2020-02-16 20:51:13 +01:00
|
|
|
ready={ready}
|
2020-02-24 23:18:51 +01:00
|
|
|
on:input={event => seek(event.target.value, true)}
|
|
|
|
on:change={event => seek(event.target.value, true)}
|
2020-02-15 23:10:03 +01:00
|
|
|
></Progress>
|
2020-02-16 19:54:55 +01:00
|
|
|
|
|
|
|
<div class="playerTrack">
|
|
|
|
<div class="playerTrack__infos">
|
2020-02-22 03:39:15 +01:00
|
|
|
<div class="playerTrack__name" class:placeholder={!$current}>{#if $current}{$current.media.title}{/if}</div>
|
2020-02-16 20:51:13 +01:00
|
|
|
<div class="playerTrack__referer" class:placeholder={!$current}>
|
|
|
|
{#if $current}shared by <span class="playerTrack__username">{$current.referer.username}</span>{/if}
|
2020-02-16 19:54:55 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-02-22 00:15:52 +01:00
|
|
|
<!--<button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>-->
|
2020-02-16 19:54:55 +01:00
|
|
|
</div>
|
2020-02-16 23:39:41 +01:00
|
|
|
|
2020-02-23 01:42:09 +01:00
|
|
|
<Controls large={large}></Controls>
|
2020-01-10 03:02:46 +01:00
|
|
|
</div>
|
|
|
|
|
2020-02-16 19:54:55 +01:00
|
|
|
|
2020-02-23 23:18:37 +01:00
|
|
|
<!-- Sticky player -->
|
|
|
|
<div class="playerSticky" class:hidden={!sticky}>
|
|
|
|
<div class="container">
|
|
|
|
{#if $current}
|
|
|
|
<div class="playerSticky__cover">
|
|
|
|
<img
|
|
|
|
class="playerSticky__coverImg"
|
|
|
|
src={'https://img.youtube.com/vi/' + $current.media.credentials.id + '/mqdefault.jpg'}
|
|
|
|
alt="cover"
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
<Controls large={false}></Controls>
|
|
|
|
<div class="playerSticky__infos">
|
|
|
|
<div class="playerSticky__track">{$current.media.title}</div>
|
|
|
|
<Progress
|
|
|
|
duration={duration}
|
|
|
|
currentTime={currentTime}
|
|
|
|
ready={ready}
|
2020-02-24 23:18:51 +01:00
|
|
|
on:input={event => seek(event.target.value, true)}
|
|
|
|
on:change={event => seek(event.target.value, true)}
|
2020-02-23 23:18:37 +01:00
|
|
|
></Progress>
|
|
|
|
<div class="playerSticky__referer">shared by <span class="playerTrack__username">{$current.referer.username}</div>
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
2020-02-16 19:54:55 +01:00
|
|
|
|
2020-01-10 03:02:46 +01:00
|
|
|
<script>
|
2020-02-20 15:55:22 +01:00
|
|
|
import { getContext } from 'svelte'
|
2020-02-16 23:39:41 +01:00
|
|
|
import Controls from '/components/Controls.svelte'
|
2020-02-16 19:04:47 +01:00
|
|
|
import IconReduce from '/components/icons/player/Reduce.svelte'
|
2020-02-22 19:59:54 +01:00
|
|
|
import IconExpand from '/components/icons/player/Expand.svelte'
|
2020-02-16 19:54:55 +01:00
|
|
|
import IconHeart from '/components/icons/Heart.svelte'
|
2020-01-18 17:42:44 +01:00
|
|
|
import YoutubePlayer from '/components/YoutubePlayer'
|
2020-02-15 23:10:03 +01:00
|
|
|
import Progress from '/components/player/Progress'
|
2020-02-20 15:55:22 +01:00
|
|
|
|
2020-02-23 01:42:09 +01:00
|
|
|
export let large
|
2020-02-23 23:18:37 +01:00
|
|
|
export let sticky
|
2020-02-23 01:42:09 +01:00
|
|
|
|
2020-02-24 23:18:51 +01:00
|
|
|
let player
|
|
|
|
|
2020-02-20 15:55:22 +01:00
|
|
|
const paused = getContext('paused')
|
|
|
|
const volume = getContext('volume')
|
|
|
|
const current = getContext('current')
|
|
|
|
const loading = getContext('loading')
|
|
|
|
const selectNext = getContext('selectNext')
|
2020-01-10 03:02:46 +01:00
|
|
|
|
2020-01-18 17:42:44 +01:00
|
|
|
let ready = null
|
2020-01-10 15:16:48 +01:00
|
|
|
let currentTime = null
|
|
|
|
let duration = null
|
2020-01-13 14:39:00 +01:00
|
|
|
|
2020-02-24 23:18:51 +01:00
|
|
|
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 = () => {
|
2020-01-18 17:42:44 +01:00
|
|
|
selectNext()
|
2020-01-10 03:42:02 +01:00
|
|
|
}
|
2020-01-20 03:26:18 +01:00
|
|
|
|
2020-02-24 23:18:51 +01:00
|
|
|
const onError = event => {
|
|
|
|
console.error(event.detail)
|
|
|
|
selectNext()
|
|
|
|
}
|
|
|
|
|
|
|
|
const seek = (seconds, seekAhead) => {
|
|
|
|
player.seek(seconds, seekAhead)
|
2020-01-20 03:26:18 +01:00
|
|
|
}
|
2020-02-22 19:59:54 +01:00
|
|
|
|
|
|
|
const switchBigPlayer = () => {
|
2020-02-23 01:42:09 +01:00
|
|
|
large = !large
|
2020-02-22 19:59:54 +01:00
|
|
|
}
|
2020-01-10 03:02:46 +01:00
|
|
|
</script>
|