cyber-mawonaj/oki-podcast-reader
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor bindings + include start_at option

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-24 14:43:33 +00:00
parent d7d81ce732
commit 62497fe06b
5 changed files with 150 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/audio-loader.svelte
+78 -59
View File
@@ -4,73 +4,92 @@
audio_current_time,
audio_element,
audio_metadata,
audio_muted,
audio_playback_rate,
audio_src,
audio_start_at,
audio_volume,
} from '$lib/context/audio-internals';
import type { PlayerElement } from '$lib/types/types';
import { isBoolean, isNumber } from '$pkg/type-guards';
let element: PlayerElement;
let currentTime = 0;
let muted = false;
let currentTime = $audio_start_at;
let volume = $audio_volume;
$: src = $audio_src;
let duration = 0;
let ended = true;
let muted = false;
let paused = false;
let playbackRate = 1;
// Update stores based on bindings
$: audio_element.set(element);
$: audio_current_time.set(currentTime);
$: audio_metadata.update((x) => ({ ...x, muted }));
$: audio_metadata.update((x) => ({ ...x, duration, ended, paused }));
// Update bindings based on stores
$: volume = $audio_volume;
$: muted = $audio_muted;
$: playbackRate = $audio_playback_rate;
$: currentTime = $audio_start_at;
</script>
{#key src}
<audio
bind:this={element}
{src}
autoplay={$audio_autoplay}
bind:currentTime
bind:muted
preload="metadata"
controls={false}
on:canplay={(e) => false && console.log('canplay', e)}
on:canplaythrough={(e) => false && console.log('canplaythrough', e)}
on:timeupdate={(e) => false && console.log('progress', e)}
on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)}
on:suspend={(e) => false && console.log('suspend', e)}
on:seeked={(e) => false && console.log('seeked', e)}
on:play={(e) => false && console.log('play', e)}
on:waiting={(e) => console.log('waiting', e)}
on:stalled={(e) => console.log('stalled', e)}
on:load={(e) => console.log('load', e)}
on:emptied={() => {
// TODO: reset player state
// console.log('emptied', e);
}}
on:loadeddata={() => {
audio_metadata.update((m) => ({ ...m, loading: false }));
}}
on:loadstart={() => {
audio_metadata.update((m) => ({ ...m, loading: true }));
}}
on:playing={(e) => {
// @ts-expect-error event is not fully typed
const is_paused = e.target.paused;
if (!isBoolean(is_paused)) return;
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
}}
on:pause={(e) => {
// @ts-expect-error event is not fully typed
const is_paused = e.target.paused;
if (!isBoolean(is_paused)) return;
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
}}
on:ratechange={(e) => {
// @ts-expect-error event is not fully typed
const playbackRate = e.target.playbackRate;
if (!isNumber(playbackRate)) return;
audio_metadata.update((m) => ({ ...m, playbackRate }));
}}
on:durationchange={(e) => {
// @ts-expect-error event is not fully typed
const duration = e.target?.duration;
if (!isNumber(duration)) return;
audio_metadata.update((m) => ({ ...m, duration }));
}}
/>
{/key}
<audio
bind:this={element}
src={$audio_src}
autoplay={$audio_autoplay}
bind:currentTime
bind:muted
bind:duration
bind:paused
bind:playbackRate
bind:volume
bind:ended
preload="metadata"
controls={false}
on:canplay={(e) => false && console.log('canplay', e)}
on:canplaythrough={(e) => false && console.log('canplaythrough', e)}
on:timeupdate={(e) => false && console.log('progress', e)}
on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)}
on:suspend={(e) => false && console.log('suspend', e)}
on:seeked={(e) => false && console.log('seeked', e)}
on:play={(e) => false && console.log('play', e)}
on:waiting={(e) => console.log('waiting', e)}
on:stalled={(e) => console.log('stalled', e)}
on:load={(e) => console.log('load', e)}
on:emptied={() => {
// TODO: reset player state
// console.log('emptied', e);
}}
on:loadeddata={() => {
audio_metadata.update((m) => ({ ...m, loading: false }));
}}
on:loadstart={() => {
audio_metadata.update((m) => ({ ...m, loading: true }));
}}
on:playing={(e) => {
// @ts-expect-error event is not fully typed
const is_paused = e.target.paused;
if (!isBoolean(is_paused)) return;
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
}}
on:pause={(e) => {
// @ts-expect-error event is not fully typed
const is_paused = e.target.paused;
if (!isBoolean(is_paused)) return;
audio_metadata.update((m) => ({ ...m, paused: is_paused }));
}}
on:ratechange={(e) => {
// @ts-expect-error event is not fully typed
const playbackRate = e.target.playbackRate;
if (!isNumber(playbackRate)) return;
audio_metadata.update((m) => ({ ...m, playbackRate }));
}}
on:durationchange={(e) => {
// @ts-expect-error event is not fully typed
const duration = e.target?.duration;
if (!isNumber(duration)) return;
audio_metadata.update((m) => ({ ...m, duration }));
}}
/>