@banou/media-player 0.8.17 → 0.8.19

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.17",
+  "version": "0.8.19",
   "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/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/chrome.tsx

@@ -108,13 +108,56 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, childr
   const autoHide = useRef<ReturnType<typeof setTimeout>>(undefined)
   // a tap and a click mean different things, so the last pointer kind is remembered
   const lastPointerType = useRef<string>('mouse')
+  // where the mouse last was, which is where it still is when nothing has moved
+  const pointer = useRef({ x: -1, y: -1 })
+  const root = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => () => clearTimeout(autoHide.current), [])
 
+  // The caller's ref still gets the element: video.js attaches the fullscreen container through it,
+  // and this needs the same node to hit test against.
+  const setRoot = (element: HTMLDivElement | null) => {
+    root.current = element
+    if (typeof ref === 'function') ref(element)
+    else if (ref) (ref as { current: HTMLDivElement | null }).current = element
+  }
+
+  /**
+   * Is the mouse sitting on something it could press right now?
+   *
+   * The hide is a timeout on the last MOVEMENT, so a pointer parked on a control still runs it out
+   * and the control disappears from under the cursor. Everything then falls through to the video:
+   * `elementFromPoint` at the button's own centre returns the `video`, so a click pauses playback
+   * and a right click offers the browser's video menu rather than the control's. That is how a link
+   * drawn in an overlay stops behaving like a link, which is what this exists to stop.
+   *
+   * Only what actually takes pointer events can be hit, so this needs no list of selectors: the
+   * chrome's own layers opt out, an overlay item opts out until an app opts a child back in, and the
+   * picture is excluded here because resting on the picture is exactly when hiding is right.
+   *
+   * The mouse only. A finger has no resting position, and `elementFromPoint` on the last tap would
+   * keep the controls up forever after one press.
+   */
+  const pointerRestsOnAControl = () => {
+    if (lastPointerType.current !== 'mouse') return false
+    const { x, y } = pointer.current
+    if (!root.current || x < 0) return false
+    const hit = document.elementFromPoint(x, y)
+    return !!hit && root.current.contains(hit) && !hit.closest('.video')
+  }
+
+  const hideUnlessTheMouseIsOnAControl = () => {
+    if (pointerRestsOnAControl()) {
+      autoHide.current = setTimeout(hideUnlessTheMouseIsOnAControl, AUTO_HIDE_DELAY)
+      return
+    }
+    setHideUI(true)
+  }
+
   const reveal = () => {
     setHideUI(false)
     clearTimeout(autoHide.current)
-    autoHide.current = setTimeout(() => setHideUI(true), AUTO_HIDE_DELAY)
+    autoHide.current = setTimeout(hideUnlessTheMouseIsOnAControl, AUTO_HIDE_DELAY)
   }
 
   // Hides after the delay whether or not playback is running. A finger produces no move, so this is
@@ -122,6 +165,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, childr
   const onPointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
     lastPointerType.current = event.pointerType
     if (event.pointerType !== 'mouse') return
+    pointer.current = { x: event.clientX, y: event.clientY }
     reveal()
   }
 
@@ -157,7 +201,7 @@ export const Chrome = ({ ref, onVideoRef, onCanvasRef, overlay, controls, childr
   return (
     <div
       css={style}
-      ref={ref}
+      ref={setRoot}
       onPointerMove={onPointerMove}
       onPointerDown={onPointerDown}
       onMouseOut={onMouseOut}

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',
 }