@banou/media-player 0.3.0 → 0.4.0

package/src/chrome/index.tsx

@@ -1,203 +0,0 @@
-/// <reference types="@emotion/react/types/css-prop" />
-import type { ClassAttributes, HTMLAttributes, MouseEventHandler, MutableRefObject, ReactNode } from 'react'
-import type { Attachment, FKNVideoControl, Subtitle, TransmuxError } from '..'
-
-import { useEffect, useMemo, useRef, useState } from 'react'
-import JASSUB from 'jassub'
-import { css } from '@emotion/react'
-import Overlay from './overlay'
-import Bottom from './bottom'
-
-const style = css`
---background-padding: 2rem;
-display: grid;
-grid-template-rows: 1fr;
-overflow: hidden;
-
-&.hide {
-  cursor: none;
-  
-  .bottom {
-    opacity: 0;
-  }
-}
-
-.bottom {
-  &.hide {
-    opacity: 0 !important;
-  }
-}
-`
-
-export type ChromeOptions = {
-  publicPath: string
-  customOverlay?: ReactNode
-  isPlaying?: boolean
-  loading?: boolean
-  duration?: number
-  loadedTime?: [number, number]
-  currentTime?: number
-  pictureInPicture: () => void
-  fullscreen: () => void
-  play: () => void
-  seek: (time: number) => void
-  getVolume: () => number | undefined
-  setVolume: (volume: number) => void
-  attachments: Attachment[] | undefined
-  tracks: Subtitle[]
-  video: MutableRefObject<HTMLVideoElement | undefined>
-  videoReactive: HTMLVideoElement | undefined,
-  errors: TransmuxError[]
-  customControls?: FKNVideoControl[]
-  libassWorkerUrl: string
-  wasmUrl: string
-  needsInitialInteraction?: boolean
-} & HTMLAttributes<HTMLDivElement>
-
-export default ({
-  customOverlay,
-  publicPath,
-  isPlaying,
-  loading,
-  duration,
-  loadedTime,
-  currentTime,
-  pictureInPicture,
-  fullscreen,
-  play,
-  seek,
-  getVolume,
-  setVolume,
-  attachments,
-  tracks,
-  video,
-  videoReactive,
-  errors,
-  customControls,
-  libassWorkerUrl,
-  wasmUrl,
-  needsInitialInteraction,
-  ...rest
-}: ChromeOptions) => {
-  const [canvasElement, setCanvasElement] = useState<HTMLCanvasElement | undefined>()
-  const [canvasInitialized, setCanvasInitialized] = useState(false)
-  const [isFullscreen, setFullscreen] = useState(false)
-  const [hidden, setHidden] = useState(false)
-  const autoHide = useRef<number>()
-  const [isSubtitleMenuHidden, setIsSubtitleMenuHidden] = useState(true)
-  const [jassub, setJassub] = useState<JASSUB>()
-  const [currentSubtitleTrack, setCurrentSubtitleTrack] = useState<number | undefined>()
-  const subtitleTrack = useMemo(
-    () => currentSubtitleTrack !== undefined ? tracks[currentSubtitleTrack] : undefined,
-    [currentSubtitleTrack, currentSubtitleTrack !== undefined && tracks[currentSubtitleTrack]?.data]
-  )
-  const [isErrorMenuHidden, setIsErrorMenuHidden] = useState(true)
-
-  const mouseMove: MouseEventHandler<HTMLDivElement> = (ev) => {
-    setHidden(false)
-    if (autoHide.current) clearInterval(autoHide.current)
-    const timeout = setTimeout(() => {
-      setHidden(true)
-    }, 3_000) as unknown as number
-    autoHide.current = timeout
-  }
-
-  // hide automatically after 3 seconds, in case the user doesn't move the mouse on init
-  useEffect(() => {
-    setTimeout(() => {
-      setHidden(true)
-    }, 3_000)
-  }, [])
-
-  const mouseOut: React.DOMAttributes<HTMLDivElement>['onMouseOut'] = (ev) => {
-    const root = canvasElement?.parentElement?.parentElement
-    if (!root?.contains(ev?.relatedTarget as Element)) {
-      setHidden(true)
-      return
-    }
-    if (ev.currentTarget.parentElement !== ev.relatedTarget && ev.relatedTarget !== null) return
-    setHidden(true)
-  }
-
-  const togglePlay = () => {
-    if (!isSubtitleMenuHidden) return
-    play()
-  }
-
-  const toggleFullscreen = () => {
-    if (!canvasElement || !jassub) return
-    setFullscreen(value => !value)
-    fullscreen()
-  }
-
-  useEffect(() => {
-    if (!video.current || !canvasElement || jassub || !subtitleTrack?.data || !attachments) return
-    const fonts = attachments.map(({ filename, data }) => [
-      filename.toLowerCase().replaceAll('-', ' ').split('.').at(0),
-      data
-    ])
-    const jassubInstance = new JASSUB({
-      video: video.current,
-      canvas: canvasElement,
-      subContent: subtitleTrack.data,
-      fonts: fonts.filter(Boolean).map(([,filename]) => filename as string),
-      availableFonts: { ...Object.fromEntries(fonts), 'liberation sans': `${publicPath}default.woff2` },
-      workerUrl: libassWorkerUrl, // Link to WebAssembly-based file "libassjs-worker.js",
-      modernWasmUrl: wasmUrl
-    })
-    setJassub(jassubInstance)
-  }, [canvasElement, attachments, subtitleTrack?.data])
-
-  useEffect(() => {
-    if (!tracks.length) return
-    setCurrentSubtitleTrack(0)
-  }, [tracks.length])
-
-  useEffect(() => {
-    if (!jassub) return
-    if (!subtitleTrack) {
-      jassub.freeTrack()
-      return
-    }
-    jassub.setTrack(subtitleTrack.data)
-    const parent = canvasElement?.parentElement
-    if (!parent || canvasInitialized) return
-    setCanvasInitialized(true)
-  }, [jassub, subtitleTrack, canvasInitialized])
-
-  const setCanvasRef: ClassAttributes<HTMLCanvasElement>['ref'] = (canvasElem) => {
-    if (!canvasElem) return
-    setCanvasElement(canvasElem)
-  }
-
-  return (
-    <div {...rest} css={style} onMouseMove={mouseMove} onMouseOut={mouseOut} className={`chrome ${rest.className ?? ''} ${hidden ? 'hide' : ''}`}>
-      <Overlay needsInitialInteraction={needsInitialInteraction} loading={loading} togglePlay={togglePlay} setCanvasRef={setCanvasRef}/>
-      {customOverlay}
-      <Bottom
-        className={`bottom ${needsInitialInteraction ? 'hide' : ''}`}
-        toggleFullscreen={toggleFullscreen}
-        togglePlay={togglePlay}
-        isFullscreen={isFullscreen}
-        pictureInPicture={pictureInPicture}
-        video={video}
-        videoReactive={videoReactive}
-        seek={seek}
-        setCurrentSubtitleTrack={setCurrentSubtitleTrack}
-        isSubtitleMenuHidden={isSubtitleMenuHidden}
-        setIsSubtitleMenuHidden={setIsSubtitleMenuHidden}
-        isErrorMenuHidden={isErrorMenuHidden}
-        setIsErrorMenuHidden={setIsErrorMenuHidden}
-        setVolume={setVolume}
-        subtitleTrack={subtitleTrack}
-        tracks={tracks}
-        currentTime={currentTime}
-        duration={duration}
-        isPlaying={isPlaying}
-        loadedTime={loadedTime}
-        errors={errors}
-        customControls={customControls}
-      />
-    </div>
-  )
-}

package/src/chrome/overlay.tsx

@@ -1,104 +0,0 @@
-/// <reference types="@emotion/react/types/css-prop" />
-import type { ClassAttributes } from 'react'
-
-import { css } from '@emotion/react'
-
-const style = css`
-  position: relative;
-  display: grid;
-  grid-column: 1;
-  grid-row: 1;
-  display: grid;
-  height: 100%;
-  width: 100%;
-  justify-items: center;
-  align-items: center;
-
-  canvas {
-    pointer-events: none;
-    position: absolute;
-    inset: 0;
-    grid-column: 1;
-    grid-row: 1;
-    height: 100%;
-    width: 100%;
-  }
-
-  .loading {
-    grid-column: 1;
-    grid-row: 1;
-  }
-`
-
-export type OverlayOptions = {
-  loading?: boolean
-  togglePlay: (ev: any) => void
-  setCanvasRef: ClassAttributes<HTMLCanvasElement>['ref'],
-  needsInitialInteraction?: boolean
-}
-
-export default ({ loading, needsInitialInteraction, togglePlay, setCanvasRef }: OverlayOptions) => {
-  return (
-    <div css={style} onClick={togglePlay}>
-      <canvas ref={setCanvasRef}/>
-      {
-        needsInitialInteraction
-          ? (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="60"
-              height="60"
-              viewBox="0 0 60 60"
-              fill="black"
-              stroke="currentColor"
-              strokeWidth="3"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              className="feather feather-play"
-            >
-              <polygon points="12 7 45 28 12 50 12 7"></polygon>
-            </svg>
-          )
-          : (
-            loading
-              ? (
-                <svg
-                  className="loading"
-                  xmlns="http://www.w3.org/2000/svg"
-                  style={{
-                    display: 'block',
-                    shapeRendering: 'auto',
-                    animationPlayState: 'running',
-                    animationDelay: '0s',
-                  }}
-                  width="100" height="100"
-                  viewBox="0 0 100 100"
-                  preserveAspectRatio="xMidYMid"
-                  >
-                  <circle
-                    cx="50"
-                    cy="50"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="9"
-                    r="35"
-                    strokeDasharray="164.93361431346415 56.97787143782138"
-                    style={{ animationPlayState: 'running', animationDelay: '0s' }}>
-                    <animateTransform
-                      attributeName="transform"
-                      type="rotate"
-                      repeatCount="indefinite"
-                      dur="1s"
-                      values="0 50 50;360 50 50"
-                      keyTimes="0;1"
-                      style={{ animationPlayState: 'running', animationDelay: '0s' }}
-                    />
-                  </circle>
-                </svg>
-              )
-              : null
-          )
-      }
-    </div>
-  )
-}

package/src/use-local-storage.ts

@@ -1,32 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const useNamespacedLocalStorage = <T extends { [key: PropertyKey]: string | boolean | number | undefined | null | object | any[] }>(namespace: string) => {
-  const [state, setState] = useState<T>(() => {
-    const storedValue = localStorage.getItem(namespace)
-    return (
-      storedValue
-        ? JSON.parse(storedValue)
-        : {}
-    )
-  })
-
-  useEffect(() => {
-    localStorage.setItem(namespace, JSON.stringify(state));
-  }, [namespace, state])
-
-  return <T2 extends keyof T, T3 extends T[T2]>(key: T2, value: T[T2]) => {
-    useEffect(() => {
-      setState(state => ({ ...state, [key]: value }))
-    }, [])
-    return [
-      state[key],
-      (newValue: T3 | ((oldValue: T3) => T3)) =>
-        typeof newValue === 'function'
-          // @ts-expect-error
-          ? setState(state => ({ ...state, [key]: newValue(state[key]) }))
-          : setState(state => ({ ...state, [key]: newValue }))
-    ] as const
-  }
-}
-
-export default useNamespacedLocalStorage