@banou/media-player 0.6.2 → 0.8.0

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

@@ -0,0 +1,384 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import type { TrackChoice } from '../source-feature'
+
+import { useEffect, 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 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
+}
+
+/** One track picker, shared by the subtitle and audio menus. */
+const TrackMenu = (
+  { title, tracks, selected, onSelect, onBack, allowDisable }: {
+    title: string
+    tracks: TrackChoice[]
+    selected: string | number | undefined
+    onSelect: (id: string | 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(({ id, label }) => (
+        <div
+          key={id}
+          onClick={() => onSelect(id)}
+          className="description"
+        >
+          <span>{label}</span>
+          <span>{selected === id ? '✓' : ''}</span>
+        </div>
+      ))
+    }
+  </div>
+)
+
+export const SettingsAction = () => {
+  const player = usePlayer()
+  const playbackRate = usePlayer((state) => state.playbackRate)
+  const subtitleTracks = usePlayer((state) => state.subtitleTracks)
+  const selectedSubtitleTrack = usePlayer((state) => state.selectedSubtitleTrack)
+  const selectSubtitleTrack = usePlayer((state) => state.selectSubtitleTrack)
+  const audioTracks = usePlayer((state) => state.audioTracks)
+  const selectedAudioTrack = usePlayer((state) => state.selectedAudioTrack)
+  const selectAudioTrack = usePlayer((state) => state.selectAudioTrack)
+
+  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 chooseSubtitle = (id: string | number | undefined) => {
+    selectSubtitleTrack(id)
+    togglePopover()
+  }
+
+  const chooseAudio = (id: string | number | undefined) => {
+    // the audio menu never offers "Disable"
+    if (id !== undefined) selectAudioTrack(id)
+    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={selectedSubtitleTrack}
+            onSelect={chooseSubtitle}
+            onBack={changePopoverContent(PopoverContent.Default)}
+            allowDisable
+          />
+        )
+      }
+      {
+        isOpenPopover && popoverContent === PopoverContent.Audio && (
+          <TrackMenu
+            title='Audio'
+            tracks={audioTracks}
+            selected={selectedAudioTrack}
+            onSelect={chooseAudio}
+            onBack={changePopoverContent(PopoverContent.Default)}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default SettingsAction

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

@@ -0,0 +1,133 @@
+/// <reference types="@emotion/react/types/css-prop" />
+import type { Ref } from 'react'
+
+import { useMemo } from 'react'
+import { css } from '@emotion/react'
+import { Volume1, Volume2, VolumeX } from 'react-feather'
+
+import { usePlayer } from '../player'
+import { TooltipDisplay } from './tooltip-display'
+import { fonts } from '../../utils/fonts'
+import VolumeSlider from './volume-slider'
+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: calc(9 * var(--mp-unit));
+
+    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;
+  }
+
+  /* a touch screen has no hover, so the slider stays open there and the button only mutes */
+  @media (pointer: coarse) {
+    /* auto, not a fixed rem: the container keeps overflow: hidden, so a narrower fixed width
+       silently clips the track and makes the clipped part unhittable */
+    .volume-slider-container,
+    &:hover .volume-slider-container {
+      width: auto;
+
+      pointer-events: auto;
+    }
+
+    /* a 44px press target around an 18px icon, floored here because the control bar sets the
+       padding at a higher specificity */
+    .sound {
+      /* border-box explicitly, since a consumer reset cannot be assumed */
+      box-sizing: border-box;
+      justify-content: center;
+
+      min-width: 44px;
+      min-height: 44px;
+    }
+  }
+
+`
+
+export type SoundProps = {
+  /** Lands on the button, which is what the control bar attaches its wheel listener to. */
+  ref?: Ref<HTMLButtonElement> | ((element: HTMLButtonElement | null) => void)
+}
+
+export const Sound = ({ ref }: SoundProps) => {
+  const player = usePlayer()
+  const volume = usePlayer((state) => state.volume)
+  const muted = usePlayer((state) => state.muted)
+
+  // the store holds gain, the slider holds linear position, so every read and write converts
+  const linearVolume = useMemo(() => logToLinearVolume(volume), [volume])
+
+  // linearToLogVolume floors its input, so the slider never produces a zero and the store's own
+  // unmute-above-zero is enough
+  const setVolume = (newLinearVolume: number) => {
+    player.setVolume(linearToLogVolume(newLinearVolume))
+  }
+
+  return (
+    <div css={style}>
+      <TooltipDisplay
+        id='sound'
+        text={
+          <button
+            className='sound'
+            type='button'
+            onClick={() => player.toggleMuted()}
+            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={setVolume}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Sound

package/src/{components → lib/react/components}/tooltip-display.tsx

@@ -1,14 +1,21 @@
-import { ReactNode } from 'react'
+import type { ReactNode } from 'react'
+
 import { css } from '@emotion/react'
 import { PlacesType, Tooltip } from 'react-tooltip'
 
-import { fonts } from '../utils/fonts'
+import { fonts } from '../../utils/fonts'
+
+export enum buttonSize {
+  sm = 'sm',
+  md = 'md',
+  lg = 'lg'
+}
 
 const style = (size: buttonSize) => css`
   display: flex;
   justify-content: flex-end;
 
-  border-radius: 0.4rem;
+  border-radius: calc(0.4 * var(--mp-unit));
   user-select: none;
 
   z-index: 3;
@@ -18,13 +25,13 @@ const style = (size: buttonSize) => css`
   }
 
   ${size === buttonSize.sm && css`
-    padding: 0.4rem!important;
+    padding: calc(0.4 * var(--mp-unit))!important;
   `}
   ${size === buttonSize.md && css`
-    padding: 0.6rem!important;
+    padding: calc(0.6 * var(--mp-unit))!important;
   `}
   ${size === buttonSize.lg && css`
-    padding: 1.2rem!important;
+    padding: calc(1.2 * var(--mp-unit))!important;
   `}
 `
 
@@ -40,12 +47,6 @@ interface TooltipDisplayProps {
   disabled?: boolean
 }
 
-export enum buttonSize {
-  sm = 'sm',
-  md = 'md',
-  lg = 'lg'
-}
-
 export const TooltipDisplay = ({
   id,
   toolTipText,
@@ -81,3 +82,5 @@ export const TooltipDisplay = ({
     }
   </>
 )
+
+export default TooltipDisplay