@banou/media-player 0.6.2 → 0.8.0

package/src/components/progress-bar.tsx

@@ -1,251 +0,0 @@
-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%;
-    .loaded-part {
-      transform-origin: 0 0;
-      bottom: 0;
-      height: .4rem;
-      width: 100%;
-      position: absolute;
-      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;
-    }
-  }
-`
-
-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 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)
-  }
-
-  // file download % does not equal video time %, as the video contains sometimes, big headers including fonts, which might be ~50mb
-  const loadedParts = useMemo(() =>
-    mediaPlayerContext
-      .downloadedRanges
-      ?.map((range, i) => {
-        if (!mediaPlayerContext.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, 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>
-  )
-}

package/src/components/settings.tsx

@@ -1,322 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from "react"
-import { css } from "@emotion/react"
-import { ChevronLeft, ChevronRight, Settings } from "react-feather"
-
-import { MediaMachineContext } from "../state-machines"
-import { TooltipDisplay } from "./tooltip-display"
-import { fonts } from "../utils/fonts"
-import PlaybackSlider from "./playback-slider"
-import useLocalStorage, { booleanType } from "../utils/use-local-storage"
-
-const style = css`
-position: relative;
-
-.popover {
-  position: absolute;
-  right: 50%;
-  transform: translateX(50%);
-
-  overflow-y: auto;
-  width: 180px;
-  height: 160px;
-  top: -180px;
-  @media (min-width: 768px) {
-    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%;
-
-    :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;
-
-    > div {
-      display: flex;
-      align-items: center;
-      border-radius: 4px;
-
-      padding: 8px 6px;
-      height: 100%;
-
-      cursor: pointer;
-      :hover {
-        background-color: rgba(255,255,255,.1);
-      }
-    }
-  }
-}
-
-.subtitle {
-  .description {
-    word-break: break-word;
-  }
-}
-`
-
-enum PopoverContent {
-  Default,
-  PlaybackRate,
-  Advanced,
-  SelectNewSources,
-  Subtitles
-}
-
-const SettingsAction = () => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const playbackRate = MediaMachineContext.useSelector((state) => state.context.media.playbackRate)
-  const subtitleStreams = MediaMachineContext.useSelector((state) => state.context.subtitleStreams)
-  const selectedSubtitleStreamIndex = MediaMachineContext.useSelector((state) => state.context.selectedSubtitleStreamIndex)
-  const [hideMediaStats, setHideMediaStats] = useLocalStorage('hideMediaStats', 'false') as [booleanType, (newValue: booleanType) => void]
-
-  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) => {
-    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: rate })
-    setPopoverContent(PopoverContent.Default)
-  }
-
-  useEffect(() => {
-    const handleClickOutside = (ev: MouseEvent) => {
-      if (
-        isOpenPopover &&
-        settingsContainerRef.current &&
-        !settingsContainerRef.current.contains(ev.target as Node)
-      ) {
-        togglePopover()
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [isOpenPopover])
-
-  const languagesWithStreamIndex = useMemo(
-    () => subtitleStreams.map(({ header }) => ({ streamIndex: header.streamIndex, language: header.parsed.info.Title })),
-    [subtitleStreams.length]
-  )
-
-  const setLanguage = (languageWithStreamIndex: { streamIndex: number | undefined, language?: string }) => () => {
-    mediaActor.send({ type: 'SELECT_SUBTITLE_STREAM', streamIndex: languageWithStreamIndex.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'>
-            <div onClick={changePopoverContent(PopoverContent.Advanced)}>
-              <span>Advanced</span>
-              <div>
-                <ChevronRight />
-              </div>
-            </div>
-            {/* <div onClick={changePopoverContent(PopoverContent.SelectNewSources)}>
-              <div>Select new sources</div>
-              <div>
-                <ChevronRight />
-              </div>
-            </div> */}
-            <div onClick={changePopoverContent(PopoverContent.Subtitles)}>
-              <div>Subtitles</div>
-              <div>
-                <ChevronRight />
-              </div>
-            </div>
-            <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>Plackback 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.Advanced && (
-          <div className='popover advanced'>
-            <div className="back" onClick={changePopoverContent(PopoverContent.Default)}>
-              <ChevronLeft />
-              <span>Advanced</span>
-            </div>
-            <div onClick={() => setHideMediaStats(hideMediaStats === 'true' ? 'false' : 'true')}>
-              <span>Hide stats</span>
-              <span>{hideMediaStats === 'true' ? '✓' : ''}</span>
-            </div>
-          </div>
-        )
-      }
-      {
-        isOpenPopover && popoverContent === PopoverContent.SelectNewSources && (
-          <div className='popover sources'>
-            <div className="back" onClick={changePopoverContent(PopoverContent.Default)}>
-              <ChevronLeft />
-              <span>Select new sources</span>
-            </div>
-          </div>
-        )
-      }
-      {
-        isOpenPopover && popoverContent === PopoverContent.Subtitles && (
-          <div className='popover subtitle'>
-            <div className="back" onClick={changePopoverContent(PopoverContent.Default)}>
-              <ChevronLeft />
-              <span>Subtitles</span>
-            </div>
-            <div onClick={setLanguage({ streamIndex: undefined })}>
-              <span>Disable</span>
-              <span>{selectedSubtitleStreamIndex === undefined ? '✓' : ''}</span>
-              </div>
-            {
-              languagesWithStreamIndex.map((languageWithStreamIndex) => (
-                <div
-                  key={languageWithStreamIndex.streamIndex}
-                  onClick={setLanguage(languageWithStreamIndex)}
-                  className="description"
-                >
-                  <span>{languageWithStreamIndex.language}</span>
-                  <span>{selectedSubtitleStreamIndex === languageWithStreamIndex.streamIndex ? '✓' : ''}</span>
-                </div>
-              ))
-            }
-          </div>
-        )
-      }
-    </div>
-  )
-}
-
-export default SettingsAction

package/src/components/sound.tsx

@@ -1,101 +0,0 @@
-import { Volume1, Volume2, VolumeX } from "react-feather"
-import { css } from "@emotion/react"
-
-import { MediaMachineContext } from "../state-machines"
-import { TooltipDisplay } from "./tooltip-display"
-import { fonts } from "../utils/fonts"
-import VolumeSlider from "./volume-slider"
-import { MutableRefObject, useMemo } from 'react'
-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;
-  }
-`
-
-// todo: try to find a better type for `ref`
-const Sound = ({ ref }: { ref: any }) => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const volume = MediaMachineContext.useSelector((state) => state.context.media.volume)
-  const muted = MediaMachineContext.useSelector((state) => state.context.media.muted)
-
-  const linearVolume = useMemo(() => logToLinearVolume(volume), [volume])
-  const setVolume = (newLinearVolume: number, muted: boolean) =>
-    mediaActor.send({
-      type: 'SET_VOLUME',
-      muted,
-      volume: linearToLogVolume(newLinearVolume)
-    })
-
-  return (
-    <div css={style}>
-      <TooltipDisplay
-        id='sound'
-        text={
-          <button
-            className='sound'
-            type='button'
-            onClick={() => setVolume(linearVolume, !muted)}
-            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={linearValue => setVolume(linearValue, false)} 
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export default Sound