fix: add media listeners immediately when using `bind:paused` (#13502)

Fix a bug where play/pause events may never be added to the media element. Also simplifies the logic by making it an effect instead of a render effect

---------

Co-authored-by: Simon Holthausen <simon.holthausen@vercel.com>

.changeset/fair-items-bathe.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add media listeners immediately when using `bind:paused`

packages/svelte/src/internal/client/dom/elements/bindings/media.js

@@ -138,56 +138,28 @@ export function bind_playback_rate(media, get, set = get) {
  * @param {(paused: boolean) => void} set
  */
 export function bind_paused(media, get, set = get) {
-	var mounted = hydrating;
 	var paused = get();
 
-	var callback = () => {
+	var update = () => {
 		if (paused !== media.paused) {
-			paused = media.paused;
 			set((paused = media.paused));
 		}
 	};
 
-	if (paused == null) {
+	// If someone switches the src while media is playing, the player will pause.
-		callback();
+	// Listen to the canplay event to get notified of this situation.
-	}
+	listen(media, ['play', 'pause', 'canplay'], update, paused == null);
-
-	// Defer listening if not mounted yet so that the first canplay event doesn't cause a potentially wrong update
-	if (mounted) {
-		// If someone switches the src while media is playing, the player will pause.
-		// Listen to the canplay event to get notified of this situation.
-		listen(media, ['play', 'pause', 'canplay'], callback, false);
-	}
 
-	render_effect(() => {
+	// Needs to be an effect to ensure media element is mounted: else, if paused is `false` (i.e. should play right away)
-		paused = !!get();
+	// a "The play() request was interrupted by a new load request" error would be thrown because the resource isn't loaded yet.
-
+	effect(() => {
-		if (paused !== media.paused) {
+		if ((paused = !!get()) !== media.paused) {
-			var toggle = () => {
+			if (paused) {
-				mounted = true;
+				media.pause();
-				if (paused) {
-					media.pause();
-				} else {
-					media.play().catch(() => {
-						set((paused = true));
-					});
-				}
-			};
-
-			if (mounted) {
-				toggle();
 			} else {
-				// If this is the first invocation in dom mode, the media element isn't mounted yet,
+				media.play().catch(() => {
-				// and therefore its resource isn't loaded yet. We need to wait for the canplay event
+					set((paused = true));
-				// in this case or else we'll get a "The play() request was interrupted by a new load request" error.
+				});
-				media.addEventListener(
-					'canplay',
-					() => {
-						listen(media, ['play', 'pause', 'canplay'], callback, false);
-						toggle();
-					},
-					{ once: true }
-				);
 			}
 		}
 	});