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

Fixes derived audio store updating too frequently (#26)

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-24 23:39:44 +00:00
committed by GitHub
parent b9b8ce2f44 6c849b7a60
commit 0c88d8a9ab
7 changed files with 74 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/violet-meals-worry.md
+5
View File
@@ -0,0 +1,5 @@
---
'svelte-podcast': patch
---
Fixes derived store causing exessive updates
src/lib/context/audio-metadata.ts
-4
View File
@@ -1,4 +0,0 @@
import type { AudioMetadata } from '$lib/types';
import { writable } from 'svelte/store';
export const audio_metadata = writable<AudioMetadata | null>(null);
src/lib/context/audio.ts
+12 -77
View File
@@ -1,72 +1,19 @@
import {
audio_autoplay,
audio_current_time,
audio_duration,
audio_element,
audio_ended,
audio_loading,
audio_muted,
audio_paused,
audio_src,
audio_start_at,
} from '$lib/context/audio-internals';
import { audio_metadata } from '$lib/context/audio-metadata';
import { episode_progress } from '$lib/context/episode-progress';
import { user_preferences } from '$lib/context/user-preferences';
import { metadata } from '$lib/stores';
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';
const audio_state = derived(
[
audio_current_time,
audio_duration,
audio_ended,
audio_loading,
audio_paused,
audio_start_at,
audio_autoplay,
audio_muted,
audio_src,
audio_metadata,
user_preferences,
],
([
$current_time,
$duration,
$ended,
$loading,
$paused,
$start_at,
$autoplay,
$muted,
$src,
$metadata,
$user_preferences,
]) => {
return {
current_time: $current_time,
duration: $duration,
ended: $ended,
loading: $loading,
paused: $paused,
start_at: $start_at,
autoplay: $autoplay,
muted: $muted,
src: $src,
metadata: $metadata,
playback_rate: $user_preferences.playback_rate,
volume: $user_preferences.volume,
timestamp: secondsToTimestamp($current_time),
};
},
);
type HandleType = 'toggle' | 'set';
function play(type: HandleType = 'set') {
export function play(type: HandleType = 'set') {
info('play: ', type);
return audio_element.subscribe((el) => {
if (!el) return warn('no audio element');
@@ -77,7 +24,7 @@ function play(type: HandleType = 'set') {
}
})();
}
function pause(type: HandleType = 'set') {
export function pause(type: HandleType = 'set') {
info('pause: ', type);
return audio_element.subscribe((el) => {
if (!el) return warn('no audio element');
@@ -89,7 +36,7 @@ function pause(type: HandleType = 'set') {
})();
}
function mute(type: HandleType = 'set') {
export function mute(type: HandleType = 'set') {
info('mute: ', type);
if (type === 'toggle') {
audio_muted.update((muted) => !muted);
@@ -97,7 +44,7 @@ function mute(type: HandleType = 'set') {
audio_muted.set(true);
}
}
function unmute(type: HandleType = 'set') {
export function unmute(type: HandleType = 'set') {
info('unmute: ', type);
if (type === 'toggle') {
audio_muted.update((muted) => !muted);
@@ -106,10 +53,10 @@ function unmute(type: HandleType = 'set') {
}
}
const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
export const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
episode_progress.stash();
const { src, ...metadata } = data;
const { src, ...meta } = data;
const progress = episode_progress.use(src);
const start_at = progress?.start_at || opts.start_at || 0;
@@ -118,22 +65,22 @@ const load = (data: AudioLoadData, opts: AudioLoadOptions) => {
info('load: ', src);
audio_autoplay.set(opts.autoplay);
audio_src.set(src);
audio_metadata.set(metadata);
metadata.set(meta);
audio_start_at.set(start_at);
// opts.current_time ? seek(opts.current_time) : null;
//opts.autoplay && play();
};
function unload() {
export function unload() {
episode_progress.stash();
info('unload: ');
pause();
audio_autoplay.set(false);
audio_src.set('');
audio_metadata.set(null);
metadata.set(null);
audio_start_at.set(0);
}
function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
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');
@@ -145,7 +92,7 @@ function seek(seconds: number, from: 'from-start' | 'from-end' = 'from-start') {
})();
}
function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
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');
@@ -156,15 +103,3 @@ function skip(seconds: number, type: 'forward' | 'backward' = 'forward') {
}
})();
}
export const audio = {
subscribe: audio_state.subscribe,
play,
pause,
mute,
unmute,
load,
unload,
seek,
skip,
};
src/lib/context/episode-progress.ts
+7 -7
View File
@@ -1,17 +1,17 @@
import { browser } from '$app/environment';
import { audio } from '$lib/context/audio';
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() {
return audio.subscribe((state) => {
info('saving progress: ', state.src);
if (!state.src) return;
episode_progress_map.set(state.src, { current_time: state.current_time });
save_all();
})();
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 {
src/lib/index.ts
+1
View File
@@ -2,4 +2,5 @@ export { default as AudioLoader } from '$lib/components/audio-loader.svelte';
export * from '$lib/context/audio';
export * from '$lib/context/episode-progress';
export * from '$lib/context/user-preferences';
export * from '$lib/stores';
export * from '$lib/utility';
src/lib/stores.ts
+47
View File
@@ -0,0 +1,47 @@
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
+2 -2
View File
@@ -1,9 +1,9 @@
export type AudioPlayerElement = HTMLAudioElement | undefined;
export interface AudioMetadata {
export type AudioMetadata = Partial<{
title: string;
artwork: string;
}
}>;
export interface AudioLoadData extends AudioMetadata {
src: string;