@banou/media-player 0.6.2 → 0.7.0

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

@@ -0,0 +1,90 @@
+import type { AudioStream, MediaIndex, SubtitleStream, ThumbnailImage } from '../engine'
+
+import { definePlayerFeature } from '@videojs/core/dom'
+
+/**
+ * A byte span of the file the consumer has in hand, mapped onto the timeline through the keyframe
+ * index, because a file's download percentage is not its playback percentage.
+ */
+export type DownloadedRange = {
+  startByteOffset: number
+  endByteOffset: number
+}
+
+/**
+ * Everything about the source that the chrome reads, carried on the player store next to the built-in
+ * playback state so a component never has to know which of two channels owns a field.
+ *
+ * The store is the single reader surface; the React layer is the single writer, through
+ * `setSourceState`.
+ */
+export type SourceState = {
+  /** Shown top left over the video. */
+  title?: string
+  /** Total byte length of the source. */
+  size?: number
+  downloadedRanges?: DownloadedRange[]
+
+  /** Keyframe index of the input, which turns a downloaded byte range into a time range. */
+  indexes: MediaIndex[]
+  thumbnails: ThumbnailImage[]
+
+  subtitleStreams: SubtitleStream[]
+  /** undefined means subtitles are off. */
+  selectedSubtitleStream: number | undefined
+  selectSubtitleStream: (streamIndex: number | undefined) => void
+
+  audioStreams: AudioStream[]
+  selectedAudioStream: number
+  selectAudioStream: (streamIndex: number) => void
+
+  /** Chrome auto-hide. True means the controls, title and cursor are hidden. */
+  hideUI: boolean
+  setHideUI: (hide: boolean) => void
+
+  /** Owned here, not by `pip`: that watches the media element, and the window holds a mirror. */
+  togglePictureInPicture: () => void
+
+  /** Set when the pipeline fails. Cleared when it recovers. */
+  playbackError: unknown
+  /** Whether the engine has produced its first media segment. */
+  ready: boolean
+
+  /**
+   * The write seam, wired in `attach`. Only the React layer calls it.
+   *
+   * It is a no-op until the media element attaches. Every caller writes either from an engine
+   * callback or after `startPlayback` resolves, both of which are far later than attach, and the one
+   * synchronous write is a reset to the values the defaults below already hold.
+   */
+  setSourceState: (partial: Partial<SourceState>) => void
+}
+
+const initialState: SourceState = {
+  indexes: [],
+  thumbnails: [],
+  subtitleStreams: [],
+  selectedSubtitleStream: undefined,
+  selectSubtitleStream: () => {},
+  audioStreams: [],
+  selectedAudioStream: -1,
+  selectAudioStream: () => {},
+  hideUI: false,
+  setHideUI: () => {},
+  togglePictureInPicture: () => {},
+  playbackError: null,
+  ready: false,
+  setSourceState: () => {},
+}
+
+export const sourceFeature = definePlayerFeature({
+  name: 'source',
+  state: () => ({ ...initialState }),
+  attach({ set }) {
+    set({
+      setSourceState: (partial) => set(partial),
+      // needs nothing from the pipeline, so it is answered here rather than pushed in from React
+      setHideUI: (hideUI) => set({ hideUI }),
+    })
+  },
+})

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

@@ -0,0 +1,119 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import type { ReactNode } from 'react'
+import type { DownloadedRange } from './source-feature'
+
+import { useEffect, useState } from 'react'
+import { css } from '@emotion/react'
+import { useContainerAttach, useMediaAttach } from '@videojs/react'
+
+import { Player, usePlayer } from './player'
+import { usePlayback } from './hooks/use-playback'
+import { useSeekThumbnails } from './hooks/use-thumbnails'
+import { usePictureInPicture } from './hooks/use-picture-in-picture'
+import Chrome from './components/chrome'
+
+/**
+ * The source, read a range at a time: the player never downloads the whole file. Both fields travel
+ * together, so passing one without the other is a type error.
+ */
+export type MediaPlayerSource =
+  | { read: (offset: number, size: number) => Promise<ArrayBuffer>, size: number }
+  | { read?: undefined, size?: undefined }
+
+export type MediaPlayerOptions =
+  & MediaPlayerSource
+  & {
+    /**
+     * Where libav's wasm is served from. BOTH `libav.wasm` and `libav-jspi.wasm` have to be there:
+     * libav-wasm picks between them on `WebAssembly.Suspending`, so serving one fails only on the
+     * browsers that pick the other.
+     */
+    publicPath: string
+    libavWorkerUrl: string
+    jassubWorkerUrl: string
+    /** jassub's SIMD build, `jassub-worker-modern.wasm`. */
+    jassubWasmUrl: string
+    /**
+     * jassub's non-SIMD build, `jassub-worker.wasm`, for Safari before 16.4.
+     * Without it subtitles fail outright on those browsers rather than falling back to the slower build.
+     */
+    jassubLegacyWasmUrl?: string
+    /** Fallback face for `liberation sans`, used when a subtitle track names a font the file does not carry. */
+    defaultFontUrl?: string
+    bufferSize?: number
+    autoplay?: boolean
+
+    title?: string
+    /** Byte spans available, painted on the seekbar and informing the thumbnail generator. */
+    downloadedRanges?: DownloadedRange[]
+
+    onSeek?: (fraction: number) => void
+    onPlaybackError?: (error: unknown) => void
+  }
+
+const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, children?: ReactNode }) => {
+  const { title, size, downloadedRanges, publicPath, libavWorkerUrl, read } = options
+
+  const setMedia = useMediaAttach()
+  // Mandatory, not an optimisation: without it requestFullscreen falls through to the bare <video>
+  // and leaves the whole chrome outside the fullscreen layer.
+  const setContainer = useContainerAttach()
+
+  const [video, setVideo] = useState<HTMLVideoElement | null>(null)
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null)
+
+  useEffect(() => { setMedia?.(video); return () => setMedia?.(null) }, [video, setMedia])
+
+  usePlayback(video, canvas, options)
+
+  const thumbnails = useSeekThumbnails({
+    publicPath,
+    workerUrl: libavWorkerUrl,
+    length: size,
+    read,
+    downloadedRanges,
+  })
+  const togglePictureInPicture = usePictureInPicture(video, canvas)
+
+  // Subscribed rather than read off the store, because it is a no-op until the media element
+  // attaches: when attach swaps in the real setter the identity changes and these publish again.
+  const setSourceState = usePlayer((state) => state.setSourceState)
+
+  useEffect(() => {
+    setSourceState({ title, size, downloadedRanges })
+  }, [setSourceState, title, size, downloadedRanges])
+
+  useEffect(() => {
+    setSourceState({ thumbnails, togglePictureInPicture })
+  }, [setSourceState, thumbnails, togglePictureInPicture])
+
+  return (
+    <Chrome
+      ref={setContainer}
+      onVideoRef={setVideo}
+      onCanvasRef={setCanvas}
+    >
+      {children}
+    </Chrome>
+  )
+}
+
+// #111 against the black inside is deliberate: this is the letterbox around the player box.
+const rootStyle = css`
+  display: flex;
+  justify-content: center;
+  background-color: #111;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+`
+
+export const MediaPlayer = (options: MediaPlayerOptions & { children?: ReactNode }) => (
+  <div css={rootStyle}>
+    <Player.Provider>
+      <PlayerRoot options={options}>{options.children}</PlayerRoot>
+    </Player.Provider>
+  </div>
+)
+
+export default MediaPlayer

package/src/lib/utils/source.ts

@@ -0,0 +1,60 @@
+const fromBlob = ({ blob, name }: { blob: Blob, name?: string }) => ({
+  length: blob.size,
+  name: name ?? (blob instanceof File ? blob.name : undefined),
+  read: (offset: number, size: number) => blob.slice(offset, offset + size).arrayBuffer(),
+})
+
+const probeLength = async (url: string, credentials?: RequestCredentials) => {
+  const response = await fetch(url, { headers: { Range: 'bytes=0-1' }, credentials })
+  if (!response.ok) throw new Error(`The source could not be read: HTTP ${response.status}`)
+  const fromRange = response.headers.get('Content-Range')?.split('/').at(1)
+  const length = fromRange ? Number(fromRange) : Number(response.headers.get('Content-Length'))
+  if (!Number.isFinite(length) || length <= 0) throw new Error('The source did not report its length')
+  if (!fromRange && response.status !== 206) throw new Error('The source does not support range requests')
+  return length
+}
+
+const fromUrl = async (
+  { url, length: _length, name, credentials }: {
+    url: string
+    length?: number
+    name?: string
+    credentials?: RequestCredentials
+  }
+) => {
+  const length = _length ?? await probeLength(url, credentials)
+  const read = async (offset: number, size: number) => {
+    const response = await fetch(url, {
+      headers: { Range: `bytes=${offset}-${Math.min(offset + size, length) - 1}` },
+      credentials,
+    })
+    if (!response.ok) throw new Error(`The source could not be read: HTTP ${response.status}`)
+    return response.arrayBuffer()
+  }
+  return { length, name, read }
+}
+
+/** A source resolved down to what the remuxer needs: a total length and a byte-range reader. */
+export type RemuxerInput = {
+  length: number
+  name?: string
+  read: (offset: number, size: number) => Promise<ArrayBuffer>
+}
+
+export const inputToRemuxerInput = async (
+  params:
+    | Parameters<typeof fromBlob | typeof fromUrl>[0]
+    // the general arm. `length` is required: nothing downstream can seek or report a duration
+    // without it, and a caller supplying its own reader already knows the total.
+    | {
+      length: number
+      name?: string
+      read: (offset: number, size: number) => Promise<ArrayBuffer>
+    }
+// declared rather than inferred, so all three arms are checked against one contract
+): Promise<RemuxerInput> => {
+  if ('blob' in params) return fromBlob(params)
+  if ('url' in params) return fromUrl(params)
+  if ('read' in params) return { length: params.length, name: params.name, read: params.read }
+  throw new Error(`Unknown source type: ${params}`)
+}

package/src/lib/utils/track-label.ts

@@ -0,0 +1,36 @@
+export type LabelledTrack = {
+  streamIndex: number
+  title: string
+  language: string
+}
+
+/**
+ * Human name for a track's language tag. `fallback: 'none'` is what makes an unknown tag come back
+ * undefined instead of echoing itself, so the caller can fall through to the title.
+ */
+export const displayLanguage = (language: string | undefined): string | undefined => {
+  if (!language || language === 'und') return undefined
+  try {
+    return new Intl.DisplayNames([navigator.language || 'en'], { type: 'language', fallback: 'none' }).of(language) || undefined
+  } catch {
+    return undefined
+  }
+}
+
+const tidy = (title: string | undefined) => title?.replace(/_/g, ' ').trim() || undefined
+
+/**
+ * Names a set of tracks for a menu, by language, falling back to the title then the stream index.
+ * The title is appended only to break a tie, because on a MultiSub release every title is the same
+ * source tag and titling every row gives nine identical entries.
+ */
+export const labelTracks = <T extends LabelledTrack>(tracks: T[]): { track: T, label: string }[] => {
+  const bases = tracks.map((track) => displayLanguage(track.language) ?? tidy(track.title) ?? `Track ${track.streamIndex}`)
+  const counts = bases.reduce<Record<string, number>>((acc, base) => ({ ...acc, [base]: (acc[base] ?? 0) + 1 }), {})
+  return tracks.map((track, index) => {
+    const base = bases[index]!
+    const detail = tidy(track.title)
+    const ambiguous = (counts[base] ?? 0) > 1
+    return { track, label: ambiguous && detail && detail !== base ? `${base} (${detail})` : base }
+  })
+}

package/src/lib/utils/volume-utils.ts

@@ -0,0 +1,13 @@
+const MIN_VOLUME = 0.0001
+const MAX_VOLUME = 1.0
+
+/** Higher values put more of the slider's travel at the quiet end. */
+export const VOLUME_EXPONENT = 2.0
+
+/** Slider position (0-1) to gain, on a curve that matches how loudness is perceived. */
+export const linearToLogVolume = (linearValue: number): number =>
+  Math.pow(Math.max(MIN_VOLUME, Math.min(MAX_VOLUME, linearValue)), VOLUME_EXPONENT)
+
+/** Gain (0-1) back to slider position. */
+export const logToLinearVolume = (logVolume: number): number =>
+  Math.pow(Math.max(MIN_VOLUME, Math.min(MAX_VOLUME, logVolume)), MAX_VOLUME / VOLUME_EXPONENT)

package/build/components/chrome.d.ts

@@ -1,7 +0,0 @@
-import { ReactNode, type HTMLAttributes } from 'react';
-export type ChromeOptions = {
-    mediaInformation?: ReactNode;
-    loadingInformation?: ReactNode;
-} & HTMLAttributes<HTMLDivElement>;
-export declare const Chrome: ({ children, mediaInformation, loadingInformation }: ChromeOptions) => import("react/jsx-runtime").JSX.Element;
-export default Chrome;

package/build/components/control-bar.d.ts

@@ -1,6 +0,0 @@
-import { ReactNode, RefObject } from 'react';
-export declare const ControlBar: ({ mediaInformation, containerRef }: {
-    mediaInformation?: ReactNode;
-    containerRef: RefObject<HTMLDivElement>;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ControlBar;

package/build/components/overlay.d.ts

@@ -1,4 +0,0 @@
-import { ReactNode } from 'react';
-export declare const Overlay: ({ loadingInformation }: {
-    loadingInformation?: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;

package/build/components/playback-slider.d.ts

@@ -1,2 +0,0 @@
-declare const PlaybackSlider: () => import("react/jsx-runtime").JSX.Element;
-export default PlaybackSlider;

package/build/components/progress-bar.d.ts

@@ -1 +0,0 @@
-export declare const ProgressBar: () => import("react/jsx-runtime").JSX.Element;

package/build/components/settings.d.ts

@@ -1,2 +0,0 @@
-declare const SettingsAction: () => import("react/jsx-runtime").JSX.Element;
-export default SettingsAction;

package/build/components/sound.d.ts

@@ -1,4 +0,0 @@
-declare const Sound: ({ ref }: {
-    ref: any;
-}) => import("react/jsx-runtime").JSX.Element;
-export default Sound;

package/build/components/volume-slider.d.ts

@@ -1,6 +0,0 @@
-type VolumeSliderType = {
-    value: number;
-    onChange: (v: number) => void;
-};
-declare const VolumeSlider: ({ value, onChange }: VolumeSliderType) => import("react/jsx-runtime").JSX.Element;
-export default VolumeSlider;

package/build/index.d.ts

@@ -1,26 +0,0 @@
-import type { MutableRefObject, ReactNode, RefCallback } from 'react';
-import { DownloadedRange } from './utils/context';
-export type FKNVideoOptions = {
-    title?: string;
-    downloadedRanges?: DownloadedRange[];
-    read?: (offset: number, size: number) => Promise<ArrayBuffer>;
-    size?: number;
-    bufferSize?: number;
-    autoplay?: boolean;
-    mediaInformation?: ReactNode;
-    loadingInformation?: ReactNode;
-    publicPath: string;
-    jassubWorkerUrl: string;
-    jassubWasmUrl: string;
-    jassubModernWasmUrl: string;
-    libavWorkerUrl: string;
-};
-export declare const FKNVideoRoot: ({ options, videoElement, children }: {
-    options: FKNVideoOptions;
-    videoElement: HTMLVideoElement | undefined;
-    children: ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-declare const FKNVideo: ({ ref, ...options }: FKNVideoOptions & {
-    ref?: RefCallback<HTMLVideoElement> | MutableRefObject<HTMLVideoElement | null>;
-}) => import("react/jsx-runtime").JSX.Element;
-export default FKNVideo;