@banou/media-player 0.8.4 → 0.8.5

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.4",
+  "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/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>

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

@@ -1,17 +1,19 @@
 /// <reference types="@emotion/react/types/css-prop" />
-import type { TrackChoice } from '../source-feature'
-
-import { useEffect, useRef, useState } from 'react'
+import { useState } from 'react'
 import { css } from '@emotion/react'
 import { ChevronLeft, ChevronRight, Settings } from 'react-feather'
 
 import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'
-import { fonts } from '../../utils/fonts'
 import PlaybackSlider from './playback-slider'
+import { TrackMenu, popoverStyle, useTrackMenu } from './track-menu'
 
 const style = css`
-position: relative;
+/* Deliberately NOT a containing block. The menu anchors to the control bar instead, which is exactly
+   as wide as the player box and can therefore be clamped to it. The outside-click check uses
+   \`contains\` on the ref, which is DOM containment and needs no position, and the bar's other
+   tooltips already resolve against the control bar with no positioned wrapper of their own. */
+position: static;
 
 .settings {
   /* the icon keeps its size, the pressable box grows around it */
@@ -24,96 +26,7 @@ position: relative;
   }
 }
 
-.popover {
-  position: absolute;
-  /* the gear sits a couple of buttons in from the right edge, so a centred popover hangs off that
-     edge on a phone. It anchors to the button instead until the viewport has room to centre it. */
-  right: 0;
-  transform: none;
-
-  overflow-y: auto;
-  width: 180px;
-  max-width: calc(100vw - 24px);
-  height: 160px;
-  top: -180px;
-  @media (min-width: 768px) {
-    right: 50%;
-    transform: translateX(50%);
-    width: 250px;
-    height: 160px;
-  }
-
-  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);
-      }
-    }
-  }
-}
+${popoverStyle}
 
 .playback-rate {
   .slider {
@@ -154,179 +67,31 @@ position: relative;
   }
 }
 
-.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}
-  }
-}
 `
 
 enum PopoverContent {
   Default,
   PlaybackRate,
-  Subtitles,
   Audio
 }
 
-/**
- * One track picker, shared by the subtitle and audio menus.
- *
- * `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.
- */
-const TrackMenu = (
-  { title, tracks, selected, onSelect, onBack, offLabel, pending, failed }: {
-    title: string
-    tracks: TrackChoice[]
-    selected: string | number | undefined
-    onSelect: (id: string | number | undefined) => void
-    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 ? '…' : (selected ?? null) === id ? '✓' : ''}</span>
-      </div>
-    )
-  }
-
-  return (
-    <div className='popover track-list'>
-      <div className="back" onClick={onBack}>
-        <ChevronLeft />
-        <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>
-  )
-}
-
 export const SettingsAction = () => {
   const player = usePlayer()
   const playbackRate = usePlayer((state) => state.playbackRate)
-  const subtitleTracks = usePlayer((state) => state.subtitleTracks)
-  const selectedSubtitleTrack = usePlayer((state) => state.selectedSubtitleTrack)
-  const selectSubtitleTrack = usePlayer((state) => state.selectSubtitleTrack)
   const audioTracks = usePlayer((state) => state.audioTracks)
   const selectedAudioTrack = usePlayer((state) => state.selectedAudioTrack)
   const selectAudioTrack = usePlayer((state) => state.selectAudioTrack)
 
-  const subtitleOffLabel = usePlayer((state) => state.subtitleOffLabel)
-
-  const [isOpenPopover, setIsOpenPopover] = useState(false)
   const [popoverContent, setPopoverContent] = useState(PopoverContent.Default)
-  const settingsContainerRef = useRef<HTMLDivElement>(null)
-  // 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)
-
-  const togglePopover = () => {
-    setIsOpenPopover(!isOpenPopover)
-    setPopoverContent(PopoverContent.Default)
-    setFailed(false)
-  }
-
-  // Not `togglePopover`: this runs from a promise, where the captured `isOpenPopover` is whatever it
-  // was at click time, so a toggle could reopen a menu the viewer has already dismissed.
-  const closePopover = () => {
-    setIsOpenPopover(false)
-    setPopoverContent(PopoverContent.Default)
-  }
+  const { open, toggle, containerRef, pending, failed, runSelect } = useTrackMenu({
+    onReset: () => setPopoverContent(PopoverContent.Default),
+  })
 
   const setPlaybackRate = (rate: number) => {
     player.setPlaybackRate(rate)
     setPopoverContent(PopoverContent.Default)
   }
 
-  useEffect(() => {
-    const handleClickOutside = (ev: PointerEvent) => {
-      if (
-        isOpenPopover &&
-        settingsContainerRef.current &&
-        !settingsContainerRef.current.contains(ev.target as Node)
-      ) {
-        togglePopover()
-      }
-    }
-    // pointerdown, because a touch device synthesizes mousedown too late to close reliably
-    document.addEventListener('pointerdown', handleClickOutside)
-    return () => document.removeEventListener('pointerdown', handleClickOutside)
-  }, [isOpenPopover])
-
-  /**
-   * 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)) {
-      closePopover()
-      return
-    }
-    setPending(id)
-    result.then(
-      () => {
-        setPending(undefined)
-        closePopover()
-      },
-      (err) => {
-        console.warn('[media-player] track selection failed:', err)
-        setPending(undefined)
-        setFailed(true)
-      },
-    )
-  }
-
-  const chooseSubtitle = (id: string | number | undefined) =>
-    runSelect(id ?? null, () => selectSubtitleTrack(id))
-
   // the audio menu offers no way off, so there is no undefined case to answer for
   const chooseAudio = (id: string | number | undefined) => {
     if (id === undefined) return
@@ -338,15 +103,15 @@ export const SettingsAction = () => {
   }
 
   return (
-    <div css={style} ref={settingsContainerRef}>
+    <div css={style} ref={containerRef}>
       <TooltipDisplay
         id='settings'
-        disabled={isOpenPopover}
+        disabled={open}
         text={
           <button
             className='settings'
             type='button'
-            onClick={togglePopover}
+            onClick={toggle}
           >
             <Settings />
           </button>
@@ -358,12 +123,13 @@ export const SettingsAction = () => {
         }
       />
       {
-        isOpenPopover && popoverContent === PopoverContent.Default && (
+        open && popoverContent === PopoverContent.Default && (
           <div className='popover menu'>
             {/*
-              A row is offered only where there is more than one thing behind it to choose between.
-              Audio needs two tracks for that; subtitles need one, because "Disable" is always a
-              second option, and a file with no subtitles at all should not offer the menu.
+              A row is offered only where there is more than one thing behind it to choose between,
+              so audio needs two tracks. Subtitles is NOT here: it has its own button in the bar,
+              because it is the control in this player that gets reached for most and it does not
+              belong two clicks deep next to playback speed.
             */}
             {audioTracks.length > 1
               ? (
@@ -375,16 +141,6 @@ export const SettingsAction = () => {
                 </div>
               )
               : null}
-            {subtitleTracks.length > 0
-              ? (
-                <div onClick={changePopoverContent(PopoverContent.Subtitles)}>
-                  <div>Subtitles</div>
-                  <div>
-                    <ChevronRight />
-                  </div>
-                </div>
-              )
-              : null}
             <div onClick={changePopoverContent(PopoverContent.PlaybackRate)}>
               <div>Playback speed</div>
               <div>
@@ -402,7 +158,7 @@ export const SettingsAction = () => {
         )
       }
       {
-        isOpenPopover && popoverContent === PopoverContent.PlaybackRate && (
+        open && popoverContent === PopoverContent.PlaybackRate && (
           <div className='popover playback-rate'>
             <div className="back" onClick={changePopoverContent(PopoverContent.Default)}>
               <ChevronLeft />
@@ -429,21 +185,7 @@ export const SettingsAction = () => {
         )
       }
       {
-        isOpenPopover && popoverContent === PopoverContent.Subtitles && (
-          <TrackMenu
-            title='Subtitles'
-            tracks={subtitleTracks}
-            selected={selectedSubtitleTrack}
-            onSelect={chooseSubtitle}
-            onBack={changePopoverContent(PopoverContent.Default)}
-            offLabel={subtitleOffLabel ?? 'Disable'}
-            pending={pending}
-            failed={failed}
-          />
-        )
-      }
-      {
-        isOpenPopover && popoverContent === PopoverContent.Audio && (
+        open && popoverContent === PopoverContent.Audio && (
           <TrackMenu
             title='Audio'
             tracks={audioTracks}

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