From f42a00f04c1c178dc2b25ce958460db369e6d1aa Mon Sep 17 00:00:00 2001 From: Ollie Taylor <13766232+OllieJT@users.noreply.github.com> Date: Sat, 29 Jul 2023 20:11:22 +0100 Subject: [PATCH] Disable autoplay (#51) --- .changeset/yellow-doors-call.md | 5 +++++ src/lib/_internal_/audio-element.ts | 4 +--- src/lib/_internal_/audio-state.ts | 3 --- src/lib/actions.ts | 12 ++++-------- src/lib/attributes.ts | 13 ++++++++----- src/lib/utility/format-seconds.ts | 4 ---- src/routes/api/code/audio-load.js | 3 --- src/routes/setup/+page.svelte | 3 +-- src/routes/setup/code/load-audio-advanced.js | 3 --- 9 files changed, 19 insertions(+), 31 deletions(-) create mode 100644 .changeset/yellow-doors-call.md diff --git a/.changeset/yellow-doors-call.md b/.changeset/yellow-doors-call.md new file mode 100644 index 0000000..bf7ffa9 --- /dev/null +++ b/.changeset/yellow-doors-call.md @@ -0,0 +1,5 @@ +--- +'svelte-podcast': minor +--- + +removes autoplay as it doesn't behave as users would expect diff --git a/src/lib/_internal_/audio-element.ts b/src/lib/_internal_/audio-element.ts index 5e897aa..84618d9 100644 --- a/src/lib/_internal_/audio-element.ts +++ b/src/lib/_internal_/audio-element.ts @@ -35,7 +35,6 @@ export const audio_element: Readable = derived( el.currentTime = $audio_state.start_at; el.playbackRate = $audio_state.playback_rate || 1; el.volume = $audio_state.volume || 1; - el.autoplay = $audio_state.autoplay || false; } // If a new HTMLAudioElement was created, append it to the body. @@ -44,11 +43,10 @@ export const audio_element: Readable = derived( // Define a function to set the HTMLAudioElement and call it. const handle_update = () => { set(el); - $audio_state?.autoplay && el.play(); - announce.info('Updating audio element'); }; handle_update(); + announce.info('Setting audio element'); // Add event listeners to the HTMLAudioElement to update the store when it changes. el.addEventListener('loadeddata', handle_update); diff --git a/src/lib/_internal_/audio-state.ts b/src/lib/_internal_/audio-state.ts index e1e55e6..a0a551a 100644 --- a/src/lib/_internal_/audio-state.ts +++ b/src/lib/_internal_/audio-state.ts @@ -1,7 +1,5 @@ import { writable, type Writable } from 'svelte/store'; -// TODO: implement autoplay - /** * An object representing the state of an audio player. */ @@ -10,7 +8,6 @@ interface AudioState { start_at: number; playback_rate?: number; volume?: number; - autoplay?: boolean; } /** A writable Svelte store containing the audio state. */ diff --git a/src/lib/actions.ts b/src/lib/actions.ts index 4d4c07f..1b4c0c8 100644 --- a/src/lib/actions.ts +++ b/src/lib/actions.ts @@ -15,7 +15,7 @@ import { user_progress } from './user-progress'; * @param src - Audio source * @param metadata - Audio metadata */ -const load_src = (src: string, metadata: AudioMetadata, autoplay = false) => { +const load_src = (src: string, metadata: AudioMetadata) => { if (!BROWSER) return; // Save the current progress if audio is already loaded @@ -30,7 +30,6 @@ const load_src = (src: string, metadata: AudioMetadata, autoplay = false) => { start_at: user_progress.get(src) || 0, playback_rate: preferences.playback_rate, volume: preferences.volume, - autoplay: autoplay, }); // Set metadata for current audio @@ -59,12 +58,11 @@ const unload_src = () => { */ const play = (playing: boolean | 'toggle' = 'toggle') => { const el = use_audio_element('play'); + console.log(el, el.paused); if (typeof playing === 'boolean') { playing ? el.play() : el.pause(); - } - - if (playing === 'toggle') { + } else { el.paused ? el.play() : el.pause(); } }; @@ -78,9 +76,7 @@ const mute = (muted: boolean | 'toggle' = 'toggle') => { if (typeof muted === 'boolean') { el.muted = muted; - } - - if (muted === 'toggle') { + } else { el.muted = !el.muted; } }; diff --git a/src/lib/attributes.ts b/src/lib/attributes.ts index c52cfd1..fe7c22a 100644 --- a/src/lib/attributes.ts +++ b/src/lib/attributes.ts @@ -7,15 +7,16 @@ import { format_seconds } from './utility/format-seconds'; /** * An object representing the attributes of an audio element. */ -export interface AudioAttributes { - is_loaded: boolean; - is_paused: boolean; +export type AudioAttributes = { current_time: number; duration: number; + is_loaded: boolean; + is_paused: boolean; + metadata: AudioMetadata | null; + src: string | null; timestamp_current: string; timestamp_end: string; - metadata: AudioMetadata | null; -} +}; /** A readable Svelte store containing the audio attributes. */ export const audio_attributes: Readable = derived( @@ -23,6 +24,7 @@ export const audio_attributes: Readable = derived( ([$el, $meta], set) => { if (!$el) { return set({ + src: null, is_loaded: false, is_paused: true, current_time: 0, @@ -34,6 +36,7 @@ export const audio_attributes: Readable = derived( } set({ + src: $el.src, is_loaded: Boolean($el.src), is_paused: $el.paused, current_time: $el.currentTime, diff --git a/src/lib/utility/format-seconds.ts b/src/lib/utility/format-seconds.ts index 8e432e3..d19b59d 100644 --- a/src/lib/utility/format-seconds.ts +++ b/src/lib/utility/format-seconds.ts @@ -1,5 +1,3 @@ -import { announce } from '../_internal_/announce'; - /** * Returns a string timestamp in the format of "hh:mm:ss" from a given number of seconds. * @param seconds - The number of seconds to convert to a timestamp. @@ -14,8 +12,6 @@ function seconds_to_timestamp( ): string { const safe_seconds = Number(seconds) || 0; - announce.info({ seconds, force_hours, seperator, safe_seconds }); - const hours = Math.floor(safe_seconds / 3600); const hours_remainder = safe_seconds % 3600; diff --git a/src/routes/api/code/audio-load.js b/src/routes/api/code/audio-load.js index 405a84f..5bf66b4 100644 --- a/src/routes/api/code/audio-load.js +++ b/src/routes/api/code/audio-load.js @@ -13,9 +13,6 @@ audio.src.load( guests: ['Rich Harris'], hosts: ['Wes Bos', 'Scott Tolinski'], }, - - // autoplay - false, ); // unload the current audio source diff --git a/src/routes/setup/+page.svelte b/src/routes/setup/+page.svelte index 67d762c..a33365a 100644 --- a/src/routes/setup/+page.svelte +++ b/src/routes/setup/+page.svelte @@ -68,8 +68,7 @@

Along side your audio source, you can optionally define arbitrary - metadata for you to use in your player, and determine if the episode - should autoplay once loaded. Learn more in the api docs

diff --git a/src/routes/setup/code/load-audio-advanced.js b/src/routes/setup/code/load-audio-advanced.js index 8bb67c5..19b2add 100644 --- a/src/routes/setup/code/load-audio-advanced.js +++ b/src/routes/setup/code/load-audio-advanced.js @@ -10,7 +10,4 @@ audio.src.load( artwork: '/artwork.png', guest_name: 'OllieJT', }, - - // Autoplay once loaded - false, );