@banou/media-player 0.8.16 → 0.8.18

package/dist/react/components/icons.d.ts

@@ -10,3 +10,12 @@ export declare const CaptionsOff: (props: SVGProps<SVGSVGElement>) => import("@e
  * captions glyph either, because the button beside it already is one.
  */
 export declare const SubtitlesInPicture: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;
+/**
+ * The same frame with the captions still on the MAIN picture: burn-in is available but off.
+ *
+ * The pair exists because that control is the one button in the bar whose glyph did not move with its
+ * state, so the state was carried by an accent colour and by nothing else. A pair, not a slash: a
+ * slashed resting state reads as unavailable, and the subtitles button beside it already draws
+ * Feather's slash for its own off state.
+ */
+export declare const SubtitlesOutsidePicture: (props: SVGProps<SVGSVGElement>) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/utils/colors.d.ts

@@ -2,8 +2,6 @@ declare const colors: {
     primary: string;
     secondary: string;
     hover: string;
-    /** A control that is ON. Distinct from `hover`, which the pointer is already painting. */
-    accent: string;
     borderPrimary: string;
     backgroundTooltip: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.8.16",
+  "version": "0.8.18",
   "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/engine/subtitles.ts

@@ -2,7 +2,7 @@ import type { ASS_Event } from 'jassub'
 import type { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
 
 import JASSUB from 'jassub'
-import { parse, stringify } from 'ass-compiler'
+import { parse } from 'ass-compiler'
 
 export type SubtitleStream = { streamIndex: number, title: string, language: string }
 
@@ -35,11 +35,30 @@ export type SubtitleRendererOptions = {
    * which throws. So leaving this unset does not degrade to the slower build, it fails outright.
    */
   legacyWasmUrl?: string
-  /** Fallback face for `liberation sans`. Without it jassub falls back to whatever the wasm build embeds. */
+  /**
+   * Fallback face for `liberation sans`. Without it jassub falls back to whatever the wasm build embeds.
+   *
+   * May be relative: it is resolved against the document before the worker sees it, for the reason
+   * given on `workerFetched`.
+   */
   defaultFontUrl?: string
   onStreams?: (streams: SubtitleStream[]) => void
 }
 
+/**
+ * A url the WORKER will fetch, resolved against the document first.
+ *
+ * jassub's worker is built from a `blob:` url, so a relative url handed to it resolves against that
+ * blob inside the worker and the fetch never lands. For the wasm that fails loudly. For the fallback
+ * font it fails in SILENCE: libass is left with no face to draw with, so the track renders nothing at
+ * all and the picture simply has no subtitles on it, with no error anywhere to say why.
+ *
+ * `workerUrl` is deliberately not passed through here. `new Worker()` is called on the main thread,
+ * where a relative url already resolves against the document.
+ */
+const workerFetched = (url: string | undefined) =>
+  url === undefined ? undefined : new URL(url, document.baseURI).toString()
+
 const convertTimestamp = (ms: number) => new Date(ms).toISOString().slice(11, 22)
 
 /**
@@ -73,12 +92,6 @@ const styleIndex = (header: SubtitleHeaderPart, name: string) => {
   return header.styles.get(key) ?? header.styles.get('Default') ?? 0
 }
 
-// cleared so jassub scales the script to the canvas, not to the authored resolution
-const renderable = (content: string) => {
-  const parsed = parse(content)
-  return stringify({ ...parsed, info: { ...parsed.info, ScaledBorderAndShadow: 'no', LayoutResX: '', LayoutResY: '' } })
-}
-
 /**
  * `\r?\n`, not `\r\n`: an ASS header muxed straight out of a matroska file uses CRLF, but one libav
  * CONVERTED from another format (an srt track, most commonly) is LF only, and requiring CRLF rejected it.
@@ -126,7 +139,10 @@ const toDialoguePart = (header: SubtitleHeaderPart, fragment: SubtitleFragment &
 export type SubtitleRenderer = ReturnType<typeof createSubtitleRenderer>
 
 export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
-  const { video, canvas, workerUrl, wasmUrl, legacyWasmUrl, defaultFontUrl } = options
+  const { video, canvas, workerUrl } = options
+  const wasmUrl = workerFetched(options.wasmUrl)!
+  const legacyWasmUrl = workerFetched(options.legacyWasmUrl)
+  const defaultFontUrl = workerFetched(options.defaultFontUrl)
   let jassub: JASSUB | undefined
   let attachments: [string, Uint8Array][] = []
   const headers = new Map<number, SubtitleHeaderPart>()
@@ -146,7 +162,7 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
       onDemandRender: false,
       video,
       canvas,
-      subContent: renderable(header.content),
+      subContent: header.content,
       workerUrl,
       modernWasmUrl: wasmUrl,
       ...legacyWasmUrl ? { wasmUrl: legacyWasmUrl } : {},
@@ -196,7 +212,7 @@ export const createSubtitleRenderer = (options: SubtitleRendererOptions) => {
     jassub.freeTrack()
     const header = headers.get(next)
     if (!header) return
-    jassub.setTrack(renderable(header.content))
+    jassub.setTrack(header.content)
     for (const part of dialogues.get(next)?.values() ?? []) createEvent(jassub, part.assEvent)
     jassub.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
   }

package/src/lib/react/components/burn-in-hint.tsx

@@ -59,7 +59,7 @@ const style = css`
     flex: none;
     font-size: calc(2.6 * var(--mp-unit));
     line-height: 1;
-    color: #6EA8FE;
+    color: #fff;
   }
 `
 

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

@@ -10,7 +10,7 @@ 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 { SubtitlesInPicture, SubtitlesOutsidePicture } from './icons'
 import ErrorsAction from './errors'
 import SettingsAction from './settings'
 import SubtitlesAction from './subtitles'
@@ -21,17 +21,15 @@ const VOLUME_STEP = 0.05
 const SEEK_STEP = 5
 
 /**
- * Two stacked lines inside a tooltip, with a width to wrap against.
+ * Two stacked lines inside a tooltip.
  *
- * 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.
+ * The width to wrap against is no longer here: TooltipDisplay bounds every chip it draws, at the
+ * same 26 units this had imposed by hand, so a call site only says what its content is.
  */
 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;
@@ -97,16 +95,6 @@ const style = css`
         }
       }
 
-      /**
-       * 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, .errors, .subtitles, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
@@ -333,15 +321,20 @@ export const ControlBar = () => {
                     aria-label={burnIn ? 'Put the subtitles in the video' : 'Picture in picture'}
                     aria-pressed={burnIn ? burnedInSubtitles : undefined}
                   >
+                    {/* The glyph carries the on state, which is what every other toggle in this bar
+                        does. It used to be carried by an accent stroke instead, and that was the only
+                        blue in the chrome. */}
                     {burnIn
-                      ? <SubtitlesInPicture />
+                      ? burnedInSubtitles
+                        ? <SubtitlesInPicture />
+                        : <SubtitlesOutsidePicture />
                       : <img src={pictureInPicture} alt='' />}
                   </button>
                 }
                 toolTipText={
-                  // 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.
+                  // The chip is drawn in its own subtree, where the control bar's 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

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

@@ -51,3 +51,19 @@ export const SubtitlesInPicture = (props: SVGProps<SVGSVGElement>) => (
     <path d='M14.5 18.5h2m2 0h1' />
   </svg>
 )
+
+/**
+ * The same frame with the captions still on the MAIN picture: burn-in is available but off.
+ *
+ * The pair exists because that control is the one button in the bar whose glyph did not move with its
+ * state, so the state was carried by an accent colour and by nothing else. A pair, not a slash: a
+ * slashed resting state reads as unavailable, and the subtitles button beside it already draws
+ * Feather's slash for its own off state.
+ */
+export const SubtitlesOutsidePicture = (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='M6 9h3m2 0h2' />
+  </svg>
+)

package/src/lib/react/components/tooltip-display.tsx

@@ -1,5 +1,7 @@
 import type { ReactNode } from 'react'
+import type { TooltipRefProps } from 'react-tooltip'
 
+import { useEffect, useRef } from 'react'
 import { css } from '@emotion/react'
 import { PlacesType, Tooltip } from 'react-tooltip'
 
@@ -13,9 +15,31 @@ export enum buttonSize {
 
 const style = (size: buttonSize) => css`
   display: flex;
-  justify-content: flex-end;
+  justify-content: flex-start;
 
-  border-radius: calc(0.4 * var(--mp-unit));
+  /*
+   * Bounded here rather than at each call site.
+   *
+   * react-tooltip's own chip rule carries width: max-content, so with nothing opposing it a chip
+   * grows to the widest UNWRAPPED line of its content: a two sentence tooltip measured 1178px
+   * through this component. Both declarations are load bearing, since a bound with no wrapping only
+   * moves the overflow inside a narrow box. 26 units is the width control-bar.tsx was already
+   * imposing on its own two line tooltip by hand, so nothing in the bar changes shape.
+   */
+  max-width: min(calc(26 * var(--mp-unit)), calc(100vw - calc(2.4 * var(--mp-unit))));
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-align: left;
+
+  /*
+   * The radius carries !important for the same reason the paddings below do.
+   *
+   * react-tooltip injects its stylesheet from a passive effect while emotion inserts through
+   * useInsertionEffect, which runs earlier, so react-tooltip's sheet lands in the head LAST at
+   * exactly this specificity and wins every tie. Its own radius is 3px, which is what was drawn
+   * here until this was stated.
+   */
+  border-radius: calc(0.4 * var(--mp-unit))!important;
   user-select: none;
 
   z-index: 3;
@@ -35,6 +59,25 @@ const style = (size: buttonSize) => css`
   `}
 `
 
+/**
+ * Where the pointer is, shared by every anchor rather than tracked once per tooltip.
+ *
+ * The chrome mounts eight of these, and each only needs to answer one question at one moment, so a
+ * single refcounted listener answers it for all of them. Installed on the first mount rather than at
+ * module scope, so importing this library still does nothing to the document.
+ */
+const pointer = { x: -1, y: -1, anchors: 0 }
+const trackPointer = (event: PointerEvent) => { pointer.x = event.clientX; pointer.y = event.clientY }
+
+const watchPointer = () => {
+  if (pointer.anchors++ === 0) {
+    window.addEventListener('pointermove', trackPointer, { capture: true, passive: true })
+  }
+  return () => {
+    if (--pointer.anchors === 0) window.removeEventListener('pointermove', trackPointer, { capture: true })
+  }
+}
+
 interface TooltipDisplayProps {
   id: string
   toolTipText: ReactNode
@@ -57,30 +100,77 @@ export const TooltipDisplay = ({
   tooltipPlace = 'top',
   disabled = false,
   size = buttonSize.md
-}: TooltipDisplayProps) => (
-  <>
-    <div
-      data-tooltip-id={id}
-      data-open={true}
-      data-tooltip-offset={offset}
-      data-tooltip-delay-show={delayShow}
-      data-tooltip-delay-hide={closeDelay}
-      data-tooltip-place={tooltipPlace}
-    >
-      {text}
-    </div>
-    {
-      !disabled && (
-        <Tooltip
-          css={style(size)}
-          id={id}
-          noArrow={true}
-        >
-          {toolTipText}
-        </Tooltip>
-      )
+}: TooltipDisplayProps) => {
+  const anchor = useRef<HTMLDivElement>(null)
+  const tooltip = useRef<TooltipRefProps>(null)
+
+  /**
+   * Close on a fullscreen transition, unless the pointer really is still on the anchor.
+   *
+   * Going fullscreen relays the whole chrome out from under a pointer that never moved, and the
+   * browser recomputes the hover chain for that SILENTLY: the :hover flag flips a frame later, so
+   * the grey pill corrects itself in about 14ms, but no boundary event is dispatched at all.
+   * react-tooltip closes on mouseout and on nothing else, so it never learns the pointer left and
+   * the chip stays painted for the rest of the session. It survives arbitrary pointer movement,
+   * because the browser has already updated its own element-under-pointer, and it survives the
+   * chrome's auto-hide, coming back the moment the controls wake.
+   *
+   * Scoped to the fullscreen transition on purpose: the same layout move made by ordinary CSS does
+   * dispatch mouseout and closes the chip by itself, so no other reflow needs this and widening it
+   * would only add ways to close a tooltip that should be open.
+   *
+   * Tested against the anchor's rect rather than closed outright, because a player that already
+   * fills the window moves nothing, and the tooltip under the pointer is then legitimately open.
+   * That is the same test chrome.tsx's onMouseOut makes when relatedTarget comes back null. The rect
+   * is already the post-transition one when fullscreenchange fires, where matches(':hover') is not,
+   * which is why the pointer is tracked rather than asked for.
+   */
+  useEffect(() => {
+    const untrack = watchPointer()
+    const closeIfPointerLeft = () => {
+      const element = anchor.current
+      if (!element) return
+      const { left, right, top, bottom } = element.getBoundingClientRect()
+      if (pointer.x >= left && pointer.x < right && pointer.y >= top && pointer.y < bottom) return
+      tooltip.current?.close()
+    }
+    // webkit's own name as well, the way @videojs/core's fullscreen feature listens for both. Typed
+    // as string so the prefixed name checks against the DOM lib's event map.
+    const changeEvents: string[] = ['fullscreenchange', 'webkitfullscreenchange']
+    for (const type of changeEvents) document.addEventListener(type, closeIfPointerLeft)
+    return () => {
+      untrack()
+      for (const type of changeEvents) document.removeEventListener(type, closeIfPointerLeft)
     }
-  </>
-)
+  }, [])
+
+  return (
+    <>
+      <div
+        ref={anchor}
+        data-tooltip-id={id}
+        data-open={true}
+        data-tooltip-offset={offset}
+        data-tooltip-delay-show={delayShow}
+        data-tooltip-delay-hide={closeDelay}
+        data-tooltip-place={tooltipPlace}
+      >
+        {text}
+      </div>
+      {
+        !disabled && (
+          <Tooltip
+            ref={tooltip}
+            css={style(size)}
+            id={id}
+            noArrow={true}
+          >
+            {toolTipText}
+          </Tooltip>
+        )
+      }
+    </>
+  )
+}
 
 export default TooltipDisplay

package/src/lib/utils/colors.ts

@@ -2,8 +2,6 @@ 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',
 }