@banou/media-player 0.3.0 → 0.4.0

package/src/main.tsx

@@ -1,48 +1,46 @@
 /// <reference types="@emotion/react/types/css-prop" />
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { css, Global } from '@emotion/react'
 
 import MediaPlayer from './index'
+import { DownloadedRange } from './utils/context'
 
 const mountStyle = css`
   display: grid;
-  height: 100%;
-  width: 100%;
+  height: 100vh;
+  width: 100vw;
 `
 
-const BASE_BUFFER_SIZE = 5_000_000
-const BACKPRESSURE_STREAM_ENABLED = !navigator.userAgent.includes("Firefox")
+const BASE_BUFFER_SIZE = 2_500_000
+const url = '/video2.mkv'
 
 const Mount = () => {
-  const [videoElemRef, setVideoElemRef] = useState<HTMLVideoElement | null>()
-  const [size, setSize] = useState<number>()
-
-  useEffect(() => {
-    if (!videoElemRef) return
-    videoElemRef.addEventListener('error', err => console.log('err', err))
-  }, [videoElemRef])
-
-  const onFetch = async (offset: number, end?: number) =>
-    fetch(
-      '/video.mkv',
-      {
-        headers: {
-          Range: `bytes=${offset}-${end ?? (!BACKPRESSURE_STREAM_ENABLED ? Math.min(offset + BASE_BUFFER_SIZE, size!) : '')}`
-        }
-      }
-    )
+  const [contentLength, setContentLength] = useState<number>()
+
+  const read = useCallback(
+    (offset: number, size: number) => {
+      if (contentLength === undefined) return Promise.resolve(new Uint8Array(0).buffer)
+      if (offset >= contentLength) return Promise.resolve(new Uint8Array(0).buffer)
+      return (
+        fetch(url, { headers: { Range: `bytes=${offset}-${Math.min(offset + size, contentLength) - 1}` } })
+          .then(res => res.arrayBuffer())
+      )
+    },
+    [contentLength]
+  )
 
   useEffect(() => {
-    onFetch(0, 1).then(async ({ headers, body }) => {
-      if (!body) throw new Error('no body')
-      const contentRangeContentLength = headers.get('Content-Range')?.split('/').at(1)
-      const contentLength =
-        contentRangeContentLength
-          ? Number(contentRangeContentLength)
-          : Number(headers.get('Content-Length'))
-      setSize(contentLength)
-    })
+    fetch(url, { headers: { Range: `bytes=${0}-${1}` } })
+      .then(async ({ headers, body }) => {
+        if (!body) throw new Error('no body')
+        const contentRangeContentLength = headers.get('Content-Range')?.split('/').at(1)
+        const contentLength =
+          contentRangeContentLength
+            ? Number(contentRangeContentLength)
+            : Number(headers.get('Content-Length'))
+        setContentLength(contentLength)
+      })
   }, [])
 
   const jassubWorkerUrl = useMemo(() => {
@@ -57,17 +55,47 @@ const Mount = () => {
     return URL.createObjectURL(blob)
   }, [])
 
+  const jassubWasmUrl = useMemo(() => {
+    return new URL('/build/jassub-worker.wasm', new URL(window.location.toString()).origin).toString()
+  }, [])
+
+  const jassubModernWasmUrl = useMemo(() => {
+    return new URL('/build/jassub-modern-worker.wasm', new URL(window.location.toString()).origin).toString()
+  }, [])
+
+  const [downloadedRanges, setDownloadedRanges] = useState<DownloadedRange[]>([])
+
+  useEffect(() => {
+    if (!contentLength) return
+    let i = 0
+    const increaseDownloadedRanges = () => {
+      setDownloadedRanges(() => [
+        {
+          startByteOffset: 0,
+          endByteOffset: contentLength * i
+        }
+      ])
+      i += 0.1
+      if (i < 1) {
+        setTimeout(increaseDownloadedRanges, 1000)
+      }
+    }
+    increaseDownloadedRanges()
+  }, [contentLength])
+
   return (
     <div css={mountStyle}>
       <MediaPlayer
-        baseBufferSize={BASE_BUFFER_SIZE}
-        ref={setVideoElemRef}
-        size={size}
-        fetch={(offset, end) => onFetch(offset, end)}
+        title={'video.mkv'}
+        downloadedRanges={contentLength ? downloadedRanges : undefined}
+        bufferSize={BASE_BUFFER_SIZE}
+        read={read}
+        size={contentLength}
         publicPath={new URL('/build/', new URL(import.meta.url).origin).toString()}
-        wasmUrl={new URL('/build/jassub-worker-modern.wasm', new URL(import.meta.url).origin).toString()}
+        jassubModernWasmUrl={jassubModernWasmUrl}
+        jassubWorkerUrl={jassubWorkerUrl}
+        jassubWasmUrl={jassubWasmUrl}
         libavWorkerUrl={libavWorkerUrl}
-        libassWorkerUrl={jassubWorkerUrl}
       />
     </div>
   )
@@ -97,7 +125,6 @@ const globalStyle = css`
     color: #fff;
     
     font-family: Montserrat;
-    // font-family: "Segoe UI", Roboto, "Fira Sans",  "Helvetica Neue", Arial, sans-serif;
   }
 
   body > div {
@@ -134,7 +161,7 @@ root.render(
 )
 
 if (import.meta.hot) {
-  import.meta.hot.dispose((data) => {
+  import.meta.hot.dispose(() => {
     root.unmount()
     mountElement.remove()
   })

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

@@ -0,0 +1,83 @@
+import { makeRemuxer } from 'libav-wasm'
+
+import { fromAsyncCallback } from './utils'
+import { queuedThrottleWithLastCall, toStreamChunkSize } from '../utils'
+import { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
+
+type DataSourceEvents =
+  | { type: 'METADATA', mimeType: string, duration: number }
+  | { type: 'SEEKING', currentTime: number }
+  | { type: 'NEED_DATA' }
+
+type DataSourceEmittedEvents =
+  | { type: 'DATA', data: Uint8Array }
+  | { type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: SubtitleFragment[] }
+  | { type: 'NEW_ATTACHMENTS', attachments: Attachment[] }
+
+type DataSourceInput = {
+  remuxerOptions: Parameters<typeof makeRemuxer>[0]
+}
+
+export default fromAsyncCallback<DataSourceEvents, DataSourceInput, DataSourceEmittedEvents>(async ({ sendBack, receive, input, self, emit }) => {
+  const { remuxerOptions } = input
+  const { publicPath, workerUrl, bufferSize, length, read } = remuxerOptions
+
+  const remuxer = await makeRemuxer({
+    publicPath,
+    workerUrl,
+    bufferSize,
+    length,
+    read
+  })
+
+  const metadata = await remuxer.init()
+  if (metadata.attachments?.length) sendBack({ type: 'NEW_ATTACHMENTS', attachments: metadata.attachments })
+  if (metadata.subtitles?.length) sendBack({ type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: metadata.subtitles })
+  sendBack({ type: 'METADATA', ...metadata })
+
+  let isFinished = false
+  let currentSeeks: { currentTime: number }[] = []
+  const loadMore = queuedThrottleWithLastCall(100, async () => {
+    if (currentSeeks.length || isFinished) return
+    try {
+      const { data, subtitles, finished } = await remuxer.read()
+      if (finished) {
+        isFinished = true
+      }
+      if (subtitles.length) {
+        sendBack({ type: 'NEW_SUBTITLE_FRAGMENTS', subtitles })
+      }
+      sendBack({ type: 'DATA', data })
+    } catch (err: any) {
+      if (err.message === 'Cancelled') return
+      console.error(err)
+    }
+  })
+
+  receive(async (event) => {
+    if (event.type === 'NEED_DATA') {
+      loadMore()
+    } else if (event.type === 'SEEKING') {
+      isFinished = false
+      const { currentTime } = event
+      const seekObject = { currentTime }
+      currentSeeks = [...currentSeeks, seekObject]
+      try {
+        const { data, pts } = await remuxer
+          .seek(currentTime)
+          .finally(() => {
+            currentSeeks = currentSeeks.filter(seekObj => seekObj !== seekObject)
+          })
+        sendBack({ type: 'TIMESTAMP_OFFSET', timestampOffset: pts })
+        sendBack({ type: 'DATA', data })
+      } catch (err: any) {
+        if (err.message === 'Cancelled') return
+        console.error(err)
+      }
+    }
+  })
+
+  return () => {
+    remuxer.destroy()
+  }
+})

package/src/state-machines/index.ts

@@ -0,0 +1,5 @@
+import { createActorContext } from '@xstate/react'
+
+import mediaMachine from './media'
+
+export const MediaMachineContext = createActorContext(mediaMachine)

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

@@ -0,0 +1,78 @@
+import { fromCallback } from 'xstate'
+
+type MediaPropertiesEvents =
+  | { type: 'PLAY' }
+  | { type: 'PAUSE' }
+  | { type: 'SET_TIME', value: number }
+  | { type: 'SET_VOLUME', muted: boolean, volume: number }
+  | { type: 'SET_PLAYBACK_RATE', playbackRate: number }
+  | { type: 'DESTROY' }
+
+type MediaPropertiesEmittedEvents =
+  | { type: 'PLAYING' }
+  | { type: 'PAUSED' }
+  | { type: 'TIME_UPDATE', currentTime: number }
+  | { type: 'VOLUME_UPDATE', muted: boolean, volume: number }
+  | { type: 'PLAYBACK_RATE_UPDATE', playbackRate: number }
+  | { type: 'DURATION_UPDATE', duration: number }
+  | { type: 'SEEKING', currentTime: number }
+  | { type: 'ENDED' }
+
+type MediaPropertiesInput = { videoElement: HTMLVideoElement }
+
+export default fromCallback<MediaPropertiesEvents, MediaPropertiesInput, MediaPropertiesEmittedEvents>(({ sendBack, receive, input }) => {
+  const { videoElement } = input
+
+  receive((event) => {
+    if (event.type === 'PLAY') {
+      videoElement.play()
+      handlePlay()
+    }
+    if (event.type === 'PAUSE') {
+      videoElement.pause()
+      handlePlay()
+    }
+    if (event.type === 'SET_TIME') {
+      videoElement.currentTime = event.value
+      handleTimeUpdate()
+    }
+    if (event.type === 'SET_VOLUME') {
+      videoElement.volume = event.volume
+      videoElement.muted = event.muted
+      handleVolumeUpdate()
+    }
+    if (event.type === 'SET_PLAYBACK_RATE') {
+      videoElement.playbackRate = event.playbackRate
+      handlePlaybackRateUpdate()
+    }
+  })
+
+  const handlePlay = () => sendBack({ type: 'PLAYING' })
+  const handlePause = () => sendBack({ type: 'PAUSED' })
+  const handleEnded = () => sendBack({ type: 'ENDED' })
+  const handleTimeUpdate = () => sendBack({ type: 'TIME_UPDATE', currentTime: videoElement.currentTime })
+  const handleVolumeUpdate = () => sendBack({ type: 'VOLUME_UPDATE', muted: videoElement.muted, volume: videoElement.volume })
+  const handlePlaybackRateUpdate = () => sendBack({ type: 'PLAYBACK_RATE_UPDATE', playbackRate: videoElement.playbackRate })
+  const handleSeeking = () => sendBack({ type: 'SEEKING', currentTime: videoElement.currentTime })
+  const handleDurationChange = () => sendBack({ type: 'DURATION_UPDATE', duration: videoElement.duration })
+
+  videoElement.addEventListener('play', handlePlay)
+  videoElement.addEventListener('pause', handlePause)
+  videoElement.addEventListener('ended', handleEnded)
+  videoElement.addEventListener('timeupdate', handleTimeUpdate)
+  videoElement.addEventListener('volumechange', handleVolumeUpdate)
+  videoElement.addEventListener('ratechange', handlePlaybackRateUpdate)
+  videoElement.addEventListener('seeking', handleSeeking)
+  videoElement.addEventListener('durationchange', handleDurationChange)
+
+  return () => {
+    videoElement.removeEventListener('play', handlePlay)
+    videoElement.removeEventListener('pause', handlePause)
+    videoElement.removeEventListener('ended', handleEnded)
+    videoElement.removeEventListener('timeupdate', handleTimeUpdate)
+    videoElement.removeEventListener('volumechange', handleVolumeUpdate)
+    videoElement.removeEventListener('ratechange', handlePlaybackRateUpdate)
+    videoElement.removeEventListener('seeking', handleSeeking)
+    videoElement.removeEventListener('durationchange', handleDurationChange)
+  }
+})

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

@@ -0,0 +1,129 @@
+import { makeRemuxer } from 'libav-wasm'
+
+import { fromAsyncCallback, getTimeRanges, updateSourceBuffer } from './utils'
+
+type MediaSourceEvents =
+  | ({ type: 'METADATA' } & Awaited<ReturnType<Awaited<ReturnType<typeof makeRemuxer>>['init']>>)
+  | { type: 'TIMESTAMP_OFFSET', timestampOffset: number }
+  | { type: 'DATA', data: ArrayBuffer }
+
+type MediaSourceEmittedEvents =
+  | { type: 'SOURCE_BUFFER_READY' }
+  | { type: 'SOURCE_OPEN' }
+  | { type: 'SOURCE_ENDED' }
+  | { type: 'SOURCE_ERROR' }
+  | { type: 'NEED_DATA' }
+
+export type MediaSourceOptions = {
+  preEvictionTime?: number
+  postEvictionTime?: number
+  bufferTargetTime?: number
+}
+
+type MediaSourceInput = {
+  videoElement: HTMLVideoElement
+  preEvictionTime?: number
+  postEvictionTime?: number
+  bufferTargetTime?: number
+}
+
+const defaultPreEvictionTime = -20
+const defaultPostEvictionTime = 60
+const defaultBufferTargetTime = 30
+
+export default fromAsyncCallback<MediaSourceEvents, MediaSourceInput, MediaSourceEmittedEvents>(async ({ sendBack, receive, input, self, emit }) => {
+  const { videoElement, preEvictionTime, postEvictionTime, bufferTargetTime } = input
+
+  const handlError = () => console.error(videoElement.error)
+  videoElement.addEventListener('error', handlError)
+
+  const mediaSource = new MediaSource()
+  const mediaSourceUrl = URL.createObjectURL(mediaSource)
+  videoElement.src = mediaSourceUrl
+
+  const getPreEvictionTime = () => videoElement.currentTime + (preEvictionTime ?? defaultPreEvictionTime)
+  const getPostEvictionTime = () => videoElement.currentTime + (postEvictionTime ?? defaultPostEvictionTime)
+  const getBufferTargetTime = () => videoElement.currentTime + (bufferTargetTime ?? defaultBufferTargetTime)
+
+  let headerBuffer: ArrayBuffer | undefined
+  const sourceBuffer =
+    await new Promise<SourceBuffer>(resolve =>
+      mediaSource.addEventListener(
+        'sourceopen',
+        () => {
+          let resolved = false
+          receive((event) => {
+            if (resolved) return
+            if (event.type === 'METADATA') {
+              const sourceBuffer = mediaSource.addSourceBuffer(`video/mp4; codecs="${event.info.input.videoMimeType},${event.info.input.audioMimeType}"`)
+              sourceBuffer.mode = 'segments'
+              mediaSource.duration = event.info.input.duration
+              headerBuffer = event.data
+              resolved = true
+              resolve(sourceBuffer)
+            }
+          })
+        },
+        { once: true }
+      )
+    )
+
+  if (!headerBuffer) throw new Error('No header buffer')
+
+  const { appendBuffer, unbufferRange, updateTimestampOffset } = updateSourceBuffer(sourceBuffer)
+  appendBuffer(headerBuffer)
+
+  receive(async (event) => {
+    if (event.type === 'DATA') {
+      await appendBuffer(event.data)
+    } else if (event.type === 'TIMESTAMP_OFFSET') {
+      await updateTimestampOffset(event.timestampOffset)
+    }
+  })
+
+  const unbuffer = async () => {
+    const preEvictionTime = getPreEvictionTime()
+    const postEvictionTime = getPostEvictionTime()
+    const bufferedRanges = getTimeRanges(sourceBuffer)
+    for (const { start, end } of bufferedRanges) {
+      if (start < preEvictionTime) {
+        await unbufferRange(
+          start,
+          preEvictionTime
+        )
+      }
+      if (end > postEvictionTime) {
+        await unbufferRange(
+          postEvictionTime,
+          end
+        )
+      }
+    }
+  }
+
+  const interval = setInterval(async () => {
+    await unbuffer()
+    const timeRanges = getTimeRanges(sourceBuffer)
+    const maxBufferedTime  = Math.max(...timeRanges.map(({ end }) => end))
+    if (maxBufferedTime < getBufferTargetTime()) {
+      sendBack({ type: 'NEED_DATA' })
+    }
+  }, 100)
+
+  const handleSourceOpen = () => sendBack({ type: 'SOURCE_OPEN' })
+  const handleSourceEnded = () => sendBack({ type: 'SOURCE_ENDED' })
+  const handleSourceError = () => sendBack({ type: 'SOURCE_ERROR' })
+
+  mediaSource.addEventListener('sourceopen', handleSourceOpen)
+  mediaSource.addEventListener('sourceended', handleSourceEnded)
+  mediaSource.addEventListener('error', handleSourceError)
+
+  return () => {
+    URL.revokeObjectURL(mediaSourceUrl)
+    clearInterval(interval)
+    videoElement.removeEventListener('error', handlError)
+    mediaSource.removeEventListener('sourceopen', handleSourceOpen)
+    mediaSource.removeEventListener('sourceended', handleSourceEnded)
+    mediaSource.removeEventListener('error', handleSourceError)
+  }
+})