@banou/media-player 0.2.6 → 0.4.0

package/src/components/settings.tsx

@@ -0,0 +1,269 @@
+import { useEffect, useMemo, useRef, useState } from "react"
+import { css } from "@emotion/react"
+import { ChevronRight, Settings } from "react-feather"
+
+import { MediaMachineContext } from "../state-machines"
+import { TooltipDisplay } from "./tooltip-display"
+import { fonts } from "../utils/fonts"
+
+const style = css`
+position: relative;
+
+.popover {
+  position: absolute;
+  right: 50%;
+  transform: translateX(50%);
+
+  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%;
+    height: 100%;
+    cursor: pointer;
+
+    :first-of-type {
+      border-radius: 8px 8px 0 0;
+    }
+    :last-of-type {
+      border-radius: 0 0 8px 8px;
+    }
+    :hover {
+      background-color: rgba(255,255,255,.1);
+    }
+
+    > div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .secondary {
+        color: #eee;
+        ${fonts.bSmall.regular}
+      }
+    }
+  }
+}
+`
+
+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 [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, 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'>
+            <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'>
+            <div onClick={changePopoverContent(PopoverContent.Default)}>
+              <div>Back</div>
+              <div></div>
+            </div>
+            <div>
+              <div>Playback speed</div>
+              <div>
+                <button
+                  type='button'
+                  onClick={() => setPlaybackRate(0.5)}
+                >
+                  0.5x
+                </button>
+                <button
+                  type='button'
+                  onClick={() => setPlaybackRate(1)}
+                >
+                  1x
+                </button>
+                <button
+                  type='button'
+                  onClick={() => setPlaybackRate(1.5)}
+                >
+                  1.5x
+                </button>
+                <button
+                  type='button'
+                  onClick={() => setPlaybackRate(2)}
+                >
+                  2x
+                </button>
+              </div>
+            </div>
+          </div>
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.Advanced && (
+          <div className='popover'>
+            <div onClick={changePopoverContent(PopoverContent.Default)}>
+              <div>Back</div>
+              <div></div>
+            </div>
+          </div>
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.SelectNewSources && (
+          <div className='popover'>
+            <div onClick={changePopoverContent(PopoverContent.Default)}>
+              <div>Back</div>
+              <div></div>
+            </div>
+          </div>
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.Subtitles && (
+          <div className='popover'>
+            {
+              languagesWithStreamIndex.map((languageWithStreamIndex) => (
+                <div
+                  key={languageWithStreamIndex.streamIndex}
+                  onClick={setLanguage(languageWithStreamIndex)}
+                >
+                  <div>{languageWithStreamIndex.language}</div>
+                  <div>{selectedSubtitleStreamIndex === languageWithStreamIndex.streamIndex ? '✓' : ''}</div>
+                </div>
+              ))
+            }
+            <div onClick={changePopoverContent(PopoverContent.Default)}>
+              <div>Back</div>
+              <div></div>
+            </div>
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default SettingsAction

package/src/components/sound.tsx

@@ -0,0 +1,101 @@
+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

package/src/components/tooltip-display.tsx

@@ -0,0 +1,83 @@
+import { ReactNode } from 'react'
+import { css } from '@emotion/react'
+import { PlacesType, Tooltip } from 'react-tooltip'
+
+import { fonts } from '../utils/fonts'
+
+const style = (size: buttonSize) => css`
+  display: flex;
+  justify-content: flex-end;
+
+  border-radius: 0.4rem;
+  user-select: none;
+
+  z-index: 3;
+
+  * {
+    ${fonts.bSmall.regular}
+  }
+
+  ${size === buttonSize.sm && css`
+    padding: 0.4rem!important;
+  `}
+  ${size === buttonSize.md && css`
+    padding: 0.6rem!important;
+  `}
+  ${size === buttonSize.lg && css`
+    padding: 1.2rem!important;
+  `}
+`
+
+interface TooltipDisplayProps {
+  id: string
+  toolTipText: ReactNode
+  text: ReactNode
+  delayShow?: number
+  closeDelay?: number
+  offset?: number
+  tooltipPlace?: PlacesType
+  size?: buttonSize
+  disabled?: boolean
+}
+
+export enum buttonSize {
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg'
+}
+
+export const TooltipDisplay = ({
+  id,
+  toolTipText,
+  text,
+  delayShow = 0,
+  closeDelay = 0,
+  offset = 20,
+  tooltipPlace = 'top',
+  disabled = false,
+  size = buttonSize.md
+}: TooltipDisplayProps) => (
+  <>
+    <div
+      data-tooltip-id={id}
+      data-open={true}
+      data-tooltip-offset={offset}
+      data-tooltip-delay-show={delayShow}
+      data-tooltip-delay-hide={closeDelay}
+      data-tooltip-place={tooltipPlace}
+    >
+      {text}
+    </div>
+    {
+      !disabled && (
+        <Tooltip
+          css={style(size)}
+          id={id}
+          noArrow={true}
+        >
+          {toolTipText}
+        </Tooltip>
+      )
+    }
+  </>
+)

package/src/components/volume-slider.tsx

@@ -0,0 +1,156 @@
+import { useRef, useState, useEffect, useMemo } from 'react'
+import { css } from '@emotion/react'
+
+import { TooltipDisplay } from './tooltip-display'
+import { MediaMachineContext } from '../state-machines'
+import { logToLinearVolume } from '../utils/volume-utils'
+
+const style = css`
+  display: flex;
+  align-items: center;
+
+  padding: 16px 4px;
+  margin: 0 2px;
+
+  cursor: pointer;
+
+  > div {
+    position: relative;
+
+    background: #ccc;
+    border-radius: 4px;
+
+    width: 80px;
+    height: 3px;
+  }
+
+  .volume-handle {
+    position: absolute;
+    top: -3.5px;
+
+    background: #ffffff;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    pointer-events: none; 
+
+    width: 10px;
+    height: 10px;
+  }
+`
+
+type VolumeSliderType = {
+  value: number
+  onChange: (v: number) => void
+}
+
+const VolumeSlider = ({ value, onChange }: VolumeSliderType) => {
+  const volume = MediaMachineContext.useSelector((state) => state.context.media.volume)
+  const muted = MediaMachineContext.useSelector((state) => state.context.media.muted)
+
+  const sliderRef = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const getNewVolumeFromEvent = (clientX: number): number => {
+    if (!sliderRef.current) return value
+    const rect = sliderRef.current.getBoundingClientRect()
+    const xPos = clientX - rect.left
+    const clamped = Math.max(0, Math.min(xPos, rect.width))
+    return clamped / rect.width
+  }
+
+  const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsDragging(true)
+    const newVolume = getNewVolumeFromEvent(e.clientX)
+    onChange(newVolume)
+  }
+
+  const handlePointerMove = (e: MouseEvent) => {
+    if (!isDragging) return
+    const newVolume = getNewVolumeFromEvent(e.clientX)
+    onChange(newVolume)
+  }
+
+  const handlePointerUp = () => {
+    setIsDragging(false)
+  }
+
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    const step = 0.05
+    let newVol = value
+    if (e.deltaY < 0) {
+      // scroll up
+      newVol = Math.min(1, newVol + step)
+    } else {
+      // scroll down
+      newVol = Math.max(0, newVol - step)
+    }
+    onChange(newVol)
+  }
+
+  useEffect(() => {
+    window.addEventListener('mousemove', handlePointerMove)
+    window.addEventListener('mouseup', handlePointerUp)
+    return () => {
+      window.removeEventListener('mousemove', handlePointerMove)
+      window.removeEventListener('mouseup', handlePointerUp)
+    }
+  }, [isDragging])
+
+  useEffect(() => {
+    const slider = sliderRef.current
+    if (slider) {
+      slider.addEventListener('wheel', handleWheel, { passive: false })
+    }
+    return () => {
+      if (slider) {
+        slider.removeEventListener('wheel', handleWheel)
+      }
+    }
+  }, [value])
+
+  const fillPercent = value * 100
+  const fillColor = '#fff'
+  const emptyColor = '#3A3A3A'
+
+  const displayVolumePercent = useMemo(
+    () => Math.round(muted ? 0 : logToLinearVolume(volume) * 100),
+    [volume]
+  )
+
+  return (
+    <TooltipDisplay
+      id='volume-slider'
+      text={
+        <div
+          ref={sliderRef}
+          css={style}
+          onMouseDown={handlePointerDown}
+        >
+          <div
+            style={{
+              background: `linear-gradient(to right, 
+                ${fillColor} 0% ${fillPercent}%, 
+                ${emptyColor} ${fillPercent}% 100%
+              )`
+            }}
+          >
+            <div
+              className="volume-handle"
+              style={{
+                left: `${value * 100}%`
+              }}
+            />
+          </div>
+        </div>
+      }
+      toolTipText={
+        <div className='volume-value'>
+          {displayVolumePercent}%
+        </div>
+      }
+    />
+  )
+}
+
+export default VolumeSlider