animot-presenter 0.5.15 → 0.5.17

package/dist/AnimotPresenter.svelte

@@ -155,7 +155,7 @@
 	let {
 		src, data, autoplay = false, loop = false, controls = true, arrows = false,
 		progress: showProgress = true, keyboard = true, duration: durationOverride,
-		startSlide = 0, class: className = '', onslidechange, oncomplete
+		startSlide = 0, muteNarration = false, class: className = '', onslidechange, oncomplete
 	}: AnimotPresenterProps = $props();
 
 	// State
@@ -190,13 +190,16 @@
 	// 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;
-	// Set when the most recent play() was rejected by the browser autoplay
-	// policy. The first user gesture clears it and replays the current
-	// slide's clip — without this a single-slide deck would never play
-	// narration, since there's no navigation event to retry on.
-	let narrationPendingGesture = false;
 	function playNarrationForSlide(index: number) {
+		if (muteNarration) return;
 		if (!project?.settings?.narrationEnabled) return;
 		const slide = project?.slides?.[index];
 		if (narrationAudio) {
@@ -207,22 +210,13 @@
 		if (!src) return;
 		if (!narrationAudio) narrationAudio = new Audio();
 		narrationAudio.src = src;
-		// First play() may reject under autoplay policy. We track the
-		// rejection so a subsequent user gesture (handled below) retries
-		// once instead of silently giving up.
-		narrationAudio.play().then(
-			() => { narrationPendingGesture = false; },
-			() => { narrationPendingGesture = true; }
-		);
+		narrationAudio.play().catch(() => {});
 	}
-	function tryUnlockNarrationOnGesture() {
-		if (narrationPendingGesture) {
-			playNarrationForSlide(currentSlideIndex);
-		}
+	function pauseNarration() {
+		if (narrationAudio) narrationAudio.pause();
 	}
 	function stopNarration() {
 		if (narrationAudio) { narrationAudio.pause(); narrationAudio = null; }
-		narrationPendingGesture = false;
 	}
 
 	const slides = $derived(project?.slides ?? []);
@@ -565,6 +559,12 @@
 		currentSlideIndex = 0;
 		isTransitioning = false;
 
+		// Restart narration on loop. Setting `currentSlideIndex = 0` above
+		// is a no-op for single-slide decks (was already 0) so the play-state
+		// effect doesn't re-fire on its own. Calling explicitly here covers
+		// both single- and multi-slide loops uniformly.
+		if (isAutoplay) playNarrationForSlide(0);
+
 		for (const element of firstSlide.canvas.elements) {
 			if (element.type === 'text') {
 				const textEl = element as TextElement;
@@ -585,12 +585,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;
@@ -1150,11 +1148,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; }
 	}
@@ -1173,25 +1169,29 @@
 		if (containerEl) resizeObserver.observe(containerEl);
 		resetMouseIdleTimer();
 
-		// First-gesture retry for narration playback. Browsers block
-		// audio.play() until the user has interacted; without this hook
-		// a single-slide deck would never play its narration since there's
-		// no slide change to retry on. Attached on document so any click
-		// or key press in the page acts as the unlocking gesture.
-		document.addEventListener('pointerdown', tryUnlockNarrationOnGesture, { capture: true });
-		document.addEventListener('keydown', tryUnlockNarrationOnGesture, { capture: true });
-
 		return () => {
 			resizeObserver?.disconnect();
 			clearAutoplayTimer();
 			clearAllTypewriterAnimations();
 			if (mouseIdleTimer) clearTimeout(mouseIdleTimer);
 			stopNarration();
-			document.removeEventListener('pointerdown', tryUnlockNarrationOnGesture, { capture: true });
-			document.removeEventListener('keydown', tryUnlockNarrationOnGesture, { capture: true });
 		};
 	});
 
+	// 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
 	$effect(() => { if (data) { project = data; } });
 </script>