@banou/media-player 0.10.1 → 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.1",
+  "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

@@ -25,6 +25,26 @@ const READAHEAD = 1_000_000
 const MAX_ATTEMPTS = 3
 // a keyframe decode can hang without ever settling
 const KEYFRAME_TIMEOUT = 10_000
+/**
+ * How much more of the file has to become readable before the index is walked again.
+ *
+ * An index is only as complete as the bytes behind it, and over a torrent those arrive for minutes
+ * after the player starts. Re-walking on every range change would demux the file over and over; a
+ * multiplier makes the number of walks logarithmic in the file size instead, so a download that
+ * starts at 2% re-indexes around eight times on its way to whole rather than hundreds.
+ */
+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. */
@@ -60,22 +80,37 @@ export const createThumbnailGenerator = async (options: ThumbnailGeneratorOption
     const interval = Math.max(options.interval ?? INTERVAL, duration / MAX_THUMBNAILS)
 
     type Slot = { timestamp: number, endTime: number, startByte: number, endByte: number, done: boolean, attempts: number }
-    const slots: Slot[] = []
-    for (const [i, index] of metadata.indexes.entries()) {
-      const last = slots.at(-1)
-      if (last && index.timestamp - last.timestamp < interval) continue
-      slots.push({
-        timestamp: index.timestamp,
-        endTime: duration,
-        startByte: index.pos,
-        endByte: Math.min((metadata.indexes[i + 1]?.pos ?? length) + READAHEAD, length),
-        done: false,
-        attempts: 0,
-      })
+    let slots: Slot[] = []
+
+    /**
+     * The slot list for one index, which is only ever as complete as the bytes it was built from.
+     *
+     * libav walks the clusters it can read and stops, WITHOUT failing: on a file whose first tenth is
+     * readable it reports a single keyframe and a correct duration, because the duration comes from
+     * the header. That single entry then becomes a single slot whose endTime falls through to the
+     * duration, which is one preview covering the whole seekbar.
+     */
+    const buildSlots = (indexes: typeof metadata.indexes): Slot[] => {
+      const built: Slot[] = []
+      for (const [i, index] of indexes.entries()) {
+        const last = built.at(-1)
+        if (last && index.timestamp - last.timestamp < interval) continue
+        built.push({
+          timestamp: index.timestamp,
+          endTime: duration,
+          startByte: index.pos,
+          endByte: Math.min((indexes[i + 1]?.pos ?? length) + READAHEAD, length),
+          done: false,
+          attempts: 0,
+        })
+      }
+      for (const [i, slot] of built.entries()) slot.endTime = built[i + 1]?.timestamp ?? duration
+      // reading the last keyframe runs the demuxer into EOF, which crashes the libav build
+      if (built.length > 1 && (built.at(-1)!.timestamp > duration - interval * 2)) built.pop()
+      return built
     }
-    for (const [i, slot] of slots.entries()) slot.endTime = slots[i + 1]?.timestamp ?? duration
-    // reading the last keyframe runs the demuxer into EOF, which crashes the libav build
-    if (slots.length > 1 && (slots.at(-1)!.timestamp > duration - interval * 2)) slots.pop()
+
+    slots = buildSlots(metadata.indexes)
 
     let thumbnails: ThumbnailImage[] = []
     let destroyed = false
@@ -93,6 +128,19 @@ export const createThumbnailGenerator = async (options: ThumbnailGeneratorOption
     /** Where the pointer is on the seekbar, or undefined when it is off it. */
     let priorityTime: number | undefined
 
+    /**
+     * How much of the file was readable when the current index was built.
+     *
+     * Negative until the first update, which establishes it: the boot walk has just happened against
+     * whatever was readable then, so the first report of the ranges is the baseline rather than a
+     * reason to walk again.
+     */
+    let indexedBytes = -1
+    let reindexWanted = false
+    let reindexing = false
+    /** The ranges last reported, so a walk deferred behind a decode can still claim against them. */
+    let lastRanges: [number, number][] | undefined
+
     /*
      * The slot to decode next: the one under the pointer when it is still waiting, else the oldest claim.
      *
@@ -146,7 +194,25 @@ export const createThumbnailGenerator = async (options: ThumbnailGeneratorOption
 
     // one decode at a time, because there is one wasm worker behind them all
     const pump = () => {
-      if (running || destroyed || !pending.length) return
+      if (running || destroyed || reindexing) return
+      /*
+       * A deferred index walk goes first.
+       *
+       * There is one worker behind both, and a walk started while a decode holds it would have them
+       * interleaved on the same demuxer. Taking it here means the walk happens at the one moment
+       * nothing else is using it, and it happens BEFORE the next decode so that decode comes from
+       * the new slot list rather than the stale one.
+       */
+      if (reindexWanted) {
+        reindexWanted = false
+        const ranges = lastRanges
+        void reindex(readableTo(ranges)).then(() => {
+          claimReadable(ranges)
+          pump()
+        })
+        return
+      }
+      if (!pending.length) return
       const slot = pending.splice(nextIndex(), 1)[0]!
       running = true
       void decode(slot)
@@ -167,15 +233,77 @@ export const createThumbnailGenerator = async (options: ThumbnailGeneratorOption
       pump()
     }
 
+    /**
+     * Walk the index again now that more of the file can be read, and keep what is already drawn.
+     *
+     * A preview survives if its slot survives, which is why the previous timestamps are matched
+     * rather than the list being thrown away: the first slot is almost always still the first slot,
+     * and re-decoding it would throw away work and flicker the seekbar for no reason. What DOES
+     * change is its endTime, since a slot that used to run to the end of the file now runs only as
+     * far as the neighbour the new index revealed.
+     */
+    const reindex = async (readable: number) => {
+      reindexing = true
+      try {
+        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)
+        if (!rebuilt.length) return
+
+        const drawn = new Map(thumbnails.map((t) => [t.startTime, t]))
+        for (const slot of rebuilt) {
+          if (drawn.has(slot.timestamp)) slot.done = true
+        }
+        slots = rebuilt
+        // a preview whose slot is gone is no longer addressable, and its blob would leak
+        const kept = new Set(rebuilt.map((slot) => slot.timestamp))
+        for (const t of thumbnails) if (!kept.has(t.startTime)) URL.revokeObjectURL(t.url)
+        thumbnails = rebuilt
+          .filter((slot) => drawn.has(slot.timestamp))
+          .map((slot) => ({ url: drawn.get(slot.timestamp)!.url, startTime: slot.timestamp, endTime: slot.endTime }))
+        // anything claimed against the old list is stale, and the update below re-claims from the new one
+        pending.length = 0
+        emit()
+      } catch {
+        // an index that could not be re-read leaves the old one in place, and the next update retries
+      } finally {
+        reindexing = false
+      }
+    }
+
+    /** The end of what can be read, which is what an index walk can reach. */
+    const readableTo = (ranges?: [number, number][]) =>
+      ranges ? ranges.reduce((most, [, to]) => Math.max(most, to), 0) : length
+
+    const claimReadable = (ranges?: [number, number][]) => {
+      for (const slot of slots) {
+        if (slot.done) continue
+        if (!ranges || ranges.some(([from, to]) => from <= slot.startByte && slot.endByte <= to)) claim(slot)
+      }
+    }
+
     emit()
 
     return {
       update: (ranges) => {
         if (destroyed) return
-        for (const slot of slots) {
-          if (slot.done) continue
-          if (!ranges || ranges.some(([from, to]) => from <= slot.startByte && slot.endByte <= to)) claim(slot)
+        lastRanges = ranges
+        const readable = readableTo(ranges)
+        if (indexedBytes < 0) indexedBytes = readable
+        else {
+          const grown = readable >= Math.max(indexedBytes * REINDEX_GROWTH, indexedBytes + REINDEX_MIN_BYTES)
+          // and one last walk when the file becomes whole, so a finished download is fully indexed
+          const whole = readable >= length && indexedBytes < length
+          if (grown || whole) reindexWanted = true
         }
+        claimReadable(ranges)
+        // claims first, so a walk that has to wait for a decode does not hold up the previews that
+        // the current index can already produce
+        pump()
       },
       prioritize: (time) => {
         if (destroyed) return

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.
    *