@banou/media-player 0.2.5 → 0.3.0

package/build/use-scrub.d.ts

@@ -6,5 +6,6 @@ declare const _default: ({ ref, defaultValue }: {
     value: number | undefined;
     scrubbing: boolean;
     scrub: MouseEventHandler<HTMLDivElement>;
+    setValue: import("react").Dispatch<import("react").SetStateAction<number | undefined>>;
 };
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "",
   "type": "module",
   "main": "build/index.js",
@@ -43,6 +43,6 @@
     "p-queue": "^7.3.4",
     "react": "^18.2.0",
     "react-feather": "^2.0.10",
-    "react-tooltip": "^4.2.21"
+    "react-tooltip": "^5.26.3"
   }
 }

package/src/chrome/bottom.tsx

@@ -1,10 +1,9 @@
 /// <reference types="@emotion/react/types/css-prop" />
-import type { Dispatch, DOMAttributes, HTMLAttributes, MouseEvent, MouseEventHandler, SetStateAction } from 'react'
+import type { Dispatch, DOMAttributes, HTMLAttributes, MouseEvent, MouseEventHandler, MutableRefObject, SetStateAction } from 'react'
 
 import type { ChromeOptions } from '.'
 import type { FKNVideoControl, Subtitle, TransmuxError } from '..'
 
-import ReactTooltip from 'react-tooltip'
 import { css } from '@emotion/react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { Volume, Volume1, Volume2, VolumeX, AlertTriangle } from 'react-feather'
@@ -12,6 +11,7 @@ import { Volume, Volume1, Volume2, VolumeX, AlertTriangle } from 'react-feather'
 import useScrub from '../use-scrub'
 import { tagToLanguage } from '../languages'
 import useNamespacedLocalStorage from '../use-local-storage'
+import { Tooltip } from 'react-tooltip'
 
 const style = css`
   position: relative;
@@ -275,6 +275,8 @@ const style = css`
 `
 
 export type BottomOptions = {
+  video: MutableRefObject<HTMLVideoElement | undefined>
+  videoReactive: HTMLVideoElement | undefined,
   duration?: number
   currentTime?: number
   togglePlay: () => void
@@ -293,6 +295,8 @@ Pick<ChromeOptions, 'seek' | 'setVolume' | 'loadedTime' | 'isPlaying' | 'tracks'
 HTMLAttributes<HTMLDivElement>
 
 export default ({
+  video,
+  videoReactive,
   duration,
   currentTime,
   togglePlay,
@@ -317,14 +321,14 @@ export default ({
   const progressBarRef = useRef<HTMLDivElement>(null)
   const volumeBarRef = useRef<HTMLDivElement>(null)
   const [hiddenVolumeArea, setHiddenVolumeArea] = useState(false)
-  const { scrub: seekScrub, value: seekScrubValue } = useScrub({ ref: progressBarRef })
+  const { scrub: seekScrub, value: seekScrubValue, setValue: setSeekValue } = useScrub({ ref: progressBarRef })
   const isPictureInPictureEnabled = useMemo(() => document.pictureInPictureEnabled, [])
   const [hasShownErrorPopup, setHasShownErrorPopup] = useState(false)
 
   const useStoredValue = useNamespacedLocalStorage<{ volume: number, muted: boolean }>('fkn-media-player')
   const [volume, setStoredVolume] = useStoredValue('volume', 1)
   const [isMuted, setStoredMuted] = useStoredValue('muted', false)
-  const { scrub: volumeScrub, value: volumeScrubValue } = useScrub({ ref: volumeBarRef, defaultValue: volume })
+  const { scrub: volumeScrub, value: volumeScrubValue, setValue: updateVolume } = useScrub({ ref: volumeBarRef, defaultValue: volume })
 
   useEffect(() => {
     if (hasShownErrorPopup) return
@@ -442,19 +446,46 @@ export default ({
       .map(str => <div key={str} className="error-menu-message">{str}</div>)
   , [errors])
 
-  useEffect(() => {
-    ReactTooltip.rebuild()
-  }, [tracks.length])
-
   useEffect(() => {
     const eventListener = (ev: KeyboardEvent) => {
       if (ev.key === 'f') toggleFullscreen()
       if (ev.key === 'k') togglePlay()
+      if (ev.key === ' ') togglePlay()
       if (ev.key === 'm') toggleMuteButton()
+      if (ev.key === 'ArrowUp') {
+        if (volume <= 0.95) {
+          updateVolume(volume + 0.05)
+        } else {
+          updateVolume(1)
+        }
+      }
+      if (ev.key === 'ArrowDown') {
+        if (volume >= 0.05) {
+          updateVolume(volume - 0.05)
+        } else {
+          updateVolume(0)
+        }
+      }
+      if (ev.key === 'ArrowLeft') {
+        if (!videoReactive) return
+        videoReactive.currentTime -= (
+          ev.shiftKey ? 20
+          : ev.ctrlKey ? 2
+          : 5
+        )
+      }
+      if (ev.key === 'ArrowRight') {
+        if (!videoReactive) return
+        videoReactive.currentTime += (
+          ev.shiftKey ? 20
+          : ev.ctrlKey ? 2
+          : 5
+        )
+      }
     }
     window.addEventListener('keydown', eventListener)
     return () => window.removeEventListener('keydown', eventListener)
-  }, [toggleFullscreen, togglePlay, toggleMuteButton])
+  }, [videoReactive, toggleFullscreen, togglePlay, toggleMuteButton])
 
   const [progressBarOverTime, setProgressBarOverTime] = useState<number | undefined>(undefined)
 
@@ -519,14 +550,14 @@ export default ({
         <div className="padding" onMouseDown={seekScrub}></div>
       </div>
       <div className="controls">
-        <ReactTooltip id="play-button-tooltip" effect="solid" place="top">
+        <Tooltip id="play-button-tooltip" place="top-start" >
           {
             isPlaying
               ? 'Pause (k)'
               : 'Play (k)'
           }
-        </ReactTooltip>
-        <button className="play-button" type="button" data-tip data-for="play-button-tooltip" onClick={togglePlay}>
+        </Tooltip>
+        <button className="play-button" type="button" data-tip data-tooltip-id="play-button-tooltip" onClick={togglePlay}>
           {
             isPlaying
               ? <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-pause"><rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect></svg>
@@ -534,14 +565,17 @@ export default ({
           }
         </button>
         <div className="volume-area" onMouseOver={hoverVolumeArea}>
-          <ReactTooltip id="mute-button-tooltip" effect="solid" place="top">
+          <Tooltip
+            id="mute-button-tooltip"
+            place="top"
+          >
             {
               isMuted
                 ? 'Unmute (m)'
                 : 'Mute (m)'
             }
-          </ReactTooltip>
-          <button className="mute-button" data-tip data-for="mute-button-tooltip" onClick={toggleMuteButton}>
+          </Tooltip>
+          <button className="mute-button" data-tip data-tooltip-id="mute-button-tooltip" onClick={toggleMuteButton}>
             {
               isMuted ? <VolumeX/>
               : (volume ?? 0) > 0.66 ? <Volume2/>
@@ -589,9 +623,17 @@ export default ({
               : null
           }
         </div>
-        <ReactTooltip id="subtitle-button-tooltip" globalEventOff="click" effect="solid" place="top" disable={!isSubtitleMenuHidden}>
-          Subtitles
-        </ReactTooltip>
+        <Tooltip
+          id="subtitle-button-tooltip"
+          globalEventOff="click"
+        
+          disable={!isSubtitleMenuHidden}
+          class="tooltip"
+        >
+          <span>
+            Subtitles
+          </span>
+        </Tooltip>
         <div className="subtitle-area">
           {
             tracks.length
@@ -610,7 +652,7 @@ export default ({
                       )
                   }
                 </div>
-                <button className="subtitle-menu-button" data-tip data-for="subtitle-button-tooltip" onClick={subtitleMenuButtonClick}>
+                <button className="subtitle-menu-button" data-tip data-tooltip-id="subtitle-button-tooltip" onClick={subtitleMenuButtonClick}>
                   <SubtitleTrackToName subtitleTrack={subtitleTrack}/>
                 </button>
               </>
@@ -618,26 +660,30 @@ export default ({
             : null
           }
         </div>
-        <ReactTooltip id="pip-button-tooltip" effect="solid" place="top">
+        <Tooltip
+          id="pip-button-tooltip"
+        
+          place="top"
+        >
           Picture in Picture
-        </ReactTooltip>
+        </Tooltip>
         {
           isPictureInPictureEnabled
             ? (
-              <button className="picture-in-picture" data-tip data-for="pip-button-tooltip" onClick={pictureInPicture}>
+              <button className="picture-in-picture" data-tip data-tooltip-id="pip-button-tooltip" onClick={pictureInPicture}>
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="21" height="14" rx="2" ry="2"></rect><rect x="12.5" y="8.5" width="8" height="6" rx="2" ry="2"></rect></svg>
               </button>
             )
             : null
         }
-        <ReactTooltip id="fullscreen-button-tooltip" effect="solid" place="top">
+        <Tooltip id="fullscreen-button-tooltip" place="top-end">
           {
             isFullscreen
               ? 'Exit full screen (f)'
               : 'Full screen (f)'
           }
-        </ReactTooltip>
-        <button className="fullscreen" data-tip data-for="fullscreen-button-tooltip" onClick={toggleFullscreen}>
+        </Tooltip>
+        <button className="fullscreen" data-tip data-tooltip-id="fullscreen-button-tooltip" onClick={toggleFullscreen}>
           {
             isFullscreen
               ? <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="feather feather-minimize"><path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path></svg>

package/src/chrome/index.tsx

@@ -30,6 +30,7 @@ overflow: hidden;
 `
 
 export type ChromeOptions = {
+  publicPath: string
   customOverlay?: ReactNode
   isPlaying?: boolean
   loading?: boolean
@@ -45,6 +46,7 @@ export type ChromeOptions = {
   attachments: Attachment[] | undefined
   tracks: Subtitle[]
   video: MutableRefObject<HTMLVideoElement | undefined>
+  videoReactive: HTMLVideoElement | undefined,
   errors: TransmuxError[]
   customControls?: FKNVideoControl[]
   libassWorkerUrl: string
@@ -54,6 +56,7 @@ export type ChromeOptions = {
 
 export default ({
   customOverlay,
+  publicPath,
   isPlaying,
   loading,
   duration,
@@ -68,6 +71,7 @@ export default ({
   attachments,
   tracks,
   video,
+  videoReactive,
   errors,
   customControls,
   libassWorkerUrl,
@@ -137,7 +141,7 @@ export default ({
       canvas: canvasElement,
       subContent: subtitleTrack.data,
       fonts: fonts.filter(Boolean).map(([,filename]) => filename as string),
-      availableFonts: { ...Object.fromEntries(fonts), 'liberation sans': new URL('/build/default.woff2', new URL(window.location.toString()).origin).toString() },
+      availableFonts: { ...Object.fromEntries(fonts), 'liberation sans': `${publicPath}default.woff2` },
       workerUrl: libassWorkerUrl, // Link to WebAssembly-based file "libassjs-worker.js",
       modernWasmUrl: wasmUrl
     })
@@ -176,6 +180,8 @@ export default ({
         togglePlay={togglePlay}
         isFullscreen={isFullscreen}
         pictureInPicture={pictureInPicture}
+        video={video}
+        videoReactive={videoReactive}
         seek={seek}
         setCurrentSubtitleTrack={setCurrentSubtitleTrack}
         isSubtitleMenuHidden={isSubtitleMenuHidden}

package/src/index.tsx

@@ -447,8 +447,10 @@ const FKNVideo = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLInputEleme
       <Chrome
         className="chrome"
         customOverlay={customOverlay}
+        publicPath={publicPath}
         isPlaying={isPlaying}
         video={videoRef}
+        videoReactive={videoElement}
         needsInitialInteraction={needsInitialInteraction}
         loading={loading}
         duration={duration}

package/src/main.tsx

@@ -25,7 +25,7 @@ const Mount = () => {
 
   const onFetch = async (offset: number, end?: number) =>
     fetch(
-      '/video9.mkv',
+      '/video.mkv',
       {
         headers: {
           Range: `bytes=${offset}-${end ?? (!BACKPRESSURE_STREAM_ENABLED ? Math.min(offset + BASE_BUFFER_SIZE, size!) : '')}`

package/src/use-scrub.ts

@@ -34,6 +34,7 @@ export default ({ ref, defaultValue }: { ref: RefObject<HTMLElement>, defaultVal
   return {
     value,
     scrubbing,
-    scrub
+    scrub,
+    setValue
   }
 }

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/tsconfig.node.json

@@ -1,9 +1,9 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}