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

ove more values to micro stores

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-24 15:38:08 +00:00
parent 8be664b824
commit b929000d0a
3 changed files with 68 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/audio-loader.svelte
+20 -42
View File
@@ -2,44 +2,50 @@
import {
audio_autoplay,
audio_current_time,
audio_duration,
audio_element,
audio_metadata,
audio_ended,
audio_loading,
audio_muted,
audio_paused,
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';
// readonly values
let element: PlayerElement;
let currentTime = $audio_start_at;
let volume = $audio_volume;
let current_time = $audio_start_at;
let duration = 0;
let ended = true;
let muted = false;
let paused = false;
// handler values
let volume = $audio_volume;
let muted = false;
let playbackRate = 1;
// Update stores based on bindings
// readonly - stores will update when bindings change
$: audio_element.set(element);
$: audio_current_time.set(currentTime);
$: audio_metadata.update((x) => ({ ...x, duration, ended, paused }));
$: audio_current_time.set(current_time);
$: audio_duration.set(duration);
$: audio_ended.set(ended);
$: audio_paused.set(paused);
// Update bindings based on stores
// handlers - when store value changes, the binding will update the audio element
$: volume = $audio_volume;
$: muted = $audio_muted;
$: playbackRate = $audio_playback_rate;
$: currentTime = $audio_start_at;
$: current_time = $audio_start_at;
</script>
<audio
bind:this={element}
src={$audio_src}
autoplay={$audio_autoplay}
bind:currentTime
bind:currentTime={current_time}
bind:muted
bind:duration
bind:paused
@@ -62,34 +68,6 @@
// 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 }));
}}
on:loadeddata={() => audio_loading.set(false)}
on:loadstart={() => audio_loading.set(true)}
/>
src/lib/context/audio-internals.ts
+10 -22
View File
@@ -1,30 +1,18 @@
import type { PlayerElement } from '$lib/types/types';
import { writable } from 'svelte/store';
export const audio_element = writable<PlayerElement>();
export const audio_start_at = writable<number>(0);
export const audio_autoplay = writable<boolean>(false);
// readonly - stores will update when bindings change
export const audio_current_time = writable<number>(0);
export const audio_element = writable<PlayerElement>();
export const audio_duration = writable<number>(0);
export const audio_ended = writable<boolean>(false);
export const audio_loading = writable<boolean>(false);
export const audio_paused = writable<boolean>(true);
// handlers - when store value changes, the binding will update the audio element
export const audio_start_at = writable<number>(0);
export const audio_autoplay = writable<boolean>(false);
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>({
duration: 0,
ended: false,
loading: false,
paused: true,
// muted: false,
// playbackRate: 1,
});
src/lib/context/audio.ts
+38 -10
View File
@@ -1,9 +1,12 @@
import {
audio_autoplay,
audio_current_time,
audio_duration,
audio_element,
audio_metadata,
audio_ended,
audio_loading,
audio_muted,
audio_paused,
audio_playback_rate,
audio_src,
audio_start_at,
@@ -16,24 +19,44 @@ import { derived } from 'svelte/store';
const audio_state = derived(
[
audio_metadata,
audio_autoplay,
audio_current_time,
audio_duration,
audio_ended,
audio_loading,
audio_paused,
audio_start_at,
audio_autoplay,
audio_muted,
audio_playback_rate,
audio_src,
audio_volume,
],
([$metadata, $autoplay, $current_time, $muted, $playback_rate, $src, $volume]) => {
([
$current_time,
$duration,
$ended,
$loading,
$paused,
$start_at,
$autoplay,
$muted,
$playback_rate,
$src,
$volume,
]) => {
return {
...$metadata,
autoplay: $autoplay,
current_time: $current_time,
timestamp: secondsToTimestamp($current_time),
duration: $duration,
ended: $ended,
loading: $loading,
paused: $paused,
start_at: $start_at,
autoplay: $autoplay,
muted: $muted,
playback_rate: $playback_rate,
src: $src,
volume: $volume,
timestamp: secondsToTimestamp($current_time),
};
},
);
@@ -80,26 +103,31 @@ function unmute(type: HandleType = 'set') {
}
}
type LoadOptions = {
export type AudioLoadData = AudioMetadata & { src: string };
export type AudioLoadOptions = {
autoplay: boolean;
start_at?: number;
};
function load(src: string, opts: LoadOptions) {
const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
const { src, ...metadata } = data;
info('load: ', src);
audio_autoplay.set(opts.autoplay);
audio_volume.set(1);
audio_src.set(src);
audio_metadata.set(metadata);
audio_start_at.set(opts.start_at || 0);
// opts.current_time ? seek(opts.current_time) : null;
//opts.autoplay && play();
}
};
function unload() {
info('unload: ');
pause();
audio_autoplay.set(false);
audio_volume.set(1);
audio_src.set('');
audio_metadata.set(null);
audio_start_at.set(0);
}