@banou/media-player 0.6.2 → 0.8.0

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

@@ -0,0 +1,108 @@
+import type { MediaIndex, ThumbnailImage } from '../engine'
+
+import { definePlayerFeature } from '@videojs/core/dom'
+
+/**
+ * One row of a track menu, already named.
+ *
+ * Labelled by whoever writes it rather than by the menu, because the two writers know different
+ * things: the engine has a language tag and a title to disambiguate between, while a source that
+ * owns its own player hands over a label it has already decided on. The id is opaque here for the
+ * same reason, a libav stream index one way and a site's own track id the other.
+ */
+export type TrackChoice = {
+  id: string | number
+  label: string
+}
+
+/**
+ * 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[]
+  /**
+   * Answers for one time directly, when the source has a storyboard it can index but not enumerate.
+   * Falls back to scanning `thumbnails` when absent, which is what the engine's generator fills.
+   */
+  thumbnailAt?: (time: number) => ThumbnailImage | undefined
+
+  subtitleTracks: TrackChoice[]
+  /** undefined means subtitles are off. */
+  selectedSubtitleTrack: string | number | undefined
+  selectSubtitleTrack: (id: string | number | undefined) => void
+
+  audioTracks: TrackChoice[]
+  selectedAudioTrack: string | number | undefined
+  selectAudioTrack: (id: string | 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: [],
+  subtitleTracks: [],
+  selectedSubtitleTrack: undefined,
+  selectSubtitleTrack: () => {},
+  audioTracks: [],
+  selectedAudioTrack: undefined,
+  selectAudioTrack: () => {},
+  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,223 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import type { ReactNode } from 'react'
+import type { DownloadedRange } from './source-feature'
+import type { DelegatedTracks, ExternalThumbnails, PlayerMedia } from './media'
+
+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 }
+
+/** Shared by both arms: nothing here depends on who owns the media. */
+type CommonOptions = {
+  title?: string
+  autoplay?: boolean
+
+  /**
+   * Drawn above the control bar and outside the click-to-pause region, for whatever the app has to
+   * say over the video. `children` land next to the media instead, below the chrome.
+   */
+  overlay?: ReactNode
+
+  onSeek?: (fraction: number) => void
+  onPlaybackError?: (error: unknown) => void
+}
+
+/**
+ * Bytes in: the player owns the `<video>`, and libav feeds it a fragment at a time.
+ */
+export type MediaPlayerLocalOptions =
+  & CommonOptions
+  & 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
+
+    /** Byte spans available, painted on the seekbar and informing the thumbnail generator. */
+    downloadedRanges?: DownloadedRange[]
+
+    /**
+     * Reader for the thumbnail engine, when it should differ from playback's.
+     *
+     * They are the same by default so generation shares playback's fetch order. A consumer whose
+     * reads are not free wants them apart: a torrent hands this a non-prioritising, fail-fast reader
+     * so generating previews cannot steal download order from the bytes playback is blocked on.
+     */
+    thumbnailRead?: (offset: number, size: number) => Promise<ArrayBuffer>
+    /** Off entirely. A second wasm worker during pipeline boot is worth avoiding on a slow source. */
+    thumbnailsEnabled?: boolean
+  }
+
+/**
+ * A media the caller owns and the player only drives.
+ *
+ * No bytes, so no libav, no MediaSource and no thumbnail generation. For a source whose video lives
+ * in a document this one cannot reach into, which is also the only arrangement under which its DRM
+ * works: the key session belongs to whoever owns the element.
+ */
+export type MediaPlayerRemoteOptions =
+  & CommonOptions
+  & {
+    media: PlayerMedia
+    read?: never
+    size?: never
+
+    /** The source's own storyboard, since there are no bytes to generate previews from. */
+    thumbnails?: ExternalThumbnails
+    /** The source renders these; the player draws the menu and reports the pick. */
+    subtitles?: DelegatedTracks
+    audioTracks?: DelegatedTracks
+  }
+
+export type MediaPlayerOptions = MediaPlayerLocalOptions | MediaPlayerRemoteOptions
+
+const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, children?: ReactNode }) => {
+  // Narrowed on the field that carries the difference: a remote arm brings its own media and, by
+  // construction, no bytes. Both halves stay null-safe so the engine hooks below can be called
+  // unconditionally, which they have to be.
+  const remote = 'media' in options ? options : null
+  const local = remote ? null : options as MediaPlayerLocalOptions
+  // `title` is common to both arms, so it is read off `options`. Everything else here belongs to the
+  // local arm and is absent when the media is remote.
+  const { title } = options
+  const {
+    size, downloadedRanges, publicPath, libavWorkerUrl, read, thumbnailRead, thumbnailsEnabled,
+  } = local ?? ({} as Partial<MediaPlayerLocalOptions>)
+
+  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)
+
+  // Attaching is not optional in either arm: the store installs `setSourceState` in `attach`, and
+  // video.js only runs attach once media is non-null, so skipping it would leave every write below a
+  // permanent no-op.
+  const media = remote?.media ?? video
+  useEffect(() => { setMedia?.(media); return () => setMedia?.(null) }, [media, setMedia])
+
+  // Each of these no-ops on null inputs, which is what a remote arm supplies: it renders no <video>,
+  // so there is nothing for them to attach to and nothing to guard at the call site.
+  usePlayback(video, canvas, local)
+
+  const generatedThumbnails = useSeekThumbnails({
+    publicPath,
+    workerUrl: libavWorkerUrl,
+    length: thumbnailsEnabled === false ? undefined : size,
+    read: thumbnailRead ?? read,
+    downloadedRanges,
+  })
+  const thumbnails = remote?.thumbnails?.all ?? generatedThumbnails
+  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])
+
+  const thumbnailAt = remote?.thumbnails?.at
+  useEffect(() => {
+    setSourceState({ thumbnails, thumbnailAt, togglePictureInPicture })
+  }, [setSourceState, thumbnails, thumbnailAt, togglePictureInPicture])
+
+  // A delegated track list writes the same store fields the engine writes, so the menus never learn
+  // which arm they are showing. Only the writer differs: here the pick is forwarded to whoever owns
+  // the document, and it renders the result itself.
+  const subtitles = remote?.subtitles?.selection
+  const audio = remote?.audioTracks?.selection
+  useEffect(() => {
+    if (!subtitles) return
+    setSourceState({
+      subtitleTracks: subtitles.options.map(({ id, label }) => ({ id, label })),
+      selectedSubtitleTrack: subtitles.selectedId ?? undefined,
+      selectSubtitleTrack: (id) => subtitles.select(id == null ? null : String(id)),
+    })
+  }, [setSourceState, subtitles])
+
+  useEffect(() => {
+    if (!audio) return
+    setSourceState({
+      audioTracks: audio.options.map(({ id, label }) => ({ id, label })),
+      selectedAudioTrack: audio.selectedId ?? undefined,
+      selectAudioTrack: (id) => audio.select(String(id)),
+    })
+  }, [setSourceState, audio])
+
+  return (
+    <Chrome
+      ref={setContainer}
+      // No element in the remote arm: the media is somebody else's, and whatever renders it is
+      // passed in as children. Rendering an idle <video> here would sit over it.
+      onVideoRef={remote ? undefined : setVideo}
+      onCanvasRef={setCanvas}
+      overlay={options.overlay}
+    >
+      {children}
+    </Chrome>
+  )
+}
+
+// #111 against the black inside is deliberate: this is the letterbox around the player box.
+const rootStyle = css`
+  /**
+   * The chrome's whole scale, in one place.
+   *
+   * Everything inside is sized against this rather than against \`rem\`, because \`rem\` is root
+   * relative and a library cannot own the host page's root font. The old contract was that the host
+   * set \`html { font-size: 62.5% }\`, which silently rendered every control 1.6x too large in any app
+   * that did not, and could not be met by an app whose own screens are sized against the default.
+   * Override it on the player element to rescale the whole chrome.
+   */
+  --mp-unit: 10px;
+
+  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/fonts.ts

@@ -0,0 +1,160 @@
+export const fonts = {
+  headings: {
+    large: `
+      font-weight: 600;
+      font-size: calc(2.8 * var(--mp-unit));
+      line-height: calc(3.4 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(3.4 * var(--mp-unit));
+        line-height: calc(4.1 * var(--mp-unit));
+      }
+    `,
+    medium: `
+      font-weight: 600;
+      font-size: calc(2.4 * var(--mp-unit));
+      line-height: calc(2.9 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(2.8 * var(--mp-unit));
+        line-height: calc(3.4 * var(--mp-unit));
+      }
+    `,
+    small: `
+      font-weight: 500;
+      font-size: calc(1.8 * var(--mp-unit));
+      line-height: calc(1.9 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.8 * var(--mp-unit));
+        line-height: calc(2.2 * var(--mp-unit));
+      }
+      @media (min-width: 2560px) {
+        font-size: calc(2.2 * var(--mp-unit));
+        line-height: calc(2.6 * var(--mp-unit));
+      }
+    `,
+    extraSmall: `
+      font-weight: 500;
+      font-size: calc(1.4 * var(--mp-unit));
+      line-height: calc(1.7 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.6 * var(--mp-unit));
+        line-height: calc(1.9 * var(--mp-unit));
+      }
+    `
+  },
+  bLarge: {
+    bold: `
+      font-weight: 600;
+      font-size: calc(1.4 * var(--mp-unit));
+      line-height: calc(2 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.6 * var(--mp-unit));
+        line-height: calc(2.2 * var(--mp-unit));
+      }
+    `,
+    medium: `
+      font-weight: 500;
+      font-size: calc(1.4 * var(--mp-unit));
+      line-height: calc(2 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.6 * var(--mp-unit));
+        line-height: calc(2.2 * var(--mp-unit));
+      }
+    `,
+    regular: `
+      font-weight: 400;
+      font-size: calc(1.4 * var(--mp-unit));
+      line-height: calc(2 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.6 * var(--mp-unit));
+        line-height: calc(2.2 * var(--mp-unit));
+      }
+    `,
+  },
+  bMedium: {
+    bold: `
+      font-weight: 600;
+      font-size: calc(1.2 * var(--mp-unit));
+      line-height: calc(1.7 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.4 * var(--mp-unit));
+        line-height: calc(2 * var(--mp-unit));
+      }
+    `,
+    medium: `
+      font-weight: 500;
+      font-size: calc(1.2 * var(--mp-unit));
+      line-height: calc(1.7 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.4 * var(--mp-unit));
+        line-height: calc(2 * var(--mp-unit));
+      }
+    `,
+    regular: `
+      font-weight: 400;
+      font-size: calc(1.2 * var(--mp-unit));
+      line-height: calc(1.7 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.4 * var(--mp-unit));
+        line-height: calc(2 * var(--mp-unit));
+      }
+    `,
+  },
+  bSmall: {
+    bold: `
+      font-weight: 600;
+      font-size: calc(1 * var(--mp-unit));
+      line-height: calc(1.4 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.2 * var(--mp-unit));
+        line-height: calc(1.7 * var(--mp-unit));
+      }
+    `,
+    medium: `
+      font-weight: 500;
+      font-size: calc(1 * var(--mp-unit));
+      line-height: calc(1.4 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.2 * var(--mp-unit));
+        line-height: calc(1.7 * var(--mp-unit));
+      }
+    `,
+    regular: `
+      font-weight: 400;
+      font-size: calc(1 * var(--mp-unit));
+      line-height: calc(1.4 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1.2 * var(--mp-unit));
+        line-height: calc(1.7 * var(--mp-unit));
+      }
+    `,
+  },
+  bExtraSmall: {
+    bold: `
+      font-weight: 600;
+      font-size: calc(0.8 * var(--mp-unit));
+      line-height: calc(1.1 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1 * var(--mp-unit));
+        line-height: calc(1.4 * var(--mp-unit));
+      }
+    `,
+    medium: `
+      font-weight: 500;
+      font-size: calc(0.8 * var(--mp-unit));
+      line-height: calc(1.1 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1 * var(--mp-unit));
+        line-height: calc(1.4 * var(--mp-unit));
+      }
+    `,
+    regular: `
+      font-weight: 400;
+      font-size: calc(0.8 * var(--mp-unit));
+      line-height: calc(1.1 * var(--mp-unit));
+      @media (min-width: 960px) {
+        font-size: calc(1 * var(--mp-unit));
+        line-height: calc(1.4 * var(--mp-unit));
+      }
+    `,
+  },
+}

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,51 @@
+export type LabelledTrack = {
+  streamIndex: number
+  title: string
+  language: string
+}
+
+/** One row of a track menu, already named. Mirrors `TrackChoice` without importing the store. */
+export type NamedTrack = {
+  id: string | number
+  label: 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 }
+  })
+}
+
+/**
+ * Names the engine's streams once, on the way into the store, so the menu only ever reads rows.
+ *
+ * The store's ids are opaque so a source that owns its own player can use its own track ids; the id
+ * here is the libav stream index, which is what this half of the code has to say.
+ */
+export const toNamedTracks = <T extends LabelledTrack>(tracks: T[]): NamedTrack[] =>
+  labelTracks(tracks).map(({ track, label }) => ({ id: track.streamIndex, label }))

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;