@banou/media-player 0.10.2 → 0.10.4

package/dist/react/player.d.ts

@@ -16,6 +16,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     selectAudioTrack: (id: string | number) => void | Promise<void>;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
+    hasMedia: boolean;
     togglePictureInPicture: (() => void) | null;
     pictureInPictureMode: import("../engine").PictureInPictureMode | null;
     burnedInSubtitles: boolean;
@@ -23,6 +24,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

@@ -116,6 +116,19 @@ export type SourceState = {
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
+    /**
+     * Whether there is anything loaded to play at all.
+     *
+     * Not the same question as `ready`, which is about a source that HAS been handed over and is still
+     * booting. This one separates that from having been given nothing, and the chrome needs the
+     * difference: idle-hiding with no media leaves a black rectangle with no controls, no title and no
+     * cursor, and no way back, since the only thing that reveals the chrome again is a pointer move over
+     * a player the viewer has no reason to think is there.
+     *
+     * Written by the React layer, which is the only place both arms are visible: bytes for a local
+     * source, an element for a media this player does not own.
+     */
+    hasMedia: boolean;
     /**
      * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
      *
@@ -159,6 +172,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.
      *
@@ -222,6 +247,19 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
+    /**
+     * Whether there is anything loaded to play at all.
+     *
+     * Not the same question as `ready`, which is about a source that HAS been handed over and is still
+     * booting. This one separates that from having been given nothing, and the chrome needs the
+     * difference: idle-hiding with no media leaves a black rectangle with no controls, no title and no
+     * cursor, and no way back, since the only thing that reveals the chrome again is a pointer move over
+     * a player the viewer has no reason to think is there.
+     *
+     * Written by the React layer, which is the only place both arms are visible: bytes for a local
+     * source, an element for a media this player does not own.
+     */
+    hasMedia: boolean;
     /**
      * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
      *
@@ -265,6 +303,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.4",
   "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/chrome.tsx

@@ -119,6 +119,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
   const player = usePlayer()
   const hideUI = usePlayer((state) => state.hideUI)
   const setHideUI = usePlayer((state) => state.setHideUI)
+  const hasMedia = usePlayer((state) => state.hasMedia)
   const autoHide = useRef<ReturnType<typeof setTimeout>>(undefined)
   // a tap and a click mean different things, so the last pointer kind is remembered
   const lastPointerType = useRef<string>('mouse')
@@ -128,6 +129,27 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
 
   useEffect(() => () => clearTimeout(autoHide.current), [])
 
+  /*
+   * With nothing loaded the chrome never hides, and anything already hidden comes back.
+   *
+   * Hiding is only ever reversed by a pointer move over the player, which is a fair bet while a video
+   * is playing and a bad one when the box is empty: three seconds after mount the controls, the title
+   * and the cursor all go, leaving a black rectangle that gives the viewer no reason to think there is
+   * a player there to wave at. The effect covers the media going AWAY, which the guard below cannot:
+   * its timer may already be in flight, holding a `hasMedia` that was true when it was scheduled.
+   */
+  useEffect(() => {
+    if (hasMedia) return
+    clearTimeout(autoHide.current)
+    setHideUI(false)
+  }, [hasMedia, setHideUI])
+
+  /** The single door to hiding, so no path can bypass the empty-player case. */
+  const hide = () => {
+    if (!hasMedia) return
+    setHideUI(true)
+  }
+
   // The caller's ref still gets the element: video.js attaches the fullscreen container through it,
   // and this needs the same node to hit test against.
   const setRoot = (element: HTMLDivElement | null) => {
@@ -165,7 +187,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
       autoHide.current = setTimeout(hideUnlessTheMouseIsOnAControl, AUTO_HIDE_DELAY)
       return
     }
-    setHideUI(true)
+    hide()
   }
 
   const reveal = () => {
@@ -196,7 +218,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
     if (hideUI) reveal()
     else {
       clearTimeout(autoHide.current)
-      setHideUI(true)
+      hide()
     }
   }
 
@@ -209,7 +231,7 @@ export const Chrome = ({ ref, onVideoRef, onSubtitleRef, overlay, controls, chil
     const inside = ev.clientX >= left && ev.clientX < right && ev.clientY >= top && ev.clientY < bottom
     if (inside) return
     clearTimeout(autoHide.current)
-    setHideUI(true)
+    hide()
   }
 
   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

@@ -127,6 +127,20 @@ export type SourceState = {
   hideUI: boolean
   setHideUI: (hide: boolean) => void
 
+  /**
+   * Whether there is anything loaded to play at all.
+   *
+   * Not the same question as `ready`, which is about a source that HAS been handed over and is still
+   * booting. This one separates that from having been given nothing, and the chrome needs the
+   * difference: idle-hiding with no media leaves a black rectangle with no controls, no title and no
+   * cursor, and no way back, since the only thing that reveals the chrome again is a pointer move over
+   * a player the viewer has no reason to think is there.
+   *
+   * Written by the React layer, which is the only place both arms are visible: bytes for a local
+   * source, an element for a media this player does not own.
+   */
+  hasMedia: boolean
+
   /**
    * Owned here, not by `pip`: that watches the media element, and the window holds a mirror.
    *
@@ -174,6 +188,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.
    *
@@ -197,6 +224,7 @@ const initialState: SourceState = {
   selectAudioTrack: () => {},
   hideUI: false,
   setHideUI: () => {},
+  hasMedia: false,
   togglePictureInPicture: null,
   pictureInPictureMode: null,
   burnedInSubtitles: false,

package/src/lib/react/video-player.tsx

@@ -269,9 +269,16 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
   // attaches: when attach swaps in the real setter the identity changes and these publish again.
   const setSourceState = usePlayer((state) => state.setSourceState)
 
+  /*
+   * Read here because this is the only place both arms are in scope: a local source is bytes, and a
+   * remote one is an element somebody else owns. `size` alone cannot answer it, since the remote arm
+   * legitimately has none, and the chrome would then treat every remote player as having no media.
+   */
+  const hasMedia = remote ? !!remote.media : size !== undefined
+
   useEffect(() => {
-    setSourceState({ title, size, downloadedRanges })
-  }, [setSourceState, title, size, downloadedRanges])
+    setSourceState({ title, size, downloadedRanges, hasMedia })
+  }, [setSourceState, title, size, downloadedRanges, hasMedia])
 
   const thumbnailAt = remote?.thumbnails?.at
   useEffect(() => {