@banou/media-player 0.5.1 → 0.6.1

package/src/components/overlay.tsx

@@ -1,91 +1,91 @@
-/// <reference types="@emotion/react/types/css-prop" />
-
-import { ClassAttributes, ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-import { css } from '@emotion/react'
-
-import { MediaMachineContext } from '../state-machines'
-import { MediaPlayerContext } from '../utils/context'
-import { fonts } from '../utils/fonts'
-
-const style = css`
-  top: unset !important;
-  left: unset !important;
-  width: 100%;
-  height: 100%;
-  margin: auto;
-  pointer-events: none;
-`
-
-const titleStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding: 2.4rem;
-  ${fonts.headings.small}
-  color: white;
-  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-  z-index: 2;
-  pointer-events: none;
-
-  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
-  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
-`
-
-const loadingInformationStyle = css`
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  font-size: 2rem;
-  color: white;
-  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
-  z-index: 2;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  pointer-events: none;
-`
-
-export const Overlay = ({ loadingInformation }: { loadingInformation?: ReactNode }) => {
-  const mediaActor = MediaMachineContext.useActorRef()
-  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
-  const mediaPlayerContext = useContext(MediaPlayerContext)
-
-  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 (
-    <>
-      {
-        mediaPlayerContext.title
-          ? (
-            <div
-              css={titleStyle}
-              style={{ ...mediaPlayerContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
-            >
-              {mediaPlayerContext.title}
-            </div>
-          )
-          : undefined
-      }
-      {
-        duration === undefined && loadingInformation
-          ? <div css={loadingInformationStyle}>{loadingInformation}</div>
-          : undefined
-      }
-      <canvas ref={refFunction} css={style}/>
-    </>
-  )
-}
+/// <reference types="@emotion/react/types/css-prop" />
+
+import { ClassAttributes, ReactNode, useCallback, useContext, useEffect, useState } from 'react'
+import { css } from '@emotion/react'
+
+import { MediaMachineContext } from '../state-machines'
+import { MediaPlayerContext } from '../utils/context'
+import { fonts } from '../utils/fonts'
+
+const style = css`
+  top: unset !important;
+  left: unset !important;
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  pointer-events: none;
+`
+
+const titleStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 2.4rem;
+  ${fonts.headings.small}
+  color: white;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+  z-index: 2;
+  pointer-events: none;
+
+  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.3) 30%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.1) 80%, transparent 100%);
+  transition: opacity 0.1s cubic-bezier(.4,0,1,1);
+`
+
+const loadingInformationStyle = css`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 2rem;
+  color: white;
+  text-shadow: 0 0 4px rgba(0, 0, 0, 1);
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  pointer-events: none;
+`
+
+export const Overlay = ({ loadingInformation }: { loadingInformation?: ReactNode }) => {
+  const mediaActor = MediaMachineContext.useActorRef()
+  const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
+  const mediaPlayerContext = useContext(MediaPlayerContext)
+
+  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 (
+    <>
+      {
+        mediaPlayerContext.title
+          ? (
+            <div
+              css={titleStyle}
+              style={{ ...mediaPlayerContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
+            >
+              {mediaPlayerContext.title}
+            </div>
+          )
+          : undefined
+      }
+      {
+        duration === undefined && loadingInformation
+          ? <div css={loadingInformationStyle}>{loadingInformation}</div>
+          : undefined
+      }
+      <canvas ref={refFunction} css={style}/>
+    </>
+  )
+}

package/src/components/playback-slider.tsx

@@ -0,0 +1,174 @@
+import { useRef, useState, useEffect, useMemo } from 'react'
+import { css } from '@emotion/react'
+
+import { MediaMachineContext } from '../state-machines'
+
+const style = css`
+display: flex;
+align-items: center;
+justify-content: center;
+flex-direction: column;
+width: 100%;
+
+.playback-slider {
+  display: flex;
+  align-items: center;
+
+  padding: 8px 4px;
+  margin: 0 2px;
+
+  cursor: pointer;
+
+  > div {
+    position: relative;
+
+    background: #ccc;
+    border-radius: 4px;
+
+    width: 120px;
+    height: 3px;
+    @media (min-width: 768px) {
+      height: 4px;
+    }
+  }
+
+  .playback-handle {
+    position: absolute;
+
+
+    background: #ffffff;
+    border-radius: 50%;
+    transform: translateX(-50%);
+    pointer-events: none; 
+
+    width: 10px;
+    height: 10px;
+    top: -3.5px;
+    @media (min-width: 768px) {
+      width: 12px;
+      height: 12px;
+      top: -4px;
+    }
+  }
+}
+`
+
+const PlaybackSlider = () => {
+  const playbackRate = MediaMachineContext.useSelector((state) => state.context.media.playbackRate)
+  const mediaActor = MediaMachineContext.useActorRef()
+  const sliderRef = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+
+  const MIN_RATE = 0.25
+  const MAX_RATE = 3.0
+  const RANGE = MAX_RATE - MIN_RATE
+  
+  const roundToStep = (value: number, step: number = 0.05): number => {
+    return Math.round(value / step) * step
+  }
+  
+  const roundedRate = roundToStep(playbackRate || 1)
+  
+  // Calculate position as percentage
+  const getHandlePosition = (rate: number): number => {
+    return ((rate - MIN_RATE) / RANGE) * 100
+  }
+
+  const getPlaybackRateFromEvent = (clientX: number): number => {
+    if (!sliderRef.current) return roundedRate;
+    
+    const rect = sliderRef.current.getBoundingClientRect()
+    const xPos = clientX - rect.left
+    const percent = Math.max(0, Math.min(xPos, rect.width)) / rect.width
+    
+    const rawRate = MIN_RATE + (percent * RANGE)
+    
+    return roundToStep(rawRate)
+  }
+
+  const handlePointerDown = (e: React.MouseEvent<HTMLDivElement>) => {
+    setIsDragging(true)
+    const newRate = getPlaybackRateFromEvent(e.clientX)
+    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: newRate })
+  }
+
+  const handlePointerMove = (e: MouseEvent) => {
+    if (!isDragging) return;
+    const newRate = getPlaybackRateFromEvent(e.clientX)
+    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: newRate })
+  }
+
+  const handlePointerUp = () => {
+    setIsDragging(false)
+  }
+
+  const handleWheel = (e: WheelEvent) => {
+    e.preventDefault()
+    const step = 0.05
+    let newRate = roundedRate
+    
+    if (e.deltaY < 0) {
+      newRate = Math.min(MAX_RATE, newRate + step)
+    } else {
+      newRate = Math.max(MIN_RATE, newRate - step)
+    }
+    
+    mediaActor.send({ type: 'SET_PLAYBACK_RATE', playbackRate: newRate })
+  }
+
+  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)
+      }
+    }
+  }, [playbackRate])
+
+  const handlePosition = getHandlePosition(roundedRate)
+  const fillColor = '#fff'
+  const emptyColor = '#3A3A3A'
+
+  return (
+    <div css={style}>
+      <div>
+        {roundedRate.toFixed(2)}x
+      </div>
+      <div
+        className="playback-slider"
+        ref={sliderRef}
+        onMouseDown={handlePointerDown}
+      >
+        <div
+          style={{
+            background: `linear-gradient(to right, 
+              ${fillColor} 0% ${handlePosition}%, 
+              ${emptyColor} ${handlePosition}% 100%
+            )`
+          }}
+        >
+          <div
+            className="playback-handle"
+            style={{
+              left: `${handlePosition}%`
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PlaybackSlider