refactor audio to use custom listener stores
This commit is contained in:
Ollie Taylor
@@ -1,17 +0,0 @@
|
||||
import type { AudioMetadata, AudioPlayerElement } from '$lib/types';
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
// readonly - stores will update when bindings change
|
||||
export const _current_time = writable<number>(0);
|
||||
export const _element = writable<AudioPlayerElement>();
|
||||
export const _duration = writable<number>(0);
|
||||
export const _ended = writable<boolean>(false);
|
||||
export const _loading = writable<boolean>(false);
|
||||
export const _paused = writable<boolean>(true);
|
||||
|
||||
// handlers - when store value changes, the binding will update the audio element
|
||||
export const _start_at = writable<number>(0);
|
||||
export const _autoplay = writable<boolean>(false);
|
||||
export const _muted = writable<boolean>(false);
|
||||
export const _src = writable<string>('');
|
||||
export const _metadata = writable<AudioMetadata | null>(null);
|
||||
@@ -0,0 +1,25 @@
|
||||
import { browser } from '$app/environment';
|
||||
import { onMount } from 'svelte';
|
||||
import { readable } from 'svelte/store';
|
||||
|
||||
export const audio_element = readable<HTMLAudioElement | null>(null, (set) => {
|
||||
if (!browser) return;
|
||||
const ID = 'svelte-podcast-generated-audio-element';
|
||||
onMount(() => {
|
||||
const el = document.createElement('audio');
|
||||
el.id = ID;
|
||||
el.setAttribute('preload', 'metadata');
|
||||
el.muted = false;
|
||||
el.autoplay = true;
|
||||
el.controls = true;
|
||||
document.body.appendChild(el);
|
||||
set(el);
|
||||
});
|
||||
|
||||
return () => {
|
||||
const element = document.getElementById(ID);
|
||||
element ? element.remove() : null;
|
||||
};
|
||||
});
|
||||
|
||||
export type AudioElementStore = typeof audio_element;
|
||||
@@ -1,76 +1,13 @@
|
||||
<script lang="ts">
|
||||
import {
|
||||
_autoplay,
|
||||
_current_time,
|
||||
_duration,
|
||||
_element,
|
||||
_ended,
|
||||
_loading,
|
||||
_muted,
|
||||
_paused,
|
||||
_src,
|
||||
_start_at,
|
||||
} from '$lib/audio/_private';
|
||||
import { podcast_preferences } from '$lib/preferences';
|
||||
import type { AudioPlayerElement } from '$lib/types';
|
||||
import { load_podcast_state } from '$lib/utility/use-state';
|
||||
import { audio_element } from '$lib/audio/audio-element';
|
||||
import { load_podcast_state } from '$lib/utility';
|
||||
import { info } from '$lib/utility/package/log';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
// readonly values
|
||||
let element: AudioPlayerElement;
|
||||
let current_time = $_start_at;
|
||||
let duration = 0;
|
||||
let ended = true;
|
||||
let paused = false;
|
||||
|
||||
// handler values
|
||||
let volume = $podcast_preferences.volume;
|
||||
let playbackRate = $podcast_preferences.playback_rate;
|
||||
let muted = false;
|
||||
|
||||
// readonly - stores will update when bindings change
|
||||
$: _element.set(element);
|
||||
$: _current_time.set(current_time);
|
||||
$: _duration.set(duration);
|
||||
$: _ended.set(ended);
|
||||
$: _paused.set(paused);
|
||||
|
||||
// handlers - when store value changes, the binding will update the audio element
|
||||
$: volume = $podcast_preferences.volume;
|
||||
$: playbackRate = $podcast_preferences.playback_rate;
|
||||
$: muted = $_muted;
|
||||
$: current_time = $_start_at;
|
||||
|
||||
onMount(load_podcast_state);
|
||||
onMount(() => {
|
||||
load_podcast_state();
|
||||
return audio_element.subscribe((el) => {
|
||||
info('loaded audio :: ', el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<audio
|
||||
bind:this={element}
|
||||
src={$_src}
|
||||
autoplay={$_autoplay}
|
||||
bind:currentTime={current_time}
|
||||
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={() => _loading.set(false)}
|
||||
on:loadstart={() => _loading.set(true)}
|
||||
/>
|
||||
|
||||
@@ -0,0 +1,140 @@
|
||||
import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
|
||||
import {
|
||||
episode_details,
|
||||
type EpisodeDetails,
|
||||
type EpisodeDetailsStore,
|
||||
} from '$lib/audio/episode-details';
|
||||
import { podcast_preferences } from '$lib/preferences';
|
||||
import { podcast_progress } from '$lib/progress';
|
||||
import { warn } from '$lib/utility/package/log';
|
||||
import clamp from 'just-clamp';
|
||||
import { derived, get } from 'svelte/store';
|
||||
|
||||
type EpisodeAttributes = {
|
||||
will_autoplay: boolean;
|
||||
is_muted: boolean;
|
||||
duration: number;
|
||||
src: string;
|
||||
start_at: number;
|
||||
details: EpisodeDetails;
|
||||
};
|
||||
const default_episode_attributes = {
|
||||
will_autoplay: false,
|
||||
is_muted: false,
|
||||
duration: 0,
|
||||
start_at: 0,
|
||||
details: null,
|
||||
} satisfies Omit<EpisodeAttributes, 'src'>;
|
||||
|
||||
const episode_attributes = derived<
|
||||
[AudioElementStore, EpisodeDetailsStore],
|
||||
EpisodeAttributes | null
|
||||
>([audio_element, episode_details], ([$audio, $details], set) => {
|
||||
if (!$audio) return set(null);
|
||||
|
||||
function set_value() {
|
||||
if (!$audio?.src) return null;
|
||||
set({
|
||||
...default_episode_attributes,
|
||||
src: $audio.src,
|
||||
duration: $audio.duration,
|
||||
details: $details,
|
||||
});
|
||||
}
|
||||
|
||||
$audio.addEventListener('loadeddata', () => set_value());
|
||||
return () => $audio.removeEventListener('loadeddata', () => set_value());
|
||||
});
|
||||
|
||||
type HandleType = 'toggle' | 'set';
|
||||
|
||||
const no_element = (action: string) => warn(`could not ${action} :: no audio element exists yet`);
|
||||
|
||||
export const episode_audio = {
|
||||
subscribe: episode_attributes.subscribe,
|
||||
load: (src: string, details: EpisodeDetails) => {
|
||||
podcast_progress.stash();
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('load');
|
||||
const progress = podcast_progress.get(src);
|
||||
el.src = src;
|
||||
console.log('progress', progress);
|
||||
console.log('src', src);
|
||||
console.log('podcast_progress', podcast_progress.data);
|
||||
el.currentTime = progress?.start_at || 0;
|
||||
|
||||
const preferences = get(podcast_preferences);
|
||||
el.playbackRate = preferences.playback_rate;
|
||||
el.volume = preferences.volume;
|
||||
|
||||
episode_details.set(details);
|
||||
},
|
||||
unload: () => {
|
||||
podcast_progress.stash();
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('unload');
|
||||
el.src = '';
|
||||
episode_details.set(null);
|
||||
},
|
||||
play: (t?: HandleType) => {
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('play');
|
||||
|
||||
if (t === 'toggle') {
|
||||
el.paused ? el.play() : el.pause();
|
||||
} else {
|
||||
el.play();
|
||||
}
|
||||
},
|
||||
pause: (t?: HandleType) => {
|
||||
podcast_progress.stash();
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('pause');
|
||||
|
||||
if (t === 'toggle') {
|
||||
el.paused ? el.play() : el.pause();
|
||||
} else {
|
||||
el.pause();
|
||||
}
|
||||
},
|
||||
mute: (t?: HandleType) => {
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('mute');
|
||||
|
||||
if (t === 'toggle') {
|
||||
el.muted = !el.muted;
|
||||
} else {
|
||||
el.muted = true;
|
||||
}
|
||||
},
|
||||
unmute: (t?: HandleType) => {
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('unmute');
|
||||
|
||||
if (t === 'toggle') {
|
||||
el.muted = !el.muted;
|
||||
} else {
|
||||
el.muted = false;
|
||||
}
|
||||
},
|
||||
seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('seek');
|
||||
|
||||
if (from === 'from-end') {
|
||||
el.currentTime = clamp(0, el.duration, el.duration - seconds);
|
||||
} else {
|
||||
el.currentTime = clamp(0, el.duration, seconds);
|
||||
}
|
||||
},
|
||||
skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
|
||||
const el = get(audio_element);
|
||||
if (!el) return no_element('skip');
|
||||
|
||||
if (type === 'backward') {
|
||||
el.currentTime = clamp(0, el.duration, el.currentTime - seconds);
|
||||
} else {
|
||||
el.currentTime = clamp(0, el.duration, el.currentTime + seconds);
|
||||
}
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export type EpisodeDetails = Record<string, string | number | boolean> | null;
|
||||
export const episode_details = writable<EpisodeDetails>(null);
|
||||
export type EpisodeDetailsStore = typeof episode_details;
|
||||
@@ -0,0 +1,30 @@
|
||||
import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
|
||||
import { secondsToTimestamp } from '$lib/utility';
|
||||
import { derived } from 'svelte/store';
|
||||
|
||||
type EpisodeProgress = { current_time: number; timestamp: string; has_ended: boolean };
|
||||
|
||||
const default_episode_progress = {
|
||||
current_time: 0,
|
||||
timestamp: '00:00',
|
||||
has_ended: false,
|
||||
} satisfies EpisodeProgress;
|
||||
|
||||
export const episode_progress = derived<AudioElementStore, EpisodeProgress>(
|
||||
audio_element,
|
||||
($audio, set) => {
|
||||
if (!$audio) return set(default_episode_progress);
|
||||
|
||||
function set_value() {
|
||||
if (!$audio) return;
|
||||
set({
|
||||
current_time: $audio.currentTime,
|
||||
timestamp: secondsToTimestamp($audio.currentTime),
|
||||
has_ended: $audio.ended,
|
||||
});
|
||||
}
|
||||
|
||||
$audio.addEventListener('timeupdate', () => set_value());
|
||||
return () => $audio.removeEventListener('timeupdate', () => set_value());
|
||||
},
|
||||
);
|
||||
+3
-144
@@ -1,145 +1,4 @@
|
||||
import {
|
||||
_autoplay,
|
||||
_current_time,
|
||||
_duration,
|
||||
_element,
|
||||
_ended,
|
||||
_loading,
|
||||
_metadata,
|
||||
_muted,
|
||||
_paused,
|
||||
_src,
|
||||
_start_at,
|
||||
} from '$lib/audio/_private';
|
||||
import { podcast_progress } from '$lib/progress';
|
||||
import type { AudioLoadData, AudioLoadOptions } from '$lib/types';
|
||||
import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
|
||||
import { info, warn } from '$pkg/log';
|
||||
import clamp from 'just-clamp';
|
||||
import { derived, type Readable } from 'svelte/store';
|
||||
export { default as AudioLoader } from '$lib/audio/audio-loader.svelte';
|
||||
|
||||
export const podcast_time = derived([_current_time, _ended], ([$seconds, $ended]) => ({
|
||||
current_time: $seconds,
|
||||
timestamp: secondsToTimestamp($seconds),
|
||||
ended: $ended,
|
||||
}));
|
||||
|
||||
export const podcast_data: Readable<AudioLoadData> = derived(
|
||||
[_src, _metadata],
|
||||
([$src, $metadata]) => ({
|
||||
...$metadata,
|
||||
src: $src,
|
||||
}),
|
||||
);
|
||||
|
||||
export const podcast_options: Readable<AudioLoadOptions> = derived(
|
||||
[_start_at, _autoplay],
|
||||
([$start_at, $autoplay]) => ({
|
||||
start_at: $start_at,
|
||||
autoplay: $autoplay,
|
||||
}),
|
||||
);
|
||||
|
||||
export const podcast_duration = { subscribe: _duration.subscribe };
|
||||
export const podcast_loading = { subscribe: _loading.subscribe };
|
||||
export const podcast_paused = { subscribe: _paused.subscribe };
|
||||
export const podcast_muted = { subscribe: _muted.subscribe };
|
||||
|
||||
type HandleType = 'toggle' | 'set';
|
||||
|
||||
export const podcast_audio = {
|
||||
play(type: HandleType = 'set') {
|
||||
info('play: ', type);
|
||||
return _element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
if (type === 'toggle') {
|
||||
el.paused ? el.play() : el.pause();
|
||||
} else {
|
||||
el.play();
|
||||
}
|
||||
})();
|
||||
},
|
||||
pause(type: HandleType = 'set') {
|
||||
info('pause: ', type);
|
||||
return _element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
if (type === 'toggle') {
|
||||
el.paused ? el.play() : el.pause();
|
||||
} else {
|
||||
el.pause();
|
||||
}
|
||||
})();
|
||||
},
|
||||
|
||||
mute(type: HandleType = 'set') {
|
||||
info('mute: ', type);
|
||||
if (type === 'toggle') {
|
||||
_muted.update((muted) => !muted);
|
||||
} else {
|
||||
_muted.set(true);
|
||||
}
|
||||
},
|
||||
unmute(type: HandleType = 'set') {
|
||||
info('unmute: ', type);
|
||||
if (type === 'toggle') {
|
||||
_muted.update((muted) => !muted);
|
||||
} else {
|
||||
_muted.set(false);
|
||||
}
|
||||
},
|
||||
|
||||
load(data: AudioLoadData, opts: AudioLoadOptions) {
|
||||
podcast_progress.stash();
|
||||
|
||||
const { src, ...meta } = data;
|
||||
const progress = podcast_progress.use(src);
|
||||
const start_at = progress?.start_at || opts.start_at || 0;
|
||||
|
||||
console.log('progress', progress);
|
||||
|
||||
info('load: ', src);
|
||||
_autoplay.set(opts.autoplay);
|
||||
_src.set(src);
|
||||
_metadata.set(meta);
|
||||
_start_at.set(start_at);
|
||||
// opts.current_time ? seek(opts.current_time) : null;
|
||||
//opts.autoplay && play();
|
||||
},
|
||||
unload() {
|
||||
podcast_progress.stash();
|
||||
info('unload: ');
|
||||
_element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
el.pause();
|
||||
})();
|
||||
_autoplay.set(false);
|
||||
_src.set('');
|
||||
_metadata.set(null);
|
||||
_start_at.set(0);
|
||||
},
|
||||
|
||||
seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
|
||||
info('seek: ', seconds, from);
|
||||
return _element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
if (from === 'from-end') {
|
||||
el.currentTime = clamp(0, el.duration, el.duration - seconds);
|
||||
} else {
|
||||
el.currentTime = clamp(0, el.duration, seconds);
|
||||
}
|
||||
})();
|
||||
},
|
||||
|
||||
skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
|
||||
info('skip: ', seconds, type);
|
||||
return _element.subscribe((el) => {
|
||||
if (!el) return warn('no audio element');
|
||||
if (type === 'backward') {
|
||||
el.currentTime = clamp(0, el.duration, el.currentTime - seconds);
|
||||
} else {
|
||||
el.currentTime = clamp(0, el.duration, el.currentTime + seconds);
|
||||
}
|
||||
})();
|
||||
},
|
||||
};
|
||||
export * from '$lib/audio/episode-data';
|
||||
export * from '$lib/audio/episode-details';
|
||||
export * from '$lib/audio/episode-progress';
|
||||
|
||||
Reference in New Issue
Block a user