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

refactor audio to use custom listener stores

Browse Source
This commit is contained in:
Ollie Taylor
2023-02-25 14:16:19 +00:00
parent acbdd46fe3
commit 42c27b2469
13 changed files with 259 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
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
+23 -43
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_preferences, podcast_progress, save_podcast_state } 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,
$podcast_preferences,
},
null,
3,
@@ -49,51 +31,49 @@
<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_progress.save}>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>
<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>
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,