@banou/media-player 0.6.2 → 0.7.0

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

@@ -1,15 +1,20 @@
-import { DOMAttributes, useContext, useEffect, useMemo, useRef, useState } from 'react'
+/// <reference types="@emotion/react/types/css-prop" />
+import type { DOMAttributes } from 'react'
+
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { css } from '@emotion/react'
 
-import { MediaMachineContext } from '../state-machines'
-import { MediaPlayerContext } from '../utils/context'
-import useScrub from '../utils/use-scrub'
-import { fonts } from '../utils/fonts'
+import { usePlayer } from '../player'
+import { useDragValue } from '../hooks/use-drag-value'
+import { fonts } from '../../utils/fonts'
 
 const style = css`
   position: relative;
   height: .4rem;
 
+  --thumbnail-width: 25rem;
+  --thumbnail-half: 12.5rem;
+
   transition: transform .2s ease-in-out;
 
   margin: 0 12px;
@@ -36,6 +41,7 @@ const style = css`
     }
   }
 
+
   .background-bar {
     position: absolute;
     inset: 0;
@@ -88,7 +94,7 @@ const style = css`
     height: .4rem;
     width: 100%;
   }
-  
+
   .padding {
     position: absolute;
     bottom: -7.5px;
@@ -101,11 +107,11 @@ const style = css`
     justify-content: center;
 
     position: absolute;
-    top: -17.5rem;
-    height: calc(25rem * 9/16);
-    width: 25rem;
+    top: calc(-3.4375rem - var(--thumbnail-width) * 9/16);
+    height: calc(var(--thumbnail-width) * 9/16);
+    width: var(--thumbnail-width);
 
-    margin-left: -12.5rem;
+    margin-left: calc(var(--thumbnail-half) * -1);
     pointer-events: none;
 
     img {
@@ -117,26 +123,97 @@ const style = css`
       object-fit: cover;
     }
   }
+
+  /* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track to .6rem */
+  @media (pointer: coarse) {
+    height: .6rem;
+
+    /* press feedback, coarse only: a finger has no hover, so without this the bar gives no sign
+       it is being dragged */
+    &.dragging {
+      .background-bar, .loaded, .play-container {
+        transform: scaleY(1.5);
+      }
+    }
+
+    .loaded {
+      height: .6rem;
+      .loaded-part {
+        height: .6rem;
+      }
+    }
+
+    .play-container {
+      height: .6rem;
+    }
+
+    .play {
+      height: .6rem;
+    }
+
+    /* grows upward into the video: centred, it would hang over the control row and win hit
+       testing against taps meant for play, mute and fullscreen */
+    .padding {
+      height: 44px;
+      bottom: 0;
+    }
+  }
+
+  /* the clamp only holds the preview inside the bar while the bar is the wider of the two, so
+     below that the preview is narrowed instead */
+  @media (max-width: 480px) {
+    --thumbnail-width: 18rem;
+    --thumbnail-half: 9rem;
+  }
 `
 
 export const ProgressBar = () => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
-  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
-  const indexes = MediaMachineContext.useSelector((state) => state.context.indexes)
-  const thumbnails = MediaMachineContext.useSelector((state) => state.context.thumbnails)
-
-  const mediaPlayerContext = useContext(MediaPlayerContext)
+  const player = usePlayer()
+  const currentTime = usePlayer((state) => state.currentTime)
+  const duration = usePlayer((state) => state.duration)
+  const size = usePlayer((state) => state.size)
+  const downloadedRanges = usePlayer((state) => state.downloadedRanges)
+  const indexes = usePlayer((state) => state.indexes)
+  const thumbnails = usePlayer((state) => state.thumbnails)
 
   const progressBarRef = useRef<HTMLDivElement>(null)
-  const { scrub: seekScrub, value: seekScrubValue, setValue: setSeekValue } = useScrub({ ref: progressBarRef })
-  
+
+  const [seekFraction, setSeekFraction] = useState<number | undefined>(undefined)
   const [progressBarHoverTime, setProgressBarOverTime] = useState<number | undefined>(undefined)
 
+  // onChange reports a bare fraction, so the device that opened the gesture is recorded on press
+  const dragPointerType = useRef<string | undefined>(undefined)
+
+  const onSeekDrag = (fraction: number) => {
+    setSeekFraction(fraction)
+    if (dragPointerType.current === 'mouse') return
+    setProgressBarOverTime(fraction * duration)
+  }
+
+  const { dragging, handlers } = useDragValue({ ref: progressBarRef, onChange: onSeekDrag })
+
+  const onDragStart: DOMAttributes<HTMLDivElement>['onPointerDown'] = (ev) => {
+    dragPointerType.current = ev.pointerType
+    handlers.onPointerDown(ev)
+  }
+
+  const onDragEnd: DOMAttributes<HTMLDivElement>['onPointerUp'] = (ev) => {
+    handlers.onPointerUp(ev)
+    // a lifted finger leaves nothing over the bar, so the preview it opened closes with it
+    if (ev.pointerType === 'mouse') return
+    setProgressBarOverTime(undefined)
+  }
+
+  // offsetX is relative to whichever child is under the pointer, and a captured pointer has none
+  const timeAtClientX = (clientX: number) => {
+    if (!progressBarRef.current) return undefined
+    const { left, right } = progressBarRef.current.getBoundingClientRect()
+    const fraction = Math.min(Math.max((clientX - left) / (right - left), 0), 1)
+    return fraction * duration
+  }
+
   const onProgressBarOver: DOMAttributes<HTMLDivElement>['onMouseMove'] = (ev) => {
-    const percentage = ev.nativeEvent.offsetX / ev.currentTarget.offsetWidth
-    const time = percentage * (duration ?? 0)
-    setProgressBarOverTime(time)
+    setProgressBarOverTime(timeAtClientX(ev.clientX))
   }
 
   const hideProgressBarTime = () => {
@@ -144,12 +221,14 @@ export const ProgressBar = () => {
     setProgressBarOverTime(undefined)
   }
 
-  // file download % does not equal video time %, as the video contains sometimes, big headers including fonts, which might be ~50mb
+  // duration is 0 until metadata lands, which is never a divisor
+  const timePercentage = (time: number) => duration ? (time / duration) * 100 : 0
+
+  // download percentage is not time percentage: headers and fonts can run to tens of megabytes
   const loadedParts = useMemo(() =>
-    mediaPlayerContext
-      .downloadedRanges
+    downloadedRanges
       ?.map((range, i) => {
-        if (!mediaPlayerContext.size || !duration) return null
+        if (!size || !duration) return null
         const matchingIndexes = indexes.filter(index => range.startByteOffset <= index.pos && index.pos <= range.endByteOffset)
         const firstIndex = matchingIndexes.at(0)
         const lastIndex = matchingIndexes.at(-1)
@@ -163,7 +242,7 @@ export const ProgressBar = () => {
         )
       })
     ?? [],
-    [duration, indexes.length, mediaPlayerContext.downloadedRanges?.map(({ startByteOffset, endByteOffset }) => `${startByteOffset}/${endByteOffset}`).join(',')]
+    [duration, indexes.length, downloadedRanges?.map(({ startByteOffset, endByteOffset }) => `${startByteOffset}/${endByteOffset}`).join(',')]
   )
 
   const cusorTimeString = useMemo(() => {
@@ -179,23 +258,24 @@ export const ProgressBar = () => {
   }, [progressBarHoverTime])
 
   useEffect(() => {
-    if (!mediaActor || seekScrubValue === undefined || !duration) return
-    const timestamp = seekScrubValue * duration
-    mediaActor.send({ type: 'SET_TIME', value: timestamp })
-  }, [mediaActor, seekScrubValue, duration])
+    if (seekFraction === undefined || !duration) return
+    const timestamp = seekFraction * duration
+    player.seek(timestamp)
+  }, [player, seekFraction, duration])
 
   const scaleX = useMemo(() => {
-    return typeof duration !== 'number' || typeof currentTime !== 'number'
+    return !duration || typeof currentTime !== 'number'
       ? 0
-      : 1 / ((duration ?? 0) / (currentTime ?? 0))
+      : currentTime / duration
   }, [duration, currentTime])
 
+  // an empty url is a gap sentinel, so it renders nothing
   const thumbnail = useMemo(() => {
     if (!thumbnails.length || !progressBarHoverTime) return undefined
     return (
       thumbnails
-        .find(({ timestamp, duration }) =>
-          timestamp <= progressBarHoverTime && progressBarHoverTime <= timestamp + duration
+        .find(({ startTime, endTime }) =>
+          startTime <= progressBarHoverTime && progressBarHoverTime < endTime
         )
     )
   }, [thumbnails.length, progressBarHoverTime])
@@ -204,7 +284,7 @@ export const ProgressBar = () => {
     <div
       css={style}
       ref={progressBarRef}
-      className="progress-bar"
+      className={dragging ? 'progress-bar dragging' : 'progress-bar'}
       onMouseMove={onProgressBarOver}
       onMouseOut={hideProgressBarTime}
     >
@@ -214,7 +294,7 @@ export const ProgressBar = () => {
           ? (
             <div
               className="cursor-time"
-              style={{ left: `clamp(1.8rem, ${1 / ((duration ?? 0) / (progressBarHoverTime ?? 1)) * 100}%, calc(100% - 1.8rem))` }}
+              style={{ left: `clamp(1.8rem, ${timePercentage(progressBarHoverTime)}%, calc(100% - 1.8rem))` }}
             >
               {cusorTimeString}
             </div>
@@ -226,7 +306,6 @@ export const ProgressBar = () => {
       <div className="loaded">
         {loadedParts}
       </div>
-      {/* <div className="load" style={{ transform: `scaleX(${1 / ((duration ?? 0) / (loadedTime?.[1] ?? 0))})` }}></div> */}
       {/* bar to show when hovering to potentially seek */}
       <div className="hover"></div>
       {/* bar displaying the current playback progress */}
@@ -235,13 +314,19 @@ export const ProgressBar = () => {
       </div>
       <div className="chapters"></div>
       <div className="scrubber"></div>
-      <div className="padding" onMouseDown={seekScrub}></div>
+      <div
+        className="padding"
+        {...handlers}
+        onPointerDown={onDragStart}
+        onPointerUp={onDragEnd}
+        onPointerCancel={onDragEnd}
+      ></div>
       <div
         className="thumbnail"
-        style={{ left: `clamp(12.5rem, ${1 / ((duration ?? 0) / (progressBarHoverTime ?? 1)) * 100}%, calc(100% - 12.5rem))` }}
+        style={{ left: `clamp(var(--thumbnail-half), ${timePercentage(progressBarHoverTime ?? 1)}%, calc(100% - var(--thumbnail-half)))` }}
       >
         {
-          thumbnail
+          thumbnail?.url
             ? <img src={thumbnail.url}/>
             : undefined
         }
@@ -249,3 +334,5 @@ export const ProgressBar = () => {
     </div>
   )
 }
+
+export default ProgressBar

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

@@ -0,0 +1,391 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { css } from '@emotion/react'
+import { ChevronLeft, ChevronRight, Settings } from 'react-feather'
+
+import { usePlayer } from '../player'
+import { TooltipDisplay } from './tooltip-display'
+import { fonts } from '../../utils/fonts'
+import { labelTracks, type LabelledTrack } from '../../utils/track-label'
+import PlaybackSlider from './playback-slider'
+
+const style = css`
+position: relative;
+
+.settings {
+  /* the icon keeps its size, the pressable box grows around it */
+  @media (pointer: coarse) {
+    box-sizing: border-box;
+    justify-content: center;
+
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+
+.popover {
+  position: absolute;
+  /* the gear sits a couple of buttons in from the right edge, so a centred popover hangs off that
+     edge on a phone. It anchors to the button instead until the viewport has room to centre it. */
+  right: 0;
+  transform: none;
+
+  overflow-y: auto;
+  width: 180px;
+  max-width: calc(100vw - 24px);
+  height: 160px;
+  top: -180px;
+  @media (min-width: 768px) {
+    right: 50%;
+    transform: translateX(50%);
+    width: 250px;
+    height: 160px;
+  }
+
+  display: flex;
+  flex-direction: column;
+
+  border-radius: 8px;
+  background-color: rgba(28,28,28,0.95);
+  ${fonts.bMedium.regular}
+
+  z-index: 4;
+
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    color: #fff;
+    outline: none;
+
+    padding: 8px 6px 8px 12px;
+
+    width: 100%;
+    /* rows keep their own height inside the fixed height column, so a long page scrolls rather than
+       squashing every row into it */
+    flex-shrink: 0;
+    @media (pointer: coarse) {
+      box-sizing: border-box;
+      min-height: 44px;
+    }
+
+    :first-of-type {
+      border-radius: 8px 8px 0 0;
+    }
+    :last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+    :not(&.no-hover) {
+      cursor: pointer;
+    }
+    :not(&.no-hover):hover {
+      background-color: rgba(255,255,255,.1);
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .secondary {
+        color: #eee;
+        ${fonts.bSmall.regular}
+      }
+    }
+  }
+
+  .back {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    border-bottom: 1px solid #4D4D4E;
+
+    svg {
+      transform: translateX(-4px);
+      transition: transform 0.2s ease-in-out;
+    }
+
+    :hover {
+      svg {
+        transform: translateX(-8px);
+      }
+    }
+  }
+}
+
+.playback-rate {
+  .slider {
+    width: 100%;
+  }
+  .options {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    align-items: center;
+
+    padding: 8px 12px;
+    /* four presets across a 180px popover leave targets 34px wide, so a finger gets two rows of two
+       until the popover is wide enough for the row of four */
+    @media (pointer: coarse) {
+      grid-template-columns: 1fr 1fr;
+    }
+    @media (pointer: coarse) and (min-width: 768px) {
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      border-radius: 4px;
+
+      padding: 8px 6px;
+      height: 100%;
+      @media (pointer: coarse) {
+        box-sizing: border-box;
+        min-height: 44px;
+      }
+
+      cursor: pointer;
+      :hover {
+        background-color: rgba(255,255,255,.1);
+      }
+    }
+  }
+}
+
+.track-list {
+  .description {
+    word-break: break-word;
+  }
+}
+`
+
+enum PopoverContent {
+  Default,
+  PlaybackRate,
+  Subtitles,
+  Audio
+}
+
+type TrackRow = { streamIndex: number, label: string }
+
+const toTrackRows = <T extends LabelledTrack>(streams: T[]): TrackRow[] =>
+  labelTracks(streams).map(({ track, label }) => ({ streamIndex: track.streamIndex, label }))
+
+/** One track picker, shared by the subtitle and audio menus. */
+const TrackMenu = (
+  { title, tracks, selected, onSelect, onBack, allowDisable }: {
+    title: string
+    tracks: TrackRow[]
+    selected: number | undefined
+    onSelect: (streamIndex: number | undefined) => void
+    onBack: () => void
+    allowDisable?: boolean
+  }
+) => (
+  <div className='popover track-list'>
+    <div className="back" onClick={onBack}>
+      <ChevronLeft />
+      <span>{title}</span>
+    </div>
+    {
+      allowDisable
+        ? (
+          <div onClick={() => onSelect(undefined)}>
+            <span>Disable</span>
+            <span>{selected === undefined ? '✓' : ''}</span>
+          </div>
+        )
+        : null
+    }
+    {
+      tracks.map(({ streamIndex, label }) => (
+        <div
+          key={streamIndex}
+          onClick={() => onSelect(streamIndex)}
+          className="description"
+        >
+          <span>{label}</span>
+          <span>{selected === streamIndex ? '✓' : ''}</span>
+        </div>
+      ))
+    }
+  </div>
+)
+
+export const SettingsAction = () => {
+  const player = usePlayer()
+  const playbackRate = usePlayer((state) => state.playbackRate)
+  const subtitleStreams = usePlayer((state) => state.subtitleStreams)
+  const selectedSubtitleStream = usePlayer((state) => state.selectedSubtitleStream)
+  const selectSubtitleStream = usePlayer((state) => state.selectSubtitleStream)
+  const audioStreams = usePlayer((state) => state.audioStreams)
+  const selectedAudioStream = usePlayer((state) => state.selectedAudioStream)
+  const selectAudioStream = usePlayer((state) => state.selectAudioStream)
+
+  const [isOpenPopover, setIsOpenPopover] = useState(false)
+  const [popoverContent, setPopoverContent] = useState(PopoverContent.Default)
+  const settingsContainerRef = useRef<HTMLDivElement>(null)
+
+  const togglePopover = () => {
+    setIsOpenPopover(!isOpenPopover)
+    setPopoverContent(PopoverContent.Default)
+  }
+
+  const setPlaybackRate = (rate: number) => {
+    player.setPlaybackRate(rate)
+    setPopoverContent(PopoverContent.Default)
+  }
+
+  useEffect(() => {
+    const handleClickOutside = (ev: PointerEvent) => {
+      if (
+        isOpenPopover &&
+        settingsContainerRef.current &&
+        !settingsContainerRef.current.contains(ev.target as Node)
+      ) {
+        togglePopover()
+      }
+    }
+    // pointerdown, because a touch device synthesizes mousedown too late to close reliably
+    document.addEventListener('pointerdown', handleClickOutside)
+    return () => document.removeEventListener('pointerdown', handleClickOutside)
+  }, [isOpenPopover])
+
+  const subtitleTracks = useMemo(() => toTrackRows(subtitleStreams), [subtitleStreams])
+  const audioTracks = useMemo(() => toTrackRows(audioStreams), [audioStreams])
+
+  const chooseSubtitle = (streamIndex: number | undefined) => {
+    selectSubtitleStream(streamIndex)
+    togglePopover()
+  }
+
+  const chooseAudio = (streamIndex: number | undefined) => {
+    // the audio menu never offers "Disable"
+    if (streamIndex !== undefined) selectAudioStream(streamIndex)
+    togglePopover()
+  }
+
+  const changePopoverContent = (newPopoverContent: PopoverContent) => () => {
+    setPopoverContent(newPopoverContent)
+  }
+
+  return (
+    <div css={style} ref={settingsContainerRef}>
+      <TooltipDisplay
+        id='settings'
+        disabled={isOpenPopover}
+        text={
+          <button
+            className='settings'
+            type='button'
+            onClick={togglePopover}
+          >
+            <Settings />
+          </button>
+        }
+        toolTipText={
+          <span>
+            Settings
+          </span>
+        }
+      />
+      {
+        isOpenPopover && popoverContent === PopoverContent.Default && (
+          <div className='popover menu'>
+            {/*
+              A row is offered only where there is more than one thing behind it to choose between.
+              Audio needs two tracks for that; subtitles need one, because "Disable" is always a
+              second option, and a file with no subtitles at all should not offer the menu.
+            */}
+            {audioTracks.length > 1
+              ? (
+                <div onClick={changePopoverContent(PopoverContent.Audio)}>
+                  <div>Audio</div>
+                  <div>
+                    <ChevronRight />
+                  </div>
+                </div>
+              )
+              : null}
+            {subtitleTracks.length > 0
+              ? (
+                <div onClick={changePopoverContent(PopoverContent.Subtitles)}>
+                  <div>Subtitles</div>
+                  <div>
+                    <ChevronRight />
+                  </div>
+                </div>
+              )
+              : null}
+            <div onClick={changePopoverContent(PopoverContent.PlaybackRate)}>
+              <div>Playback speed</div>
+              <div>
+                <span className='secondary'>
+                  {
+                    playbackRate === 1
+                      ? '(Default)'
+                      : playbackRate.toFixed(2)
+                  }
+                </span>
+                <ChevronRight />
+              </div>
+            </div>
+          </div>
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.PlaybackRate && (
+          <div className='popover playback-rate'>
+            <div className="back" onClick={changePopoverContent(PopoverContent.Default)}>
+              <ChevronLeft />
+              <span>Playback speed</span>
+            </div>
+            <div className="slider no-hover">
+              <PlaybackSlider />
+            </div>
+            <div className="options no-hover">
+              <div onClick={() => setPlaybackRate(0.5)}>
+                0.5x
+              </div>
+              <div onClick={() => setPlaybackRate(1)}>
+                1x
+              </div>
+              <div onClick={() => setPlaybackRate(1.5)}>
+                  1.5x
+              </div>
+              <div onClick={() => setPlaybackRate(2)}>
+                2x
+              </div>
+            </div>
+          </div>
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.Subtitles && (
+          <TrackMenu
+            title='Subtitles'
+            tracks={subtitleTracks}
+            selected={selectedSubtitleStream}
+            onSelect={chooseSubtitle}
+            onBack={changePopoverContent(PopoverContent.Default)}
+            allowDisable
+          />
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.Audio && (
+          <TrackMenu
+            title='Audio'
+            tracks={audioTracks}
+            selected={selectedAudioStream}
+            onSelect={chooseAudio}
+            onBack={changePopoverContent(PopoverContent.Default)}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default SettingsAction