@banou/media-player 0.6.2 → 0.8.0

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

@@ -0,0 +1,341 @@
+/// <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 { usePlayer } from '../player'
+import { useDragValue } from '../hooks/use-drag-value'
+import { fonts } from '../../utils/fonts'
+
+const style = css`
+  position: relative;
+  height: calc(.4 * var(--mp-unit));
+
+  --thumbnail-width: calc(25 * var(--mp-unit));
+  --thumbnail-half: calc(12.5 * var(--mp-unit));
+
+  transition: transform .2s ease-in-out;
+
+  margin: 0 12px;
+  @media (min-width: 768px) {
+    margin: 0 16px;
+  }
+  @media (min-width: 2560px) {
+    margin: 0 24px;
+  }
+
+  user-select: none;
+  cursor: pointer;
+
+  :hover {
+    .background-bar {
+      transform: scaleY(1.5);
+    }
+    .loaded {
+      transform: scaleY(1.5);
+      top: calc(-.1 * var(--mp-unit));
+    }
+    .play-container {
+      transform: scaleY(1.5);
+    }
+  }
+
+
+  .background-bar {
+    position: absolute;
+    inset: 0;
+    background-color: hsla(0, 100%, 100%, .2);
+  }
+
+  .cursor-time {
+    display: flex;
+    justify-content: center;
+
+    text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+    ${fonts.bMedium.bold}
+
+    position: absolute;
+    top: calc(-2.5 * var(--mp-unit));
+    width: calc(5 * var(--mp-unit));
+
+    margin-left: calc(-2.5 * var(--mp-unit));
+    pointer-events: none;
+  }
+
+  .loaded {
+    transform-origin: 0 0;
+    position: absolute;
+    bottom: 0;
+    height: calc(.4 * var(--mp-unit));
+    width: 100%;
+    .loaded-part {
+      transform-origin: 0 0;
+      bottom: 0;
+      height: calc(.4 * var(--mp-unit));
+      width: 100%;
+      position: absolute;
+      background-color: hsla(0, 100%, 100%, .4);
+    }
+  }
+
+  .play-container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: calc(.4 * var(--mp-unit));
+  }
+
+  .play {
+    transform-origin: 0 0;
+    background-color: #f03;
+    position: absolute;
+    bottom: 0;
+    height: calc(.4 * var(--mp-unit));
+    width: 100%;
+  }
+
+  .padding {
+    position: absolute;
+    bottom: -7.5px;
+    height: calc(2 * var(--mp-unit));
+    width: 100%;
+  }
+
+  .thumbnail {
+    display: flex;
+    justify-content: center;
+
+    position: absolute;
+    top: calc(calc(-3.4375 * var(--mp-unit)) - var(--thumbnail-width) * 9/16);
+    height: calc(var(--thumbnail-width) * 9/16);
+    width: var(--thumbnail-width);
+
+    margin-left: calc(var(--thumbnail-half) * -1);
+    pointer-events: none;
+
+    img {
+      border-radius: calc(.4 * var(--mp-unit));
+      box-shadow: 0 0 calc(1 * var(--mp-unit)) rgba(0, 0, 0, .5);
+
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  /* a thumb is far wider than a cursor, so the hit strip grows to 44px and the track thickens */
+  @media (pointer: coarse) {
+    height: calc(.6 * var(--mp-unit));
+
+    /* 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: calc(.6 * var(--mp-unit));
+      .loaded-part {
+        height: calc(.6 * var(--mp-unit));
+      }
+    }
+
+    .play-container {
+      height: calc(.6 * var(--mp-unit));
+    }
+
+    .play {
+      height: calc(.6 * var(--mp-unit));
+    }
+
+    /* 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: calc(18 * var(--mp-unit));
+    --thumbnail-half: calc(9 * var(--mp-unit));
+  }
+`
+
+export const ProgressBar = () => {
+  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 thumbnailAt = usePlayer((state) => state.thumbnailAt)
+
+  const progressBarRef = useRef<HTMLDivElement>(null)
+
+  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) => {
+    setProgressBarOverTime(timeAtClientX(ev.clientX))
+  }
+
+  const hideProgressBarTime = () => {
+    if (!progressBarRef.current) return
+    setProgressBarOverTime(undefined)
+  }
+
+  // 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(() =>
+    downloadedRanges
+      ?.map((range, i) => {
+        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)
+        if (!firstIndex || !lastIndex) return null
+        const start = firstIndex.timestamp / duration
+        const end = lastIndex.timestamp  / duration
+        const rangeDuration = Number((end - start).toFixed(2)) // to prevent cases like `0.9995140832939585`
+        const left = start * 100
+        return (
+          <div key={i} className="loaded-part" style={{ transform: `scaleX(${rangeDuration})`, marginLeft: `${left}%` }}></div>
+        )
+      })
+    ?? [],
+    [duration, indexes.length, downloadedRanges?.map(({ startByteOffset, endByteOffset }) => `${startByteOffset}/${endByteOffset}`).join(',')]
+  )
+
+  const cusorTimeString = useMemo(() => {
+    if (!progressBarHoverTime || progressBarHoverTime < 0) return undefined
+    const hours = Math.floor(progressBarHoverTime! / 3600)
+    const minutes = Math.floor((progressBarHoverTime! - hours * 3600) / 60)
+    const seconds = Math.floor(progressBarHoverTime! - hours * 3600 - minutes * 60)
+    const hoursString =
+      hours > 0
+        ? `${hours}:`
+        : ''
+    return `${hoursString}${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+  }, [progressBarHoverTime])
+
+  useEffect(() => {
+    if (seekFraction === undefined || !duration) return
+    const timestamp = seekFraction * duration
+    player.seek(timestamp)
+  }, [player, seekFraction, duration])
+
+  const scaleX = useMemo(() => {
+    return !duration || typeof currentTime !== 'number'
+      ? 0
+      : currentTime / duration
+  }, [duration, currentTime])
+
+  // an empty url is a gap sentinel, so it renders nothing
+  const thumbnail = useMemo(() => {
+    if (!progressBarHoverTime) return undefined
+    if (thumbnailAt) return thumbnailAt(progressBarHoverTime)
+    if (!thumbnails.length) return undefined
+    return (
+      thumbnails
+        .find(({ startTime, endTime }) =>
+          startTime <= progressBarHoverTime && progressBarHoverTime < endTime
+        )
+    )
+  }, [thumbnails, thumbnailAt, progressBarHoverTime])
+
+  return (
+    <div
+      css={style}
+      ref={progressBarRef}
+      className={dragging ? 'progress-bar dragging' : 'progress-bar'}
+      onMouseMove={onProgressBarOver}
+      onMouseOut={hideProgressBarTime}
+    >
+      <div className="background-bar" />
+      {
+        progressBarHoverTime
+          ? (
+            <div
+              className="cursor-time"
+              style={{ left: `clamp(calc(1.8 * var(--mp-unit)), ${timePercentage(progressBarHoverTime)}%, calc(100% - calc(1.8 * var(--mp-unit))))` }}
+            >
+              {cusorTimeString}
+            </div>
+          )
+          : undefined
+      }
+      <div className="progress"></div>
+      {/* bar showing the currently loaded progress */}
+      <div className="loaded">
+        {loadedParts}
+      </div>
+      {/* bar to show when hovering to potentially seek */}
+      <div className="hover"></div>
+      {/* bar displaying the current playback progress */}
+      <div className='play-container'>
+        <div className="play" style={{ transform: `scaleX(${scaleX})` }}></div>
+      </div>
+      <div className="chapters"></div>
+      <div className="scrubber"></div>
+      <div
+        className="padding"
+        {...handlers}
+        onPointerDown={onDragStart}
+        onPointerUp={onDragEnd}
+        onPointerCancel={onDragEnd}
+      ></div>
+      <div
+        className="thumbnail"
+        style={{ left: `clamp(var(--thumbnail-half), ${timePercentage(progressBarHoverTime ?? 1)}%, calc(100% - var(--thumbnail-half)))` }}
+      >
+        {
+          thumbnail?.url
+            ? <img src={thumbnail.url}/>
+            : undefined
+        }
+      </div>
+    </div>
+  )
+}
+
+export default ProgressBar