bloom-player 2.19.5 → 2.19.6

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.19.5",
+    "version": "2.19.6",
     "private": false,
     "// sideeffects might need to be ['*.css'] to avoid 'shaking' our CSS, if we ever get tree shaking working": "",
     "sideEffects": false,

package/src/shared/dragActivityRuntime.ts

@@ -17,6 +17,8 @@ import {
     kAudioSentence,
     playAllAudio,
     playAllVideo,
+    showVideoFirstFrameWhenReady,
+    stopPlayAllVideoPlayback,
     urlPrefix,
 } from "./narration";
 
@@ -175,6 +177,13 @@ export function prepareActivity(
             // non-draggable video click detectors are handled separately, see handleVideoClick in video.ts,
             // and in BloomDesktop handleVideoClick in bloomVideo.ts.
             video.addEventListener("pointerdown", playVideo);
+            // Ensure the first frame is visible. The transparent poster (set globally by
+            // bloom-player at book load) hides the video until playback begins. Non-draggable
+            // videos get a play+pause first-frame trick in video.ts HandlePageVisible, but
+            // draggable videos are skipped there. If the video source hasn't loaded yet
+            // (e.g. cold cache after a build), play() fails silently, leaving the video blank.
+            // We use a loadeddata listener so the trick runs whenever the data is available.
+            showVideoFirstFrameWhenReady(video);
         }
     });
 
@@ -272,6 +281,7 @@ const playVideo = (e: MouseEvent) => {
 // May also be useful to do when switching pages in player. If not, we may want to move
 // this out of this runtime file; but it's nice to keep it with prepareActivity.
 export function undoPrepareActivity(page: HTMLElement) {
+    stopPlayAllVideoPlayback();
     restorePositions();
     // In case we do more editing after leaving the Play tab, we don't want to restore the same positions again
     // if we leave the page completely.
@@ -631,6 +641,26 @@ const showCorrect = (e: MouseEvent) => {
     });
     classSetter(currentPage!, "drag-activity-wrong", false);
     classSetter(currentPage!, "drag-activity-solution", true);
+
+    // Play any videos that are part of a correct answer, in document order.
+    const videoElements: HTMLVideoElement[] = [];
+    currentPage!
+        .querySelectorAll("[data-draggable-id]")
+        .forEach((elt: HTMLElement) => {
+            const targetId = elt.getAttribute("data-draggable-id");
+            const target = currentPage?.querySelector(
+                `[data-target-of="${targetId}"]`,
+            ) as HTMLElement;
+            if (!target) {
+                return; // not a required draggable
+            }
+            videoElements.push(
+                ...Array.from(elt.getElementsByTagName("video")),
+            );
+        });
+    if (videoElements.length > 0) {
+        playAllVideo(videoElements, () => {});
+    }
 };
 
 // where the mouse started the drag, relative to the top left of dragTarget
@@ -783,6 +813,8 @@ export const performTryAgain = (e: MouseEvent) => {
     classSetter(page, "drag-activity-solution", false);
     // Restore everything to the starting positions.  BL-14482.
     restorePositions();
+    // If we're still playing video, e.g. a 'wrong' video, stop it.
+    stopPlayAllVideoPlayback();
 };
 
 export const classSetter = (

package/src/shared/narration.ts

@@ -1266,6 +1266,85 @@ export function hidingPage() {
     // If it DOES have audio, a pause here can interfere with playing it.
     //pausePlaying(); // Doesn't set AudioPaused state.  Caller sets NewPage state.
     clearTimeout(fakeNarrationTimer);
+    stopPlayAllVideoPlayback();
+}
+
+let playAllVideoGeneration = 0;
+let activePlayAllVideoElement: HTMLVideoElement | undefined;
+
+export function stopPlayAllVideoPlayback() {
+    playAllVideoGeneration++;
+    if (activePlayAllVideoElement) {
+        activePlayAllVideoElement.pause();
+        activePlayAllVideoElement.currentTime = 0;
+        activePlayAllVideoElement = undefined;
+    }
+}
+
+// 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,
+) {
+    let canceled = false;
+    const attempt = () => {
+        if (canceled) {
+            return;
+        }
+        // If something else has already started playback, don't attach our
+        // pause-on-playing behavior.
+        if (!video.paused) {
+            return;
+        }
+        const playingListener = () => {
+            window.clearTimeout(removePlayingListenerTimeout);
+            if (!shouldPauseAfterPlaying()) {
+                return;
+            }
+            // Pause after about one frame so the first frame stays visible.
+            setTimeout(() => {
+                if (shouldPauseAfterPlaying()) {
+                    video.pause();
+                }
+            }, 4);
+        };
+        video.addEventListener("playing", playingListener, { once: true });
+        // If our play() attempt doesn't lead to playback soon, remove the
+        // listener so it can't affect unrelated later playback.
+        const removePlayingListenerTimeout = window.setTimeout(() => {
+            video.removeEventListener("playing", playingListener);
+        }, 1000);
+        const promise = video.play();
+        if (promise && promise.catch) {
+            promise.catch(() => {
+                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);
+            });
+        }
+    };
+    // HAVE_CURRENT_DATA (2) means at least the first frame is decoded.
+    if (video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
+        attempt();
+    } else {
+        let cancelAttempt: () => void;
+        const onLoadedData = () => {
+            video.removeEventListener("play", cancelAttempt);
+            attempt();
+        };
+        cancelAttempt = () => {
+            canceled = true;
+            video.removeEventListener("loadeddata", onLoadedData);
+            video.removeEventListener("play", cancelAttempt);
+        };
+        // If something requests playback before the video has loaded enough data,
+        // don't run this first-frame trick when loadeddata eventually fires.
+        video.addEventListener("play", cancelAttempt, { once: true });
+        video.addEventListener("loadeddata", onLoadedData, { once: true });
+    }
 }
 
 // Play the specified elements, one after the other. When the last completes (or at once if the array is empty),
@@ -1279,11 +1358,25 @@ export function hidingPage() {
 // (This function would be more natural in video.ts. But at least for now I'm trying to minimize the
 // number of source files shared with Bloom Desktop, and we need this for Bloom Games.)
 export function playAllVideo(elements: HTMLVideoElement[], then: () => void) {
+    const generation = ++playAllVideoGeneration;
+    playAllVideoInternal(elements, then, generation);
+}
+
+function playAllVideoInternal(
+    elements: HTMLVideoElement[],
+    then: () => void,
+    generation: number,
+) {
+    if (generation !== playAllVideoGeneration) {
+        return;
+    }
     if (elements.length === 0) {
+        activePlayAllVideoElement = undefined;
         then();
         return;
     }
     const video = elements[0];
+    activePlayAllVideoElement = video;
 
     // If there is an error, try to continue with the next video.
     if (
@@ -1291,13 +1384,16 @@ export function playAllVideo(elements: HTMLVideoElement[], then: () => void) {
         video.readyState === HTMLMediaElement.HAVE_NOTHING
     ) {
         showVideoError(video);
-        playAllVideo(elements.slice(1), then);
+        playAllVideoInternal(elements.slice(1), then, generation);
     } else {
         hideVideoError(video);
         setCurrentPlaybackMode(PlaybackMode.VideoPlaying);
         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
@@ -1310,15 +1406,25 @@ export function playAllVideo(elements: HTMLVideoElement[], then: () => void) {
                 video.addEventListener(
                     "ended",
                     () => {
-                        playAllVideo(elements.slice(1), then);
+                        if (generation !== playAllVideoGeneration) {
+                            return;
+                        }
+                        playAllVideoInternal(
+                            elements.slice(1),
+                            then,
+                            generation,
+                        );
                     },
                     { once: true },
                 );
             })
             .catch((reason) => {
+                if (generation !== playAllVideoGeneration) {
+                    return;
+                }
                 console.error("Video play failed", reason);
                 showVideoError(video);
-                playAllVideo(elements.slice(1), then);
+                playAllVideoInternal(elements.slice(1), then, generation);
             });
     }
 }
@@ -1353,6 +1459,6 @@ export function hideVideoError(video: HTMLVideoElement): void {
     const parent = video.parentElement;
     if (parent) {
         const divs = parent.getElementsByClassName("video-error-message");
-        while (divs.length > 1) parent.removeChild(divs[0]);
+        while (divs.length > 0) parent.removeChild(divs[0]);
     }
 }