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_current_time,
audio_element, audio_element,
audio_metadata, audio_metadata,
audio_muted,
audio_playback_rate,
audio_src, audio_src,
audio_start_at,
audio_volume,
} from '$lib/context/audio-internals'; } from '$lib/context/audio-internals';
import type { PlayerElement } from '$lib/types/types'; import type { PlayerElement } from '$lib/types/types';
import { isBoolean, isNumber } from '$pkg/type-guards'; import { isBoolean, isNumber } from '$pkg/type-guards';
let element: PlayerElement; let element: PlayerElement;
let currentTime = 0; let currentTime = $audio_start_at;
let muted = false; 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_element.set(element);
$: audio_current_time.set(currentTime); $: 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> </script>
{#key src} <audio
<audio bind:this={element}
bind:this={element} src={$audio_src}
{src} autoplay={$audio_autoplay}
autoplay={$audio_autoplay} bind:currentTime
bind:currentTime bind:muted
bind:muted bind:duration
preload="metadata" bind:paused
controls={false} bind:playbackRate
on:canplay={(e) => false && console.log('canplay', e)} bind:volume
on:canplaythrough={(e) => false && console.log('canplaythrough', e)} bind:ended
on:timeupdate={(e) => false && console.log('progress', e)} preload="metadata"
on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)} controls={false}
on:suspend={(e) => false && console.log('suspend', e)} on:canplay={(e) => false && console.log('canplay', e)}
on:seeked={(e) => false && console.log('seeked', e)} on:canplaythrough={(e) => false && console.log('canplaythrough', e)}
on:play={(e) => false && console.log('play', e)} on:timeupdate={(e) => false && console.log('progress', e)}
on:waiting={(e) => console.log('waiting', e)} on:loadedmetadata={(e) => false && console.log('loadedmetadata', e)}
on:stalled={(e) => console.log('stalled', e)} on:suspend={(e) => false && console.log('suspend', e)}
on:load={(e) => console.log('load', e)} on:seeked={(e) => false && console.log('seeked', e)}
on:emptied={() => { on:play={(e) => false && console.log('play', e)}
// TODO: reset player state on:waiting={(e) => console.log('waiting', e)}
// console.log('emptied', e); on:stalled={(e) => console.log('stalled', e)}
}} on:load={(e) => console.log('load', e)}
on:loadeddata={() => { on:emptied={() => {
audio_metadata.update((m) => ({ ...m, loading: false })); // TODO: reset player state
}} // console.log('emptied', e);
on:loadstart={() => { }}
audio_metadata.update((m) => ({ ...m, loading: true })); on:loadeddata={() => {
}} audio_metadata.update((m) => ({ ...m, loading: false }));
on:playing={(e) => { }}
// @ts-expect-error event is not fully typed on:loadstart={() => {
const is_paused = e.target.paused; audio_metadata.update((m) => ({ ...m, loading: true }));
if (!isBoolean(is_paused)) return; }}
audio_metadata.update((m) => ({ ...m, paused: is_paused })); on:playing={(e) => {
}} // @ts-expect-error event is not fully typed
on:pause={(e) => { const is_paused = e.target.paused;
// @ts-expect-error event is not fully typed if (!isBoolean(is_paused)) return;
const is_paused = e.target.paused; audio_metadata.update((m) => ({ ...m, paused: is_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
on:ratechange={(e) => { const is_paused = e.target.paused;
// @ts-expect-error event is not fully typed if (!isBoolean(is_paused)) return;
const playbackRate = e.target.playbackRate; audio_metadata.update((m) => ({ ...m, paused: is_paused }));
if (!isNumber(playbackRate)) return; }}
audio_metadata.update((m) => ({ ...m, playbackRate })); on:ratechange={(e) => {
}} // @ts-expect-error event is not fully typed
on:durationchange={(e) => { const playbackRate = e.target.playbackRate;
// @ts-expect-error event is not fully typed if (!isNumber(playbackRate)) return;
const duration = e.target?.duration; audio_metadata.update((m) => ({ ...m, playbackRate }));
if (!isNumber(duration)) return; }}
audio_metadata.update((m) => ({ ...m, duration })); on:durationchange={(e) => {
}} // @ts-expect-error event is not fully typed
/> const duration = e.target?.duration;
{/key} if (!isNumber(duration)) return;
audio_metadata.update((m) => ({ ...m, duration }));
}}
/>
src/lib/context/audio-internals.ts
+21 -6
View File
@@ -1,15 +1,30 @@
import type { PlayerElement, PlayerMetadata } from '$lib/types/types'; import type { PlayerElement } from '$lib/types/types';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
export const audio_element = writable<PlayerElement>(); export const audio_element = writable<PlayerElement>();
export const audio_current_time = writable<number>(0); export const audio_start_at = writable<number>(0);
export const audio_src = writable<string | null>(null);
export const audio_autoplay = writable<boolean>(false); export const audio_autoplay = writable<boolean>(false);
export const audio_current_time = writable<number>(0);
export const audio_muted = writable<boolean>(false);
export const audio_playback_rate = writable<number>(1);
export const audio_src = writable<string>('');
export const audio_volume = writable<number>(1);
export type PlayerMetadata = {
duration: number;
// muted: boolean;
paused: boolean;
// playbackRate: number;
loading: boolean;
ended: boolean;
};
export const audio_metadata = writable<PlayerMetadata>({ export const audio_metadata = writable<PlayerMetadata>({
duration: 0, duration: 0,
muted: false, ended: false,
paused: true,
playbackRate: 1,
loading: false, loading: false,
paused: true,
// muted: false,
// playbackRate: 1,
}); });
src/lib/context/audio.ts
+48 -33
View File
@@ -3,20 +3,40 @@ import {
audio_current_time, audio_current_time,
audio_element, audio_element,
audio_metadata, audio_metadata,
audio_muted,
audio_playback_rate,
audio_src, audio_src,
audio_start_at,
audio_volume,
} from '$lib/context/audio-internals'; } from '$lib/context/audio-internals';
import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp'; import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
import { info, warn } from '$pkg/log'; import { info, warn } from '$pkg/log';
import clamp from 'just-clamp'; import clamp from 'just-clamp';
import { derived } from 'svelte/store'; import { derived } from 'svelte/store';
const audio_state = derived([audio_metadata, audio_current_time], ([$metadata, $current_time]) => { const audio_state = derived(
return { [
current_time: $current_time, audio_metadata,
timestamp: secondsToTimestamp($current_time), audio_autoplay,
...$metadata, audio_current_time,
}; audio_muted,
}); audio_playback_rate,
audio_src,
audio_volume,
],
([$metadata, $autoplay, $current_time, $muted, $playback_rate, $src, $volume]) => {
return {
...$metadata,
autoplay: $autoplay,
current_time: $current_time,
timestamp: secondsToTimestamp($current_time),
muted: $muted,
playback_rate: $playback_rate,
src: $src,
volume: $volume,
};
},
);
type HandleType = 'toggle' | 'set'; type HandleType = 'toggle' | 'set';
@@ -45,52 +65,47 @@ function pause(type: HandleType = 'set') {
function mute(type: HandleType = 'set') { function mute(type: HandleType = 'set') {
info('mute: ', type); info('mute: ', type);
return audio_element.subscribe((el) => { if (type === 'toggle') {
if (!el) return warn('no audio element'); audio_muted.update((muted) => !muted);
if (type === 'toggle') { } else {
el.muted = !el.muted; audio_muted.set(true);
} else { }
el.muted = true;
}
})();
} }
function unmute(type: HandleType = 'set') { function unmute(type: HandleType = 'set') {
info('unmute: ', type); info('unmute: ', type);
return audio_element.subscribe((el) => { if (type === 'toggle') {
if (!el) return warn('no audio element'); audio_muted.update((muted) => !muted);
if (type === 'toggle') { } else {
el.muted = !el.muted; audio_muted.set(false);
} else { }
el.muted = false;
}
})();
} }
type LoadOptions = { type LoadOptions = {
autoplay: boolean; autoplay: boolean;
start_at?: number;
}; };
function load(src: string, opts: LoadOptions) { function load(src: string, opts: LoadOptions) {
info('load: ', src); info('load: ', src);
audio_autoplay.set(opts.autoplay); audio_autoplay.set(opts.autoplay);
audio_volume.set(1);
audio_src.set(src); audio_src.set(src);
return audio_element.subscribe((el) => { audio_start_at.set(opts.start_at || 0);
if (!el) return warn('no audio element'); // opts.current_time ? seek(opts.current_time) : null;
el.volume = 1; //opts.autoplay && play();
el.pause();
})();
} }
function unload() { function unload() {
info('unload: '); info('unload: ');
audio_src.set(null); pause();
audio_autoplay.set(false);
audio_volume.set(1);
audio_src.set('');
audio_start_at.set(0);
} }
function setPlaybackRate(rate: number) { function setPlaybackRate(rate: number) {
info('setPlaybackRate: ', rate); info('setPlaybackRate: ', rate);
return audio_element.subscribe((el) => { audio_playback_rate.set(clamp(0, 10, rate));
if (!el) return warn('no audio element');
el.playbackRate = clamp(0, 10, rate);
})();
} }
function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') { function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
src/lib/types/types.ts
-8
View File
@@ -1,9 +1 @@
export type PlayerElement = HTMLAudioElement | undefined; export type PlayerElement = HTMLAudioElement | undefined;
export type PlayerMetadata = {
duration: number;
muted: boolean;
paused: boolean;
playbackRate: number;
loading: boolean;
};
src/routes/+page.svelte
+3 -2
View File
@@ -16,8 +16,9 @@
<a href="/another-page">Another Page</a> <a href="/another-page">Another Page</a>
<h5>Load Audio</h5> <h5>Load Audio</h5>
<button type="button" on:click={() => audio.load(sources['syntax'], { autoplay: true })} <button
>Syntax</button type="button"
on:click={() => audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}>Syntax</button
> >
<button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })} <button type="button" on:click={() => audio.load(sources['knomii'], { autoplay: false })}
>Knomii</button >Knomii</button