Disable autoplay (#51)

.changeset/yellow-doors-call.md

@@ -0,0 +1,5 @@
+---
+'svelte-podcast': minor
+---
+
+removes autoplay as it doesn't behave as users would expect

src/lib/_internal_/audio-element.ts

@@ -35,7 +35,6 @@ export const audio_element: Readable<HTMLAudioElement | null> = 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<HTMLAudioElement | null> = 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);

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. */

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;
 	}
 };

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<AudioAttributes> = derived(
@@ -23,6 +24,7 @@ export const audio_attributes: Readable<AudioAttributes> = 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<AudioAttributes> = derived(
 		}
 
 		set({
+			src: $el.src,
 			is_loaded: Boolean($el.src),
 			is_paused: $el.paused,
 			current_time: $el.currentTime,

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;
 

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

src/routes/setup/+page.svelte

@@ -68,8 +68,7 @@
 
 		<p>
 			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 <a
+			metadata for you to use in your player. Learn more in the <a
 				href="/api/#audio.src">api docs</a
 			>
 		</p>

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,
 );