@banou/media-player 0.2.6 → 0.4.0

package/src/assets/picture-in-picture.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-picture-in-picture">
+	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path d="M11 19h-6a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v4" />
+	<path d="M14 14m0 1a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v3a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1z" />
+</svg>

package/src/components/chrome.tsx

@@ -0,0 +1,89 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import { MouseEventHandler, useContext, useRef, type HTMLAttributes } from 'react'
+
+import { css } from '@emotion/react'
+
+import { MediaMachineContext } from '../state-machines'
+import { MediaPlayerContext } from '../utils/context'
+import { togglePlay } from '../utils/actor-utils'
+import { Overlay } from './overlay'
+import ControlBar from './control-bar'
+
+const style = css`
+  position: relative;
+  background-color: black;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  & > div:not(:last-of-type) {
+    position: absolute;
+    z-index: 2;
+  }
+
+  canvas {
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+  }
+
+  .video, video {
+    height: 100%;
+    width: 100%;
+    background-color: black;
+  }
+
+  &.hide {
+    cursor: none;
+  }
+`
+
+export type ChromeOptions = {} & HTMLAttributes<HTMLDivElement>
+
+export const Chrome = ({ children }: ChromeOptions) => {
+  const mediaActor = MediaMachineContext.useActorRef()
+  const mediaPlayerContext = useContext(MediaPlayerContext)
+  const isPaused = MediaMachineContext.useSelector((state) => state.context.media.paused)
+  const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
+  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
+
+  const autoHide = useRef<number>()
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const mouseMove: MouseEventHandler<HTMLDivElement> = (ev) => {
+    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: false }))
+    if (autoHide.current) clearInterval(autoHide.current)
+    const timeout = setTimeout(() => {
+      mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
+    }, 3_000) as unknown as number
+    autoHide.current = timeout
+  }
+
+  const mouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
+    if (ev.currentTarget.parentElement !== ev.relatedTarget && ev.relatedTarget !== null) return
+    mediaPlayerContext.update(({ ...mediaPlayerContext, hideUI: true }))
+  }
+
+  return (
+    <div
+      css={style}
+      ref={containerRef}
+      onMouseMove={mouseMove}
+      onMouseOut={mouseOut}
+      className={mediaPlayerContext.hideUI ? 'hide' : ''}
+    >
+      <Overlay />
+      <ControlBar containerRef={containerRef} />
+      <div
+        className='video'
+        onClick={() => togglePlay(mediaActor, isPaused, duration, currentTime)}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default Chrome

package/src/components/control-bar.tsx

@@ -0,0 +1,330 @@
+import { RefObject, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { css } from '@emotion/react'
+import { Maximize, Minimize, Pause, Play, RotateCcw } from 'react-feather'
+
+import { MediaMachineContext } from '../state-machines'
+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 SettingsAction from './settings'
+import colors from '../utils/colors'
+import Sound from './sound'
+import { linearToLogVolume, logToLinearVolume } from '../utils/volume-utils'
+
+const style = css`
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  background: linear-gradient(0deg,#000 0,rgba(0,0,0,.4) 60%,transparent);
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+
+  .actions {
+    display: flex;
+    justify-content: space-between;
+
+    padding: 6px 12px;
+    @media (min-width: 768px) {
+      padding: 8px 16px;
+    }
+    @media (min-width: 2560px) {
+      padding: 8px 24px;
+    }
+
+    .left, .right {
+      display: flex;
+      align-items: center;
+
+      button {
+        display: flex;
+        align-items: center;
+
+        outline: none;
+        border: none;
+        background: none;
+
+        svg {
+          width: 18px;
+          height: 18px;
+          @media (min-width: 768px) {
+            width: 24px;
+            height: 24px;
+          }
+          @media (min-width: 2560px) {
+            width: 28px;
+            height: 28px;
+          }
+        }
+
+        svg {
+          stroke: #fff;
+        }
+      }
+
+      // Add basic styling for all the actions
+      .play, .sound, .time, .settings, .picture-in-picture, .full-screen {
+        display: flex;
+        align-items: center;
+
+        height: 100%;
+
+        border-radius: 4px;
+        user-select: none;
+
+        padding: 8px;
+        @media (min-width: 768px) {
+          padding: 8px 12px;
+        }
+        @media (min-width: 2560px) {
+          padding: 8px 12px;
+        }
+      }
+
+      // Add styling to the actions that have some interactivity
+      .play, .sound, .settings, .picture-in-picture, .full-screen {
+        border-radius: 4px;
+
+        padding: 8px;
+        @media (min-width: 768px) {
+          padding: 8px 12px;
+        }
+        @media (min-width: 2560px) {
+          padding: 8px 12px;
+        }
+
+        cursor: pointer;
+
+        :hover {
+          background-color: ${colors.hover};
+        }
+      }
+    }
+
+    .left {
+      .time {
+        ${fonts.bMedium.regular}
+      }
+    }
+    .right {
+
+      .picture-in-picture {
+        img {
+          width: 22px;
+          height: 22px;
+          @media (min-width: 768px) {
+            width: 28px;
+            height: 28px;
+          }
+          @media (min-width: 2560px) {
+            width: 32px;
+            height: 32px;
+          }
+        }
+      }
+    }
+  }
+`
+
+export const ControlBar = ({
+  containerRef
+}: {
+  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 [isFullscreen, setIsFullscreen] = useState(false)
+
+  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()
+    }
+  }
+
+  const modifyVolume = useCallback(({ direction, stepSize }: { direction: 'up' | 'down', stepSize: number }) => {
+    if (!mediaActor) return
+    const linearVolume = logToLinearVolume(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])
+
+  useEffect(() => {
+    const eventListener = (ev: KeyboardEvent) => {
+      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 })
+      }
+      else if (ev.key === 'ArrowUp') {
+        modifyVolume({ direction: 'up', stepSize: 0.05 })
+      }
+      else if (ev.key === 'ArrowDown') {
+        modifyVolume({ direction: 'down', stepSize: 0.05 })
+      }
+      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 })
+        }
+      }
+      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 })
+        }
+      }
+      else {
+        shouldPreventDefault = false
+      }
+      
+      if (shouldPreventDefault) {
+        ev.preventDefault()
+      }
+    }
+    window.addEventListener('keydown', eventListener)
+    return () => window.removeEventListener('keydown', eventListener)
+  }, [mediaActor, volume, muted, isPaused, currentTime, duration])
+
+  const handleWheel = useCallback((e: WheelEvent) => {
+    e.preventDefault()
+    if (e.deltaY < 0) { // scroll up
+      modifyVolume({ direction: 'up', stepSize: 0.05 })
+    } else { // scroll down
+      modifyVolume({ direction: 'down', stepSize: 0.05 })
+    }
+  }, [modifyVolume])
+
+  useEffect(() => {
+    if (!volumeElement) return
+    volumeElement.addEventListener('wheel', handleWheel, { passive: false })
+    return () => volumeElement.removeEventListener('wheel', handleWheel)
+  }, [volumeElement, modifyVolume])
+
+  return (
+    <div css={style} style={{ ...chromeContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}>
+      <ProgressBar />
+      <div className='actions'>
+        <div className='left'>
+          <TooltipDisplay
+            id='play'
+            tooltipPlace='top-start'
+            text={
+              <button
+                className='play'
+                type='button'
+                onClick={() => togglePlay(mediaActor, isPaused, duration, currentTime)}
+              >
+                {
+                  duration === currentTime
+                    ? <RotateCcw />
+                    : isPaused
+                      ? <Play />
+                      : <Pause />
+                }
+              </button>
+            }
+            toolTipText={
+              <span>
+                {
+                  duration === currentTime
+                    ? 'Replay (k)'
+                    : isPaused
+                      ? 'Play (k)'
+                      : 'Pause (k)'
+                }
+              </span>
+            }
+          /> 
+          <Sound ref={setVolumeElement}/>
+          <div className='time'>
+            {formatMediaTime(currentTime, duration)}
+          </div>
+        </div>
+        <div className='right'>
+          <SettingsAction />
+          <TooltipDisplay
+            id='picture-in-picture'
+            text={
+              <button
+                className='picture-in-picture'
+                type='button'
+              >
+                <img src={pictureInPicture}  />
+              </button>
+            }
+            toolTipText={
+              <span>
+                Picture in picture
+              </span>
+            }
+          />
+          <TooltipDisplay
+            id='full-screen'
+            tooltipPlace='top-end'
+            text={
+              <button
+                className='full-screen'
+                type='button'
+                onClick={toggleFullScreen}
+              >
+                {
+                  isFullscreen
+                    ? <Minimize />
+                    : <Maximize />
+                }
+              </button>
+            }
+            toolTipText={
+              <span>
+                {
+                  isFullscreen
+                    ? 'Exit full screen (f)'
+                    : 'Full screen (f)'
+                }
+              </span>
+            }
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ControlBar

package/src/components/overlay.tsx

@@ -0,0 +1,28 @@
+/// <reference types="@emotion/react/types/css-prop" />
+
+import { ClassAttributes, useCallback, useEffect, useState } from 'react'
+
+import { MediaMachineContext } from '../state-machines'
+
+export const Overlay = () => {
+  const mediaActor = MediaMachineContext.useActorRef()
+
+  const [canvasElement, setCanvasElement] = useState<HTMLCanvasElement | null>()
+  const refFunction: ClassAttributes<HTMLCanvasElement>['ref'] = useCallback((element: HTMLCanvasElement | null) => {
+    setCanvasElement(element)
+  }, [])
+
+  useEffect(() => {
+    if (!canvasElement) return
+    mediaActor.send({
+      type: 'SET_CANVAS_ELEMENT',
+      canvasElement,
+    })
+  }, [canvasElement])
+
+  return (
+    <>
+      <canvas ref={refFunction}/>
+    </>
+  )
+}

package/src/components/progress-bar.tsx

@@ -0,0 +1,252 @@
+import { DOMAttributes, useContext, 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'
+
+const style = css`
+  position: relative;
+  height: .4rem;
+
+  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: -.1rem;
+    }
+    .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: -2.5rem;
+    width: 5rem;
+
+    margin-left: -2.5rem;
+    pointer-events: none;
+  }
+
+  .loaded {
+    transform-origin: 0 0;
+    position: absolute;
+    bottom: 0;
+    height: .4rem;
+    width: 100%;
+    div {
+      width: 100%;
+      transform-origin: 0 0;
+      height: .4rem;
+      background-color: hsla(0, 100%, 100%, .4);
+    }
+  }
+
+  .play-container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    height: .4rem;
+  }
+
+  .play {
+    transform-origin: 0 0;
+    background-color: #f03;
+    position: absolute;
+    bottom: 0;
+    height: .4rem;
+    width: 100%;
+  }
+  
+  .padding {
+    position: absolute;
+    bottom: -7.5px;
+    height: 2rem;
+    width: 100%;
+  }
+
+  .thumbnail {
+    display: flex;
+    justify-content: center;
+
+    position: absolute;
+    top: -17.5rem;
+    height: calc(25rem * 9/16);
+    width: 25rem;
+
+    margin-left: -12.5rem;
+    pointer-events: none;
+
+    img {
+      border-radius: .4rem;
+      box-shadow: 0 0 1rem rgba(0, 0, 0, .5);
+
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  .loaded-part {
+    transform-origin: 0 0;
+    position: absolute;
+    background-color: hsla(0, 100%, 100%, .4);
+  }
+`
+
+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 thumbnails = MediaMachineContext.useSelector((state) => state.context.thumbnails)
+
+  const mediaPlayerContext = useContext(MediaPlayerContext)
+
+  const progressBarRef = useRef<HTMLDivElement>(null)
+  const { scrub: seekScrub, value: seekScrubValue, setValue: setSeekValue } = useScrub({ ref: progressBarRef })
+  
+  const [progressBarHoverTime, setProgressBarOverTime] = useState<number | undefined>(undefined)
+
+  const onProgressBarOver: DOMAttributes<HTMLDivElement>['onMouseMove'] = (ev) => {
+    const percentage = ev.nativeEvent.offsetX / ev.currentTarget.offsetWidth
+    const time = percentage * (duration ?? 0)
+    setProgressBarOverTime(time)
+  }
+
+  const hideProgressBarTime = () => {
+    if (!progressBarRef.current) return
+    setProgressBarOverTime(undefined)
+  }
+
+  const loadedParts = useMemo(() =>
+    mediaPlayerContext
+      .downloadedRanges
+      ?.map((range, i) => {
+        if ('startByteOffset' in range && 'endByteOffset' in range && mediaPlayerContext.size) {
+          const start = range.startByteOffset / mediaPlayerContext.size
+          const end = range.endByteOffset / mediaPlayerContext.size
+          const duration = end - start
+          const left = start * 100
+          return (
+            <div key={i} className="loaded-part" style={{ transform: `scaleX(${duration})`, marginLeft: `${left}%` }}></div>
+          )
+        } else {
+          return null
+        }
+      })
+    ?? [],
+    [mediaPlayerContext.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 (!mediaActor || seekScrubValue === undefined || !duration) return
+    const timestamp = seekScrubValue * duration
+    mediaActor.send({ type: 'SET_TIME', value: timestamp })
+  }, [mediaActor, seekScrubValue, duration])
+
+  const scaleX = useMemo(() => {
+    return typeof duration !== 'number' || typeof currentTime !== 'number'
+      ? 0
+      : 1 / ((duration ?? 0) / (currentTime ?? 0))
+  }, [duration, currentTime])
+
+  const thumbnail = useMemo(() => {
+    if (!thumbnails.length || !progressBarHoverTime) return undefined
+    return (
+      thumbnails
+        .find(({ timestamp, duration }) =>
+          timestamp <= progressBarHoverTime && progressBarHoverTime <= timestamp + duration
+        )
+    )
+  }, [thumbnails.length, progressBarHoverTime])
+
+  return (
+    <div
+      css={style}
+      ref={progressBarRef}
+      className="progress-bar"
+      onMouseMove={onProgressBarOver}
+      onMouseOut={hideProgressBarTime}
+    >
+      <div className="background-bar" />
+      {
+        progressBarHoverTime
+          ? (
+            <div
+              className="cursor-time"
+              style={{ left: `clamp(1.8rem, ${1 / ((duration ?? 0) / (progressBarHoverTime ?? 1)) * 100}%, calc(100% - 1.8rem))` }}
+            >
+              {cusorTimeString}
+            </div>
+          )
+          : undefined
+      }
+      <div className="progress"></div>
+      {/* bar showing the currently loaded progress */}
+      <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 */}
+      <div className='play-container'>
+        <div className="play" style={{ transform: `scaleX(${scaleX})` }}></div>
+      </div>
+      <div className="chapters"></div>
+      <div className="scrubber"></div>
+      <div className="padding" onMouseDown={seekScrub}></div>
+      <div
+        className="thumbnail"
+        style={{ left: `clamp(12.5rem, ${1 / ((duration ?? 0) / (progressBarHoverTime ?? 1)) * 100}%, calc(100% - 12.5rem))` }}
+      >
+        {
+          thumbnail
+            ? <img src={thumbnail.url}/>
+            : undefined
+        }
+      </div>
+    </div>
+  )
+}