@banou/media-player 0.6.2 → 0.8.0

package/src/{components → lib/react/components}/control-bar.tsx

@@ -1,20 +1,21 @@
-import { ReactNode, RefObject, useCallback, useContext, useEffect, useState } from 'react'
+/// <reference types="@emotion/react/types/css-prop" />
+import { useCallback, useEffect, useState } from 'react'
 import { css } from '@emotion/react'
 import { Maximize, Minimize, Pause, Play, RotateCcw } from 'react-feather'
 
-import { linearToLogVolume, logToLinearVolume } from '../utils/volume-utils'
-import { MediaMachineContext } from '../state-machines'
+import { linearToLogVolume, logToLinearVolume } from '../../utils/volume-utils'
+import { formatMediaTime } from '../../utils/time'
+import { fonts } from '../../utils/fonts'
+import { usePlayer } from '../player'
 import { TooltipDisplay } from './tooltip-display'
-import { togglePlay } from '../utils/actor-utils'
-import { MediaPlayerContext } from '../utils/context'
 import { ProgressBar } from './progress-bar'
-import { formatMediaTime } from '../utils/time'
-import { fonts } from '../utils/fonts'
-import pictureInPicture from '../assets/picture-in-picture.svg'
+import pictureInPicture from '../../assets/picture-in-picture.svg'
 import SettingsAction from './settings'
-import colors from '../utils/colors'
+import colors from '../../utils/colors'
 import Sound from './sound'
-import useLocalStorage, { booleanType } from '../utils/use-local-storage'
+
+const VOLUME_STEP = 0.05
+const SEEK_STEP = 5
 
 const style = css`
   position: absolute;
@@ -28,12 +29,14 @@ const style = css`
     display: flex;
     justify-content: space-between;
 
-    padding: 6px 12px;
+    /* repeated per breakpoint: nested at-rules are hoisted after the rule, so a shorthand inside a
+       media query would override a longhand above it and silently drop the safe-area inset */
+    padding: 6px calc(12px + env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
     @media (min-width: 768px) {
-      padding: 8px 16px;
+      padding: 8px calc(16px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px));
     }
     @media (min-width: 2560px) {
-      padding: 8px 24px;
+      padding: 8px calc(24px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
     }
 
     .left, .right {
@@ -66,7 +69,6 @@ const style = css`
         }
       }
 
-      // Add basic styling for all the actions
       .play, .sound, .time, .settings, .picture-in-picture, .full-screen {
         display: flex;
         align-items: center;
@@ -85,7 +87,6 @@ const style = css`
         }
       }
 
-      // Add styling to the actions that have some interactivity
       .play, .sound, .settings, .picture-in-picture, .full-screen {
         border-radius: 4px;
 
@@ -102,6 +103,16 @@ const style = css`
         :hover {
           background-color: ${colors.hover};
         }
+
+        /* the hit area grows, the icon does not, keyed on the pointer because a narrow desktop
+           window still has a mouse */
+        @media (pointer: coarse) {
+          /* border-box explicitly, since a consumer reset cannot be assumed */
+          box-sizing: border-box;
+          min-width: 44px;
+          min-height: 44px;
+          justify-content: center;
+        }
       }
     }
 
@@ -130,102 +141,73 @@ const style = css`
   }
 `
 
-export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformation?: ReactNode, containerRef: RefObject<HTMLDivElement> }) => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const chromeContext = useContext(MediaPlayerContext)
-  const isPaused = MediaMachineContext.useSelector((state) => state.context.media.paused)
-  const volume = MediaMachineContext.useSelector((state) => state.context.media.volume)
-  const muted = MediaMachineContext.useSelector((state) => state.context.media.muted)
-  const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
-  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
-  const [volumeElement, setVolumeElement] = useState<HTMLDivElement | undefined>()
-  const [hideMediaStats, _] = useLocalStorage('hideMediaStats', 'false') as [booleanType, (newValue: booleanType) => void]
-  
-  const [isFullscreen, setIsFullscreen] = useState(false)
+export const ControlBar = () => {
+  const player = usePlayer()
+  const paused = usePlayer((state) => state.paused)
+  const currentTime = usePlayer((state) => state.currentTime)
+  const duration = usePlayer((state) => state.duration)
+  const fullscreen = usePlayer((state) => state.fullscreen)
+  const hideUI = usePlayer((state) => state.hideUI)
+  const togglePictureInPicture = usePlayer((state) => state.togglePictureInPicture)
+  const [volumeElement, setVolumeElement] = useState<HTMLButtonElement | null>(null)
 
-  useEffect(() => {
-    const handleFullscreenChange = () => {
-      setIsFullscreen(!!document.fullscreenElement)
-    }
-    document.addEventListener('fullscreenchange', handleFullscreenChange)
-    return () => {
-      document.removeEventListener('fullscreenchange', handleFullscreenChange)
-    }
-  }, [])
-
-  const toggleFullScreen = () => {
-    if (!document.fullscreenElement) {
-      if (containerRef.current) {
-        containerRef.current.requestFullscreen()
-      }
-    } else {
-      document.exitFullscreen()
-    }
-  }
+  // duration is 0 until metadata lands, so a bare equality would show replay before playback starts
+  const ended = duration > 0 && currentTime === duration
 
+  // Stepped in linear space and converted back, and the mute flag is restored afterwards because
+  // setVolume clears it for any value above zero.
   const modifyVolume = useCallback(({ direction, stepSize }: { direction: 'up' | 'down', stepSize: number }) => {
-    if (!mediaActor) return
-    const linearVolume = logToLinearVolume(volume)
+    const linearVolume = logToLinearVolume(player.volume)
     const step = (direction === 'up' ? stepSize : -stepSize)
     const newLinearVolume = Math.max(0, Math.min(1, linearVolume + step))
-    const newLogVolume = linearToLogVolume(newLinearVolume)
-    
-    mediaActor.send({
-      type: 'SET_VOLUME',
-      muted,
-      volume: newLogVolume
-    })
-  }, [mediaActor.id, muted, volume])
+    const wasMuted = player.muted
+    player.setVolume(linearToLogVolume(newLinearVolume))
+    if (wasMuted && !player.muted) player.toggleMuted()
+  }, [player])
 
   useEffect(() => {
     const eventListener = (ev: KeyboardEvent) => {
+      // on the window, so typing into a consumer's own input is the one case that opts out
+      const target = ev.target as HTMLElement | null
+      if (target?.isContentEditable || /^(input|textarea|select)$/i.test(target?.tagName ?? '')) return
+
       let shouldPreventDefault = true
-      // avoid triggering the browser's default behavior (e.g space for pause it opens the full screen)
-      if (ev.key === 'f') toggleFullScreen()
-      else if (ev.key === 'k') togglePlay(mediaActor, isPaused, duration, currentTime)
-      else if (ev.key === ' ') togglePlay(mediaActor, isPaused, duration, currentTime)
-      else if (ev.key === 'm') {
-        mediaActor.send({ type: 'SET_VOLUME', muted: !muted, volume })
-      }
+      // space would otherwise reach the browser's own shortcut
+      if (ev.key === 'f') player.toggleFullscreen()
+      else if (ev.key === 'k') player.togglePaused()
+      else if (ev.key === ' ') player.togglePaused()
+      else if (ev.key === 'm') player.toggleMuted()
       else if (ev.key === 'ArrowUp') {
-        modifyVolume({ direction: 'up', stepSize: 0.05 })
+        modifyVolume({ direction: 'up', stepSize: VOLUME_STEP })
       }
       else if (ev.key === 'ArrowDown') {
-        modifyVolume({ direction: 'down', stepSize: 0.05 })
+        modifyVolume({ direction: 'down', stepSize: VOLUME_STEP })
       }
       else if (ev.key === 'ArrowRight') {
-        if (!duration) return
-        if (currentTime + 5 >= duration) {
-          mediaActor.send({ type: 'SET_TIME', value: duration })
-        } else {
-          mediaActor.send({ type: 'SET_TIME', value: currentTime + 5 })
-        }
+        if (!player.duration) return
+        player.seek(Math.min(player.currentTime + SEEK_STEP, player.duration))
       }
       else if (ev.key === 'ArrowLeft') {
-        if (currentTime - 5 < 0) {
-          mediaActor.send({ type: 'SET_TIME', value: 0 })
-        } else {
-          mediaActor.send({ type: 'SET_TIME', value: currentTime - 5 })
-        }
+        player.seek(Math.max(player.currentTime - SEEK_STEP, 0))
       }
       else {
         shouldPreventDefault = false
       }
-      
+
       if (shouldPreventDefault) {
         ev.preventDefault()
       }
     }
     window.addEventListener('keydown', eventListener)
     return () => window.removeEventListener('keydown', eventListener)
-  }, [mediaActor, volume, muted, isPaused, currentTime, duration])
+  }, [player, modifyVolume])
 
   const handleWheel = useCallback((e: WheelEvent) => {
     e.preventDefault()
     if (e.deltaY < 0) { // scroll up
-      modifyVolume({ direction: 'up', stepSize: 0.05 })
+      modifyVolume({ direction: 'up', stepSize: VOLUME_STEP })
     } else { // scroll down
-      modifyVolume({ direction: 'down', stepSize: 0.05 })
+      modifyVolume({ direction: 'down', stepSize: VOLUME_STEP })
     }
   }, [modifyVolume])
 
@@ -233,10 +215,10 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
     if (!volumeElement) return
     volumeElement.addEventListener('wheel', handleWheel, { passive: false })
     return () => volumeElement.removeEventListener('wheel', handleWheel)
-  }, [volumeElement, modifyVolume])
+  }, [volumeElement, handleWheel])
 
   return (
-    <div css={style} style={{ ...chromeContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}>
+    <div css={style} style={{ ...hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}>
       <ProgressBar />
       <div className='actions'>
         <div className='left'>
@@ -247,12 +229,12 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
               <button
                 className='play'
                 type='button'
-                onClick={() => togglePlay(mediaActor, isPaused, duration, currentTime)}
+                onClick={() => player.togglePaused()}
               >
                 {
-                  duration === currentTime
+                  ended
                     ? <RotateCcw />
-                    : isPaused
+                    : paused
                       ? <Play />
                       : <Pause />
                 }
@@ -261,26 +243,21 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
             toolTipText={
               <span>
                 {
-                  duration === currentTime
+                  ended
                     ? 'Replay (k)'
-                    : isPaused
+                    : paused
                       ? 'Play (k)'
                       : 'Pause (k)'
                 }
               </span>
             }
-          /> 
+          />
           <Sound ref={setVolumeElement}/>
           <div className='time'>
             {formatMediaTime(currentTime, duration)}
           </div>
         </div>
         <div className='right'>
-          {
-            hideMediaStats !== 'true'
-              ? mediaInformation
-              : null
-          }
           <SettingsAction />
           <TooltipDisplay
             id='picture-in-picture'
@@ -288,6 +265,7 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
               <button
                 className='picture-in-picture'
                 type='button'
+                onClick={togglePictureInPicture}
               >
                 <img src={pictureInPicture}  />
               </button>
@@ -305,10 +283,10 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
               <button
                 className='full-screen'
                 type='button'
-                onClick={toggleFullScreen}
+                onClick={() => player.toggleFullscreen()}
               >
                 {
-                  isFullscreen
+                  fullscreen
                     ? <Minimize />
                     : <Maximize />
                 }
@@ -317,7 +295,7 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
             toolTipText={
               <span>
                 {
-                  isFullscreen
+                  fullscreen
                     ? 'Exit full screen (f)'
                     : 'Full screen (f)'
                 }

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

@@ -0,0 +1,125 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import { css, keyframes } from '@emotion/react'
+
+import { usePlayer } from '../player'
+import { fonts } from '../../utils/fonts'
+
+const style = css`
+  top: unset !important;
+  left: unset !important;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  pointer-events: none;
+`
+
+const titleStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: calc(1.2 * var(--mp-unit)) calc(1.6 * var(--mp-unit));
+  /* clears a notch once the player is fullscreen; resolves to zero everywhere else */
+  padding-top: calc(calc(1.2 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
+  ${fonts.headings.small}
+  color: white;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+  z-index: 2;
+  pointer-events: none;
+
+  /* one line with an ellipsis until there is width to wrap, since a release filename would
+     otherwise run to four lines on a phone */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @media (min-width: 768px) {
+    padding: calc(2.4 * var(--mp-unit));
+    padding-top: calc(calc(2.4 * var(--mp-unit)) + env(safe-area-inset-top, 0px));
+    white-space: normal;
+    overflow: visible;
+  }
+
+  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+`
+
+const spin = keyframes`
+  to { transform: rotate(360deg); }
+`
+
+const loadingStyle = css`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+
+  ::after {
+    content: '';
+    width: calc(4 * var(--mp-unit));
+    height: calc(4 * var(--mp-unit));
+    border-radius: 50%;
+    border: 3px solid rgba(255, 255, 255, 0.25);
+    border-top-color: #fff;
+    animation: ${spin} 0.8s linear infinite;
+  }
+`
+
+// a failure would otherwise be a black frame under a spinner that never resolves
+const errorStyle = css`
+  position: absolute;
+  inset: auto 0 20%;
+  z-index: 3;
+  padding: 0 calc(2 * var(--mp-unit));
+  text-align: center;
+  color: #fff;
+  ${fonts.bLarge.regular}
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+  pointer-events: none;
+`
+
+const errorMessage = (error: unknown) =>
+  error instanceof Error
+    ? error.message
+    : typeof error === 'string' ? error : 'Playback failed'
+
+export const Overlay = ({ onCanvasRef }: { onCanvasRef: (element: HTMLCanvasElement | null) => void }) => {
+  const title = usePlayer((state) => state.title)
+  const hideUI = usePlayer((state) => state.hideUI)
+  const playbackError = usePlayer((state) => state.playbackError)
+  const ready = usePlayer((state) => state.ready)
+  const size = usePlayer((state) => state.size)
+  // video.js's own: readyState below HAVE_FUTURE_DATA while not paused
+  const waiting = usePlayer((state) => state.waiting)
+
+  return (
+    <>
+      {title
+        ? (
+          <div
+            css={titleStyle}
+            style={{ ...hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
+          >
+            {title}
+          </div>
+        )
+        : undefined}
+      {/* Two different waits, one spinner. With bytes it is pre-metadata rather than buffering: the
+          store reports 0 both before metadata and for a genuinely unknown duration, so `size` is what
+          tells whether a source was handed over at all. A media this player does not own has neither
+          `size` nor `ready`, and reports the ordinary `waiting` every element does. */}
+      {(size ? !ready : waiting) && !playbackError
+        ? <div css={loadingStyle} />
+        : undefined}
+      {playbackError
+        ? <div css={errorStyle}>{errorMessage(playbackError)}</div>
+        : undefined}
+      <canvas ref={onCanvasRef} css={style} />
+    </>
+  )
+}
+
+export default Overlay

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

@@ -1,7 +1,9 @@
-import { useRef, useState, useEffect, useMemo } from 'react'
+/// <reference types="@emotion/react/types/css-prop" />
+import { useRef, useEffect } from 'react'
 import { css } from '@emotion/react'
 
-import { MediaMachineContext } from '../state-machines'
+import { usePlayer } from '../player'
+import { useDragValue } from '../hooks/use-drag-value'
 
 const style = css`
 display: flex;
@@ -16,6 +18,10 @@ width: 100%;
 
   padding: 8px 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: 20px 8px;
+  }
 
   cursor: pointer;
 
@@ -26,6 +32,7 @@ width: 100%;
     border-radius: 4px;
 
     width: 120px;
+    max-width: 100%;
     height: 3px;
     @media (min-width: 768px) {
       height: 4px;
@@ -39,7 +46,7 @@ width: 100%;
     background: #ffffff;
     border-radius: 50%;
     transform: translateX(-50%);
-    pointer-events: none; 
+    pointer-events: none;
 
     width: 10px;
     height: 10px;
@@ -53,77 +60,47 @@ width: 100%;
 }
 `
 
-const PlaybackSlider = () => {
-  const playbackRate = MediaMachineContext.useSelector((state) => state.context.media.playbackRate)
-  const mediaActor = MediaMachineContext.useActorRef()
+export const PlaybackSlider = () => {
+  const player = usePlayer()
+  const playbackRate = usePlayer((state) => state.playbackRate)
   const sliderRef = useRef<HTMLDivElement>(null)
-  const [isDragging, setIsDragging] = useState(false)
+  const trackRef = useRef<HTMLDivElement>(null)
 
   const MIN_RATE = 0.25
   const MAX_RATE = 3.0
   const RANGE = MAX_RATE - MIN_RATE
-  
+
   const roundToStep = (value: number, step: number = 0.05): number => {
     return Math.round(value / step) * step
   }
-  
+
   const roundedRate = roundToStep(playbackRate || 1)
-  
-  // Calculate position as percentage
+
   const getHandlePosition = (rate: number): number => {
     return ((rate - MIN_RATE) / RANGE) * 100
   }
 
-  const getPlaybackRateFromEvent = (clientX: number): number => {
-    if (!sliderRef.current) return roundedRate;
-    
-    const rect = sliderRef.current.getBoundingClientRect()
-    const xPos = clientX - rect.left
-    const percent = Math.max(0, Math.min(xPos, rect.width)) / rect.width
-    
-    const rawRate = MIN_RATE + (percent * RANGE)
-    
-    return roundToStep(rawRate)
-  }
-
-  const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {
-    setIsDragging(true)
-    const newRate = getPlaybackRateFromEvent(e.clientX)
-    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: newRate })
-  }
-
-  const handlePointerMove = (e: MouseEvent) => {
-    if (!isDragging) return;
-    const newRate = getPlaybackRateFromEvent(e.clientX)
-    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: newRate })
-  }
+  // the inverse of getHandlePosition, measured across the track rather than the padded row
+  const getPlaybackRateFromFraction = (fraction: number): number => roundToStep(MIN_RATE + (fraction * RANGE))
 
-  const handlePointerUp = () => {
-    setIsDragging(false)
-  }
+  const { handlers } = useDragValue({
+    ref: trackRef,
+    onChange: (fraction) => player.setPlaybackRate(getPlaybackRateFromFraction(fraction))
+  })
 
   const handleWheel = (e: WheelEvent) => {
     e.preventDefault()
     const step = 0.05
     let newRate = roundedRate
-    
+
     if (e.deltaY < 0) {
       newRate = Math.min(MAX_RATE, newRate + step)
     } else {
       newRate = Math.max(MIN_RATE, newRate - step)
     }
-    
-    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: newRate })
-  }
 
-  useEffect(() => {
-    window.addEventListener('mousemove', handlePointerMove)
-    window.addEventListener('mouseup', handlePointerUp)
-    return () => {
-      window.removeEventListener('mousemove', handlePointerMove)
-      window.removeEventListener('mouseup', handlePointerUp)
-    }
-  }, [isDragging])
+    player.setPlaybackRate(newRate)
+  }
 
   useEffect(() => {
     const slider = sliderRef.current
@@ -149,12 +126,13 @@ const PlaybackSlider = () => {
       <div
         className="playback-slider"
         ref={sliderRef}
-        onMouseDown={handlePointerDown}
+        {...handlers}
       >
         <div
+          ref={trackRef}
           style={{
-            background: `linear-gradient(to right, 
-              ${fillColor} 0% ${handlePosition}%, 
+            background: `linear-gradient(to right,
+              ${fillColor} 0% ${handlePosition}%,
               ${emptyColor} ${handlePosition}% 100%
             )`
           }}