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

simplify exports

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-25 01:04:08 +00:00
parent 03e95aa81b
commit 198cdfd3e0
18 changed files with 422 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/main.yml
+3 -3
View File
@@ -1,8 +1,8 @@
name: 'CI' name: 'CI'
on: on:
push: pull_request:
branches-ignore: branches:
- 'main' - '**'
jobs: jobs:
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
src/lib/audio/_private.ts
+17
View File
@@ -0,0 +1,17 @@
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/components/audio-loader.svelte → src/lib/audio/audio-loader.svelte
+28 -28
View File
@@ -1,53 +1,53 @@
<script lang="ts"> <script lang="ts">
import { import {
audio_autoplay, _autoplay,
audio_current_time, _current_time,
audio_duration, _duration,
audio_element, _element,
audio_ended, _ended,
audio_loading, _loading,
audio_muted, _muted,
audio_paused, _paused,
audio_src, _src,
audio_start_at, _start_at,
} from '$lib/context/audio-internals'; } from '$lib/audio/_private';
import { user_preferences } from '$lib/context/user-preferences'; import { podcast_preferences } from '$lib/preferences';
import type { AudioPlayerElement } from '$lib/types'; import type { AudioPlayerElement } from '$lib/types';
import { load_podcast_state } from '$lib/utility/use-state'; import { load_podcast_state } from '$lib/utility/use-state';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
// readonly values // readonly values
let element: AudioPlayerElement; let element: AudioPlayerElement;
let current_time = $audio_start_at; let current_time = $_start_at;
let duration = 0; let duration = 0;
let ended = true; let ended = true;
let paused = false; let paused = false;
// handler values // handler values
let volume = $user_preferences.volume; let volume = $podcast_preferences.volume;
let playbackRate = $user_preferences.playback_rate; let playbackRate = $podcast_preferences.playback_rate;
let muted = false; let muted = false;
// readonly - stores will update when bindings change // readonly - stores will update when bindings change
$: audio_element.set(element); $: _element.set(element);
$: audio_current_time.set(current_time); $: _current_time.set(current_time);
$: audio_duration.set(duration); $: _duration.set(duration);
$: audio_ended.set(ended); $: _ended.set(ended);
$: audio_paused.set(paused); $: _paused.set(paused);
// handlers - when store value changes, the binding will update the audio element // handlers - when store value changes, the binding will update the audio element
$: volume = $user_preferences.volume; $: volume = $podcast_preferences.volume;
$: playbackRate = $user_preferences.playback_rate; $: playbackRate = $podcast_preferences.playback_rate;
$: muted = $audio_muted; $: muted = $_muted;
$: current_time = $audio_start_at; $: current_time = $_start_at;
onMount(load_podcast_state); onMount(load_podcast_state);
</script> </script>
<audio <audio
bind:this={element} bind:this={element}
src={$audio_src} src={$_src}
autoplay={$audio_autoplay} autoplay={$_autoplay}
bind:currentTime={current_time} bind:currentTime={current_time}
bind:muted bind:muted
bind:duration bind:duration
@@ -71,6 +71,6 @@
// TODO: reset player state // TODO: reset player state
// console.log('emptied', e); // console.log('emptied', e);
}} }}
on:loadeddata={() => audio_loading.set(false)} on:loadeddata={() => _loading.set(false)}
on:loadstart={() => audio_loading.set(true)} on:loadstart={() => _loading.set(true)}
/> />
src/lib/audio/index.ts
+147
View File
@@ -0,0 +1,147 @@
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 } 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 = derived(
[_src, _metadata],
([$src, $metadata]) =>
({
...$metadata,
src: $src,
} satisfies AudioLoadData),
);
export const podcast_options = derived(
[_start_at, _autoplay],
([$start_at, $autoplay]) =>
({
start_at: $start_at,
autoplay: $autoplay,
} satisfies AudioLoadOptions),
);
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);
}
})();
},
};
src/lib/context/audio-internals.ts
-16
View File
@@ -1,16 +0,0 @@
import type { AudioPlayerElement } from '$lib/types';
import { writable } from 'svelte/store';
// readonly - stores will update when bindings change
export const audio_current_time = writable<number>(0);
export const audio_element = writable<AudioPlayerElement>();
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_src = writable<string>('');
src/lib/context/audio.ts
-105
View File
@@ -1,105 +0,0 @@
import {
audio_autoplay,
audio_element,
audio_muted,
audio_src,
audio_start_at,
} from '$lib/context/audio-internals';
import { episode_progress } from '$lib/context/episode-progress';
import { metadata } from '$lib/stores';
import type { AudioLoadData, AudioLoadOptions } from '$lib/types';
import { info, warn } from '$pkg/log';
import clamp from 'just-clamp';
type HandleType = 'toggle' | 'set';
export function play(type: HandleType = 'set') {
info('play: ', type);
return audio_element.subscribe((el) => {
if (!el) return warn('no audio element');
if (type === 'toggle') {
el.paused ? el.play() : el.pause();
} else {
el.play();
}
})();
}
export function pause(type: HandleType = 'set') {
info('pause: ', type);
return audio_element.subscribe((el) => {
if (!el) return warn('no audio element');
if (type === 'toggle') {
el.paused ? el.play() : el.pause();
} else {
el.pause();
}
})();
}
export function mute(type: HandleType = 'set') {
info('mute: ', type);
if (type === 'toggle') {
audio_muted.update((muted) => !muted);
} else {
audio_muted.set(true);
}
}
export function unmute(type: HandleType = 'set') {
info('unmute: ', type);
if (type === 'toggle') {
audio_muted.update((muted) => !muted);
} else {
audio_muted.set(false);
}
}
export const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
episode_progress.stash();
const { src, ...meta } = data;
const progress = episode_progress.use(src);
const start_at = progress?.start_at || opts.start_at || 0;
console.log('progress', progress);
info('load: ', src);
audio_autoplay.set(opts.autoplay);
audio_src.set(src);
metadata.set(meta);
audio_start_at.set(start_at);
// opts.current_time ? seek(opts.current_time) : null;
//opts.autoplay && play();
};
export function unload() {
episode_progress.stash();
info('unload: ');
pause();
audio_autoplay.set(false);
audio_src.set('');
metadata.set(null);
audio_start_at.set(0);
}
export function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
info('seek: ', seconds, from);
return audio_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);
}
})();
}
export function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
info('skip: ', seconds, type);
return audio_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);
}
})();
}
src/lib/context/episode-progress.ts
-87
View File
@@ -1,87 +0,0 @@
import { browser } from '$app/environment';
import { audio_current_time, audio_src } from '$lib/context/audio-internals';
import type { AudioLoadOptions, EpisodeProgress } from '$lib/types';
import { error, info, warn } from '$lib/utility/package/log';
import { get } from 'svelte/store';
const episode_progress_map = new Map<string, EpisodeProgress>();
function stash_episode() {
const src = get(audio_src);
if (!src) return;
info('saving progress: ', src);
episode_progress_map.set(src, { current_time: get(audio_current_time) });
save_all();
}
function use_episode(src: string): Pick<AudioLoadOptions, 'start_at'> | null {
const progress = episode_progress_map.get(src);
if (!progress) return null;
info('found saved progress: ', progress);
return { start_at: progress.current_time };
}
type SavedEpisodeProgress = EpisodeProgress & { src: string };
const EPISODE_PROGRESS_KEY = 'EPISODE_PROGRESS' as const;
function save_all() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping save');
return;
}
const items = [...episode_progress_map];
const episodes = items.reduce((prev, [src, progress]) => {
return [...prev, { src, ...progress }];
}, [] as SavedEpisodeProgress[]);
info(`Saving progress for ${episodes.length} episodes to localStorage`, episodes);
localStorage.setItem(EPISODE_PROGRESS_KEY, JSON.stringify(episodes));
}
function load_all() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping load');
return;
}
const data = localStorage.getItem(EPISODE_PROGRESS_KEY);
if (!data) {
info('No saved episode progress found');
return;
}
const episodes = JSON.parse(data) as SavedEpisodeProgress[];
try {
episodes.forEach(({ src, ...progress }) => {
episode_progress_map.set(src, progress);
});
info(`Loaded ${episode_progress_map.size} episodes progress from localStorage`);
} catch (e) {
error('Error loading episode progress', e);
return;
}
}
function clear_all() {
episode_progress_map.clear();
save_all();
}
export const episode_progress = {
episodes: {
get: episode_progress_map.get,
includes: episode_progress_map.has,
forEach: episode_progress_map.forEach,
map: [...episode_progress_map].map,
},
stash: stash_episode,
use: use_episode,
save_all,
load_all,
clear_all,
};
src/lib/context/user-preferences.ts
-66
View File
@@ -1,66 +0,0 @@
import { browser } from '$app/environment';
import type { UserPreferences } from '$lib/types';
import { info, warn } from '$lib/utility/package/log';
import clamp from 'just-clamp';
import { writable } from 'svelte/store';
const default_user_preferences = {
playback_rate: 1,
volume: 1,
} satisfies UserPreferences;
const user_preference_store = writable<UserPreferences>(default_user_preferences);
function clamp_preferences(prefs: UserPreferences) {
return {
playback_rate: clamp(prefs.playback_rate, 0.5, 5),
volume: clamp(prefs.volume, 0, 1),
};
}
function set_preference(prefs: Partial<UserPreferences>) {
user_preference_store.update((prev) => clamp_preferences({ ...prev, ...prefs }));
save();
}
const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
function save() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping save');
return;
}
return user_preference_store.subscribe((prefs) => {
info(`Saving user preferences to localStorage`, prefs);
localStorage.setItem(USER_PREFERENCE_KEY, JSON.stringify(prefs));
})();
}
function load() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping load');
return;
}
const data = localStorage.getItem(USER_PREFERENCE_KEY);
if (!data) {
info('No saved user preferences found');
return;
}
const preferences = JSON.parse(data) as UserPreferences;
set_preference(preferences);
info(`Loaded user preferences from localStorage`, preferences);
}
function clear() {
user_preference_store.set(default_user_preferences);
save();
}
export const user_preferences = {
subscribe: user_preference_store.subscribe,
set: set_preference,
save,
load,
clear,
};
src/lib/index.ts
+3 -5
View File
@@ -1,6 +1,4 @@
export { default as AudioLoader } from '$lib/components/audio-loader.svelte'; export * from '$lib/audio';
export * from '$lib/context/audio'; export * from '$lib/preferences';
export * from '$lib/context/episode-progress'; export * from '$lib/progress';
export * from '$lib/context/user-preferences';
export * from '$lib/stores';
export * from '$lib/utility'; export * from '$lib/utility';
src/lib/preferences/_private.ts
+9
View File
@@ -0,0 +1,9 @@
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/index.ts
+54
View File
@@ -0,0 +1,54 @@
import { browser } from '$app/environment';
import { _default_user_preferences, _user_preferences } from '$lib/preferences/_private';
import type { UserPreferences } from '$lib/types';
import { info, warn } from '$lib/utility/package/log';
import clamp from 'just-clamp';
function clamp_preferences(prefs: UserPreferences) {
return {
playback_rate: clamp(prefs.playback_rate, 0.5, 5),
volume: clamp(prefs.volume, 0, 1),
};
}
const USER_PREFERENCE_KEY = 'USER_PREFERENCE' as const;
function set(prefs: Partial<UserPreferences>) {
_user_preferences.update((prev) => clamp_preferences({ ...prev, ...prefs }));
save();
}
function save() {
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));
})();
}
export const podcast_preferences = {
subscribe: _user_preferences.subscribe,
set,
save,
load() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping load');
return;
}
const data = localStorage.getItem(USER_PREFERENCE_KEY);
if (!data) {
info('No saved user preferences found');
return;
}
const preferences = JSON.parse(data) as UserPreferences;
set(preferences);
info(`Loaded user preferences from localStorage`, preferences);
},
clear() {
_user_preferences.set(_default_user_preferences);
save();
},
};
src/lib/progress/_private.ts
+1
View File
@@ -0,0 +1 @@
export const _episode_progress_map = new Map<string, number>();
src/lib/progress/index.ts
+81
View File
@@ -0,0 +1,81 @@
import { browser } from '$app/environment';
import { _current_time, _src } from '$lib/audio/_private';
import { _episode_progress_map } from '$lib/progress/_private';
import type { AudioLoadOptions } from '$lib/types';
import { error, info, warn } from '$lib/utility/package/log';
import { get } from 'svelte/store';
type SavedEpisodeProgress = { src: string; current_time: number };
const EPISODE_PROGRESS_KEY = 'EPISODE_PROGRESS' as const;
function save_all() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping save');
return;
}
const items = [..._episode_progress_map];
const episodes = items.reduce((prev, [src, current_time]) => {
return [...prev, { src, current_time }];
}, [] as SavedEpisodeProgress[]);
info(`Saving progress for ${episodes.length} episodes to localStorage`, episodes);
localStorage.setItem(EPISODE_PROGRESS_KEY, JSON.stringify(episodes));
}
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() {
if (!browser || !localStorage) {
warn('localStorage not available, skipping load');
return;
}
const data = localStorage.getItem(EPISODE_PROGRESS_KEY);
if (!data) {
info('No saved episode progress found');
return;
}
const episodes = JSON.parse(data) as SavedEpisodeProgress[];
try {
episodes.forEach(({ src, current_time }) => {
podcast_progress.episodes.set(src, current_time);
});
info(`Loaded ${_episode_progress_map.size} episodes progress from localStorage`);
} catch (e) {
error('Error loading episode progress', e);
return;
}
},
clear_all() {
_episode_progress_map.clear();
save_all();
},
};
src/lib/stores.ts
-47
View File
@@ -1,47 +0,0 @@
import {
audio_autoplay,
audio_current_time,
audio_duration,
audio_ended,
audio_loading,
audio_muted,
audio_paused,
audio_src,
audio_start_at,
} from '$lib/context/audio-internals';
import { user_preferences } from '$lib/context/user-preferences';
import type { AudioLoadData, AudioLoadOptions, AudioMetadata } from '$lib/types';
import { secondsToTimestamp } from '$lib/utility/seconds-to-timestamp';
import { derived, writable } from 'svelte/store';
export const time = derived([audio_current_time, audio_ended], ([$seconds, $ended]) => ({
current_time: $seconds,
timestamp: secondsToTimestamp($seconds),
ended: $ended,
}));
export const metadata = writable<AudioMetadata | null>(null);
export const data = derived(
[audio_src, metadata],
([$src, $metadata]) =>
({
...$metadata,
src: $src,
} satisfies AudioLoadData),
);
export const options = derived(
[audio_start_at, audio_autoplay],
([$start_at, $autoplay]) =>
({
start_at: $start_at,
autoplay: $autoplay,
} satisfies AudioLoadOptions),
);
export const duration = { subscribe: audio_duration.subscribe };
export const loading = { subscribe: audio_loading.subscribe };
export const paused = { subscribe: audio_paused.subscribe };
export const muted = { subscribe: audio_muted.subscribe };
export const references = { subscribe: user_preferences.subscribe };
src/lib/types.ts
-4
View File
@@ -14,10 +14,6 @@ export interface AudioLoadOptions {
start_at?: number; start_at?: number;
} }
export interface EpisodeProgress {
current_time: number;
}
export interface UserPreferences { export interface UserPreferences {
playback_rate: number; playback_rate: number;
volume: number; volume: number;
src/lib/utility/use-state.ts
+6 -6
View File
@@ -1,12 +1,12 @@
import { episode_progress } from '$lib/context/episode-progress'; import { podcast_preferences } from '$lib/preferences';
import { user_preferences } from '$lib/context/user-preferences'; import { podcast_progress } from '$lib/progress';
export function save_podcast_state() { export function save_podcast_state() {
episode_progress.save_all(); podcast_progress.save_all();
user_preferences.save(); podcast_preferences.save();
} }
export function load_podcast_state() { export function load_podcast_state() {
episode_progress.load_all(); podcast_progress.load_all();
user_preferences.load(); podcast_preferences.load();
} }
src/routes/+page.svelte
+49 -21
View File
@@ -1,5 +1,17 @@
<script lang="ts"> <script lang="ts">
import { audio, episode_progress, save_podcast_state, user_preferences } from '$lib'; 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 type { AudioLoadData } from '$lib/types';
const sources = { const sources = {
@@ -16,61 +28,77 @@
} satisfies Record<string, AudioLoadData>; } satisfies Record<string, AudioLoadData>;
let current_time = 0; let current_time = 0;
$: current_time = $audio.current_time; $: current_time = $podcast_time.current_time;
</script> </script>
<pre>{JSON.stringify($audio, null, 3)}</pre> <pre>{JSON.stringify(
{
podcast_time,
podcast_data,
podcast_options,
podcast_duration,
podcast_loading,
podcast_paused,
podcast_muted,
podcast_preferences,
podcast_progress,
},
null,
3,
)}</pre>
<h1>Demo</h1> <h1>Demo</h1>
<a href="/another-page">Another Page</a> <a href="/another-page">Another Page</a>
<button type="button" on:click={episode_progress.save_all}>Save progress</button> <button type="button" on:click={podcast_progress.save_all}>Save progress</button>
<button type="button" on:click={user_preferences.save}>Save preferences</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={save_podcast_state}>Save state (all)</button>
<h5>Load Audio</h5> <h5>Load Audio</h5>
<button <button
type="button" type="button"
on:click={() => audio.load(sources['syntax'], { autoplay: true, start_at: 45 })}>Syntax</button on:click={() => podcast_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={() => podcast_audio.load(sources['knomii'], { autoplay: false })}
>Knomii</button >Knomii</button
> >
<button type="button" on:click={() => audio.unload()}>None</button> <button type="button" on:click={() => podcast_audio.unload()}>None</button>
<h5>Custom audio controls</h5> <h5>Custom audio controls</h5>
<h6>Play / Pause Actions</h6> <h6>Play / Pause Actions</h6>
<button type="button" on:click={() => audio.play()}>Play</button> <button type="button" on:click={() => podcast_audio.play()}>Play</button>
<button type="button" on:click={() => audio.pause()}>Pause</button> <button type="button" on:click={() => podcast_audio.pause()}>Pause</button>
<button type="button" on:click={() => audio.pause('toggle')}>Toggle</button> <button type="button" on:click={() => podcast_audio.pause('toggle')}>Toggle</button>
<h6>Audio Actions</h6> <h6>Audio Actions</h6>
<button type="button" on:click={() => audio.mute()}>Mute</button> <button type="button" on:click={() => podcast_audio.mute()}>Mute</button>
<button type="button" on:click={() => audio.unmute()}>Unmute</button> <button type="button" on:click={() => podcast_audio.unmute()}>Unmute</button>
<button type="button" on:click={() => audio.mute('toggle')}>Toggle</button> <button type="button" on:click={() => podcast_audio.mute('toggle')}>Toggle</button>
<h6>Seeking</h6> <h6>Seeking</h6>
<input <input
type="range" type="range"
min={0} min={0}
max={$audio.duration} max={$podcast_duration}
style="width:100%" style="width:100%"
bind:value={current_time} bind:value={current_time}
on:change={(e) => audio.seek(parseInt(e.currentTarget.value))} on:change={(e) => podcast_audio.seek(parseInt(e.currentTarget.value))}
/> />
<button type="button" on:click={() => audio.seek(30)}>Go to 30s from start </button> <button type="button" on:click={() => podcast_audio.seek(30)}>Go to 30s from start </button>
<button type="button" on:click={() => audio.seek(30, 'from-end')}>Go to 30s from end</button> <button type="button" on:click={() => podcast_audio.seek(30, 'from-end')}>Go to 30s from end</button
<button type="button" on:click={() => audio.skip(10, 'forward')}>Skip 10s</button> >
<button type="button" on:click={() => audio.skip(10, 'backward')}>Rewind 10s</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>
<h6>Playback Rate</h6> <h6>Playback Rate</h6>
{#each [0.5, 1, 2, 3] as rate} {#each [0.5, 1, 2, 3] as rate}
<button type="button" on:click={() => user_preferences.set({ playback_rate: rate })} <button type="button" on:click={() => podcast_preferences.set({ playback_rate: rate })}
>{rate}x</button >{rate}x</button
> >
{/each} {/each}
src/routes/another-page/+page.svelte
+24 -5
View File
@@ -1,12 +1,31 @@
<script lang="ts"> <script lang="ts">
import { audio } from '$lib'; import {
podcast_data,
let current_time = 0; podcast_duration,
$: current_time = $audio.current_time; podcast_loading,
podcast_muted,
podcast_options,
podcast_paused,
podcast_preferences,
podcast_time,
} from '$lib';
</script> </script>
<h1>Demo</h1> <h1>Demo</h1>
<a href="/">Demo</a> <a href="/">Demo</a>
<pre>{JSON.stringify($audio, null, 3)}</pre> <pre>{JSON.stringify(
{
podcast_time,
podcast_data,
podcast_options,
podcast_duration,
podcast_loading,
podcast_paused,
podcast_muted,
podcast_preferences,
},
null,
3,
)}</pre>