@banou/media-player 0.6.0 → 0.6.2

package/src/components/sound.tsx

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

@@ -1,83 +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.bMedium.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>
-      )
-    }
-  </>
-)
+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.bMedium.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

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