@banou/media-player 0.10.2 → 0.10.3

package/dist/react/player.d.ts

@@ -23,6 +23,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     playbackError: unknown;
     playbackErrors: import("./source-feature").PlaybackErrorEntry[];
     ready: boolean;
+    seekingTo?: number;
     setSourceState: (partial: Partial<import("./source-feature").SourceState>) => void;
 }>]>>;
 /**

package/dist/react/source-feature.d.ts

@@ -159,6 +159,18 @@ export type SourceState = {
     playbackErrors: PlaybackErrorEntry[];
     /** Whether the engine has produced its first media segment. */
     ready: boolean;
+    /**
+     * Where a seek is headed while the element has not arrived there yet, in seconds.
+     *
+     * The element's own `currentTime` does not move until it can present the frame, which on a long
+     * GOP is a few hundred milliseconds after the click. Reading it directly leaves the seekbar and
+     * the clock sitting at the old position for that whole time, which reads as the player ignoring
+     * the click. The chrome shows THIS instead while it is set, so the bar and the clock answer at
+     * once and the spinner says the picture is still coming.
+     *
+     * Undefined whenever no seek is outstanding, which is almost always.
+     */
+    seekingTo?: number;
     /**
      * The write seam, wired in `attach`. Only the React layer calls it.
      *
@@ -265,6 +277,18 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
     playbackErrors: PlaybackErrorEntry[];
     /** Whether the engine has produced its first media segment. */
     ready: boolean;
+    /**
+     * Where a seek is headed while the element has not arrived there yet, in seconds.
+     *
+     * The element's own `currentTime` does not move until it can present the frame, which on a long
+     * GOP is a few hundred milliseconds after the click. Reading it directly leaves the seekbar and
+     * the clock sitting at the old position for that whole time, which reads as the player ignoring
+     * the click. The chrome shows THIS instead while it is set, so the bar and the clock answer at
+     * once and the spinner says the picture is still coming.
+     *
+     * Undefined whenever no seek is outstanding, which is almost always.
+     */
+    seekingTo?: number;
     /**
      * The write seam, wired in `attach`. Only the React layer calls it.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.2",
+  "version": "0.10.3",
   "description": "A video player for containers and codecs the browser cannot play natively, remuxed on the fly",
   "type": "module",
   "main": "dist/index.js",

package/src/lib/engine/thumbnails.ts

@@ -36,6 +36,15 @@ const KEYFRAME_TIMEOUT = 10_000
 const REINDEX_GROWTH = 1.5
 /** And never re-walk for a trickle, however early. */
 const REINDEX_MIN_BYTES = 4_000_000
+/**
+ * A bound on the re-walk, because this one holds the worker.
+ *
+ * The walk at boot can hang without costing anything that was working: there are no previews yet. A
+ * re-walk is different, since the pump waits for it, so a reader that stops answering would take
+ * the previews the current index CAN still produce down with it. Longer than a keyframe decode
+ * because a walk reads far more of the file.
+ */
+const REINDEX_TIMEOUT = 30_000
 
 export type ThumbnailGenerator = {
   /** Report which byte ranges are readable. Called with no argument when the whole file is. */
@@ -236,7 +245,10 @@ export const createThumbnailGenerator = async (options: ThumbnailGeneratorOption
     const reindex = async (readable: number) => {
       reindexing = true
       try {
-        const next = await remuxer.init()
+        const next = await Promise.race([
+          remuxer.init(),
+          new Promise<never>((_, reject) => setTimeout(() => reject(new Error('timed out')), REINDEX_TIMEOUT)),
+        ])
         if (destroyed) return
         indexedBytes = readable
         const rebuilt = buildSlots(next.indexes)

package/src/lib/react/components/control-bar.tsx

@@ -172,6 +172,8 @@ export const ControlBar = () => {
   const paused = usePlayer((state) => state.paused)
   const currentTime = usePlayer((state) => state.currentTime)
   const duration = usePlayer((state) => state.duration)
+  // a seek in flight reads as its destination, so the clock answers the click at once
+  const seekingTo = usePlayer((state) => state.seekingTo)
   const fullscreen = usePlayer((state) => state.fullscreen)
   const hideUI = usePlayer((state) => state.hideUI)
   const togglePictureInPicture = usePlayer((state) => state.togglePictureInPicture)
@@ -296,7 +298,7 @@ export const ControlBar = () => {
           />
           <Sound ref={setVolumeElement}/>
           <div className='time'>
-            {formatMediaTime(currentTime, duration)}
+            {formatMediaTime(seekingTo ?? currentTime, duration)}
           </div>
         </div>
         <div className='right'>

package/src/lib/react/components/overlay.tsx

@@ -115,6 +115,9 @@ export const Overlay = ({ onSubtitleRef }: { onSubtitleRef: (element: HTMLDivEle
   const size = usePlayer((state) => state.size)
   // video.js's own: readyState below HAVE_FUTURE_DATA while not paused
   const waiting = usePlayer((state) => state.waiting)
+  // a seek that has not presented its frame yet is a wait like any other, and the one most likely to
+  // be mistaken for the player having ignored the click
+  const seekingTo = usePlayer((state) => state.seekingTo)
 
   return (
     <>
@@ -129,11 +132,11 @@ export const Overlay = ({ onSubtitleRef }: { onSubtitleRef: (element: HTMLDivEle
           </div>
         )
         : undefined}
-      {/* Two different waits, one spinner. With bytes it is pre-metadata rather than buffering: the
+      {/* Three waits, one spinner. With bytes it is pre-metadata rather than buffering: the
           store reports 0 both before metadata and for a genuinely unknown duration, so `size` is what
           tells whether a source was handed over at all. A media this player does not own has neither
           `size` nor `ready`, and reports the ordinary `waiting` every element does. */}
-      {(size ? !ready : waiting) && !playbackError
+      {((size ? !ready : waiting) || seekingTo !== undefined) && !playbackError
         ? <div css={loadingStyle} />
         : undefined}
       {playbackError

package/src/lib/react/components/progress-bar.tsx

@@ -246,6 +246,7 @@ export const ProgressBar = () => {
   const thumbnailAt = usePlayer((state) => state.thumbnailAt)
   const requestThumbnail = usePlayer((state) => state.requestThumbnail)
   const chapters = usePlayer((state) => state.chapters)
+  const seekingTo = usePlayer((state) => state.seekingTo)
 
   const progressBarRef = useRef<HTMLDivElement>(null)
 
@@ -393,11 +394,22 @@ export const ProgressBar = () => {
     player.seek(seekFraction * duration)
   }, [player, dragging, seekFraction, duration])
 
+  /*
+   * Where the bar is drawn, which is not always where the element is.
+   *
+   * Three sources, in the order they beat each other. A drag is the pointer's own position, so the
+   * bar tracks the finger exactly rather than trailing the element through a seek per move. A
+   * settled seek is its target, held until the element gets there. Everything else is the element.
+   *
+   * The point of the first two is that a seek takes a few hundred milliseconds to present a frame,
+   * and a bar that waits for it looks like it ignored the click.
+   */
   const scaleX = useMemo(() => {
-    return !duration || typeof currentTime !== 'number'
-      ? 0
-      : currentTime / duration
-  }, [duration, currentTime])
+    if (!duration) return 0
+    if (dragging && seekFraction !== undefined) return seekFraction
+    const at = seekingTo ?? currentTime
+    return typeof at === 'number' ? at / duration : 0
+  }, [duration, currentTime, dragging, seekFraction, seekingTo])
 
   const bounds = useMemo(() => segmentBounds(chapters, duration), [chapters, duration])
   const segmented = bounds.length > 0

package/src/lib/react/hooks/use-playback.ts

@@ -32,6 +32,13 @@ const RESTART_SETTLED_MS = 60_000
  * this is the ceiling. Half a second is the point where a seek stops feeling like a seek.
  */
 const SEEK_PREPARE_BUDGET_MS = 500
+/**
+ * How long the chrome may show a seek that has not landed, in ms.
+ *
+ * Only a backstop. The element firing `seeked` is what normally ends it, and a seek that never
+ * completes at all would otherwise leave the clock reading a time the picture never reached.
+ */
+const SEEK_DISPLAY_LIMIT_MS = 15_000
 
 const messageOf = (error: unknown) =>
   error instanceof Error ? error.message : String(error)
@@ -212,6 +219,26 @@ export const usePlayback = (
         console.warn(`[media-player] seek to ${time.toFixed(2)} moved after ${Math.round(performance.now() - startedAt)}ms via ${movedBecause}, runway ${runway.toFixed(1)}s${movedBecause === 'deadline' ? ' (EXPOSED: moved before its data was ready)' : ''}`)
       }
     }
+    /*
+     * Say where the seek is going before anything has gone there.
+     *
+     * Everything below this line takes time the viewer is watching: the prepare, the element's own
+     * seek, and the decode from the preceding keyframe. Until all of it lands the element still
+     * reports the OLD position, so a chrome reading it directly sits still and looks broken. This is
+     * cleared by the element arriving, not by the prepare finishing, because the frame is what the
+     * viewer is actually waiting for.
+     */
+    player.setSourceState({ seekingTo: time })
+    const video = controller.videoElement
+    const settled = () => {
+      video?.removeEventListener('seeked', settled)
+      clearTimeout(giveUp)
+      player.setSourceState({ seekingTo: undefined })
+    }
+    // a seek the element never completes must not leave the clock stuck on a time it never reached
+    const giveUp = setTimeout(settled, SEEK_DISPLAY_LIMIT_MS)
+    video?.addEventListener('seeked', settled)
+
     const deadline = setTimeout(() => { movedBecause = 'deadline'; move() }, seekPrepareBudgetMs)
     void controller
       .prepareSeek(time)

package/src/lib/react/source-feature.ts

@@ -174,6 +174,19 @@ export type SourceState = {
   /** Whether the engine has produced its first media segment. */
   ready: boolean
 
+  /**
+   * Where a seek is headed while the element has not arrived there yet, in seconds.
+   *
+   * The element's own `currentTime` does not move until it can present the frame, which on a long
+   * GOP is a few hundred milliseconds after the click. Reading it directly leaves the seekbar and
+   * the clock sitting at the old position for that whole time, which reads as the player ignoring
+   * the click. The chrome shows THIS instead while it is set, so the bar and the clock answer at
+   * once and the spinner says the picture is still coming.
+   *
+   * Undefined whenever no seek is outstanding, which is almost always.
+   */
+  seekingTo?: number
+
   /**
    * The write seam, wired in `attach`. Only the React layer calls it.
    *