2020-02-15 23:10:03 +01:00
|
|
|
<div class="playerBig">
|
2020-02-16 20:51:13 +01:00
|
|
|
<div class="playerBig__player" class:placeholder={!ready}>
|
|
|
|
{#if $current}
|
2020-01-18 17:57:02 +01:00
|
|
|
<YoutubePlayer
|
2020-02-15 23:12:53 +01:00
|
|
|
id={$current ? $current.media.credentials.id : null}
|
2020-02-15 20:13:33 +01:00
|
|
|
class="playerBig__iframe"
|
2020-01-18 17:57:02 +01:00
|
|
|
paused={$paused}
|
|
|
|
muted={$muted}
|
|
|
|
volume={$volume}
|
|
|
|
bind:ready
|
|
|
|
bind:ended
|
2020-01-18 18:21:07 +01:00
|
|
|
bind:error
|
2020-01-18 17:57:02 +01:00
|
|
|
bind:currentTime
|
|
|
|
bind:duration
|
|
|
|
bind:seek={seek}
|
|
|
|
></YoutubePlayer>
|
2020-02-16 20:51:13 +01:00
|
|
|
{/if}
|
2020-02-15 20:13:33 +01:00
|
|
|
<div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
|
2020-02-16 19:04:47 +01:00
|
|
|
<button class="playerBig__reduce">Reduce<IconReduce></IconReduce></button>
|
2020-01-10 15:16:48 +01:00
|
|
|
</div>
|
|
|
|
|
2020-02-15 23:10:03 +01:00
|
|
|
<Progress
|
|
|
|
duration={duration}
|
|
|
|
currentTime={currentTime}
|
2020-02-16 20:51:13 +01:00
|
|
|
ready={ready}
|
2020-02-15 23:10:03 +01:00
|
|
|
on:input={event => updateCurrentTime(event.target.value, false)}
|
|
|
|
on:change={event => updateCurrentTime(event.target.value, true)}
|
|
|
|
></Progress>
|
2020-02-16 19:54:55 +01:00
|
|
|
|
|
|
|
<div class="playerTrack">
|
|
|
|
<div class="playerTrack__infos">
|
2020-02-16 20:51:13 +01:00
|
|
|
<div class="playerTrack__name" class:placeholder={!$current}>{#if $current}{$current.title}{/if}</div>
|
|
|
|
<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-16 20:51:13 +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-01-10 03:02:46 +01:00
|
|
|
</div>
|
|
|
|
|
2020-02-16 19:54:55 +01:00
|
|
|
|
|
|
|
|
2020-01-10 03:02:46 +01:00
|
|
|
<script>
|
|
|
|
import { get } from 'svelte/store'
|
2020-02-16 19:04:47 +01:00
|
|
|
import IconReduce from '/components/icons/player/Reduce.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-01-16 20:10:40 +01:00
|
|
|
import { paused, muted, volume, current, selectNext, loading } from '/store.js'
|
2020-01-10 03:02:46 +01:00
|
|
|
|
2020-01-18 17:42:44 +01:00
|
|
|
let ready = null
|
|
|
|
let ended = null
|
2020-01-18 18:21:07 +01:00
|
|
|
let error = null
|
2020-01-10 15:16:48 +01:00
|
|
|
let currentTime = null
|
|
|
|
let duration = null
|
2020-01-18 17:42:44 +01:00
|
|
|
let seek = null
|
2020-01-13 14:39:00 +01:00
|
|
|
|
2020-01-18 18:21:07 +01:00
|
|
|
$: if (ended || error) {
|
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
|
|
|
|
|
|
|
const updateCurrentTime = (seconds, seekAhead) => {
|
|
|
|
seek(seconds, seekAhead)
|
|
|
|
currentTime = seconds
|
|
|
|
}
|
2020-01-10 03:02:46 +01:00
|
|
|
</script>
|