@banou/media-player 0.8.5 → 0.8.7

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

@@ -10,6 +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 SettingsAction from './settings'
 import SubtitlesAction from './subtitles'
 import colors from '../../utils/colors'
@@ -18,6 +19,25 @@ 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;
@@ -68,6 +88,22 @@ 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, .subtitles, .settings, .picture-in-picture, .full-screen {
@@ -150,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
 
@@ -265,18 +310,46 @@ export const ControlBar = () => {
             ? (
               <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

@@ -36,3 +36,18 @@ export const CaptionsOff = (props: SVGProps<SVGSVGElement>) => (
     <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/hooks/use-picture-in-picture.ts

@@ -1,32 +1,50 @@
-import type { PictureInPictureController } from '../../engine'
+import type { PictureInPictureController, PictureInPictureMode } from '../../engine'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 
-import { createPictureInPicture } from '../../engine'
-import { usePlayer } from '../player'
+import { createPictureInPicture, pictureInPictureMode } from '../../engine'
 
-/** Picture in picture with the subtitles composited in. */
+export type PictureInPicture = {
+  /** null when nothing here can work, and the chrome then offers no control at all. */
+  toggle: (() => void) | null
+  mode: PictureInPictureMode | null
+  /** Burn-in only. True while the composite is the picture on screen. */
+  burnedIn: boolean
+}
+
+/**
+ * Picture in picture with the subtitles composited in.
+ *
+ * Two shapes, because two kinds of browser. Where the W3C API exists this opens a real window off a
+ * hidden mirror. Where it does not, and the engine is Gecko, the same composite becomes the picture
+ * in the page so that the BROWSER'S own picture in picture control carries the subtitles with it,
+ * which it otherwise cannot: it takes a video element, and the subtitles live on a canvas above one.
+ */
 export const usePictureInPicture = (
   video: HTMLVideoElement | null,
   canvas: HTMLCanvasElement | null,
-) => {
-  const player = usePlayer()
+): PictureInPicture => {
   const controller = useRef<PictureInPictureController | null>(null)
+  const [burnedIn, setBurnedIn] = useState(false)
+  // Detected once. It cannot change for the life of the document, and recomputing it per render
+  // would churn the identity of everything downstream.
+  const [mode] = useState<PictureInPictureMode | null>(() => pictureInPictureMode())
 
   useEffect(() => {
-    if (!video || !canvas) return
+    if (!video || !canvas || !mode) return
     const instance = createPictureInPicture({
       video,
       canvas,
-      // the store's action handles Safari and exits fullscreen first
-      fallback: () => player.togglePictureInPicture(),
+      mode,
+      onBurnedInChange: setBurnedIn,
     })
     controller.current = instance
     return () => {
       instance.destroy()
       controller.current = null
+      setBurnedIn(false)
     }
-  }, [video, canvas, player])
+  }, [video, canvas, mode])
 
   const toggle = useCallback(() => {
     void controller.current?.toggle().catch((error) => {
@@ -36,5 +54,5 @@ export const usePictureInPicture = (
 
   // null rather than a dead callback: the chrome hides the control instead of offering one that
   // cannot work, and there is nothing to composite without both an element and a canvas.
-  return video && canvas ? toggle : null
+  return { toggle: video && canvas && mode ? toggle : null, mode, burnedIn }
 }

package/src/lib/react/source-feature.ts

@@ -1,4 +1,4 @@
-import type { MediaIndex, ThumbnailImage } from '../engine'
+import type { MediaIndex, PictureInPictureMode, ThumbnailImage } from '../engine'
 
 import { definePlayerFeature } from '@videojs/core/dom'
 
@@ -89,6 +89,15 @@ export type SourceState = {
    */
   togglePictureInPicture: (() => void) | null
 
+  /**
+   * Which shape the control takes. `window` opens one. `burn-in` cannot, and instead paints the
+   * subtitles into the picture so the BROWSER'S own control carries them; the viewer presses that
+   * one afterwards, so the button has to say something different. null means no control.
+   */
+  pictureInPictureMode: PictureInPictureMode | null
+  /** Burn-in only. True while the composite is the picture on screen. */
+  burnedInSubtitles: boolean
+
   /** Set when the pipeline fails. Cleared when it recovers. */
   playbackError: unknown
   /** Whether the engine has produced its first media segment. */
@@ -116,6 +125,8 @@ const initialState: SourceState = {
   hideUI: false,
   setHideUI: () => {},
   togglePictureInPicture: null,
+  pictureInPictureMode: null,
+  burnedInSubtitles: false,
   playbackError: null,
   ready: false,
   setSourceState: () => {},

package/src/lib/react/video-player.tsx

@@ -187,7 +187,11 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
     downloadedRanges,
   })
   const thumbnails = remote?.thumbnails?.all ?? generatedThumbnails
-  const togglePictureInPicture = usePictureInPicture(video, canvas)
+  const {
+    toggle: togglePictureInPicture,
+    mode: pictureInPictureMode,
+    burnedIn: burnedInSubtitles,
+  } = usePictureInPicture(video, canvas)
 
   // Subscribed rather than read off the store, because it is a no-op until the media element
   // attaches: when attach swaps in the real setter the identity changes and these publish again.
@@ -199,8 +203,16 @@ const PlayerRoot = ({ options, children }: { options: MediaPlayerOptions, childr
 
   const thumbnailAt = remote?.thumbnails?.at
   useEffect(() => {
-    setSourceState({ thumbnails, thumbnailAt, togglePictureInPicture })
-  }, [setSourceState, thumbnails, thumbnailAt, togglePictureInPicture])
+    setSourceState({
+      thumbnails,
+      thumbnailAt,
+      togglePictureInPicture,
+      pictureInPictureMode,
+      burnedInSubtitles,
+    })
+  }, [
+    setSourceState, thumbnails, thumbnailAt, togglePictureInPicture, pictureInPictureMode, burnedInSubtitles,
+  ])
 
   // A delegated track list writes the same store fields the engine writes, so the menus never learn
   // which arm they are showing. Only the writer differs: here the pick is forwarded to whoever owns

package/src/lib/utils/colors.ts

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