bloom-player 2.20.0-alpha.1 → 2.20.0-alpha.3

package/package.json

@@ -3,7 +3,7 @@
     "description": "A library for displaying Bloom books in iframes or WebViews",
     "author": "SIL Global",
     "license": "MIT",
-    "version": "2.20.0-alpha.1",
+    "version": "2.20.0-alpha.3",
     "packageManager": "pnpm@11.1.2",
     "private": false,
     "// sideeffects might need to be ['*.css'] to avoid 'shaking' our CSS, if we ever get tree shaking working": "",

package/src/shared/narration.ts

@@ -226,6 +226,8 @@ export const PlayCompleted = new LiteEvent<HTMLElement>();
 // Raised when we can't play narration, specifically because the browser won't allow it until
 // the user has interacted with the page.
 export const PlayFailed = new LiteEvent<HTMLElement>();
+// Raised when a user interaction resolves an autoplay-blocked state and media is about to resume.
+export const PlayUnblocked = new LiteEvent<void>();
 
 // This event allows Narration to inform its controllers when we start/stop reading
 // image descriptions. It is raised for each segment we read and passed true if the one
@@ -1271,6 +1273,7 @@ export function hidingPage() {
 
 let playAllVideoGeneration = 0;
 let activePlayAllVideoElement: HTMLVideoElement | undefined;
+const transientVideoRetryCounts = new WeakMap<HTMLVideoElement, number>();
 
 export function stopPlayAllVideoPlayback() {
     playAllVideoGeneration++;
@@ -1281,12 +1284,26 @@ export function stopPlayAllVideoPlayback() {
     }
 }
 
+export function isTransientVideoPlayFailure(reason: any): boolean {
+    if (!reason) {
+        return false;
+    }
+    if (reason.name === "AbortError") {
+        return true;
+    }
+    const message =
+        (typeof reason.message === "string" && reason.message) ||
+        (typeof reason.toString === "function" ? reason.toString() : "");
+    return message.includes("interrupted by a call to pause()");
+}
+
 // Attempt to show a video's first frame by briefly starting playback and then pausing.
 // The callback allows callers to decide at the moment playback starts whether pausing
 // is still desired (for example, page-level logic may stop pausing after initial load).
 export function showVideoFirstFrameWhenReady(
     video: HTMLVideoElement,
     shouldPauseAfterPlaying: () => boolean = () => true,
+    onAutoplayBlocked: () => void = () => showVideoAutoplayBlockedHint(video),
 ) {
     let canceled = false;
     const attempt = () => {
@@ -1300,6 +1317,7 @@ export function showVideoFirstFrameWhenReady(
         }
         const playingListener = () => {
             window.clearTimeout(removePlayingListenerTimeout);
+            hideVideoAutoplayBlockedHint(video);
             if (!shouldPauseAfterPlaying()) {
                 return;
             }
@@ -1332,13 +1350,20 @@ export function showVideoFirstFrameWhenReady(
         const removePlayingListenerTimeout = window.setTimeout(() => {
             video.removeEventListener("playing", playingListener);
         }, 1000);
+        hideVideoAutoplayBlockedHint(video);
         const promise = video.play();
         if (promise && promise.catch) {
-            promise.catch(() => {
+            promise.catch((reason) => {
                 window.clearTimeout(removePlayingListenerTimeout);
                 // If play() fails (e.g., autoplay policy), remove the listener
                 // so it won't interfere if playback starts later by other means.
                 video.removeEventListener("playing", playingListener);
+                // If autoplay is blocked, remove our transparent poster so a decoded
+                // first frame can be shown when available.
+                if (reason?.name === "NotAllowedError") {
+                    video.removeAttribute("poster");
+                    onAutoplayBlocked();
+                }
             });
         }
     };
@@ -1378,6 +1403,32 @@ export function playAllVideo(elements: HTMLVideoElement[], then: () => void) {
     playAllVideoInternal(elements, then, generation);
 }
 
+export function isDefiniteVideoPlaybackSupportFailure(
+    video: HTMLVideoElement,
+    reason?: any,
+): boolean {
+    if (
+        video.networkState === HTMLMediaElement.NETWORK_NO_SOURCE &&
+        video.readyState === HTMLMediaElement.HAVE_NOTHING
+    ) {
+        return true;
+    }
+
+    if (!reason) {
+        return false;
+    }
+
+    if (reason.name === "NotSupportedError") {
+        return true;
+    }
+
+    // Some browsers expose codec/source failures only through media.error.
+    return (
+        video.error?.code ===
+        (window.MediaError ? window.MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED : 4)
+    );
+}
+
 function playAllVideoInternal(
     elements: HTMLVideoElement[],
     then: () => void,
@@ -1395,50 +1446,119 @@ function playAllVideoInternal(
     activePlayAllVideoElement = video;
 
     // If there is an error, try to continue with the next video.
-    if (
-        video.networkState === HTMLMediaElement.NETWORK_NO_SOURCE &&
-        video.readyState === HTMLMediaElement.HAVE_NOTHING
-    ) {
+    if (isDefiniteVideoPlaybackSupportFailure(video)) {
+        transientVideoRetryCounts.delete(video);
         showVideoError(video);
         playAllVideoInternal(elements.slice(1), then, generation);
     } else {
         hideVideoError(video);
+        hideVideoAutoplayBlockedHint(video);
         setCurrentPlaybackMode(PlaybackMode.VideoPlaying);
+        // Always play each queued video from the beginning.
+        // Without this, a previously played element may remain at end-of-stream
+        // and fail to raise the expected ended event for sequencing.
+        video.currentTime = 0;
+        // Note that we get a new instance of this for each recursive call to playAllVideoInternal.
+        // It serves to make sure we don't try to advance twice if we get both an ended and a pause event.
+        let advanced = false;
+        let watchdogTimerId: number | undefined;
+        const watchdogGraceMs = 250;
+        const clearWatchdog = () => {
+            if (watchdogTimerId !== undefined) {
+                window.clearTimeout(watchdogTimerId);
+                watchdogTimerId = undefined;
+            }
+        };
+        const scheduleWatchdogFromDuration = () => {
+            const duration = video.duration;
+            if (!Number.isFinite(duration) || duration <= 0) {
+                return;
+            }
+            clearWatchdog();
+            const playbackRate =
+                Number.isFinite(video.playbackRate) && video.playbackRate > 0
+                    ? video.playbackRate
+                    : 1;
+            const timeoutMs = Math.max(
+                duration * 1000 / playbackRate + watchdogGraceMs,
+                watchdogGraceMs,
+            );
+            watchdogTimerId = window.setTimeout(() => {
+                advanceToNextVideo();
+            }, timeoutMs);
+        };
+        const advanceToNextVideo = () => {
+            if (advanced) {
+                return;
+            }
+            advanced = true;
+            clearWatchdog();
+            video.removeEventListener("ended", endedHandler);
+            video.removeEventListener("pause", pauseHandler);
+            video.removeEventListener("loadedmetadata", metadataHandler);
+            if (generation !== playAllVideoGeneration) {
+                return;
+            }
+            playAllVideoInternal(elements.slice(1), then, generation);
+        };
+        const endedHandler = () => {
+            advanceToNextVideo();
+        };
+        // In some environments, playback can pause at the end without raising ended.
+        // Treat that as completion so a short first video can't stall the sequence.
+        const pauseHandler = () => {
+            const duration = video.duration;
+            if (!Number.isFinite(duration) || duration <= 0) {
+                return;
+            }
+            if (video.currentTime >= duration - 0.05) {
+                advanceToNextVideo();
+            }
+        };
+        const metadataHandler = () => {
+            scheduleWatchdogFromDuration();
+        };
+        // Register ended before play() so we don't miss extremely fast end transitions.
+        video.addEventListener("ended", endedHandler, { once: true });
+        video.addEventListener("pause", pauseHandler);
+        video.addEventListener("loadedmetadata", metadataHandler);
         const promise = video.play();
         promise
             .then(() => {
                 if (generation !== playAllVideoGeneration) {
                     return;
                 }
-                // The promise resolves when the video starts playing. We want to know when it ends.
-                // Note: in Bloom Desktop, sometimes this event does not fire normally, even when the video is
-                // played to the end.  I have not figured out why. It may be something to do with how we are
-                // trimming the videos.
-                // In Bloom Desktop, this is worked around by raising the ended event when we detect that it has
-                // paused past the end point in resetToStartAfterPlayingToEndPoint.
-                // In BloomPlayer,I don't think this is a problem. Videos are trimmed when published, so we always
-                // play to the real end (unless the user pauses). So one way or another, we should get the ended
-                // event.
-                video.addEventListener(
-                    "ended",
-                    () => {
-                        if (generation !== playAllVideoGeneration) {
-                            return;
-                        }
-                        playAllVideoInternal(
-                            elements.slice(1),
-                            then,
-                            generation,
-                        );
-                    },
-                    { once: true },
-                );
+                transientVideoRetryCounts.delete(video);
+                hideVideoAutoplayBlockedHint(video);
+                scheduleWatchdogFromDuration();
             })
             .catch((reason) => {
                 if (generation !== playAllVideoGeneration) {
                     return;
                 }
+                clearWatchdog();
+                video.removeEventListener("ended", endedHandler);
+                video.removeEventListener("pause", pauseHandler);
+                video.removeEventListener("loadedmetadata", metadataHandler);
+                if (reason?.name === "NotAllowedError") {
+                    console.debug(
+                        "Video autoplay blocked until user interaction",
+                    );
+                    showVideoAutoplayBlockedHint(video);
+                    return;
+                }
+                const retries = transientVideoRetryCounts.get(video) ?? 0;
+                if (isTransientVideoPlayFailure(reason)) {
+                    if (retries < 2) {
+                        transientVideoRetryCounts.set(video, retries + 1);
+                        window.setTimeout(() => {
+                            playAllVideoInternal(elements, then, generation);
+                        }, 50);
+                        return;
+                    }
+                }
                 console.error("Video play failed", reason);
+                transientVideoRetryCounts.delete(video);
                 showVideoError(video);
                 playAllVideoInternal(elements.slice(1), then, generation);
             });
@@ -1467,10 +1587,26 @@ export function showVideoError(video: HTMLVideoElement): void {
             msgDiv.style.top = "10%";
             msgDiv.style.width = "80%";
             msgDiv.style.fontSize = "x-large";
+            msgDiv.style.pointerEvents = "none";
             parent.appendChild(msgDiv);
         }
     }
 }
+
+export function showVideoAutoplayBlockedHint(video: HTMLVideoElement): void {
+    const container =
+        (video.closest(".bloom-videoContainer") as HTMLElement | null) ||
+        video.parentElement;
+    container?.classList.add("autoplayBlocked");
+}
+
+export function hideVideoAutoplayBlockedHint(video: HTMLVideoElement): void {
+    const container =
+        (video.closest(".bloom-videoContainer") as HTMLElement | null) ||
+        video.parentElement;
+    container?.classList.remove("autoplayBlocked");
+}
+
 export function hideVideoError(video: HTMLVideoElement): void {
     const parent = video.parentElement;
     if (parent) {