@banou/media-player 0.8.3 → 0.8.5

package/dist/react/components/chrome.d.ts

@@ -6,7 +6,9 @@ export type ChromeProps = {
     onCanvasRef: (element: HTMLCanvasElement | null) => void;
     /** The app's own content, over the video and outside the click-to-pause region, unlike `children`. */
     overlay?: ReactNode;
+    /** False draws no control bar at all, leaving the picture, the title and the overlay. */
+    controls?: boolean;
     children?: ReactNode;
 };
-export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, overlay, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Chrome: ({ ref, onVideoRef, onCanvasRef, overlay, controls, children }: ChromeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Chrome;

package/dist/react/components/icons.d.ts

@@ -0,0 +1,4 @@
+import type { SVGProps } from 'react';
+export declare const Captions: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/** The slash is Feather's own convention for an off state, the line `MicOff` and `BellOff` draw. */
+export declare const CaptionsOff: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/react/components/subtitles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Subtitles, one click from the control bar.
+ *
+ * It used to be a row inside the settings menu, which put the most-reached control in the player two
+ * clicks deep behind a gear, next to playback speed. Audio stays in there: switching it is rare, and
+ * on a source that owns its own player it is slow enough to be a considered act.
+ */
+export declare const SubtitlesAction: () => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export default SubtitlesAction;

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

@@ -0,0 +1,47 @@
+import type { TrackChoice } from '../source-feature';
+/**
+ * The popover surface and the track rows, shared by every menu in the control bar.
+ *
+ * Carries NO `position` of its own: the menu anchors to the control bar, which is the width of the
+ * player box, so each caller keeps `position: static` on its own wrapper. Anchoring to the button
+ * instead is what let the menu hang outside the box, where the root's `overflow: hidden` made it
+ * unreachable rather than merely ugly.
+ */
+export declare const popoverStyle: import("@emotion/utils").SerializedStyles;
+/**
+ * One track picker, used by the subtitles button and by the settings menu's audio page.
+ *
+ * `pending` and `failed` describe the switch the viewer just asked for, not the menu: while a source
+ * is working, every row is inert and the one being switched to says so, because the selection has not
+ * moved yet and a tick next to it would be a lie.
+ */
+export declare const TrackMenu: ({ title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
+    title: string;
+    tracks: 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. */
+    onBack?: () => void;
+    /** Absent means the menu offers no way off at all, which is what audio wants. */
+    offLabel?: string;
+    /** The id currently being switched to, where `null` is the off row and undefined means idle. */
+    pending?: string | number | null;
+    failed?: boolean;
+}) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * The open/closed and in-flight state every track menu in the bar needs.
+ *
+ * One hook rather than two, because `runSelect` is what decides when the menu may close: splitting
+ * the popover state from the selection state would wire them in a circle.
+ */
+export declare const useTrackMenu: ({ onReset }?: {
+    onReset?: () => void;
+}) => {
+    open: boolean;
+    toggle: () => void;
+    close: () => void;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+    pending: string | number | null | undefined;
+    failed: boolean;
+    runSelect: (id: string | number | null, select: () => void | Promise<void>) => void;
+};

package/dist/react/player.d.ts

@@ -7,10 +7,11 @@ export declare const Player: import("@videojs/react").CreatePlayerResult<import(
     thumbnailAt?: (time: number) => import("..").ThumbnailImage | undefined;
     subtitleTracks: import("./source-feature").TrackChoice[];
     selectedSubtitleTrack: string | number | undefined;
-    selectSubtitleTrack: (id: string | number | undefined) => void;
+    selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;
+    subtitleOffLabel?: string;
     audioTracks: import("./source-feature").TrackChoice[];
     selectedAudioTrack: string | number | undefined;
-    selectAudioTrack: (id: string | number) => void;
+    selectAudioTrack: (id: string | number) => void | Promise<void>;
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
     togglePictureInPicture: (() => void) | null;

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

@@ -10,6 +10,13 @@ import type { MediaIndex, ThumbnailImage } from '../engine';
 export type TrackChoice = {
     id: string | number;
     label: string;
+    /**
+     * Offered but not selectable, so the menu shows it and refuses the click.
+     *
+     * Hiding it instead would be worse: a source that lists a dub it cannot currently serve is telling
+     * the viewer the dub exists, and a menu that silently omits it looks like the source has nothing.
+     */
+    disabled?: boolean;
 };
 /**
  * A byte span of the file the consumer has in hand, mapped onto the timeline through the keyframe
@@ -40,13 +47,24 @@ export type SourceState = {
      * Falls back to scanning `thumbnails` when absent, which is what the engine's generator fills.
      */
     thumbnailAt?: (time: number) => ThumbnailImage | undefined;
+    /**
+     * Both selectors may answer with a promise, and the menu waits on it.
+     *
+     * The engine switches a track by pointing the pipeline at another stream, which is immediate and
+     * cannot fail, so locally these return nothing. A source that owns its own player is the opposite
+     * case: the switch is a round trip through somebody else's UI and takes seconds, and it can lose.
+     * A menu that closed on the click would report a selection that has not happened, and a rejection
+     * with nothing awaiting it is an unhandled rejection rather than an error the viewer ever sees.
+     */
     subtitleTracks: TrackChoice[];
     /** undefined means subtitles are off. */
     selectedSubtitleTrack: string | number | undefined;
-    selectSubtitleTrack: (id: string | number | undefined) => void;
+    selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;
+    /** What the row that turns subtitles off is called, when the source would rather name it itself. */
+    subtitleOffLabel?: string;
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
-    selectAudioTrack: (id: string | number) => void;
+    selectAudioTrack: (id: string | number) => void | Promise<void>;
     /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
     hideUI: boolean;
     setHideUI: (hide: boolean) => void;
@@ -87,13 +105,24 @@ export declare const sourceFeature: import("@videojs/react").PlayerFeature<{
      * Falls back to scanning `thumbnails` when absent, which is what the engine's generator fills.
      */
     thumbnailAt?: (time: number) => ThumbnailImage | undefined;
+    /**
+     * Both selectors may answer with a promise, and the menu waits on it.
+     *
+     * The engine switches a track by pointing the pipeline at another stream, which is immediate and
+     * cannot fail, so locally these return nothing. A source that owns its own player is the opposite
+     * case: the switch is a round trip through somebody else's UI and takes seconds, and it can lose.
+     * A menu that closed on the click would report a selection that has not happened, and a rejection
+     * with nothing awaiting it is an unhandled rejection rather than an error the viewer ever sees.
+     */
     subtitleTracks: TrackChoice[];
     /** undefined means subtitles are off. */
     selectedSubtitleTrack: string | number | undefined;
-    selectSubtitleTrack: (id: string | number | undefined) => void;
+    selectSubtitleTrack: (id: string | number | undefined) => void | Promise<void>;
+    /** What the row that turns subtitles off is called, when the source would rather name it itself. */
+    subtitleOffLabel?: string;
     audioTracks: TrackChoice[];
     selectedAudioTrack: string | number | undefined;
-    selectAudioTrack: (id: string | number) => void;
+    selectAudioTrack: (id: string | number) => void | Promise<void>;
     /** 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

@@ -14,8 +14,28 @@ export type MediaPlayerSource = {
 };
 /** Shared by both arms: nothing here depends on who owns the media. */
 type CommonOptions = {
+    /**
+     * Drawn across the top of the picture, in a layer of its own.
+     *
+     * That layer cannot see an `overlay` item, so an app that also places something along the top has
+     * two elements competing for one band of screen: on a narrow viewport the title ellipsizes against
+     * the FULL width and then runs underneath whatever is painted over it. An app in that position
+     * should leave this unset and draw the title as part of its own overlay row, where the two can
+     * share a flex line and the filename can be the one that gives way.
+     */
     title?: string;
     autoplay?: boolean;
+    /**
+     * Draw the control bar. Defaults to true.
+     *
+     * False leaves the picture, the title and the overlay and takes away only the chrome, for a host
+     * that has to put its own interactive UI over the media for a while. A source whose sign-in form
+     * lives inside its own document is the case this exists for: the form is the thing the viewer has
+     * to reach, and a control bar for a media that has not loaded yet sits on top of it and eats the
+     * clicks. Hiding it from the host side is not an option, since `setHideUI` is installed by the
+     * store's `attach` and does nothing at all until a media arrives.
+     */
+    controls?: boolean;
     /**
      * The app's own content over the video: a download readout, a badge, a logo, anything the player
      * itself has no opinion about.
@@ -85,7 +105,16 @@ export type MediaPlayerLocalOptions = CommonOptions & MediaPlayerSource & {
  * works: the key session belongs to whoever owns the element.
  */
 export type MediaPlayerRemoteOptions = CommonOptions & {
-    media: PlayerMedia;
+    /**
+     * Null means the media has not been found yet: the chrome renders and attaches when it arrives.
+     *
+     * A source usually has to mount its own document before it can hand over an element, and that
+     * document is passed as `children`, so it can only exist once this component has rendered. The
+     * key is still REQUIRED even when the value is null, because its presence is what selects this
+     * arm: omitting it falls through to the local arm, which draws an idle `<video>` over whatever
+     * the children put there.
+     */
+    media: PlayerMedia | null;
     read?: never;
     size?: never;
     /** The source's own storyboard, since there are no bytes to generate previews from. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "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/react/components/chrome.tsx

@@ -95,10 +95,12 @@ export type ChromeProps = {
   onCanvasRef: (element: HTMLCanvasElement | null) => void
   /** The app's own content, over the video and outside the click-to-pause region, unlike `children`. */
   overlay?: ReactNode
+  /** False draws no control bar at all, leaving the picture, the title and the overlay. */
+  controls?: boolean
   children?: ReactNode
 }
 
-export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, children }: ChromeProps) => {
+export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, children }: ChromeProps) => {
   const player = usePlayer()
   const hideUI = usePlayer((state) => state.hideUI)
   const setHideUI = usePlayer((state) => state.setHideUI)
@@ -170,7 +172,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, children }: Chro
           {item}
         </div>
       ))}
-      <ControlBar />
+      {controls === false ? null : <ControlBar />}
       <div className="video" onClick={onVideoClick}>
         {onVideoRef ? <video ref={onVideoRef} playsInline /> : null}
         {children}

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

@@ -11,6 +11,7 @@ import { TooltipDisplay } from './tooltip-display'
 import { ProgressBar } from './progress-bar'
 import pictureInPicture from '../../assets/picture-in-picture.svg'
 import SettingsAction from './settings'
+import SubtitlesAction from './subtitles'
 import colors from '../../utils/colors'
 import Sound from './sound'
 
@@ -69,7 +70,7 @@ const style = css`
         }
       }
 
-      .play, .sound, .time, .settings, .picture-in-picture, .full-screen {
+      .play, .sound, .time, .subtitles, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
 
@@ -87,7 +88,7 @@ const style = css`
         }
       }
 
-      .play, .sound, .settings, .picture-in-picture, .full-screen {
+      .play, .sound, .subtitles, .settings, .picture-in-picture, .full-screen {
         border-radius: 4px;
 
         padding: 8px;
@@ -258,6 +259,7 @@ export const ControlBar = () => {
           </div>
         </div>
         <div className='right'>
+          <SubtitlesAction />
           <SettingsAction />
           {togglePictureInPicture
             ? (

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

@@ -0,0 +1,38 @@
+import type { SVGProps } from 'react'
+
+/**
+ * The captions glyph, drawn here because react-feather does not have one.
+ *
+ * Checked against react-feather 2.0.10's 287 icons: there is no captions, subtitles or CC glyph, and
+ * nothing it does have reads as one (`Type` is a text-formatting T, `MessageSquare` is a chat bubble,
+ * `FileText` is a document). Drawn on Feather's own 24 grid at stroke-width 2 with round caps and
+ * carrying no size or colour of its own, so the control bar's `svg` rules size and stroke it exactly
+ * as they do `Play` and `Settings`.
+ */
+const iconProps = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: 24,
+  height: 24,
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const
+
+export const Captions = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...iconProps} {...props}>
+    <rect x='3' y='5' width='18' height='14' rx='2' ry='2' />
+    <path d='M7 15h4m4 0h2M7 11h2m4 0h4' />
+  </svg>
+)
+
+/** The slash is Feather's own convention for an off state, the line `MicOff` and `BellOff` draw. */
+export const CaptionsOff = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...iconProps} {...props}>
+    <rect x='3' y='5' width='18' height='14' rx='2' ry='2' />
+    <path d='M7 15h4m4 0h2M7 11h2m4 0h4' />
+    <line x1='2' y1='2' x2='22' y2='22' />
+  </svg>
+)

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

@@ -52,14 +52,28 @@ const style = css`
     display: flex;
     justify-content: center;
 
+    /* The seekbar's other hover affordance, the thumbnail below, gets a rounded box and a drop
+       shadow. A source that ships no thumbnails, which is every source whose media the player does
+       not own, leaves this readout as the entire preview, so it carries the same treatment instead
+       of sitting as bare text on the picture. The ink comes from the player root. */
+    background-color: rgba(28, 28, 28, .95);
+    border-radius: calc(.4 * var(--mp-unit));
+    padding: 0 calc(.6 * var(--mp-unit));
+    box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
+
     text-shadow: 0 0 4px rgba(0, 0, 0, 1);
     ${fonts.bMedium.bold}
 
     position: absolute;
-    top: calc(-2.5 * var(--mp-unit));
-    width: calc(5 * var(--mp-unit));
+    /* Anchored on its bottom edge rather than its top: now that it has a background its height
+       follows the font size, and a top-anchored box would grow downward into the track. */
+    bottom: calc(1.2 * var(--mp-unit));
+    /* Sized to its content, replacing a fixed 5 unit box that \`1:04:09\` overflows. Transparent, that
+       overflow was invisible; filled, it would not be. */
+    width: max-content;
+    white-space: nowrap;
+    transform: translateX(-50%);
 
-    margin-left: calc(-2.5 * var(--mp-unit));
     pointer-events: none;
   }
 
@@ -297,7 +311,9 @@ export const ProgressBar = () => {
           ? (
             <div
               className="cursor-time"
-              style={{ left: `clamp(calc(1.8 * var(--mp-unit)), ${timePercentage(progressBarHoverTime)}%, calc(100% - calc(1.8 * var(--mp-unit))))` }}
+              /* the inset grew with the pill: content sized and centred, its half width is now the
+                 padding plus the text, so the old 18px let a filled box hang past both ends */
+              style={{ left: `clamp(calc(3 * var(--mp-unit)), ${timePercentage(progressBarHoverTime)}%, calc(100% - calc(3 * var(--mp-unit))))` }}
             >
               {cusorTimeString}
             </div>