@banou/media-player 0.6.2 → 0.7.0

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

@@ -0,0 +1,133 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import type { Ref } from 'react'
+
+import { useMemo } from 'react'
+import { css } from '@emotion/react'
+import { Volume1, Volume2, VolumeX } from 'react-feather'
+
+import { usePlayer } from '../player'
+import { TooltipDisplay } from './tooltip-display'
+import { fonts } from '../../utils/fonts'
+import VolumeSlider from './volume-slider'
+import { linearToLogVolume, logToLinearVolume } from '../../utils/volume-utils'
+
+const style = css`
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .volume-slider-container {
+    display: flex;
+    align-items: center;
+
+    width: 0;
+    margin-right: 0;
+    overflow: hidden;
+    pointer-events: none;
+
+    transition: margin .2s cubic-bezier(0.4,0,1,1), width .2s cubic-bezier(0.4,0,1,1);
+    -webkit-transition: margin .2s cubic-bezier(0.4,0,1,1), width .2s cubic-bezier(0.4,0,1,1);
+
+    .volume-slider-background {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      border-radius: 4px;
+
+      .volume-value {
+        ${fonts.bMedium.regular};
+        color: #ffffff;
+      }
+    }
+  }
+
+  &:hover .volume-slider-container {
+    width: 9rem;
+
+    transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
+    -webkit-transition: margin .2s cubic-bezier(0,0,0.2,1), width .2s cubic-bezier(0,0,0.2,1);
+
+    pointer-events: auto;
+  }
+
+  /* a touch screen has no hover, so the slider stays open there and the button only mutes */
+  @media (pointer: coarse) {
+    /* auto, not a fixed rem: the container keeps overflow: hidden, so a narrower fixed width
+       silently clips the track and makes the clipped part unhittable */
+    .volume-slider-container,
+    &:hover .volume-slider-container {
+      width: auto;
+
+      pointer-events: auto;
+    }
+
+    /* a 44px press target around an 18px icon, floored here because the control bar sets the
+       padding at a higher specificity */
+    .sound {
+      /* border-box explicitly, since a consumer reset cannot be assumed */
+      box-sizing: border-box;
+      justify-content: center;
+
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+`
+
+export type SoundProps = {
+  /** Lands on the button, which is what the control bar attaches its wheel listener to. */
+  ref?: Ref<HTMLButtonElement> | ((element: HTMLButtonElement | null) => void)
+}
+
+export const Sound = ({ ref }: SoundProps) => {
+  const player = usePlayer()
+  const volume = usePlayer((state) => state.volume)
+  const muted = usePlayer((state) => state.muted)
+
+  // the store holds gain, the slider holds linear position, so every read and write converts
+  const linearVolume = useMemo(() => logToLinearVolume(volume), [volume])
+
+  // linearToLogVolume floors its input, so the slider never produces a zero and the store's own
+  // unmute-above-zero is enough
+  const setVolume = (newLinearVolume: number) => {
+    player.setVolume(linearToLogVolume(newLinearVolume))
+  }
+
+  return (
+    <div css={style}>
+      <TooltipDisplay
+        id='sound'
+        text={
+          <button
+            className='sound'
+            type='button'
+            onClick={() => player.toggleMuted()}
+            ref={ref}
+          >
+            {muted || volume === 0
+              ? <VolumeX size={18} color='#fff' />
+              : volume <= 0.5
+                ? <Volume1 size={18} color='#fff' />
+                : <Volume2 size={18} color='#fff' />
+            }
+          </button>
+        }
+        toolTipText={
+          <span>{muted ? 'Unmute (m)' : 'Mute (m)'}</span>
+        }
+      />
+      <div className='volume-slider-container'>
+        <div className='volume-slider-background'>
+          <VolumeSlider
+            value={muted ? 0 : linearVolume}
+            onChange={setVolume}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sound

package/src/{components → lib/react/components}/tooltip-display.tsx

@@ -1,8 +1,15 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
+
 import { css } from '@emotion/react'
 import { PlacesType, Tooltip } from 'react-tooltip'
 
-import { fonts } from '../utils/fonts'
+import { fonts } from '../../utils/fonts'
+
+export enum buttonSize {
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg'
+}
 
 const style = (size: buttonSize) => css`
   display: flex;
@@ -40,12 +47,6 @@ interface TooltipDisplayProps {
   disabled?: boolean
 }
 
-export enum buttonSize {
-  sm = 'sm',
-  md = 'md',
-  lg = 'lg'
-}
-
 export const TooltipDisplay = ({
   id,
   toolTipText,
@@ -81,3 +82,5 @@ export const TooltipDisplay = ({
     }
   </>
 )
+
+export default TooltipDisplay

package/src/{components → lib/react/components}/volume-slider.tsx

@@ -1,9 +1,11 @@
-import { useRef, useState, useEffect, useMemo } from 'react'
+/// <reference types="@emotion/react/types/css-prop" />
+import { useRef, useEffect, useMemo } from 'react'
 import { css } from '@emotion/react'
 
 import { TooltipDisplay } from './tooltip-display'
-import { MediaMachineContext } from '../state-machines'
-import { logToLinearVolume } from '../utils/volume-utils'
+import { usePlayer } from '../player'
+import { useDragValue } from '../hooks/use-drag-value'
+import { logToLinearVolume } from '../../utils/volume-utils'
 
 const style = css`
   display: flex;
@@ -11,6 +13,10 @@ const style = css`
 
   padding: 16px 4px;
   margin: 0 2px;
+  /* a finger needs a 44px band to press, so the padding grows while the track stays 3px */
+  @media (pointer: coarse) {
+    padding: 22px 4px;
+  }
 
   cursor: pointer;
 
@@ -22,6 +28,14 @@ const style = css`
 
     width: 80px;
     height: 3px;
+    /* the control bar has under 360px to fit every button once the slider is always open, so the
+       track lends some of its length back on a phone and takes it again on anything wider */
+    @media (pointer: coarse) {
+      width: 64px;
+    }
+    @media (pointer: coarse) and (min-width: 768px) {
+      width: 80px;
+    }
   }
 
   .volume-handle {
@@ -31,7 +45,7 @@ const style = css`
     background: #ffffff;
     border-radius: 50%;
     transform: translateX(-50%);
-    pointer-events: none; 
+    pointer-events: none;
 
     width: 10px;
     height: 10px;
@@ -43,60 +57,31 @@ type VolumeSliderType = {
   onChange: (v: number) => void
 }
 
-const VolumeSlider = ({ value, onChange }: VolumeSliderType) => {
-  const volume = MediaMachineContext.useSelector((state) => state.context.media.volume)
-  const muted = MediaMachineContext.useSelector((state) => state.context.media.muted)
+export const VolumeSlider = ({ value, onChange }: VolumeSliderType) => {
+  const volume = usePlayer((state) => state.volume)
+  const muted = usePlayer((state) => state.muted)
 
   const sliderRef = useRef<HTMLDivElement>(null)
-  const [isDragging, setIsDragging] = useState(false)
-
-  const getNewVolumeFromEvent = (clientX: number): number => {
-    if (!sliderRef.current) return value
-    const rect = sliderRef.current.getBoundingClientRect()
-    const xPos = clientX - rect.left
-    const clamped = Math.max(0, Math.min(xPos, rect.width))
-    return clamped / rect.width
-  }
+  const trackRef = useRef<HTMLDivElement>(null)
 
-  const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    setIsDragging(true)
-    const newVolume = getNewVolumeFromEvent(e.clientX)
-    onChange(newVolume)
-  }
-
-  const handlePointerMove = (e: MouseEvent) => {
-    if (!isDragging) return
-    const newVolume = getNewVolumeFromEvent(e.clientX)
-    onChange(newVolume)
-  }
-
-  const handlePointerUp = () => {
-    setIsDragging(false)
-  }
+  // the padded row owns the gesture, but the fraction is measured across the track the handle draws in
+  const { handlers } = useDragValue({
+    ref: trackRef,
+    onChange
+  })
 
   const handleWheel = (e: WheelEvent) => {
     e.preventDefault()
     const step = 0.05
     let newVol = value
     if (e.deltaY < 0) {
-      // scroll up
       newVol = Math.min(1, newVol + step)
     } else {
-      // scroll down
       newVol = Math.max(0, newVol - step)
     }
     onChange(newVol)
   }
 
-  useEffect(() => {
-    window.addEventListener('mousemove', handlePointerMove)
-    window.addEventListener('mouseup', handlePointerUp)
-    return () => {
-      window.removeEventListener('mousemove', handlePointerMove)
-      window.removeEventListener('mouseup', handlePointerUp)
-    }
-  }, [isDragging])
-
   useEffect(() => {
     const slider = sliderRef.current
     if (slider) {
@@ -115,7 +100,7 @@ const VolumeSlider = ({ value, onChange }: VolumeSliderType) => {
 
   const displayVolumePercent = useMemo(
     () => Math.round(muted ? 0 : logToLinearVolume(volume) * 100),
-    [volume]
+    [volume, muted]
   )
 
   return (
@@ -125,12 +110,13 @@ const VolumeSlider = ({ value, onChange }: VolumeSliderType) => {
         <div
           ref={sliderRef}
           css={style}
-          onMouseDown={handlePointerDown}
+          {...handlers}
         >
           <div
+            ref={trackRef}
             style={{
-              background: `linear-gradient(to right, 
-                ${fillColor} 0% ${fillPercent}%, 
+              background: `linear-gradient(to right,
+                ${fillColor} 0% ${fillPercent}%,
                 ${emptyColor} ${fillPercent}% 100%
               )`
             }}

package/src/lib/react/hooks/use-drag-value.ts

@@ -0,0 +1,73 @@
+import type { PointerEvent as ReactPointerEvent, RefObject } from 'react'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export type UseDragValueOptions = {
+  /** The element the fraction is measured across. */
+  ref: RefObject<HTMLElement | null>
+  /** Called with a 0..1 fraction on press and on every move, and once more on release. */
+  onChange: (fraction: number) => void
+  orientation?: 'horizontal' | 'vertical'
+  disabled?: boolean
+}
+
+/** Press-and-drag over an element, reported as a 0..1 fraction. */
+export const useDragValue = ({ ref, onChange, orientation = 'horizontal', disabled = false }: UseDragValueOptions) => {
+  const [dragging, setDragging] = useState(false)
+  const onChangeRef = useRef(onChange)
+  onChangeRef.current = onChange
+  const activePointer = useRef<number | null>(null)
+
+  const fractionFor = useCallback((clientX: number, clientY: number) => {
+    const element = ref.current
+    if (!element) return 0
+    const { left, right, top, bottom } = element.getBoundingClientRect()
+    const fraction = orientation === 'horizontal'
+      ? (clientX - left) / (right - left)
+      // a vertical track fills upwards, so the top of the box is 1
+      : (bottom - clientY) / (bottom - top)
+    return Math.min(Math.max(fraction, 0), 1)
+  }, [ref, orientation])
+
+  const onPointerDown = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    if (disabled || event.button > 0) return
+    // Do not add preventDefault or stopPropagation here. The first kills the compatibility mouse
+    // events the seek preview runs on, the second keeps the press from reaching the document
+    // listeners that close the popover and refresh the auto-hide timer.
+    activePointer.current = event.pointerId
+    event.currentTarget.setPointerCapture?.(event.pointerId)
+    setDragging(true)
+    onChangeRef.current(fractionFor(event.clientX, event.clientY))
+  }, [disabled, fractionFor])
+
+  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    if (activePointer.current !== event.pointerId) return
+    onChangeRef.current(fractionFor(event.clientX, event.clientY))
+  }, [fractionFor])
+
+  const endDrag = useCallback((event: ReactPointerEvent<HTMLElement>) => {
+    if (activePointer.current !== event.pointerId) return
+    activePointer.current = null
+    event.currentTarget.releasePointerCapture?.(event.pointerId)
+    setDragging(false)
+  }, [])
+
+  useEffect(() => {
+    if (!disabled) return
+    activePointer.current = null
+    setDragging(false)
+  }, [disabled])
+
+  return {
+    dragging,
+    /** Spread onto the element that owns the gesture. */
+    handlers: {
+      onPointerDown,
+      onPointerMove,
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag,
+      // without this the browser scrolls the page instead of moving the slider
+      style: { touchAction: 'none' as const },
+    },
+  }
+}

package/src/lib/react/hooks/use-picture-in-picture.ts

@@ -0,0 +1,36 @@
+import type { PictureInPictureController } from '../../engine'
+
+import { useCallback, useEffect, useRef } from 'react'
+
+import { createPictureInPicture } from '../../engine'
+import { usePlayer } from '../player'
+
+/** Picture in picture with the subtitles composited in. */
+export const usePictureInPicture = (
+  video: HTMLVideoElement | null,
+  canvas: HTMLCanvasElement | null,
+) => {
+  const player = usePlayer()
+  const controller = useRef<PictureInPictureController | null>(null)
+
+  useEffect(() => {
+    if (!video || !canvas) return
+    const instance = createPictureInPicture({
+      video,
+      canvas,
+      // the store's action handles Safari and exits fullscreen first
+      fallback: () => player.togglePictureInPicture(),
+    })
+    controller.current = instance
+    return () => {
+      instance.destroy()
+      controller.current = null
+    }
+  }, [video, canvas, player])
+
+  return useCallback(() => {
+    void controller.current?.toggle().catch((error) => {
+      console.warn('picture in picture was refused', error)
+    })
+  }, [])
+}

package/src/lib/react/hooks/use-playback.ts

@@ -0,0 +1,134 @@
+import type { PlaybackController } from '../../engine'
+import type { MediaPlayerOptions } from '../video-player'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { startPlayback } from '../../engine'
+import { usePlayer } from '../player'
+
+/**
+ * Owns the engine for the life of a source: start, teardown, and every piece of state the pipeline
+ * discovers. Nothing is mirrored in React state, so the store is the only place any of it lives.
+ */
+export const usePlayback = (
+  video: HTMLVideoElement | null,
+  canvas: HTMLCanvasElement | null,
+  options: MediaPlayerOptions,
+) => {
+  const player = usePlayer()
+  const {
+    read, size, publicPath, libavWorkerUrl, jassubWorkerUrl, jassubWasmUrl, jassubLegacyWasmUrl, defaultFontUrl,
+    bufferSize, autoplay = false,
+  } = options
+
+  // The track the viewer picked, which is what a restart is keyed on. Distinct from the store's
+  // `selectedAudioStream`, which is whatever is playing right now.
+  const [audioStreamIndex, setAudioStreamIndex] = useState<number | undefined>(undefined)
+
+  const controllerRef = useRef<PlaybackController | null>(null)
+  const resumeTimeRef = useRef(0)
+  // The renderer turns the first track on by itself, so the menu has to mirror that or it shows
+  // "Disable" ticked over subtitles that are visibly on screen.
+  const subtitleChoiceMade = useRef(false)
+
+  const readRef = useRef(read)
+  readRef.current = read
+  const onSeekRef = useRef(options.onSeek)
+  onSeekRef.current = options.onSeek
+  const onPlaybackErrorRef = useRef(options.onPlaybackError)
+  onPlaybackErrorRef.current = options.onPlaybackError
+
+  const selectSubtitleStream = useCallback((streamIndex: number | undefined) => {
+    subtitleChoiceMade.current = true
+    player.setSourceState({ selectedSubtitleStream: streamIndex })
+    controllerRef.current?.selectSubtitleStream(streamIndex)
+  }, [player])
+
+  const selectAudioStream = useCallback((streamIndex: number) => {
+    player.setSourceState({ selectedAudioStream: streamIndex })
+    setAudioStreamIndex(streamIndex)
+  }, [player])
+
+  // Subscribed rather than read off the store, because it is a no-op until the media element
+  // attaches. These deps are otherwise all stable, so a mount-time publish would be the only one and
+  // both actions would stay dead defaults.
+  const setSourceState = usePlayer((state) => state.setSourceState)
+
+  useEffect(() => {
+    setSourceState({ selectSubtitleStream, selectAudioStream })
+  }, [setSourceState, selectSubtitleStream, selectAudioStream])
+
+  useEffect(() => {
+    if (!video || !canvas || !size || !read) return
+    let cancelled = false
+    player.setSourceState({ playbackError: null, ready: false })
+    const fail = (error: unknown) => {
+      if (cancelled) return
+      console.error('playback failed', error)
+      player.setSourceState({ playbackError: error })
+      onPlaybackErrorRef.current?.(error)
+    }
+    void (async () => {
+      try {
+        const controller = await startPlayback({
+          videoElement: video,
+          canvasElement: canvas,
+          read: (offset, length) => readRef.current!(offset, length),
+          length: size,
+          publicPath,
+          libavWorkerUrl,
+          jassubWorkerUrl,
+          jassubWasmUrl,
+          jassubLegacyWasmUrl,
+          defaultFontUrl,
+          bufferSize,
+          audioStreamIndex,
+          onReady: () => {
+            if (cancelled) return
+            player.setSourceState({ ready: true })
+            if (resumeTimeRef.current > 0) {
+              video.currentTime = resumeTimeRef.current
+              resumeTimeRef.current = 0
+            }
+            if (autoplay) video.play().catch(() => {})
+          },
+          onError: fail,
+          onRecovered: () => { if (!cancelled) player.setSourceState({ playbackError: null }) },
+          onSeek: (fraction) => onSeekRef.current?.(fraction),
+          onSubtitleStreams: (streams) => {
+            if (cancelled) return
+            player.setSourceState({
+              subtitleStreams: streams,
+              ...subtitleChoiceMade.current ? {} : { selectedSubtitleStream: streams[0]?.streamIndex },
+            })
+          },
+          onAudioStreams: (streams, selected) => {
+            if (cancelled) return
+            player.setSourceState({ audioStreams: streams, selectedAudioStream: selected })
+          },
+        })
+        if (cancelled) {
+          controller.destroy()
+          return
+        }
+        controllerRef.current = controller
+        player.setSourceState({ indexes: controller.indexes })
+        // a track chosen before this pipeline existed has to be re-applied to the new renderer
+        const chosen = player.selectedSubtitleStream
+        if (chosen !== undefined) controller.selectSubtitleStream(chosen)
+      } catch (error) {
+        fail(error)
+      }
+    })()
+    return () => {
+      cancelled = true
+      resumeTimeRef.current = video.currentTime
+      controllerRef.current?.destroy()
+      controllerRef.current = null
+      player.setSourceState({ ready: false })
+    }
+  }, [
+    player, video, canvas, size, read, publicPath, libavWorkerUrl, jassubWorkerUrl, jassubWasmUrl,
+    jassubLegacyWasmUrl, defaultFontUrl, bufferSize, audioStreamIndex, autoplay,
+  ])
+}

package/src/lib/react/hooks/use-thumbnails.ts

@@ -0,0 +1,77 @@
+import type { ThumbnailGenerator, ThumbnailImage } from '../../engine'
+import type { DownloadedRange } from '../source-feature'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
+
+import { createThumbnailGenerator } from '../../engine'
+
+// backs off because each failed init costs a wasm worker
+const RETRY_DELAY = 5_000
+const MAX_RETRY_DELAY = 60_000
+
+export type UseSeekThumbnailsOptions = {
+  publicPath: string
+  workerUrl: string
+  length: number | undefined
+  read: ((offset: number, size: number) => Promise<ArrayBuffer>) | undefined
+  /** When omitted the whole file is treated as readable, which is the case for a local file. */
+  downloadedRanges?: DownloadedRange[]
+}
+
+export const useSeekThumbnails = ({
+  publicPath, workerUrl, length, read, downloadedRanges,
+}: UseSeekThumbnailsOptions): ThumbnailImage[] => {
+  const [thumbnails, setThumbnails] = useState<ThumbnailImage[]>([])
+  const generatorRef = useRef<ThumbnailGenerator | null>(null)
+  const readRef = useRef(read)
+  readRef.current = read
+
+  const ranges = useMemo(
+    () => downloadedRanges?.map(({ startByteOffset, endByteOffset }) => [startByteOffset, endByteOffset] as [number, number]),
+    // a streaming consumer changes the array identity every tick, so compare contents
+    [downloadedRanges?.map(({ startByteOffset, endByteOffset }) => `${startByteOffset}-${endByteOffset}`).join(',')],
+  )
+  const rangesRef = useRef(ranges)
+  rangesRef.current = ranges
+
+  useEffect(() => {
+    if (!length || !read) return
+    let cancelled = false
+    let generator: ThumbnailGenerator | null = null
+    let retry: ReturnType<typeof setTimeout> | undefined
+    let delay = RETRY_DELAY
+    const boot = () => {
+      createThumbnailGenerator({
+        publicPath,
+        workerUrl,
+        length,
+        read: (offset, size) => readRef.current!(offset, size),
+        onThumbnails: (next) => { if (!cancelled) setThumbnails(next) },
+      }).then((created) => {
+        if (cancelled) {
+          created.destroy()
+          return
+        }
+        generator = created
+        generatorRef.current = created
+        created.update(rangesRef.current)
+      }, () => {
+        if (cancelled) return
+        retry = setTimeout(boot, delay)
+        delay = Math.min(delay * 2, MAX_RETRY_DELAY)
+      })
+    }
+    boot()
+    return () => {
+      cancelled = true
+      clearTimeout(retry)
+      generatorRef.current = null
+      generator?.destroy()
+      setThumbnails([])
+    }
+  }, [length, publicPath, workerUrl])
+
+  useEffect(() => { generatorRef.current?.update(ranges) }, [ranges])
+
+  return thumbnails
+}

package/src/lib/react/player.ts

@@ -0,0 +1,20 @@
+import { videoFeatures } from '@videojs/core/dom'
+import { createPlayer } from '@videojs/react'
+
+import { sourceFeature } from './source-feature'
+
+// The preset plus our own source state, so the chrome reads one store rather than a store and a
+// context. createPlayer's generic overload infers the state from the whole tuple, so the extra
+// feature's fields are as typed as the built-in ones.
+export const Player = createPlayer({
+  features: [...videoFeatures, sourceFeature],
+  displayName: 'MediaPlayer',
+})
+
+/**
+ * Typed player state, to be used instead of the `usePlayer` from `@videojs/react`, whose fields come
+ * back as `unknown`. With no selector it returns the store without subscribing; with one it subscribes.
+ */
+export const usePlayer: typeof Player.usePlayer = Player.usePlayer
+
+export type PlayerStore = ReturnType<typeof Player.usePlayer>