@banou/media-player 0.8.4 → 0.8.6

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

@@ -10,13 +10,34 @@ import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'
 import { ProgressBar } from './progress-bar'
 import pictureInPicture from '../../assets/picture-in-picture.svg'
+import { SubtitlesInPicture } from './icons'
 import SettingsAction from './settings'
+import SubtitlesAction from './subtitles'
 import colors from '../../utils/colors'
 import Sound from './sound'
 
 const VOLUME_STEP = 0.05
 const SEEK_STEP = 5
 
+/**
+ * Two stacked lines inside a tooltip, with a width to wrap against.
+ *
+ * Applied to the content rather than to the tooltip, because react-tooltip renders into a portal and
+ * an unconstrained tooltip grows to one long line that runs off the side of the player.
+ */
+const tooltipLinesStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: calc(0.4 * var(--mp-unit));
+  max-width: calc(26 * var(--mp-unit));
+  white-space: normal;
+
+  .hint {
+    opacity: 0.72;
+    font-size: 0.9em;
+  }
+`
+
 const style = css`
   position: absolute;
   bottom: 0;
@@ -67,9 +88,25 @@ const style = css`
         svg {
           stroke: #fff;
         }
+
+        /* Reads as unavailable rather than absent, so the bar does not reflow when tracks land. */
+        &:disabled {
+          cursor: default;
+          opacity: .4;
+        }
+      }
+
+      /**
+       * The burn-in control's own on state.
+       *
+       * Not \`colors.hover\`: the pointer is on the button at the moment of the click, so an on state
+       * drawn in the hover colour is invisible exactly when it is being looked for.
+       */
+      button[aria-pressed='true'] svg {
+        stroke: ${colors.accent};
       }
 
-      .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 +124,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;
@@ -149,8 +186,17 @@ export const ControlBar = () => {
   const fullscreen = usePlayer((state) => state.fullscreen)
   const hideUI = usePlayer((state) => state.hideUI)
   const togglePictureInPicture = usePlayer((state) => state.togglePictureInPicture)
+  const pictureInPictureMode = usePlayer((state) => state.pictureInPictureMode)
+  const burnedInSubtitles = usePlayer((state) => state.burnedInSubtitles)
+  const subtitleTracks = usePlayer((state) => state.subtitleTracks)
   const [volumeElement, setVolumeElement] = useState<HTMLButtonElement | null>(null)
 
+  const burnIn = pictureInPictureMode === 'burn-in'
+  // Burning nothing in is a mode with no effect, so the control stays visible and goes dead rather
+  // than vanishing: the track list arrives from libav a moment after playback starts, and a button
+  // that pops in late shifts every control beside it a second time.
+  const hasSubtitles = subtitleTracks.length > 0
+
   // duration is 0 until metadata lands, so a bare equality would show replay before playback starts
   const ended = duration > 0 && currentTime === duration
 
@@ -258,23 +304,52 @@ export const ControlBar = () => {
           </div>
         </div>
         <div className='right'>
+          <SubtitlesAction />
           <SettingsAction />
           {togglePictureInPicture
             ? (
               <TooltipDisplay
                 id='picture-in-picture'
+                // anchored to its end, or the two-line burn-in copy runs off the right of the player
+                tooltipPlace='top-end'
                 text={
                   <button
                     className='picture-in-picture'
                     type='button'
                     onClick={togglePictureInPicture}
+                    disabled={burnIn && !hasSubtitles}
+                    // Static name with the state on `aria-pressed`, rather than a name that changes
+                    // on activation: one announces the state once, the other announces it twice and
+                    // renames the control while the pointer is on it.
+                    aria-label={burnIn ? 'Put the subtitles in the video' : 'Picture in picture'}
+                    aria-pressed={burnIn ? burnedInSubtitles : undefined}
                   >
-                    <img src={pictureInPicture}  />
+                    {burnIn
+                      ? <SubtitlesInPicture />
+                      : <img src={pictureInPicture} alt='' />}
                   </button>
                 }
                 toolTipText={
-                  <span>
-                    Picture in picture
+                  // The tooltip is portaled out of this subtree, so the control bar's own rules
+                  // never reach it: a bare `small` stays inline and runs straight on from the line
+                  // above it. Both lines carry their layout themselves.
+                  <span css={tooltipLinesStyle}>
+                    <span className='lead'>
+                      {!burnIn
+                        ? 'Picture in picture'
+                        : !hasSubtitles
+                            ? 'This file has no subtitles'
+                            : burnedInSubtitles
+                              ? 'Subtitles are in the picture'
+                              : 'Put the subtitles in the picture'}
+                    </span>
+                    {burnIn && hasSubtitles
+                      ? (
+                        <span className='hint'>
+                          Then hover the video and click your browser&apos;s own pop out button
+                        </span>
+                      )
+                      : null}
                   </span>
                 }
               />

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

@@ -0,0 +1,53 @@
+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>
+)
+
+/**
+ * Subtitles inside the picture: the picture-in-picture frame with caption bars in the inset.
+ *
+ * A separate glyph on purpose. The control means something different on a browser that cannot open
+ * a window, and the same icon doing two things silently is the thing to avoid. It is not the plain
+ * captions glyph either, because the button beside it already is one.
+ */
+export const SubtitlesInPicture = (props: SVGProps<SVGSVGElement>) => (
+  <svg {...iconProps} {...props}>
+    <path d='M21 11V7a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h5' />
+    <rect x='12' y='13' width='10' height='8' rx='1' ry='1' />
+    <path d='M14.5 18.5h2m2 0h1' />
+  </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}