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

Podcast player components (#37)

Browse Source
This commit is contained in:
Ollie Taylor
2023-03-06 15:25:34 +00:00
committed by GitHub
parent 47aabda96d
commit 9232f4d52e
37 changed files with 1375 additions and 156 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/audio';
import { AudioLoader } from 'svelte-podcast';
</script>
<AudioLoader />
src/routes/+page.svelte
+60 -12
View File
@@ -1,5 +1,12 @@
<script lang="ts">
import { episode_audio, episode_progress, user_preferences, user_progress } from '$lib';
import {
episode_audio,
episode_progress,
PlayerStack,
PlayerWidget,
user_preferences,
user_progress,
} from 'svelte-podcast';
const sources = {
syntax: {
@@ -16,6 +23,8 @@
let current_time = 0;
$: current_time = $episode_progress.current_time;
$: console.log('details :: ', $episode_audio?.details);
</script>
<pre>{JSON.stringify(
@@ -25,7 +34,7 @@
$user_preferences,
},
null,
3,
2,
)}</pre>
<h1>Demo</h1>
@@ -34,7 +43,7 @@
<button type="button" on:click={user_preferences.clear}>Clear all preferences</button>
<h5>Load Audio</h5>
<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['knomii'])}
<button type="button" on:click={() => episode_audio.load(sources['syntax'].src, sources['syntax'])}
>Syntax</button
>
<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
@@ -58,15 +67,6 @@
<h6>Seeking</h6>
<input
type="range"
min={0}
max={$episode_audio?.duration}
style="width:100%"
bind:value={current_time}
on:change={(e) => episode_audio.seek(parseInt(e.currentTarget.value))}
/>
<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
>
@@ -80,3 +80,51 @@
{rate}x
</button>
{/each}
<hr />
<!-- <PodcastPlayer
artwork={$episode_audio?.details?.artwork}
title={$episode_audio?.details?.title || 'Podcast Name'}
/> -->
<br />
<PlayerWidget />
<br />
<br />
<PlayerWidget include={{ playback_rate: true }} />
<br />
<br />
<PlayerWidget include={{ skip_back: 10, skip_forward: 30 }} />
<br />
<br />
<PlayerWidget
style="width: 100%;"
include={{
current_time: true,
playback_rate: true,
duration: true,
skip_back: 10,
skip_forward: 30,
}}
/>
<br />
<br />
<PlayerStack style="width:400px;" />
<br />
<br />
<PlayerStack include={{ playback_rate: true }} />
<br />
<br />
<PlayerStack include={{ skip_back: 10, skip_forward: 30, timestamps: true }} />
<br />
<br />
<PlayerStack
include={{
playback_rate: true,
timestamps: true,
skip_back: 10,
skip_forward: 30,
}}
/>
src/routes/another-page/+page.svelte
+98 -6
View File
@@ -1,16 +1,108 @@
<script lang="ts">
import { episode_audio, episode_progress } from '$lib/audio';
import {
episode_audio,
episode_progress,
PlayerWidget,
user_preferences,
user_progress,
} from 'svelte-podcast';
const sources = {
syntax: {
src: `/example-syntax.mp3`,
title: `Supper Club × Rich Harris, Author of Svelte`,
artwork: `https://ssl-static.libsyn.com/p/assets/b/3/c/d/b3cdf28da11ad39fe5bbc093207a2619/Syntax_-_499.jpg`,
},
knomii: {
src: `/example-knomii.mp3`,
title: `Empowerment starts with letting go of control`,
artwork: `https://ssl-static.libsyn.com/p/assets/f/a/8/d/fa8d56d5226884335f2e77a3093c12a1/ep-6.png`,
},
} as const;
let current_time = 0;
$: current_time = $episode_progress.current_time;
$: console.log('details :: ', $episode_audio?.details);
</script>
<h1>Demo</h1>
<a href="/">Demo</a>
<pre>{JSON.stringify(
{
$episode_audio,
$episode_progress,
$user_preferences,
},
null,
3,
2,
)}</pre>
<h1>Demo</h1>
<a href="/another-page">Another Page</a>
<button type="button" on:click={user_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={() => episode_audio.load(sources['syntax'].src, sources['syntax'])}
>Syntax</button
>
<button type="button" on:click={() => episode_audio.load(sources['knomii'].src, sources['knomii'])}
>Knomii</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={() => 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={() => 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>
<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={() => 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={() => user_preferences.set.playback_rate(rate)}>
{rate}x
</button>
{/each}
<hr />
<!-- <PodcastPlayer
artwork={$episode_audio?.details?.artwork}
title={$episode_audio?.details?.title || 'Podcast Name'}
/> -->
<br />
<PlayerWidget />
<br />
<br />
<PlayerWidget include={{ playback_rate: true }} />
<br />
<br />
<PlayerWidget include={{ skip_back: 10, skip_forward: 30 }} />
<br />
<br />
<PlayerWidget
include={{
current_time: true,
playback_rate: true,
duration: true,
skip_back: 10,
skip_forward: 30,
}}
/>