@banou/media-player 0.10.17 → 0.10.19

package/dist/react/components/track-menu.d.ts

@@ -17,7 +17,7 @@ export declare const popoverStyle: import("@emotion/utils").SerializedStyles;
  */
 export declare const TrackMenu: ({ title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
     title: string;
-    tracks: TrackChoice[];
+    tracks: readonly TrackChoice[];
     selected: string | number | undefined;
     onSelect: (id: string | number | undefined) => void;
     /** Absent means the menu was opened straight from the bar, so the header is a label and no more. */

package/dist/react/player.d.ts

@@ -15,6 +15,7 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     audioTracks: import("./source-feature").TrackChoice[];
     selectedAudioTrack: string | number | undefined;
     selectAudioTrack: (id: string | number) => void | Promise<void>;
+    quality: import("./media").DelegatedSelection | null;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
     hasMedia: boolean;

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

@@ -1,4 +1,5 @@
 import type { MediaChapter, MediaIndex, PictureInPictureMode, ThumbnailImage } from '../engine';
+import type { DelegatedSelection } from './media';
 /**
  * One row of a track menu, already named.
  *
@@ -162,6 +163,8 @@ export type SourceState = {
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
     selectAudioTrack: (id: string | number) => void | Promise<void>;
+    /** The settings menu's quality choices, from a media the player does not own. null when none are offered. */
+    quality: DelegatedSelection | null;
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
@@ -307,6 +310,8 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
     selectAudioTrack: (id: string | number) => void | Promise<void>;
+    /** The settings menu's quality choices, from a media the player does not own. null when none are offered. */
+    quality: DelegatedSelection | null;
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;

package/dist/react/video-player.d.ts

@@ -193,6 +193,12 @@ export type MediaPlayerRemoteOptions = CommonOptions & {
     /** The source renders these; the player draws the menu and reports the pick. */
     subtitles?: DelegatedTracks;
     audioTracks?: DelegatedTracks;
+    /**
+     * The source's own quality choices, as a row of the settings menu that shows the selected one.
+     * Offered only with two or more rows to choose between; `offLabel` names a row with no quality
+     * picked, such as an automatic one, whose id is null.
+     */
+    quality?: DelegatedTracks;
     /**
      * Offer picture in picture, entered by the host from inside the media's own document. Off by
      * default, and then there is no control at all. See `PassThroughPictureInPicture` for what the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.10.17",
+  "version": "0.10.19",
   "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/playback.ts

@@ -709,8 +709,10 @@ export const startPlayback = async (options: PlaybackOptions): Promise<PlaybackC
       if (elementFailed || videoElement.error) return
       evict().catch(() => {})
       pump().catch((error) => reportError(error, false))
-      // every remove() puts the MediaSource back to 'open', so the end has to be re-armed
-      if (endInBuffer() && !pending && atEnd() && mediaSource.readyState === 'open') endOfStream().catch(() => {})
+      // Every remove() puts the MediaSource back to 'open', so the end has to be re-armed, though not while a remuxer
+      // seek runs: queued behind a remove() and run after a move had started one, it came before that seek's append over
+      // the end, and Firefox 151 then sometimes waited at the end for good (4 of 1060 end moves, measured 2026-10-12)
+      if (endInBuffer() && !pending && atEnd() && mediaSource.readyState === 'open') endOfStream(() => !seeking).catch(() => {})
     }, 100)
     teardown.push(() => clearInterval(interval))
 

package/src/lib/engine/source-buffer.ts

@@ -50,10 +50,13 @@ export const updateSourceBuffer = (sourceBuffer: SourceBuffer, mediaSource: Medi
   const updateTimestampOffset = (timestampOffset: number) =>
     enqueue(async () => { sourceBuffer.timestampOffset = timestampOffset })
 
-  // endOfStream throws mid-update and is undone by the next remove(), so the caller re-arms it
-  const endOfStream = () =>
+  /**
+   * endOfStream throws mid-update and is undone by the next remove(), so the caller re-arms it.
+   * `allowed` is asked when the call reaches the front of the queue, not when it is queued.
+   */
+  const endOfStream = (allowed = () => true) =>
     enqueue(async () => {
-      if (mediaSource.readyState !== 'open' || sourceBuffer.updating) return
+      if (mediaSource.readyState !== 'open' || sourceBuffer.updating || !allowed()) return
       try { mediaSource.endOfStream() } catch {}
     })
 

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

@@ -107,7 +107,8 @@ ${popoverStyle}
 enum PopoverContent {
   Default,
   PlaybackRate,
-  Audio
+  Audio,
+  Quality
 }
 
 export const SettingsAction = () => {
@@ -116,6 +117,7 @@ export const SettingsAction = () => {
   const audioTracks = usePlayer((state) => state.audioTracks)
   const selectedAudioTrack = usePlayer((state) => state.selectedAudioTrack)
   const selectAudioTrack = usePlayer((state) => state.selectAudioTrack)
+  const quality = usePlayer((state) => state.quality)
   const volumeNormalizer = usePlayer((state) => state.volumeNormalizer)
 
   const [popoverContent, setPopoverContent] = useState(PopoverContent.Default)
@@ -134,6 +136,15 @@ export const SettingsAction = () => {
     runSelect(id, () => selectAudioTrack(id))
   }
 
+  const chooseQuality = (id: string | number | undefined) => {
+    if (!quality) return
+    runSelect(id ?? null, () => quality.select(id === undefined ? null : String(id)))
+  }
+  const qualityRows = quality ? quality.options.length + (quality.offLabel ? 1 : 0) : 0
+  const qualityLabel = quality?.selectedId == null
+    ? quality?.offLabel
+    : quality.options.find(({ id }) => id === quality.selectedId)?.label
+
   const changePopoverContent = (newPopoverContent: PopoverContent) => () => {
     setPopoverContent(newPopoverContent)
   }
@@ -179,6 +190,17 @@ export const SettingsAction = () => {
                 </div>
               )
               : null}
+            {qualityRows > 1
+              ? (
+                <div onClick={changePopoverContent(PopoverContent.Quality)}>
+                  <div>Quality</div>
+                  <div>
+                    {qualityLabel ? <span className='secondary'>{qualityLabel}</span> : null}
+                    <ChevronRight />
+                  </div>
+                </div>
+              )
+              : null}
             <div onClick={changePopoverContent(PopoverContent.PlaybackRate)}>
               <div>Playback speed</div>
               <div>
@@ -255,6 +277,20 @@ export const SettingsAction = () => {
           />
         )
       }
+      {
+        open && popoverContent === PopoverContent.Quality && quality && (
+          <TrackMenu
+            title='Quality'
+            tracks={quality.options}
+            selected={quality.selectedId ?? undefined}
+            onSelect={chooseQuality}
+            onBack={changePopoverContent(PopoverContent.Default)}
+            offLabel={quality.offLabel}
+            pending={pending}
+            failed={failed}
+          />
+        )
+      }
     </div>
   )
 }

package/src/lib/react/components/track-menu.tsx

@@ -154,7 +154,7 @@ export const popoverStyle = css`
 export const TrackMenu = (
   { title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
     title: string
-    tracks: TrackChoice[]
+    tracks: readonly TrackChoice[]
     selected: string | number | undefined
     onSelect: (id: string | number | undefined) => void
     /** Absent means the menu was opened straight from the bar, so the header is a label and no more. */

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

@@ -1,4 +1,5 @@
 import type { MediaChapter, MediaIndex, PictureInPictureMode, ThumbnailImage } from '../engine'
+import type { DelegatedSelection } from './media'
 
 import { definePlayerFeature } from '@videojs/core/dom'
 
@@ -175,6 +176,9 @@ export type SourceState = {
   selectedAudioTrack: string | number | undefined
   selectAudioTrack: (id: string | number) => void | Promise<void>
 
+  /** The settings menu's quality choices, from a media the player does not own. null when none are offered. */
+  quality: DelegatedSelection | null
+
   /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
   hideUI: boolean
   setHideUI: (hide: boolean) => void
@@ -283,6 +287,7 @@ const initialState: SourceState = {
   audioTracks: [],
   selectedAudioTrack: undefined,
   selectAudioTrack: () => {},
+  quality: null,
   hideUI: false,
   setHideUI: () => {},
   hasMedia: false,

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

@@ -220,6 +220,12 @@ export type MediaPlayerRemoteOptions =
     /** The source renders these; the player draws the menu and reports the pick. */
     subtitles?: DelegatedTracks
     audioTracks?: DelegatedTracks
+    /**
+     * The source's own quality choices, as a row of the settings menu that shows the selected one.
+     * Offered only with two or more rows to choose between; `offLabel` names a row with no quality
+     * picked, such as an automatic one, whose id is null.
+     */
+    quality?: DelegatedTracks
     /**
      * Offer picture in picture, entered by the host from inside the media's own document. Off by
      * default, and then there is no control at all. See `PassThroughPictureInPicture` for what the
@@ -397,6 +403,11 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
     })
   }, [setSourceState, audio])
 
+  const quality = remote?.quality?.selection ?? null
+  useEffect(() => {
+    setSourceState({ quality })
+  }, [setSourceState, quality])
+
   /*
    * Guarded, and its own effect, for the reason the ones above are.
    *