@banou/media-player 0.8.18 → 0.8.20

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/video-player.tsx

@@ -2,8 +2,9 @@
 import type { ReactNode } from 'react'
 import type { DownloadedRange } from './source-feature'
 import type { DelegatedTracks, ExternalThumbnails, PlayerMedia } from './media'
+import type { ExposePlayerOptions } from '../remote'
 
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { css } from '@emotion/react'
 import { useContainerAttach, useMediaAttach } from '@videojs/react'
 
@@ -23,6 +24,15 @@ export type MediaPlayerSource =
 
 /** Shared by both arms: nothing here depends on who owns the media. */
 type CommonOptions = {
+  /**
+   * Serve this player to the document that frames this one, so it can be read and driven from there
+   * through `mediaPlayer` (from `@banou/media-player/remote`). `true` serves the framing window and
+   * nothing else; an options object narrows the embedder by origin or replaces the transport, and may
+   * be written inline, since `id`, `origin` and `channel` are watched by value. A `transport` or
+   * `signal` is read when the player is served and changing either needs a remount. Off by default, and a
+   * no-op in a document nobody frames.
+   */
+  expose?: boolean | ExposePlayerOptions
   /**
    * Drawn across the top of the picture, in a layer of its own.
    *
@@ -192,6 +202,37 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
   const media = remote?.media ?? video
   useEffect(() => { setMedia?.(media); return () => setMedia?.(null) }, [media, setMedia])
 
+  // Served after it is attached, and re-served when the media changes: what an embedder drives is
+  // whatever this player drives at the time. Keyed on the option's `origin` and `channel`, not on the
+  // object: an inline `expose={{ origin }}` is a new object on every render, and re-serving on each
+  // would tell the embedder the media was swapped several times a second. `transport` and `signal`
+  // are read at serve time and a change to either needs a remount, which the prop's doc says.
+  //
+  // `id` is watched: a prop whose id changes has to be re-served under the new one, or the document
+  // keeps announcing under the old id and an embedder asking for the new one waits for ever.
+  //
+  // Imported lazily, so `osra` is a dependency of `@banou/media-player/remote` and not of every app
+  // that renders a player without ever exposing one.
+  const { expose } = options
+  const exposeOptions = expose === true ? {} : expose || undefined
+  const latestExpose = useRef(exposeOptions)
+  latestExpose.current = exposeOptions
+  const exposeId = exposeOptions ? exposeOptions.id : undefined
+  const exposeOrigin = exposeOptions ? exposeOptions.origin : undefined
+  const exposeChannel = exposeOptions ? exposeOptions.channel : undefined
+  useEffect(() => {
+    if (!expose || !media) return
+    let stop: (() => void) | undefined
+    let dropped = false
+    import('../remote')
+      .then(({ exposePlayer }) => {
+        if (dropped) return
+        stop = exposePlayer(media, latestExpose.current ?? {})
+      })
+      .catch(() => {})
+    return () => { dropped = true; stop?.() }
+  }, [media, !!expose, exposeId, exposeOrigin, exposeChannel])
+
   // Each of these no-ops on null inputs, which is what a remote arm supplies: it renders no <video>,
   // so there is nothing for them to attach to and nothing to guard at the call site.
   usePlayback(video, canvas, local)