@banou/media-player 0.2.1 → 0.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@banou/media-player",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "",
   "type": "module",
   "main": "build/index.js",
@@ -37,7 +37,7 @@
   "dependencies": {
     "@emotion/react": "^11.10.5",
     "jassub": "^1.7.1",
-    "libav-wasm": "^0.3.2",
+    "libav-wasm": "^0.3.3",
     "mp4box": "^0.5.2",
     "osra": "^0.0.11",
     "p-queue": "^7.3.4",

package/src/index.tsx

@@ -250,8 +250,12 @@ const FKNVideo = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLInputEleme
   
       await appendBuffer(headerChunk.buffer)
   
+      let reachedEnd = false
+
       const pull = async () => {
+        if (reachedEnd) throw new Error('end')
         const chunk = await remuxer.read()
+        if (chunk.isTrailer) reachedEnd = true
         chunks = [...chunks, chunk]
         return chunk
       }
@@ -265,7 +269,7 @@ const FKNVideo = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLInputEleme
         const sliceIndex = Math.max(0, currentChunkIndex - PREVIOUS_BUFFER_COUNT)
   
         for (let i = 0; i < sliceIndex + BUFFER_COUNT; i++) {
-          if (chunks[i]) continue
+          if (chunks[i] || reachedEnd) continue
           const chunk = await pull()
           await appendBuffer(chunk.buffer)
         }
@@ -297,11 +301,13 @@ const FKNVideo = forwardRef<HTMLVideoElement, VideoHTMLAttributes<HTMLInputEleme
       let firstSeekPaused: boolean | undefined
       const seek = debounceImmediateAndLatest(250, async (seekTime: number) => {
         try {
+          reachedEnd = false
           if (firstSeekPaused === undefined) firstSeekPaused = videoElement.paused
           seeking = true
           chunks = []
           await remuxer.seek(seekTime)
           const chunk1 = await pull()
+          // firefox sometimes throws "Uncaught (in promise) DOMException: An attempt was made to use an object that is not, or is no longer, usable"
           sourceBuffer.timestampOffset = chunk1.pts
           await appendBuffer(chunk1.buffer)
           if (firstSeekPaused === false) {

package/src/main.tsx

@@ -12,7 +12,7 @@ const mountStyle = css`
 `
 
 const BASE_BUFFER_SIZE = 5_000_000
-const STREAM_RESPONSES = false
+const BACKPRESSURE_STREAM_ENABLED = !navigator.userAgent.includes("Firefox")
 
 const Mount = () => {
   const [videoElemRef, setVideoElemRef] = useState<HTMLVideoElement | null>()
@@ -25,10 +25,10 @@ const Mount = () => {
 
   const onFetch = async (offset: number, end?: number) =>
     fetch(
-      '/video6.mkv',
+      '/video9.mkv',
       {
         headers: {
-          Range: `bytes=${offset}-${end ?? ''}`
+          Range: `bytes=${offset}-${end ?? (!BACKPRESSURE_STREAM_ENABLED ? Math.min(offset + BASE_BUFFER_SIZE, size!) : '')}`
         }
       }
     )

package/src/utils.ts

@@ -200,6 +200,7 @@ export const toBufferedStream = (SIZE: number) => (stream: ReadableStream) =>
         this.currentPullPromise = undefined
         if (done) {
           try {
+            for (const buffer of this.buffers) controller.enqueue(buffer)
             controller.close()
           } catch (err) {
             // console.error(err)
@@ -226,8 +227,18 @@ export const toBufferedStream = (SIZE: number) => (stream: ReadableStream) =>
       }
 
       await tryToBuffer()
-      controller.enqueue(this.buffers.shift())
-      tryToBuffer()
+      try {
+        controller.enqueue(this.buffers.shift())
+        tryToBuffer()
+      } catch(err) {
+        // firefox somehow shits the bed here
+        if (!(
+          err instanceof TypeError &&
+          err.message === 'ReadableStreamDefaultController.enqueue: Cannot enqueue into a stream that has already been requested to close.'
+        )) {
+          throw err
+        }
+      }
     },
     cancel() {
       this.reader!.cancel()