@banou/media-player 0.8.4 → 0.8.6

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

@@ -0,0 +1,80 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import { css } from '@emotion/react'
+
+import { usePlayer } from '../player'
+import { TooltipDisplay } from './tooltip-display'
+import { Captions, CaptionsOff } from './icons'
+import { TrackMenu, popoverStyle, useTrackMenu } from './track-menu'
+
+const style = css`
+/* Not a containing block, for the reason given on popoverStyle: the menu anchors to the control bar,
+   which is the width of the player box, so it can be clamped to it. */
+position: static;
+
+.subtitles {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+${popoverStyle}
+`
+
+/**
+ * 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 const SubtitlesAction = () => {
+  const subtitleTracks = usePlayer((state) => state.subtitleTracks)
+  const selectedSubtitleTrack = usePlayer((state) => state.selectedSubtitleTrack)
+  const selectSubtitleTrack = usePlayer((state) => state.selectSubtitleTrack)
+  const subtitleOffLabel = usePlayer((state) => state.subtitleOffLabel)
+
+  const { open, toggle, containerRef, pending, failed, runSelect } = useTrackMenu()
+
+  // After every hook, never before. One track is enough to offer the menu, because "off" is always a
+  // second option; a file carrying none should not offer it at all.
+  if (subtitleTracks.length === 0) return null
+
+  // Read from the store, never from `pending`: mid-switch the selection has not moved, and flipping
+  // the glyph early is the same lie a tick on the pending row would be.
+  const on = selectedSubtitleTrack !== undefined
+
+  return (
+    <div css={style} ref={containerRef}>
+      <TooltipDisplay
+        id='subtitles'
+        disabled={open}
+        text={
+          <button className='subtitles' type='button' onClick={toggle}>
+            {on ? <Captions className='captions' /> : <CaptionsOff className='captions-off' />}
+          </button>
+        }
+        toolTipText={<span>Subtitles</span>}
+      />
+      {
+        open && (
+          <TrackMenu
+            title='Subtitles'
+            tracks={subtitleTracks}
+            selected={selectedSubtitleTrack}
+            onSelect={(id) => runSelect(id ?? null, () => selectSubtitleTrack(id))}
+            offLabel={subtitleOffLabel ?? 'Disable'}
+            pending={pending}
+            failed={failed}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default SubtitlesAction

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

@@ -0,0 +1,277 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import type { TrackChoice } from '../source-feature'
+
+import { useEffect, useRef, useState } from 'react'
+import { css } from '@emotion/react'
+import { ChevronLeft } from 'react-feather'
+
+import { fonts } from '../../utils/fonts'
+
+/**
+ * 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 const popoverStyle = css`
+.popover {
+  position: absolute;
+  /* Anchored to the PLAYER's right edge, never to the gear. The gear is not the last control in the
+     bar, so a menu centred on it puts its own edges wherever the button happens to sit: with no
+     picture-in-picture button, which is every source whose media the player does not own, an edge
+     landed outside the box, and the root's \`overflow: hidden\` cut it off, taking the rows under it
+     out of reach. The inset matches the bar's own padding so the menu lines up with the last button. */
+  right: calc(12px + env(safe-area-inset-right, 0px));
+  bottom: calc(100% + 8px);
+
+  overflow-y: auto;
+  width: 180px;
+  /* \`100%\` is the control bar, which is the width of the PLAYER. The old \`100vw\` was the viewport,
+     which equals the player only when the player is the whole document, and it is the wrong kind of
+     guard besides: a max-width shrinks the box, it never moves it back inside. */
+  max-width: calc(100% - 24px);
+  /* Sized to its rows, capped at what fits. A fixed height left the settings menu two thirds empty
+     once subtitles moved out to its own button, and a long track list scrolls at the cap either way. */
+  height: max-content;
+  /* The room actually above the bar. A short player had the top of the menu clipped by that same
+     \`overflow: hidden\`. With no size container in the ancestry this resolves against the small
+     viewport, so it can only ever shrink the box, never grow it. */
+  max-height: min(160px, calc(100cqh - 100% - 16px));
+  @media (min-width: 768px) {
+    right: calc(16px + env(safe-area-inset-right, 0px));
+    width: 250px;
+    max-width: calc(100% - 32px);
+  }
+  @media (min-width: 2560px) {
+    right: calc(24px + env(safe-area-inset-right, 0px));
+    max-width: calc(100% - 48px);
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 8px;
+  background-color: rgba(28,28,28,0.95);
+  ${fonts.bMedium.regular}
+
+  z-index: 4;
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    color: #fff;
+    outline: none;
+
+    padding: 8px 6px 8px 12px;
+
+    width: 100%;
+    /* rows keep their own height inside the fixed height column, so a long page scrolls rather than
+       squashing every row into it */
+    flex-shrink: 0;
+    @media (pointer: coarse) {
+      box-sizing: border-box;
+      min-height: 44px;
+    }
+
+    :first-of-type {
+      border-radius: 8px 8px 0 0;
+    }
+    :last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+    :not(&.no-hover) {
+      cursor: pointer;
+    }
+    :not(&.no-hover):hover {
+      background-color: rgba(255,255,255,.1);
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .secondary {
+        color: #eee;
+        ${fonts.bSmall.regular}
+      }
+    }
+  }
+
+  .back {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-bottom: 1px solid #4D4D4E;
+
+    svg {
+      transform: translateX(-4px);
+      transition: transform 0.2s ease-in-out;
+    }
+
+    :hover {
+      svg {
+        transform: translateX(-8px);
+      }
+    }
+  }
+}
+
+.track-list {
+  .description {
+    word-break: break-word;
+  }
+
+  /* Dimmed and inert, but still listed. A source that names a track it cannot serve right now is
+     saying the track exists, and dropping the row would read as the source having nothing. */
+  .unavailable {
+    opacity: 0.5;
+    cursor: default;
+    :hover {
+      background-color: transparent;
+    }
+  }
+
+  .failed {
+    border-bottom: 1px solid #4D4D4E;
+    color: #f66;
+    ${fonts.bSmall.regular}
+  }
+}
+`
+
+/**
+ * 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 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
+  }
+) => {
+  const busy = pending !== undefined
+  const row = (id: string | number | null, label: string, className?: string) => {
+    const isPending = busy && pending === id
+    const disabled = busy || tracks.find((track) => track.id === id)?.disabled
+    return (
+      <div
+        key={id ?? '__off__'}
+        onClick={() => { if (!disabled) onSelect(id ?? undefined) }}
+        className={[className, disabled ? 'unavailable' : null].filter(Boolean).join(' ') || undefined}
+      >
+        <span>{label}</span>
+        <span>{isPending ? '\u2026' : (selected ?? null) === id ? '\u2713' : ''}</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className='popover track-list'>
+      {/* The header keeps its name and its border either way. With no page to go back to there is
+          nothing for a chevron to point at, and `no-hover` stops the row offering a dead click. */}
+      <div className={onBack ? 'back' : 'back no-hover'} onClick={onBack}>
+        {onBack ? <ChevronLeft /> : null}
+        <span>{title}</span>
+      </div>
+      {failed ? <div className="no-hover failed">Could not switch. Try again.</div> : null}
+      {offLabel ? row(null, offLabel) : null}
+      {tracks.map(({ id, label }) => row(id, label, 'description'))}
+    </div>
+  )
+}
+
+/**
+ * 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 const useTrackMenu = ({ onReset }: { onReset?: () => void } = {}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [open, setOpen] = useState(false)
+  // The id being switched to, or undefined when nothing is in flight. Null is the row that turns
+  // subtitles off, so this cannot be a plain id: undefined has to keep meaning idle.
+  const [pending, setPending] = useState<string | number | null | undefined>(undefined)
+  const [failed, setFailed] = useState(false)
+
+  // Held in a ref because the pointerdown listener and the select promise both outlive the render
+  // that handed the callback over.
+  const reset = useRef(onReset)
+  reset.current = onReset
+
+  const close = () => {
+    setOpen(false)
+    reset.current?.()
+  }
+
+  const toggle = () => {
+    setOpen((wasOpen) => !wasOpen)
+    setFailed(false)
+    reset.current?.()
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (ev: PointerEvent) => {
+      if (open && containerRef.current && !containerRef.current.contains(ev.target as Node)) close()
+    }
+    // pointerdown, because a touch device synthesizes mousedown too late to close reliably
+    document.addEventListener('pointerdown', handleClickOutside)
+    return () => document.removeEventListener('pointerdown', handleClickOutside)
+  }, [open])
+
+  /**
+   * Runs a track switch and decides when the menu may close.
+   *
+   * A selector that returns nothing switched synchronously, so the click closes the menu as it always
+   * has. One that returns a promise owns a player this one cannot reach, and the menu stays open and
+   * inert until it answers: closing first would show a selection that has not happened yet, and
+   * dropping the promise would turn a failed switch into an unhandled rejection nobody ever sees.
+   */
+  const runSelect = (id: string | number | null, select: () => void | Promise<void>) => {
+    if (pending !== undefined) return
+    setFailed(false)
+    let result: void | Promise<void>
+    try {
+      result = select()
+    } catch (err) {
+      console.warn('[media-player] track selection failed:', err)
+      setFailed(true)
+      return
+    }
+    if (!(result instanceof Promise)) {
+      close()
+      return
+    }
+    setPending(id)
+    result.then(
+      () => {
+        setPending(undefined)
+        close()
+      },
+      (err) => {
+        console.warn('[media-player] track selection failed:', err)
+        setPending(undefined)
+        setFailed(true)
+      },
+    )
+  }
+
+  return { open, toggle, close, containerRef, pending, failed, runSelect }
+}

package/src/lib/react/hooks/use-picture-in-picture.ts

@@ -1,32 +1,50 @@
-import type { PictureInPictureController } from '../../engine'
+import type { PictureInPictureController, PictureInPictureMode } from '../../engine'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { createPictureInPicture } from '../../engine'
-import { usePlayer } from '../player'
+import { createPictureInPicture, pictureInPictureMode } from '../../engine'
 
-/** Picture in picture with the subtitles composited in. */
+export type PictureInPicture = {
+  /** null when nothing here can work, and the chrome then offers no control at all. */
+  toggle: (() => void) | null
+  mode: PictureInPictureMode | null
+  /** Burn-in only. True while the composite is the picture on screen. */
+  burnedIn: boolean
+}
+
+/**
+ * Picture in picture with the subtitles composited in.
+ *
+ * Two shapes, because two kinds of browser. Where the W3C API exists this opens a real window off a
+ * hidden mirror. Where it does not, and the engine is Gecko, the same composite becomes the picture
+ * in the page so that the BROWSER'S own picture in picture control carries the subtitles with it,
+ * which it otherwise cannot: it takes a video element, and the subtitles live on a canvas above one.
+ */
 export const usePictureInPicture = (
   video: HTMLVideoElement | null,
   canvas: HTMLCanvasElement | null,
-) => {
-  const player = usePlayer()
+): PictureInPicture => {
   const controller = useRef<PictureInPictureController | null>(null)
+  const [burnedIn, setBurnedIn] = useState(false)
+  // Detected once. It cannot change for the life of the document, and recomputing it per render
+  // would churn the identity of everything downstream.
+  const [mode] = useState<PictureInPictureMode | null>(() => pictureInPictureMode())
 
   useEffect(() => {
-    if (!video || !canvas) return
+    if (!video || !canvas || !mode) return
     const instance = createPictureInPicture({
       video,
       canvas,
-      // the store's action handles Safari and exits fullscreen first
-      fallback: () => player.togglePictureInPicture(),
+      mode,
+      onBurnedInChange: setBurnedIn,
     })
     controller.current = instance
     return () => {
       instance.destroy()
       controller.current = null
+      setBurnedIn(false)
     }
-  }, [video, canvas, player])
+  }, [video, canvas, mode])
 
   const toggle = useCallback(() => {
     void controller.current?.toggle().catch((error) => {
@@ -36,5 +54,5 @@ export const usePictureInPicture = (
 
   // null rather than a dead callback: the chrome hides the control instead of offering one that
   // cannot work, and there is nothing to composite without both an element and a canvas.
-  return video && canvas ? toggle : null
+  return { toggle: video && canvas && mode ? toggle : null, mode, burnedIn }
 }

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

@@ -1,4 +1,4 @@
-import type { MediaIndex, ThumbnailImage } from '../engine'
+import type { MediaIndex, PictureInPictureMode, ThumbnailImage } from '../engine'
 
 import { definePlayerFeature } from '@videojs/core/dom'
 
@@ -89,6 +89,15 @@ export type SourceState = {
    */
   togglePictureInPicture: (() => void) | null
 
+  /**
+   * Which shape the control takes. `window` opens one. `burn-in` cannot, and instead paints the
+   * subtitles into the picture so the BROWSER'S own control carries them; the viewer presses that
+   * one afterwards, so the button has to say something different. null means no control.
+   */
+  pictureInPictureMode: PictureInPictureMode | null
+  /** Burn-in only. True while the composite is the picture on screen. */
+  burnedInSubtitles: boolean
+
   /** Set when the pipeline fails. Cleared when it recovers. */
   playbackError: unknown
   /** Whether the engine has produced its first media segment. */
@@ -116,6 +125,8 @@ const initialState: SourceState = {
   hideUI: false,
   setHideUI: () => {},
   togglePictureInPicture: null,
+  pictureInPictureMode: null,
+  burnedInSubtitles: false,
   playbackError: null,
   ready: false,
   setSourceState: () => {},

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

@@ -187,7 +187,11 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
     downloadedRanges,
   })
   const thumbnails = remote?.thumbnails?.all ?? generatedThumbnails
-  const togglePictureInPicture = usePictureInPicture(video, canvas)
+  const {
+    toggle: togglePictureInPicture,
+    mode: pictureInPictureMode,
+    burnedIn: burnedInSubtitles,
+  } = 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.
@@ -199,8 +203,16 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
 
   const thumbnailAt = remote?.thumbnails?.at
   useEffect(() => {
-    setSourceState({ thumbnails, thumbnailAt, togglePictureInPicture })
-  }, [setSourceState, thumbnails, thumbnailAt, togglePictureInPicture])
+    setSourceState({
+      thumbnails,
+      thumbnailAt,
+      togglePictureInPicture,
+      pictureInPictureMode,
+      burnedInSubtitles,
+    })
+  }, [
+    setSourceState, thumbnails, thumbnailAt, togglePictureInPicture, pictureInPictureMode, burnedInSubtitles,
+  ])
 
   // 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
@@ -257,6 +269,45 @@ const rootStyle = css`
    */
   --mp-unit: 10px;
 
+  /**
+   * The chrome's own typeface, for exactly the reason the unit above exists.
+   *
+   * \`font-family\` inherits, and this library declared it nowhere, so every label drew in whatever the
+   * embedding document happened to set, and in the UA's serif where it set nothing. Not hypothetical:
+   * stub mounts the player in a second document, \`embed.html\`, which sets no font and loads no face,
+   * and the entire settings menu came out in Times New Roman.
+   *
+   * Named faces only, no bundled webfont. The chrome is a handful of short labels, so a font request
+   * on the critical path of a document whose job is to paint video buys a round trip and a flash of
+   * unstyled text for nothing.
+   *
+   * Read through \`var()\` so a host with a brand face sets \`--mp-font-family\` on any ancestor and it
+   * inherits in. A bare \`font-family\` on the host can no longer reach the chrome: this declaration is
+   * on the player element itself and beats anything inherited.
+   */
+  font-family: var(
+    --mp-font-family,
+    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'
+  );
+
+  /**
+   * The chrome's default ink, same argument again.
+   *
+   * Most text here names its own colour, but the two time readouts do not: the elapsed/duration pair
+   * and the seekbar's hover time carry a font token and a black text-shadow and nothing else.
+   * Inherited from a host that declares none that resolves to \`canvastext\`, which is black text under
+   * a black halo on a dark gradient.
+   */
+  color: #fff;
+
+  /**
+   * The settings menu scrolls, and a UA that has not been told the surface is dark paints that
+   * scrollbar in its light theme: a white track down the side of a #1c1c1c menu. Declared here rather
+   * than asked of the host, so it reaches the menu and nothing outside the player.
+   */
+  color-scheme: dark;
+
   /**
    * The other half of owning the chrome's own scale.
    *

package/src/lib/utils/colors.ts

@@ -2,6 +2,8 @@ const colors = {
   primary: '#EAEBEE',
   secondary: '#D0D0D9',
   hover: 'rgba(255, 255, 255, 0.13)',
+  /** A control that is ON. Distinct from `hover`, which the pointer is already painting. */
+  accent: '#6EA8FE',
   borderPrimary: '#384F70',
   backgroundTooltip: '#222222',
 }