@banou/media-player 0.5.0 → 0.6.0

package/build/state-machines/subtitles.d.ts

@@ -10,6 +10,9 @@ type SubtitlesEvents = {
 } | {
     type: 'SELECT_SUBTITLE_STREAM';
     streamIndex: number;
+} | {
+    type: 'TIME_UPDATE';
+    currentTime: number;
 };
 type SubtitlesEmittedEvents = {
     type: 'WAITING';

package/build/utils/use-local-storage.d.ts

@@ -1,3 +1,3 @@
 export declare const useLocalStorage: <T>(name: string, defaultValue?: T) => readonly [string | T | undefined, (newValue: string) => void];
 export default useLocalStorage;
-export type mediaMutedType = 'true' | 'false' | undefined;
+export type booleanType = 'true' | 'false' | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "",
   "type": "module",
   "main": "build/index.js",
@@ -39,7 +39,7 @@
     "@xstate/react": "^5.0.1",
     "ass-compiler": "^0.1.15",
     "jassub": "^1.7.18",
-    "libav-wasm": "^0.5.5",
+    "libav-wasm": "^0.6.0",
     "osra": "^0.1.2",
     "p-queue": "^7.3.4",
     "react": "^19.0.0",

package/src/components/control-bar.tsx

@@ -14,6 +14,7 @@ import pictureInPicture from '../assets/picture-in-picture.svg'
 import SettingsAction from './settings'
 import colors from '../utils/colors'
 import Sound from './sound'
+import useLocalStorage, { booleanType } from '../utils/use-local-storage'
 
 const style = css`
   position: absolute;
@@ -107,10 +108,10 @@ const style = css`
     .left {
       .time {
         ${fonts.bMedium.regular}
+        text-shadow: 0 0 4px rgba(0, 0, 0, 1);
       }
     }
     .right {
-
       .picture-in-picture {
         img {
           width: 22px;
@@ -138,6 +139,7 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
   const currentTime = MediaMachineContext.useSelector((state) => state.context.media.currentTime)
   const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
   const [volumeElement, setVolumeElement] = useState<HTMLDivElement | undefined>()
+  const [hideMediaStats, _] = useLocalStorage('hideMediaStats', 'false') as [booleanType, (newValue: booleanType) => void]
   
   const [isFullscreen, setIsFullscreen] = useState(false)
 
@@ -274,7 +276,11 @@ export const ControlBar = ({ mediaInformation, containerRef }: { mediaInformatio
           </div>
         </div>
         <div className='right'>
-          {mediaInformation}
+          {
+            hideMediaStats !== 'true'
+              ? mediaInformation
+              : null
+          }
           <SettingsAction />
           <TooltipDisplay
             id='picture-in-picture'

package/src/components/overlay.tsx

@@ -5,6 +5,7 @@ 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;
@@ -20,14 +21,15 @@ const titleStyle = css`
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
-  margin-left: 2.5rem;
-  margin-top: 2.5rem;
-  font-size: 2rem;
+  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`
@@ -67,8 +69,15 @@ export const Overlay = ({ loadingInformation }: { loadingInformation?: ReactNode
   return (
     <>
       {
-        mediaPlayerContext.title && !mediaPlayerContext.hideUI
-          ? <div css={titleStyle}>{mediaPlayerContext.title}</div>
+        mediaPlayerContext.title
+          ? (
+            <div
+              css={titleStyle}
+              style={{ ...mediaPlayerContext.hideUI ? { opacity: '0', pointerEvents: 'none' } : {} }}
+            >
+              {mediaPlayerContext.title}
+            </div>
+          )
           : undefined
       }
       {

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

package/src/components/settings.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from "react"
 import { css } from "@emotion/react"
-import { ChevronRight, Settings } from "react-feather"
+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;
@@ -14,6 +16,7 @@ position: relative;
   right: 50%;
   transform: translateX(50%);
 
+  overflow-y: auto;
   width: 180px;
   height: 160px;
   top: -180px;
@@ -42,8 +45,6 @@ position: relative;
     padding: 8px 6px 8px 12px;
 
     width: 100%;
-    height: 100%;
-    cursor: pointer;
 
     :first-of-type {
       border-radius: 8px 8px 0 0;
@@ -51,7 +52,10 @@ position: relative;
     :last-of-type {
       border-radius: 0 0 8px 8px;
     }
-    :hover {
+    :not(&.no-hover) {
+      cursor: pointer;
+    }
+    :not(&.no-hover):hover {
       background-color: rgba(255,255,255,.1);
     }
 
@@ -66,6 +70,57 @@ position: relative;
       }
     }
   }
+
+  .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;
+  }
 }
 `
 
@@ -82,6 +137,7 @@ const SettingsAction = () => {
   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)
@@ -116,7 +172,7 @@ const SettingsAction = () => {
     [subtitleStreams.length]
   )
 
-  const setLanguage = (languageWithStreamIndex: { streamIndex: number, language: string }) => () => {
+  const setLanguage = (languageWithStreamIndex: { streamIndex: number | undefined, language?: string }) => () => {
     mediaActor.send({ type: 'SELECT_SUBTITLE_STREAM', streamIndex: languageWithStreamIndex.streamIndex })
     togglePopover()
   }
@@ -147,19 +203,19 @@ const SettingsAction = () => {
       />
       {
         isOpenPopover && popoverContent === PopoverContent.Default && (
-          <div className='popover'>
+          <div className='popover menu'>
             <div onClick={changePopoverContent(PopoverContent.Advanced)}>
               <span>Advanced</span>
               <div>
                 <ChevronRight />
               </div>
             </div>
-            <div onClick={changePopoverContent(PopoverContent.SelectNewSources)}>
+            {/* <div onClick={changePopoverContent(PopoverContent.SelectNewSources)}>
               <div>Select new sources</div>
               <div>
                 <ChevronRight />
               </div>
-            </div>
+            </div> */}
             <div onClick={changePopoverContent(PopoverContent.Subtitles)}>
               <div>Subtitles</div>
               <div>
@@ -184,38 +240,26 @@ const SettingsAction = () => {
       }
       {
         isOpenPopover && popoverContent === PopoverContent.PlaybackRate && (
-          <div className='popover'>
-            <div onClick={changePopoverContent(PopoverContent.Default)}>
-              <div>Back</div>
-              <div></div>
+          <div className='popover playback-rate'>
+            <div className="back" onClick={changePopoverContent(PopoverContent.Default)}>
+              <ChevronLeft />
+              <span>Plackback speed</span>
             </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)}
-                >
+            <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
-                </button>
-                <button
-                  type='button'
-                  onClick={() => setPlaybackRate(2)}
-                >
-                  2x
-                </button>
+              </div>
+              <div onClick={() => setPlaybackRate(2)}>
+                2x
               </div>
             </div>
           </div>
@@ -223,42 +267,51 @@ const SettingsAction = () => {
       }
       {
         isOpenPopover && popoverContent === PopoverContent.Advanced && (
-          <div className='popover'>
-            <div onClick={changePopoverContent(PopoverContent.Default)}>
-              <div>Back</div>
-              <div></div>
+          <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'>
-            <div onClick={changePopoverContent(PopoverContent.Default)}>
-              <div>Back</div>
-              <div></div>
+          <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'>
+          <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"
                 >
-                  <div>{languageWithStreamIndex.language}</div>
-                  <div>{selectedSubtitleStreamIndex === languageWithStreamIndex.streamIndex ? '✓' : ''}</div>
+                  <span>{languageWithStreamIndex.language}</span>
+                  <span>{selectedSubtitleStreamIndex === languageWithStreamIndex.streamIndex ? '✓' : ''}</span>
                 </div>
               ))
             }
-            <div onClick={changePopoverContent(PopoverContent.Default)}>
-              <div>Back</div>
-              <div></div>
-            </div>
           </div>
         )
       }

package/src/components/tooltip-display.tsx

@@ -14,7 +14,7 @@ const style = (size: buttonSize) => css`
   z-index: 3;
 
   * {
-    ${fonts.bSmall.regular}
+    ${fonts.bMedium.regular}
   }
 
   ${size === buttonSize.sm && css`

package/src/index.tsx

@@ -7,7 +7,7 @@ import { css } from '@emotion/react'
 
 import { MediaMachineContext } from './state-machines'
 import { MediaPlayerContext, DownloadedRange } from './utils/context'
-import useLocalStorage, { mediaMutedType } from './utils/use-local-storage'
+import useLocalStorage, { booleanType } from './utils/use-local-storage'
 import Chrome from './components/chrome'
 
 const BUFFER_SIZE = 2_500_000
@@ -49,7 +49,7 @@ export const FKNVideoRoot = (
   const isReady = MediaMachineContext.useSelector((state) => state.context.isReady)
   const duration = MediaMachineContext.useSelector((state) => state.context.media.duration)
   const [mediaVolume, setMediaVolume] = useLocalStorage('mediaVolume', '1') as [string, (newValue: string) => void]
-  const [mediaMute, setMediaMute] = useLocalStorage('mediaMute', 'false') as [mediaMutedType, (newValue: mediaMutedType) => void]
+  const [mediaMute, setMediaMute] = useLocalStorage('mediaMute', 'false') as [booleanType, (newValue: booleanType) => void]
   const [firstRender, setFirstRender] = useState(true)
 
   useEffect(() => {

package/src/main.tsx

@@ -13,7 +13,7 @@ const mountStyle = css`
 `
 
 const BASE_BUFFER_SIZE = 2_500_000
-const url = '/video2.mkv'
+const url = '/video8.mkv'
 
 const Mount = () => {
   const [contentLength, setContentLength] = useState<number>()
@@ -124,7 +124,7 @@ const globalStyle = css`
     font-size: 1.6rem;
     font-family: Fira Sans;
     color: #fff;
-    
+
     font-family: Montserrat;
   }
 

package/src/state-machines/media-properties.ts

@@ -25,12 +25,16 @@ export default fromCallback<MediaPropertiesEvents, MediaPropertiesInput, MediaPr
 
   receive((event) => {
     if (event.type === 'PLAY') {
-      videoElement.play()
-      handlePlay()
+      videoElement
+        .play()
+        .then(() => handlePlay())
+        .catch((error) => {
+          console.error(error)
+        })
     }
     if (event.type === 'PAUSE') {
       videoElement.pause()
-      handlePlay()
+      handlePause()
     }
     if (event.type === 'SET_TIME') {
       videoElement.currentTime = event.value

package/src/state-machines/media-source.ts

@@ -55,7 +55,7 @@ export default fromAsyncCallback<MediaSourceEvents, MediaSourceInput, MediaSourc
           receive((event) => {
             if (resolved) return
             if (event.type === 'METADATA') {
-              const sourceBuffer = mediaSource.addSourceBuffer(`video/mp4; codecs="${event.info.input.videoMimeType},${event.info.input.audioMimeType}"`)
+              const sourceBuffer = mediaSource.addSourceBuffer(`video/mp4; codecs="${[event.info.output.videoMimeType, event.info.output.audioMimeType].filter(Boolean).join(',')}"`)
               sourceBuffer.mode = 'segments'
               mediaSource.duration = event.info.input.duration
               headerBuffer = event.data

package/src/state-machines/media.ts

@@ -62,7 +62,7 @@ export default setup({
       | { type: 'NEW_ATTACHMENTS', attachments: Attachment[] }
       | { type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: SubtitleFragment[] }
       | { type: 'SUBTITLE_STREAMS_UPDATED', subtitlesStreams: SubtitleStream[] }
-      | { type: 'SELECT_SUBTITLE_STREAM', streamIndex: number }
+      | { type: 'SELECT_SUBTITLE_STREAM', streamIndex: number | undefined }
       | { type: 'NEW_THUMBNAIL', thumbnail: Thumbnail }
       | { type: 'DOWNLOADED_RANGES_UPDATED', downloadedRanges: DownloadedRange[] }
       | { type: 'DESTROY' }
@@ -198,7 +198,10 @@ export default setup({
         'PLAYING': { actions: assign({ media: ({ context }) => ({ ...context.media, paused: false }) }) },
         'PAUSED': { actions: assign({ media: ({ context }) => ({ ...context.media, paused: true }) }) },
         'ENDED': { actions: assign({ media: ({ context }) => ({ ...context.media, paused: true }) }) },
-        'TIME_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, currentTime: event.currentTime }) }) },
+        'TIME_UPDATE': { actions: [
+          assign({ media: ({ context, event }) => ({ ...context.media, currentTime: event.currentTime }) }),
+          sendTo('subtitles', ({ event }) => event)
+        ] },
         'VOLUME_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, muted: event.muted, volume: event.volume }) }) },
         'SET_VOLUME': { actions: sendTo('media', ({ event }) => event) },
         'PLAYBACK_RATE_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, playbackRate: event.playbackRate }) }) },