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

improves handling of user data

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-25 18:25:59 +00:00
parent 4be36ba047
commit 7cad6ee1d6
23 changed files with 154 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/audio/audio-element.ts
+13 -6
View File
@@ -1,18 +1,27 @@
import { browser } from '$app/environment';
import { user_preferences } from '$lib/user';
import { onMount } from 'svelte';
import { readable } from 'svelte/store';
import { get, 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');
const existing_element = document.getElementById(ID) as HTMLAudioElement | null;
const el = existing_element || document.createElement('audio');
el.id = ID;
el.setAttribute('preload', 'metadata');
el.muted = false;
el.autoplay = true;
el.controls = true;
document.body.appendChild(el);
el.controls = false;
const preferences = get(user_preferences);
el.playbackRate = preferences.playback_rate;
el.volume = preferences.volume;
if (!existing_element) document.body.appendChild(el);
set(el);
});
@@ -21,5 +30,3 @@ export const audio_element = readable<HTMLAudioElement | null>(null, (set) => {
element ? element.remove() : null;
};
});
export type AudioElementStore = typeof audio_element;
src/lib/audio/audio-loader.svelte
+16 -5
View File
@@ -1,13 +1,24 @@
<script lang="ts">
import { audio_element } from '$lib/audio/audio-element';
import { load_podcast_state } from '$lib/utility';
import { info } from '$lib/utility/package/log';
import { user_preferences } from '$lib/user';
import { info, warn } from '$lib/utility/package/log';
import { onMount } from 'svelte';
import { get } from 'svelte/store';
$: $audio_element;
/* onMount(() => {
return audio_element.subscribe((el) => {
if (el) info('mounted audio element :: ', el);
});
}); */
onMount(() => {
load_podcast_state();
return audio_element.subscribe((el) => {
info('loaded audio :: ', el);
return user_preferences.subscribe((prefs) => {
const el = get(audio_element);
if (!el) return warn('no audio element found');
info('setting preferences :: ', prefs);
el.volume = prefs.volume;
el.playbackRate = prefs.playback_rate;
});
});
</script>
src/lib/audio/episode-data.ts
+18 -17
View File
@@ -1,11 +1,10 @@
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 { audio_element } from '$lib/audio/audio-element';
import { episode_details } from '$lib/audio/episode-details';
import type { EpisodeAttributes, EpisodeDetails } from '$lib/types';
import { user_preferences, user_progress } from '$lib/user';
import { warn } from '$lib/utility/package/log';
import clamp from 'just-clamp';
import { derived, get } from 'svelte/store';
import { derived, get, type Readable } from 'svelte/store';
const default_episode_attributes = {
will_autoplay: false,
@@ -15,10 +14,9 @@ const default_episode_attributes = {
details: null,
} satisfies Omit<EpisodeAttributes, 'src'>;
const episode_attributes = derived<
[AudioElementStore, EpisodeDetailsStore],
EpisodeAttributes | null
>([audio_element, episode_details], ([$audio, $details], set) => {
type EpisodeAttributesStore = Readable<EpisodeAttributes | null>;
const episode_attributes = derived([audio_element, episode_details], ([$audio, $details], set) => {
if (!$audio) return set(null);
function set_value() {
@@ -30,7 +28,7 @@ const episode_attributes = derived<
details: $details,
will_autoplay: $audio.autoplay,
is_paused: $audio.paused,
start_at: podcast_progress.get_episode($audio.src)?.start_at ?? 0,
start_at: user_progress.get($audio.src) ?? 0,
});
}
@@ -43,7 +41,7 @@ const episode_attributes = derived<
$audio.removeEventListener('pause', set_value);
$audio.removeEventListener('playing', set_value);
};
});
}) satisfies EpisodeAttributesStore;
type HandleType = 'toggle' | 'set';
@@ -52,22 +50,25 @@ const no_element = (action: string) => warn(`could not ${action} :: no audio ele
export const episode_audio = {
subscribe: episode_attributes.subscribe,
load: (src: string, details: EpisodeDetails) => {
podcast_progress.stash_episode();
user_progress.save();
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;
el.muted = false;
// using user_progress
const start_at = user_progress.get(src) || 0;
el.currentTime = start_at;
// using user_preferences
const preferences = get(user_preferences);
el.playbackRate = preferences.playback_rate;
el.volume = preferences.volume;
el.muted = false;
episode_details.set(details);
},
unload: () => {
podcast_progress.stash_episode();
user_progress.save();
const el = get(audio_element);
if (!el) return no_element('unload');
el.src = '';
@@ -84,7 +85,7 @@ export const episode_audio = {
}
},
pause: (t?: HandleType) => {
podcast_progress.stash_episode();
user_progress.save();
const el = get(audio_element);
if (!el) return no_element('pause');
src/lib/audio/episode-details.ts
-1
View File
@@ -2,4 +2,3 @@ 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
+17 -18
View File
@@ -1,7 +1,7 @@
import { audio_element, type AudioElementStore } from '$lib/audio/audio-element';
import { audio_element } from '$lib/audio/audio-element';
import type { EpisodeProgress } from '$lib/types';
import { secondsToTimestamp } from '$lib/utility';
import { derived } from 'svelte/store';
import { derived, type Readable } from 'svelte/store';
const default_episode_progress = {
current_time: 0,
@@ -9,21 +9,20 @@ const default_episode_progress = {
has_ended: false,
} satisfies EpisodeProgress;
export const episode_progress = derived<AudioElementStore, EpisodeProgress>(
audio_element,
($audio, set) => {
if (!$audio) return set(default_episode_progress);
type ProgressStore = Readable<EpisodeProgress>;
function set_value() {
if (!$audio) return;
set({
current_time: $audio.currentTime,
timestamp: secondsToTimestamp($audio.currentTime),
has_ended: $audio.ended,
});
}
export const episode_progress = derived(audio_element, ($audio, set) => {
if (!$audio) return set(default_episode_progress);
$audio.addEventListener('timeupdate', () => set_value());
return () => $audio.removeEventListener('timeupdate', () => set_value());
},
);
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());
}) satisfies ProgressStore;