bloom-player 2.19.6 → 2.19.7-alpha.2

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.6",
+    "version": "2.19.7-alpha.2",
     "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/narration.ts

@@ -1303,12 +1303,28 @@ export function showVideoFirstFrameWhenReady(
             if (!shouldPauseAfterPlaying()) {
                 return;
             }
-            // Pause after about one frame so the first frame stays visible.
-            setTimeout(() => {
+            const pauseIfStillWanted = () => {
                 if (shouldPauseAfterPlaying()) {
                     video.pause();
                 }
-            }, 4);
+            };
+            // Prefer pausing after a composited video frame, not just after a timer.
+            // Some videos/devices can report "playing" before pixels are actually painted.
+            const requestVideoFrameCallback = (video as any)
+                .requestVideoFrameCallback as
+                | ((callback: (...args: any[]) => void) => number)
+                | undefined;
+            if (requestVideoFrameCallback) {
+                requestVideoFrameCallback.call(video, () => {
+                    pauseIfStillWanted();
+                });
+            } else {
+                // Fallback for older browsers. This sometimes helps, but is not as reliable as the
+                // above on browsers that implement it.
+                setTimeout(() => {
+                    pauseIfStillWanted();
+                }, 4);
+            }
         };
         video.addEventListener("playing", playingListener, { once: true });
         // If our play() attempt doesn't lead to playback soon, remove the