animot-presenter 0.5.14 → 0.5.16

package/dist/AnimotPresenter.svelte

@@ -190,6 +190,13 @@
 	// Single <audio> element for per-slide narration playback. Only used
 	// when `project.settings.narrationEnabled` is true. Lazy-allocated so
 	// decks without narration don't pay for it.
+	//
+	// Narration is bound to the deck's PLAY state (`isAutoplay`), not to
+	// arbitrary page clicks: the user pressing the play button is what
+	// starts narration, the pause button stops it. This keeps multiple
+	// decks on a page from playing each other's audio when one is clicked,
+	// and keeps autoplay-blocked browsers from silently doing nothing —
+	// the user's click on the play control is itself the unlocking gesture.
 	let narrationAudio: HTMLAudioElement | null = null;
 	function playNarrationForSlide(index: number) {
 		if (!project?.settings?.narrationEnabled) return;
@@ -202,11 +209,11 @@
 		if (!src) return;
 		if (!narrationAudio) narrationAudio = new Audio();
 		narrationAudio.src = src;
-		// First play() may reject under autoplay policy; the player's first
-		// user gesture (pressing play / clicking the deck) unlocks the audio
-		// context and subsequent slides will work.
 		narrationAudio.play().catch(() => {});
 	}
+	function pauseNarration() {
+		if (narrationAudio) narrationAudio.pause();
+	}
 	function stopNarration() {
 		if (narrationAudio) { narrationAudio.pause(); narrationAudio = null; }
 	}
@@ -571,12 +578,10 @@
 		const targetSlide = slides[targetIndex];
 		clearAllTypewriterAnimations();
 		cancelMotionPathLoops();
-		// Trigger per-slide narration. No-op when `narrationEnabled` is off
-		// or the slide has no narration clip. First call may be blocked by
-		// the browser's autoplay policy; the deck consumer should suppress
-		// `autoplay` when narration is on so the viewer's first nav-click
-		// (which gets us here) acts as the unlocking gesture.
-		playNarrationForSlide(targetIndex);
+		// Trigger per-slide narration only while the deck is actively
+		// playing. Manual nav while paused stays silent — narration is
+		// bound to the play button, not to every interaction.
+		if (isAutoplay) playNarrationForSlide(targetIndex);
 		const transition = targetSlide.transition;
 		const duration = durationOverride ?? transition.duration;
 		transitionDurationMs = duration;
@@ -1136,11 +1141,9 @@
 			await loadCodeHighlights();
 			loading = false;
 			if (currentSlide) setTimeout(() => animateMotionPaths(currentSlide!), 300);
-			// First-slide narration. Browsers may block this until the
-			// viewer interacts; downstream code (e.g. share-link page)
-			// should already disable autoplay when narration is on so the
-			// click that starts the deck doubles as the audio unlock.
-			playNarrationForSlide(currentSlideIndex);
+			// Narration starts via the play-state effect below — not on
+			// mount. That way the user's click on Play is the gesture
+			// that unlocks audio, and a paused deck stays silent.
 			if (autoplay) isAutoplay = true;
 		} catch (e: any) { error = e.message; loading = false; }
 	}
@@ -1158,7 +1161,28 @@
 		});
 		if (containerEl) resizeObserver.observe(containerEl);
 		resetMouseIdleTimer();
-		return () => { resizeObserver?.disconnect(); clearAutoplayTimer(); clearAllTypewriterAnimations(); if (mouseIdleTimer) clearTimeout(mouseIdleTimer); stopNarration(); };
+
+		return () => {
+			resizeObserver?.disconnect();
+			clearAutoplayTimer();
+			clearAllTypewriterAnimations();
+			if (mouseIdleTimer) clearTimeout(mouseIdleTimer);
+			stopNarration();
+		};
+	});
+
+	// Narration follows the deck's play/pause state. The play button click
+	// flips `isAutoplay` true → this effect fires → audio starts. The
+	// click itself is the user gesture that unlocks the browser audio
+	// context. Pause/stop turns it back off. Each presenter instance
+	// scopes its own audio, so multiple decks on a page never overlap.
+	$effect(() => {
+		if (!project?.settings?.narrationEnabled) return;
+		if (isAutoplay) {
+			playNarrationForSlide(currentSlideIndex);
+		} else {
+			pauseNarration();
+		}
 	});
 
 	// Watch for prop changes