animot-presenter 0.5.13 → 0.5.15

package/dist/AnimotPresenter.svelte

@@ -187,6 +187,44 @@
 	let menuVisible = $state(true);
 	let mouseIdleTimer: ReturnType<typeof setTimeout> | null = null;
 
+	// 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.
+	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 (!project?.settings?.narrationEnabled) return;
+		const slide = project?.slides?.[index];
+		if (narrationAudio) {
+			narrationAudio.pause();
+			narrationAudio.currentTime = 0;
+		}
+		const src = slide?.narration?.src;
+		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; }
+		);
+	}
+	function tryUnlockNarrationOnGesture() {
+		if (narrationPendingGesture) {
+			playNarrationForSlide(currentSlideIndex);
+		}
+	}
+	function stopNarration() {
+		if (narrationAudio) { narrationAudio.pause(); narrationAudio = null; }
+		narrationPendingGesture = false;
+	}
+
 	const slides = $derived(project?.slides ?? []);
 	const currentSlide = $derived(slides[currentSlideIndex]);
 	const isCinemaMode = $derived(project?.mode === 'cinema');
@@ -547,6 +585,12 @@
 		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);
 		const transition = targetSlide.transition;
 		const duration = durationOverride ?? transition.duration;
 		transitionDurationMs = duration;
@@ -1106,6 +1150,11 @@
 			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);
 			if (autoplay) isAutoplay = true;
 		} catch (e: any) { error = e.message; loading = false; }
 	}
@@ -1123,7 +1172,24 @@
 		});
 		if (containerEl) resizeObserver.observe(containerEl);
 		resetMouseIdleTimer();
-		return () => { resizeObserver?.disconnect(); clearAutoplayTimer(); clearAllTypewriterAnimations(); if (mouseIdleTimer) clearTimeout(mouseIdleTimer); };
+
+		// 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 });
+		};
 	});
 
 	// Watch for prop changes