@sequencestudio/web-core 0.5.0 → 0.5.1

package/dist/player/shaka-playback.d.ts

@@ -16,6 +16,8 @@ export type ShakaPlaybackState = {
     isLoading: boolean;
     isBuffering: boolean;
     isReady: boolean;
+    /** The load is waiting on the viewer: shown as a Play button, not the spinner. */
+    needsStart: boolean;
     isLive: boolean | null;
     recoveredLoadKey: string | null;
     /** The renewal in use, while the page still passes the source it replaced. */
@@ -57,6 +59,12 @@ export interface ShakaPlayback {
     activeSource(options: ShakaPlayerOptions, state?: ShakaPlaybackState): ShakaActiveSource;
     scheduleRenewal(): () => void;
     boot(): () => void;
+    /**
+     * Plays from the viewer's tap on the Play button `needsStart` shows. Call it
+     * straight from the click handler: it calls `play()` before returning, so
+     * the browser counts the tap.
+     */
+    start(): void;
 }
 /** What a renderer returns from its Shaka hook, from the state and the page's options. */
 export declare function shakaPlayerStatus(state: ShakaPlaybackState, options: Pick<ShakaPlayerOptions, 'src' | 'expectedDeliveryType'>): ShakaPlayerStatus;

package/dist/player/shaka-playback.js

@@ -15,6 +15,10 @@ const NATIVE_MEDIA_ERROR = 3016;
 const FRESH_SOURCE_TIMEOUT_MS = 10_000;
 // setTimeout fires at once for any delay past a signed 32-bit integer.
 const MAX_TIMER_DELAY_MS = 2_147_483_647;
+// How long a load may sit with no media before it is taken to be waiting on
+// the viewer, and how often it is checked again while the page is hidden.
+const START_WAIT_MS = 2_500;
+const START_RECHECK_MS = 1_000;
 const INITIAL_STATE = (src) => ({
     player: null,
     error: null,
@@ -22,6 +26,7 @@ const INITIAL_STATE = (src) => ({
     isLoading: true,
     isBuffering: false,
     isReady: false,
+    needsStart: false,
     isLive: null,
     recoveredLoadKey: null,
     fresh: null,
@@ -39,6 +44,7 @@ export function shakaPlayerStatus(state, options) {
         isLoading: state.isLoading,
         isBuffering: state.isBuffering,
         isReady: state.isReady,
+        needsStart: state.needsStart,
         isLive: state.isLive,
         deliveryType: resolveDeliveryType(state.isLive, options.expectedDeliveryType),
         recoveredLoadKey: state.recoveredLoadKey,
@@ -94,6 +100,12 @@ export function createShakaPlayback(initial) {
     // Mode does), and overlapping attach/load on one <video> leaves Shaka
     // spinning on the spinner.
     let previousDestroy = Promise.resolve();
+    // The viewer pressed Play during this boot's load, so it no longer waits on
+    // them: the load carries on, and only a refused play() asks again.
+    let startRequested = false;
+    // Counts boots, and teardowns, so a tap's late play() rejection from an earlier
+    // load leaves the current one alone: the <video> is the same across sources.
+    let bootGeneration = 0;
     // A reporter for the options and source as they are now, made afresh on
     // every update as a render's closure would be. Merges the per-play context
     // onto every record, so call sites pass just the event specifics.
@@ -213,6 +225,8 @@ export function createShakaPlayback(initial) {
         if (!video || !activeSrc)
             return () => undefined;
         const reloadCount = state.reloadCount;
+        startRequested = false;
+        bootGeneration += 1;
         // This boot's content, pinned now: by teardown the options already hold
         // the next source's id.
         const bootContentId = options.contentId;
@@ -410,6 +424,29 @@ export function createShakaPlayback(initial) {
         // Closing the tab runs no renderer cleanup, so this is the only chance to
         // report a stall the viewer walked away from.
         const onPageHide = () => reportStall(stalls.left());
+        // Media arriving means the load was never waiting on the viewer.
+        const onLoadedMetadata = () => setState({ needsStart: false });
+        // Some browsers hold a page's media back until the viewer taps it: iOS 27
+        // keeps the MediaSource from opening, so `load()` neither resolves nor
+        // fails and nothing is requested. The spinner would then never clear, and
+        // the controls that could take the tap wait for the load. A load still
+        // without media after a few seconds in view asks for the tap instead. Asking
+        // during a slow but working load costs only a tap that plays sooner.
+        let startTimer;
+        const checkStart = () => {
+            startTimer = undefined;
+            if (cancelled || phase === 'runtime' || state.error)
+                return;
+            // Keeps watching until the load runs: a tap whose play() failed for another
+            // reason clears `startRequested`, and a load still without media asks again.
+            if (!startRequested &&
+                !state.needsStart &&
+                document.visibilityState === 'visible' &&
+                video.readyState === HTMLMediaElement.HAVE_NOTHING) {
+                setState({ needsStart: true });
+            }
+            startTimer = setTimeout(checkStart, START_RECHECK_MS);
+        };
         const run = async () => {
             setState({
                 recoveredLoadKey: recovering ? `reload-${reloadCount}` : null,
@@ -418,6 +455,7 @@ export function createShakaPlayback(initial) {
                 isLive: null,
                 isBuffering: false,
                 isLoading: true,
+                needsStart: false,
             });
             restoreShakaVolume(video);
             try {
@@ -499,6 +537,7 @@ export function createShakaPlayback(initial) {
                 video.addEventListener('seeking', onSeeking);
                 video.addEventListener('pause', onPause);
                 video.addEventListener('ended', onEnded);
+                video.addEventListener('loadedmetadata', onLoadedMetadata);
                 window.addEventListener('pagehide', onPageHide);
             }
             if (!currentPlayer) {
@@ -515,6 +554,10 @@ export function createShakaPlayback(initial) {
                 await previousDestroy;
                 if (cancelled)
                     return;
+                // Timed from here, once a previous player has gone, so a slow teardown
+                // never counts as this load's wait. Not after `attach()`: with
+                // MediaSource it waits for `sourceopen`, which is what never comes.
+                startTimer = setTimeout(checkStart, START_WAIT_MS);
                 await player.attach(video);
                 if (cancelled)
                     return;
@@ -555,8 +598,9 @@ export function createShakaPlayback(initial) {
                 manifestDeliveryType = isLiveStream ? 'live' : 'vod';
                 presentedLive = readEventStream()?.presentingLive === true;
                 report = reportLogRef.current;
+                clearTimeout(startTimer);
                 // One update, so no render sees a ready player of unknown live-ness.
-                setState({ isLive: isLiveStream, isReady: true, isLoading: false, isBuffering: false });
+                setState({ isLive: isLiveStream, isReady: true, isLoading: false, isBuffering: false, needsStart: false });
                 recovery.setStalled(false);
                 // A reload plays on only if the viewer was playing when it expired. It
                 // mutes rather than stays paused if the browser refuses sound, as a
@@ -579,6 +623,7 @@ export function createShakaPlayback(initial) {
         void run();
         return () => {
             cancelled = true;
+            clearTimeout(startTimer);
             // A loaded VOD hands its place to the next load of the same content.
             if (phase === 'runtime' && !isLiveStream && Number.isFinite(video.currentTime) && video.currentTime > 0) {
                 carriedPosition = {
@@ -609,8 +654,10 @@ export function createShakaPlayback(initial) {
             video.removeEventListener('seeking', onSeeking);
             video.removeEventListener('pause', onPause);
             video.removeEventListener('ended', onEnded);
+            video.removeEventListener('loadedmetadata', onLoadedMetadata);
             window.removeEventListener('pagehide', onPageHide);
-            setState({ player: null, isLive: null });
+            bootGeneration += 1;
+            setState({ player: null, isLive: null, needsStart: false });
             if (!currentPlayer)
                 return;
             const previous = previousDestroy;
@@ -618,6 +665,25 @@ export function createShakaPlayback(initial) {
             previousDestroy = Promise.all([previous, currentDestroy]).then(() => undefined);
         };
     };
+    const start = () => {
+        const video = options.videoRef.current;
+        if (!video)
+            return;
+        const generation = bootGeneration;
+        startRequested = true;
+        setState({ needsStart: false });
+        // Called before anything is awaited, inside the viewer's tap. The promise
+        // can stay pending until the load finishes.
+        // A refusal asks again at once; any other failure lets the load's check ask again
+        // if there is still no media.
+        void video.play().catch((err) => {
+            if (generation !== bootGeneration)
+                return;
+            startRequested = false;
+            if (err?.name === 'NotAllowedError')
+                setState({ needsStart: true });
+        });
+    };
     update(initial);
     return {
         getState: () => state,
@@ -631,6 +697,7 @@ export function createShakaPlayback(initial) {
         activeSource: (from, current) => activeSource(from, current),
         scheduleRenewal,
         boot,
+        start,
     };
 }
 // What the page passed, to tell a credential the page replaced from one a

package/dist/player/shaka-player-support.d.ts

@@ -81,6 +81,12 @@ export type ShakaPlayerStatus = {
     isLoading: boolean;
     isBuffering: boolean;
     isReady: boolean;
+    /**
+     * The load is waiting on the viewer's tap: some browsers (iOS 27) hold a
+     * page's media back until then, so the player shows a Play button rather
+     * than a spinner that would never clear.
+     */
+    needsStart: boolean;
     /**
      * Whether the loaded manifest is live. `null` until `load()` resolves - Shaka
      * cannot answer before the manifest is parsed - and again after a source

package/dist/player/styles.css

@@ -797,6 +797,40 @@
     animation: sq-player-spin 1s linear infinite;
     color: var(--sq-content-on-media);
   }
+  /* In place of the spinner when the load waits on the viewer's tap. */
+  .sq-player-start {
+    position: absolute;
+    inset: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: none;
+    padding: 0;
+    cursor: pointer;
+  }
+  .sq-player-start-badge {
+    display: flex;
+    height: 5rem;
+    width: 5rem;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    background-color: var(--sq-player-control-background, rgba(32, 32, 32, 0.4));
+    color: var(--sq-content-on-media);
+    -webkit-backdrop-filter: blur(8px);
+    backdrop-filter: blur(8px);
+  }
+  .sq-player-start:focus-visible .sq-player-start-badge {
+    outline: 2px solid var(--sq-content-on-media);
+    outline-offset: 2px;
+  }
+  .sq-player-start-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    color: var(--sq-content-on-media);
+  }
   @keyframes sq-player-spin {
     to {
       transform: rotate(360deg);

package/dist/player/test-ids.d.ts

@@ -31,6 +31,8 @@ export interface PlayerTestIds {
     /** The layer over the video that holds the controls and states. */
     overlay?: string | null;
     loading?: string | null;
+    /** The Play button shown in place of the spinner when the load waits on a tap. */
+    start?: string | null;
     /** The flash that confirms a keyboard or tap action, and its parts. */
     actionFeedback?: string | null;
     actionFeedbackCenter?: string | null;

package/dist/player/test-ids.js

@@ -8,6 +8,7 @@ export const DEFAULT_PLAYER_TEST_IDS = {
     interactiveClose: 'player-interactive-close',
     overlay: 'video-overlay',
     loading: 'video-loading',
+    start: 'video-start',
     actionFeedback: 'video-action-feedback',
     actionFeedbackCenter: 'video-action-feedback-center',
     actionFeedbackSeek: 'video-action-feedback-seek',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sequencestudio/web-core",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "Framework-independent core for sites that render Sequence layouts: the adapter from Client Delivery responses to view models, the presentation model, shelf layout math and design tokens.",
   "license": "MIT",
   "type": "module",