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

Custom Listener (#32)

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-25 14:47:56 +00:00
committed by GitHub
parent fbd87d589f ff6a6d92db
commit 75e45465ec
22 changed files with 342 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/famous-cheetahs-complain.md
+5
View File
@@ -0,0 +1,5 @@
---
'svelte-podcast': minor
---
refactored audio element bindings for better control over element
src/app.d.ts
Vendored
+7
View File
@@ -1,5 +1,12 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare module './lib/types' {
interface EpisodeDetails {
title: string;
}
}
declare global {
namespace App {
// interface Error {}
src/lib/audio/_private.ts
-17
View File
@@ -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);
src/lib/audio/audio-element.ts
+25
View File
@@ -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;
src/lib/audio/audio-loader.svelte
+9 -72
View File
@@ -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)}
/>
src/lib/audio/episode-data.ts
+126
View File
@@ -0,0 +1,126 @@
import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
import { episode_details, type EpisodeDetailsStore } from '$lib/audio/episode-details';
import { user_preferences } from '$lib/preferences';
import { podcast_progress } from '$lib/progress';
import type { EpisodeAttributes, EpisodeDetails } from '$lib/types';
import { warn } from '$lib/utility/package/log';
import clamp from 'just-clamp';
import { derived, get } from 'svelte/store';
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_episode();
const el = get(audio_element);
if (!el) return no_element('load');
const progress = podcast_progress.get_episode(src);
el.src = src;
el.currentTime = progress?.start_at || 0;
const preferences = get(user_preferences);
el.playbackRate = preferences.playback_rate;
el.volume = preferences.volume;
episode_details.set(details);
},
unload: () => {
podcast_progress.stash_episode();
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_episode();
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);
}
},
};
src/lib/audio/episode-details.ts
+5
View File
@@ -0,0 +1,5 @@
import type { EpisodeDetails } from '$lib/types';
import { writable } from 'svelte/store';
export const episode_details = writable<EpisodeDetails | null>(null);
export type EpisodeDetailsStore = typeof episode_details;
src/lib/audio/episode-progress.ts
+29
View File
@@ -0,0 +1,29 @@
import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
import type { EpisodeProgress } from '$lib/types';
import { secondsToTimestamp } from '$lib/utility';
import { derived } from 'svelte/store';
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());
},
);
src/lib/audio/index.ts
+3 -144
View File
@@ -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';
src/lib/preferences/_private.ts
-9
View File
@@ -1,9 +0,0 @@
import type { UserPreferences } from '$lib/types';
import { writable } from 'svelte/store';
export const _default_user_preferences = {
playback_rate: 1,
volume: 1,
} satisfies UserPreferences;
export const _user_preferences = writable<UserPreferences>(_default_user_preferences);
src/lib/preferences/local-storage.ts → src/lib/preferences/db-local-storage.ts
+10 -9
View File
@@ -1,23 +1,24 @@
import { browser } from '$app/environment';
import { edit_preference } from '$lib/preferences/edit';
import { _user_preferences } from '$lib/preferences/_private';
import { user_preferences } from '$lib/preferences/db-state';
import type { UserPreferences } from '$lib/types';
import { info, warn } from '$lib/utility/package/log';
import { get } from 'svelte/store';
const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
export function save() {
export function save_preferences() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping save');
return;
}
return _user_preferences.subscribe((prefs) => {
info(`Saving user preferences to localStorage`, prefs);
localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(prefs));
})();
const preferences = get(user_preferences);
info(`Saving user preferences to localStorage`, preferences);
localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(preferences));
}
export function load() {
export function load_preferences() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping load');
return;
@@ -30,7 +31,7 @@ export function load() {
}
const preferences = JSON.parse(data) as UserPreferences;
edit_preference(preferences);
user_preferences.edit(preferences);
info(`Loaded user preferences from localStorage`, preferences);
}
src/lib/preferences/db-state.ts
+29
View File
@@ -0,0 +1,29 @@
import type { UserPreferences } from '$lib/types';
import clamp from 'just-clamp';
import { writable } from 'svelte/store';
import { load_preferences, save_preferences } from './db-local-storage';
const _default_user_preferences = { playback_rate: 1, volume: 1 } satisfies UserPreferences;
const _user_preferences = writable<UserPreferences>(_default_user_preferences);
const clamp_preferences = (prefs: UserPreferences) => ({
playback_rate: clamp(prefs.playback_rate, 0.5, 5),
volume: clamp(prefs.volume, 0, 1),
});
const edit = (prefs: Partial<UserPreferences>) => {
_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
save_preferences();
};
const clear = () => {
_user_preferences.set(_default_user_preferences);
save_preferences();
};
export const user_preferences = {
subscribe: _user_preferences.subscribe,
edit,
clear,
load: load_preferences,
};
src/lib/preferences/edit.ts
-16
View File
@@ -1,16 +0,0 @@
import { _user_preferences } from '$lib/preferences/_private';
import type { UserPreferences } from '$lib/types';
import clamp from 'just-clamp';
import { save } from './local-storage';
function clamp_preferences(prefs: UserPreferences) {
return {
playback_rate: clamp(prefs.playback_rate, 0.5, 5),
volume: clamp(prefs.volume, 0, 1),
};
}
export function edit_preference(prefs: Partial<UserPreferences>) {
_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
save();
}
src/lib/preferences/index.ts
+1 -14
View File
@@ -1,14 +1 @@
import { edit_preference } from '$lib/preferences/edit';
import { _default_user_preferences, _user_preferences } from '$lib/preferences/_private';
import { load, save } from './local-storage';
export const podcast_preferences = {
subscribe: _user_preferences.subscribe,
edit: edit_preference,
load,
save,
clear() {
_user_preferences.set(_default_user_preferences);
save();
},
};
export * from './db-state';
src/lib/progress/local-storage.ts → src/lib/progress/db-local-storage.ts
+4 -2
View File
@@ -5,13 +5,15 @@ import { error, info, warn } from '$lib/utility/package/log';
type SavedEpisodeProgress = { src: string; current_time: number };
const EPISODE_PROGRESS_KEY = 'EPISODE_PROGRESS' as const;
export function save_all() {
export function save_podcast_progress() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping save');
return;
}
const items = [..._episode_progress_map];
console.log('items', items);
const episodes = items.reduce((prev, [src, current_time]) => {
return [...prev, { src, current_time }];
}, [] as SavedEpisodeProgress[]);
@@ -20,7 +22,7 @@ export function save_all() {
localStorage.setItem(EPISODE_PROGRESS_KEY, JSON.stringify(episodes));
}
export function load_all() {
export function load_podcast_progress() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping load');
return;
src/lib/progress/db-state.ts
+43
View File
@@ -0,0 +1,43 @@
import { episode_audio, episode_progress } from '$lib/audio';
import { _episode_progress_map } from '$lib/progress/_private';
import type { AudioLoadOptions } from '$lib/types';
import { info } from '$lib/utility/package/log';
import { get } from 'svelte/store';
import { load_podcast_progress, save_podcast_progress } from './db-local-storage';
const get_src_pathname = (src: string) => {
if (src.startsWith('http')) return new URL(src).pathname;
else return new URL(src, 'https://svelte.dev').pathname;
};
const stash_episode_progress = () => {
const audio = get(episode_audio);
console.log('audio', audio);
if (!audio?.src) return;
info('saving progress: ', audio.src);
const pathname = get_src_pathname(audio.src);
_episode_progress_map.set(pathname, get(episode_progress).current_time);
save_podcast_progress();
};
const get_episode_progress = (src: string): Pick<AudioLoadOptions, 'start_at'> | null => {
const start_at = _episode_progress_map.get(src);
if (!start_at) return null;
info('found saved progress: ', src, start_at);
return { start_at: start_at };
};
const clear = () => {
_episode_progress_map.clear();
save_podcast_progress();
};
export const podcast_progress = {
stash_episode: stash_episode_progress,
get_episode: get_episode_progress,
load: load_podcast_progress,
clear,
};
src/lib/progress/index.ts
+1 -39
View File
@@ -1,39 +1 @@
import { _current_time, _src } from '$lib/audio/_private';
import { _episode_progress_map } from '$lib/progress/_private';
import type { AudioLoadOptions } from '$lib/types';
import { info } from '$lib/utility/package/log';
import { get } from 'svelte/store';
import { load_all, save_all } from './local-storage';
export const podcast_progress = {
episodes: {
set: (src: string, current_time: number) => _episode_progress_map.set(src, current_time),
get: _episode_progress_map.get,
includes: _episode_progress_map.has,
forEach: _episode_progress_map.forEach,
count: _episode_progress_map.size,
data: [..._episode_progress_map],
},
stash() {
const src = get(_src);
if (!src) return;
info('saving progress: ', src);
podcast_progress.episodes.set(src, get(_current_time));
save_all();
},
use(src: string): Pick<AudioLoadOptions, 'start_at'> | null {
const start_at = _episode_progress_map.get(src);
if (!start_at) return null;
info('found saved progress: ', src, start_at);
return { start_at: start_at };
},
save_all,
load_all,
clear_all() {
_episode_progress_map.clear();
save_all();
},
};
export * from './db-state';
src/lib/types.ts
+13 -9
View File
@@ -1,18 +1,22 @@
export type AudioPlayerElement = HTMLAudioElement | undefined;
export interface AudioMetadata {
title?: string;
artwork?: string;
export interface EpisodeDetails {
[key: string]: string | number | boolean;
}
export interface AudioLoadData extends AudioMetadata {
export type EpisodeProgress = { current_time: number; timestamp: string; has_ended: boolean };
export type EpisodeAttributes = {
will_autoplay: boolean;
is_muted: boolean;
duration: number;
src: string;
}
start_at: number;
details: EpisodeDetails | null;
};
export interface AudioLoadOptions {
export type AudioLoadOptions = {
autoplay: boolean;
start_at?: number;
}
};
export interface UserPreferences {
playback_rate: number;
src/lib/utility/use-state.ts
+3 -8
View File
@@ -1,12 +1,7 @@
import { podcast_preferences } from '$lib/preferences';
import { user_preferences } from '$lib/preferences';
import { podcast_progress } from '$lib/progress';
export function save_podcast_state() {
podcast_progress.save_all();
podcast_preferences.save();
}
export function load_podcast_state() {
podcast_progress.load_all();
podcast_preferences.load();
podcast_progress.load();
user_preferences.load();
}
src/routes/+layout.svelte
+1 -1
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { AudioLoader } from '$lib';
import { AudioLoader } from '$lib/audio';
</script>
<AudioLoader />
src/routes/+page.svelte
+25 -46
View File
@@ -1,18 +1,6 @@
<script lang="ts">
import {
podcast_audio,
podcast_data,
podcast_duration,
podcast_loading,
podcast_muted,
podcast_options,
podcast_paused,
podcast_preferences,
podcast_progress,
podcast_time,
save_podcast_state,
} from '$lib';
import type { AudioLoadData } from '$lib/types';
import { podcast_progress, user_preferences } from '$lib';
import { episode_audio, episode_progress } from '$lib/audio';
const sources = {
syntax: {
@@ -25,23 +13,17 @@
title: `Empowerment starts with letting go of control`,
artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
},
} satisfies Record<string, AudioLoadData>;
} as const;
let current_time = 0;
$: current_time = $podcast_time.current_time;
$: current_time = $episode_progress.current_time;
</script>
<pre>{JSON.stringify(
{
podcast_time,
podcast_data,
podcast_options,
podcast_duration,
podcast_loading,
podcast_paused,
podcast_muted,
podcast_preferences,
podcast_progress,
$episode_audio,
$episode_progress,
$user_preferences,
},
null,
3,
@@ -49,56 +31,53 @@
<h1>Demo</h1>
<a href="/another-page">Another Page</a>
<button type="button" on:click={podcast_progress.save_all}>Save progress</button>
<button type="button" on:click={podcast_preferences.save}>Save preferences</button>
<button type="button" on:click={save_podcast_state}>Save state (all)</button>
<button type="button" on:click={podcast_progress.clear}>Clear progress for all episodes</button>
<button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
<h5>Load Audio</h5>
<button
type="button"
on:click={() => podcast_audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}
<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}
>Syntax</button
>
<button type="button" on:click={() => podcast_audio.load(sources['knomii'], { autoplay: false })}
<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
>Knomii</button
>
<button type="button" on:click={() => podcast_audio.unload()}>None</button>
<button type="button" on:click={() => episode_audio.unload()}>None</button>
<h5>Custom audio controls</h5>
<h6>Play / Pause Actions</h6>
<button type="button" on:click={() => podcast_audio.play()}>Play</button>
<button type="button" on:click={() => podcast_audio.pause()}>Pause</button>
<button type="button" on:click={() => podcast_audio.pause('toggle')}>Toggle</button>
<button type="button" on:click={() => episode_audio.play()}>Play</button>
<button type="button" on:click={() => episode_audio.pause()}>Pause</button>
<button type="button" on:click={() => episode_audio.pause('toggle')}>Toggle</button>
<h6>Audio Actions</h6>
<button type="button" on:click={() => podcast_audio.mute()}>Mute</button>
<button type="button" on:click={() => podcast_audio.unmute()}>Unmute</button>
<button type="button" on:click={() => podcast_audio.mute('toggle')}>Toggle</button>
<button type="button" on:click={() => episode_audio.mute()}>Mute</button>
<button type="button" on:click={() => episode_audio.unmute()}>Unmute</button>
<button type="button" on:click={() => episode_audio.mute('toggle')}>Toggle</button>
<h6>Seeking</h6>
<input
type="range"
min={0}
max={$podcast_duration}
max={$episode_audio?.duration}
style="width:100%"
bind:value={current_time}
on:change={(e) => podcast_audio.seek(parseInt(e.currentTarget.value))}
on:change={(e) => episode_audio.seek(parseInt(e.currentTarget.value))}
/>
<button type="button" on:click={() => podcast_audio.seek(30)}>Go to 30s from start </button>
<button type="button" on:click={() => podcast_audio.seek(30, 'from-end')}>Go to 30s from end</button
<button type="button" on:click={() => episode_audio.seek(30)}>Go to 30s from start </button>
<button type="button" on:click={() => episode_audio.seek(30, 'from-end')}>Go to 30s from end</button
>
<button type="button" on:click={() => podcast_audio.skip(10, 'forward')}>Skip 10s</button>
<button type="button" on:click={() => podcast_audio.skip(10, 'backward')}>Rewind 10s</button>
<button type="button" on:click={() => episode_audio.skip(10, 'forward')}>Skip 10s</button>
<button type="button" on:click={() => episode_audio.skip(10, 'backward')}>Rewind 10s</button>
<h6>Playback Rate</h6>
{#each [0.5, 1, 2, 3] as rate}
<button type="button" on:click={() => podcast_preferences.edit({ playback_rate: rate })}>
<button type="button" on:click={() => user_preferences.edit({ playback_rate: rate })}>
{rate}x
</button>
{/each}
src/routes/another-page/+page.svelte
+3 -18
View File
@@ -1,14 +1,5 @@
<script lang="ts">
import {
podcast_data,
podcast_duration,
podcast_loading,
podcast_muted,
podcast_options,
podcast_paused,
podcast_preferences,
podcast_time,
} from '$lib';
import { episode_audio, episode_progress } from '$lib/audio';
</script>
<h1>Demo</h1>
@@ -17,14 +8,8 @@
<pre>{JSON.stringify(
{
podcast_time,
podcast_data,
podcast_options,
podcast_duration,
podcast_loading,
podcast_paused,
podcast_muted,
podcast_preferences,
$episode_audio,
$episode_progress,
},
null,
3,