@banou/media-player 0.0.3 → 0.2.0

package/src/main.tsx

@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client'
 import { css, Global } from '@emotion/react'
 
 import MediaPlayer from './index'
-import { bufferStream } from './utils'
 
 const mountStyle = css`
   display: grid;
@@ -24,69 +23,24 @@ const Mount = () => {
     videoElemRef.addEventListener('error', err => console.log('err', err))
   }, [videoElemRef])
 
-  const [currentStreamOffset, setCurrentStreamOffset] = useState<number>(0)
-  const [streamReader, setStreamReader] = useState<ReadableStreamDefaultReader<Uint8Array>>()
-
-  useEffect(() => {
-    if (!streamReader) return
-    return () => {
-      streamReader.cancel()
-    }
-  }, [streamReader])
-
-  const setupStream = async (offset: number) => {
-    if (streamReader) {
-      streamReader.cancel()
-    }
-    const streamResponse = await onFetch(offset, undefined, true)
-    if (!streamResponse.body) throw new Error('no body')
-    const stream = bufferStream({ stream: streamResponse.body, size: BASE_BUFFER_SIZE })
-    const reader = stream.getReader()
-    setStreamReader(reader)
-    setCurrentStreamOffset(offset)
-    return reader
-  }
-
-  const onFetch = async (offset: number, end?: number, force?: boolean) => {
-    if (force || end !== undefined && ((end - offset) + 1) !== BASE_BUFFER_SIZE) {
-      return (
-        fetch(
-          '/video3.mkv',
-          {
-            headers: {
-              Range: `bytes=${offset}-${end ?? ''}`
-            }
-          }
-        )
-      )
-    }
-    const _streamReader =
-      currentStreamOffset !== offset
-        ? await setupStream(offset)
-        : streamReader
-
-    if (!_streamReader) throw new Error('Stream reader not ready')
-    return new Response(
-      await _streamReader
-        .read()
-        .then(({ value }) => {
-          if (value) {
-            setCurrentStreamOffset(offset => offset + value.byteLength)
-          }
-          return value
-        })
+  const onFetch = async (offset: number, end?: number) =>
+    fetch(
+      '/video6.mkv',
+      {
+        headers: {
+          Range: `bytes=${offset}-${end ?? ''}`
+        }
+      }
     )
-  }
 
   useEffect(() => {
-    onFetch(0, 1, true).then(async ({ headers, body }) => {
+    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'))
-      if (STREAM_RESPONSES) await setupStream(0)
       setSize(contentLength)
     })
   }, [])
@@ -109,7 +63,7 @@ const Mount = () => {
         baseBufferSize={BASE_BUFFER_SIZE}
         ref={setVideoElemRef}
         size={size}
-        fetch={(offset, end) => onFetch(offset, end, STREAM_RESPONSES ? false : true)}
+        fetch={(offset, end) => onFetch(offset, end)}
         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()}
         libavWorkerUrl={libavWorkerUrl}

package/src/utils.ts

@@ -7,6 +7,38 @@ export type Chunk = {
   buffered: boolean
 }
 
+export function debounceImmediateAndLatest<T extends (...args: any[]) => any>(
+  wait: number,
+  func: T
+): T {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  let lastArgs: any[] | null = null;
+
+  const debouncedFunction = function(...args: any[]) {
+    const context = this;
+
+    if (timeoutId === null) {
+      // Call immediately on the first call
+      func.apply(context, args);
+    } else {
+      // Store the latest arguments for the last call
+      lastArgs = args;
+    }
+
+    clearTimeout(timeoutId as ReturnType<typeof setTimeout>);
+
+    timeoutId = setTimeout(() => {
+      if (lastArgs) {
+        func.apply(context, lastArgs);
+        lastArgs = null;
+      }
+      timeoutId = null;
+    }, wait);
+  };
+
+  return debouncedFunction as T;
+}
+
 export const queuedDebounceWithLastCall = <T2 extends any[], T extends (...args: T2) => any>(time: number, func: T) => {
   let runningFunction: Promise<ReturnType<T>> | undefined
   let lastCall: Promise<ReturnType<T>> | undefined
@@ -84,63 +116,6 @@ export const queuedDebounceWithLastCall = <T2 extends any[], T extends (...args:
   }
 }
 
-// todo: reimplement this into a ReadableByteStream https://web.dev/streams/ once FF gets support
-// todo: remove firefox workaround once https://bugzilla.mozilla.org/show_bug.cgi?id=1808868 ships
-export const bufferStream = ({ stream, size: SIZE }: { stream: ReadableStream, size: number }) =>
-  new ReadableStream<Uint8Array>({
-    start() {
-      // @ts-expect-error
-      this.reader = stream.getReader()
-    },
-    async pull(controller) {
-      try {
-        // @ts-expect-error
-        const { leftOverData }: { leftOverData: Uint8Array | undefined } = this
-
-        const accumulate = async ({ buffer = new Uint8Array(SIZE), currentSize = 0 } = {}): Promise<{ buffer?: Uint8Array, currentSize?: number, done: boolean }> => {
-          // @ts-expect-error
-          const { value: newBuffer, done } = await this.reader.read()
-
-          if (currentSize === 0 && leftOverData) {
-            // console.log('currentSize', currentSize)
-            // console.log('buffer', buffer)
-            // console.log('leftOverData', leftOverData)
-            buffer.set(leftOverData)
-            currentSize += leftOverData.byteLength
-            // @ts-expect-error
-            this.leftOverData = undefined
-          }
-    
-          if (done) {
-            return { buffer: buffer.slice(0, currentSize), currentSize, done }
-          }
-    
-          let newSize
-          const slicedBuffer = newBuffer.slice(0, SIZE - currentSize)
-          newSize = currentSize + slicedBuffer.byteLength
-          buffer.set(slicedBuffer, currentSize)
-    
-          if (newSize === SIZE) {
-            // @ts-expect-error
-            this.leftOverData = newBuffer.slice(SIZE - currentSize)
-            return { buffer, currentSize: newSize, done: false }
-          }
-          
-          return accumulate({ buffer, currentSize: newSize })
-        }
-        const { buffer, done } = await accumulate()
-        if (buffer?.byteLength) controller.enqueue(buffer)
-        if (done) controller.close()
-      } catch (err) {
-        console.error(err)
-      }
-    },
-    cancel() {
-      // @ts-expect-error
-      this.reader.cancel()
-    }
-  })
-
 const getTimeRanges = (sourceBuffer: SourceBuffer) =>
   Array(sourceBuffer.buffered.length)
     .fill(undefined)
@@ -156,230 +131,110 @@ const getTimeRange =
       getTimeRanges(sourceBuffer)
         .find(({ start, end }) => time >= start && time <= end)
 
-// const setupListeners = (sourceBuffer: SourceBuffer, resolve: (value: Event) => void, reject: (reason: Event) => void) => {
-//   const updateEndListener = (ev: Event) => {
-//     resolve(ev)
-//     unregisterListeners()
-//   }
-//   const abortListener = (ev: Event) => {
-//     resolve(ev)
-//     unregisterListeners()
-//   }
-//   const errorListener = (ev: Event) => {
-//     reject(ev),
-//     unregisterListeners()
-//   }
-//   const unregisterListeners = () => {
-//     sourceBuffer.removeEventListener('updateend', updateEndListener)
-//     sourceBuffer.removeEventListener('abort', abortListener)
-//     sourceBuffer.removeEventListener('error', errorListener)
-//   }
-//   sourceBuffer.addEventListener('updateend', updateEndListener, { once: true })
-//   sourceBuffer.addEventListener('abort', abortListener, { once: true })
-//   sourceBuffer.addEventListener('error', errorListener, { once: true })
-// }
-      
-// const appendBuffer = (queue: PQueue, sourceBuffer: SourceBuffer, buffer: ArrayBuffer) =>
-//   queue.add(() =>
-//     new Promise<Event>((resolve, reject) => {
-//       setupListeners(sourceBuffer, resolve, reject)
-//       sourceBuffer.appendBuffer(buffer)
-//     })
-//   )
-
-// const bufferChunk = async (queue: PQueue, sourceBuffer: SourceBuffer, chunk: Chunk) => {
-//   await appendBuffer(queue, sourceBuffer, chunk.buffer.buffer)
-//   chunk.buffered = true
-// }
-
-// const unbufferChunk = async (queue: PQueue, sourceBuffer: SourceBuffer, chunks: Chunk[], chunk: Chunk) =>
-//   queue.add(() =>
-//     new Promise((resolve, reject) => {
-//       setupListeners(sourceBuffer, resolve, reject)
-
-//       const chunkIndex = chunks.indexOf(chunk)
-//       if (chunkIndex === -1) return reject('No chunk found')
-//       sourceBuffer.remove(chunk.pts, chunk.pts + chunk.duration)
-//       chunk.buffered = false
-//     })
-//   )
-
-
-
-
-
-
-
-
-
-
-
-// const listenForOperationResult =
-//   (sourceBuffer: SourceBuffer) =>
-//     (resolve: (value: Event) => void, reject: (reason: Event) => void) => {
-//       const updateEndListener = (ev: Event) => {
-//         resolve(ev)
-//         unregisterListeners()
-//       }
-//       const abortListener = (ev: Event) => {
-//         resolve(ev)
-//         unregisterListeners()
-//       }
-//       const errorListener = (ev: Event) => {
-//         reject(ev),
-//         unregisterListeners()
-//       }
-//       const unregisterListeners = () => {
-//         sourceBuffer.removeEventListener('updateend', updateEndListener)
-//         sourceBuffer.removeEventListener('abort', abortListener)
-//         sourceBuffer.removeEventListener('error', errorListener)
-//       }
-//       sourceBuffer.addEventListener('updateend', updateEndListener, { once: true })
-//       sourceBuffer.addEventListener('abort', abortListener, { once: true })
-//       sourceBuffer.addEventListener('error', errorListener, { once: true })
-//     }
-
-// export const appendBuffer =
-//   (sourceBuffer: SourceBuffer) =>
-//     (buffer: ArrayBuffer) =>
-//       new Promise<Event>((resolve, reject) => {
-//         listenForOperationResult(sourceBuffer)(resolve, reject)
-//         sourceBuffer.appendBuffer(buffer)
-//       })
 
-// export const removeRange =
-//   (sourceBuffer: SourceBuffer) =>
-//     ({ start, end, index }: { start: number, end: number, index: number }) =>
-//       listenForOperationResult(sourceBuffer)(() => {
-//         sourceBuffer.remove(
-//           Math.max(sourceBuffer.buffered.start(index), start),
-//           Math.min(sourceBuffer.buffered.end(index), end)
-//         )
-//       })
-
-// export const abort =
-//   (sourceBuffer: SourceBuffer) =>
-//     listenForOperationResult(sourceBuffer)(() => {
-//       sourceBuffer.abort()
-//     })
-
-// export const appendChunk =
-//   (sourceBuffer: SourceBuffer) =>
-//     async (chunk: Chunk) => {
-//       await appendBuffer(sourceBuffer)(chunk.arrayBuffer.buffer)
-//     }
-
-// export const removeChunk =
-//   (sourceBuffer: SourceBuffer) =>
-//     async (chunk: Chunk) => {
-//       if (chunk.keyframeIndex < 0) return console.log('skipped remove', chunk)
-//       const range = getTimeRange(sourceBuffer)(chunk.startTime) ?? getTimeRange(sourceBuffer)(chunk.endTime)
-//       if (!range) throw new RangeError('No TimeRange found with this chunk')
-//       await removeRange(sourceBuffer)({ start: chunk.startTime, end: chunk.endTime, index: range.index })
-//     }
-
-// const PRE_SEEK_NEEDED_BUFFERS_IN_SECONDS = 15
-// const POST_SEEK_NEEDED_BUFFERS_IN_SECONDS = 30
-
-// // todo: fix issue with last chunk not properly loaded
-// export const updateSourceBuffer =
-//   (sourceBuffer: SourceBuffer, getChunkArrayBuffer: (id: number) => Promise<Uint8Array | undefined>) => {
-//     const cache: Map<number, Uint8Array | Promise<Uint8Array | undefined>> = new Map()
-//     const bufferedChunksMap: Map<number, Uint8Array> = new Map()
-//     let renderCount = 0
-
-//     const update = async ({ currentTime, chunks, retry = false }: { currentTime: number, chunks: Chunk[], retry: boolean }) => {
-//       const currentRenderCount = renderCount
-//       renderCount++
-
-//       const neededChunks =
-//         [
-//           // header chunk
-//           { keyframeIndex: 0, startTime: 0, endTime: 0 },
-//           ...chunks
-//             .filter(({ startTime, endTime }) =>
-//               currentTime - PRE_SEEK_NEEDED_BUFFERS_IN_SECONDS < startTime
-//               && currentTime + POST_SEEK_NEEDED_BUFFERS_IN_SECONDS > endTime
-//             )
-//         ]
+// todo: reimplement this into a ReadableByteStream https://web.dev/streams/ once Safari gets support
+export const toStreamChunkSize = (SIZE: number) => (stream: ReadableStream) =>
+  new ReadableStream<Uint8Array>({
+    reader: undefined,
+    leftOverData: undefined,
+    start() {
+      this.reader = stream.getReader()
+    },
+    async pull(controller) {
+      const { leftOverData }: { leftOverData: Uint8Array | undefined } = this
+
+      const accumulate = async ({ buffer = new Uint8Array(SIZE), currentSize = 0 } = {}): Promise<{ buffer?: Uint8Array, currentSize?: number, done: boolean }> => {
+        const { value: newBuffer, done } = await this.reader!.read()
+        if (currentSize === 0 && leftOverData) {
+          buffer.set(leftOverData)
+          currentSize += leftOverData.byteLength
+          this.leftOverData = undefined
+        }
+  
+        if (done) {
+          const finalResult = { buffer: buffer.slice(0, currentSize), currentSize, done }
+          this.reader = undefined
+          this.leftOverData = undefined
+          return finalResult
+        }
+  
+        let newSize
+        const slicedBuffer = newBuffer.slice(0, SIZE - currentSize)
+        newSize = currentSize + slicedBuffer.byteLength
+        buffer.set(slicedBuffer, currentSize)
+  
+        if (newSize === SIZE) {
+          this.leftOverData = newBuffer.slice(SIZE - currentSize)
+          return { buffer, currentSize: newSize, done: false }
+        }
+        
+        return accumulate({ buffer, currentSize: newSize })
+      }
+      const { buffer, done } = await accumulate()
+      if (buffer?.byteLength) controller.enqueue(buffer)
+      if (done) controller.close()
+    },
+    cancel() {
+      this.reader!.cancel()
+      this.leftOverData = undefined
+    }
+  } as UnderlyingDefaultSource<Uint8Array> & {
+    reader: ReadableStreamDefaultReader<Uint8Array> | undefined
+    leftOverData: Uint8Array | undefined
+  })
 
-//       // todo: improve perf by making this loop inclusive of bufferedChunksMap instead of chunks
-//       const shouldUnbufferChunks =
-//         chunks
-//           .filter(chunk => !neededChunks.includes(chunk))
+export const toBufferedStream = (SIZE: number) => (stream: ReadableStream) =>
+  new ReadableStream<Uint8Array>({
+    buffers: [],
+    currentPullPromise: undefined,
+    reader: undefined,
+    leftOverData: undefined,
+    start() {
+      this.reader = stream.getReader()
+    },
+    async pull(controller) {
+      const pull = async () => {
+        if (this.buffers.length >= SIZE) return
+        this.currentPullPromise = this.reader!.read()
+        const { value: newBuffer, done } = await this.currentPullPromise
+        this.currentPullPromise = undefined
+        if (done) {
+          try {
+            controller.close()
+          } catch (err) {
+            // console.error(err)
+          }
+          return
+        }
+        this.buffers.push(newBuffer)
+        return newBuffer
+      }
 
-//       for (const chunk of shouldUnbufferChunks) {
-//         if (cache.has(chunk.keyframeIndex)) cache.delete(chunk.keyframeIndex)
-//       }
+      const tryToBuffer = async (): Promise<void> => {
+        if (this.buffers.length >= SIZE) return
+        
+        if (this.buffers.length === 0) {
+          const buffer = await pull()
+          if (!buffer) return
+          return tryToBuffer()
+        } else {
+          pull().then((buffer) => {
+            if (!buffer) return
+            tryToBuffer()
+          })
+        }
+      }
 
-//       if (sourceBuffer.updating) {
-//         await abort(sourceBuffer).catch((err) => {
-//           if (!(err instanceof Event)) throw err
-//         })
-//       }
-//       for (const chunk of shouldUnbufferChunks) {
-//         if (!bufferedChunksMap.has(chunk.keyframeIndex)) continue
-//         try {
-//           await removeChunk(sourceBuffer)(chunk)
-//           bufferedChunksMap.delete(chunk.keyframeIndex)
-//         } catch (err) {
-//           if (err.message === 'No TimeRange found with this chunk') {
-//             bufferedChunksMap.delete(chunk.keyframeIndex)
-//           }
-//           if (err.message !== 'No TimeRange found with this chunk') throw err
-//         }
-//       }
-//       const bufferedOutOfRangeRanges =
-//         getTimeRanges(sourceBuffer)
-//           .filter(({ start, end }) =>
-//               currentTime - PRE_SEEK_NEEDED_BUFFERS_IN_SECONDS > start && currentTime - PRE_SEEK_NEEDED_BUFFERS_IN_SECONDS > end ||
-//               currentTime + POST_SEEK_NEEDED_BUFFERS_IN_SECONDS < start && currentTime + POST_SEEK_NEEDED_BUFFERS_IN_SECONDS < end
-//             )
-//       for (const range of bufferedOutOfRangeRanges) {
-//         try {
-//           await removeRange(sourceBuffer)(range)
-//         } catch (err) {
-//           throw err
-//         }
-//       }
-//       for (const chunk of neededChunks) {
-//         // console.log('chunk', chunk, neededChunks, bufferedChunksMap.has(chunk.keyframeIndex), chunk.keyframeIndex + 1 === chunks.length)
-//         if (bufferedChunksMap.has(chunk.keyframeIndex) || (chunk.keyframeIndex !== 0 && chunk.keyframeIndex + 1 === chunks.length)) continue
-//         // console.log('check PASSED', chunk, neededChunks)
-//         try {
-//           const cachedBuffer = cache.get(chunk.keyframeIndex)
-//           if (!cachedBuffer) {
-//             const fetchBuffer =
-//               getChunkArrayBuffer(chunk.keyframeIndex)
-//                 .then(arrayBuffer => {
-//                   if (arrayBuffer) cache.set(chunk.keyframeIndex, arrayBuffer)
-//                   return arrayBuffer
-//                 })
-//             cache.set(chunk.keyframeIndex, fetchBuffer)
-//           }
-//           const buffer = await cache.get(chunk.keyframeIndex)
-//           if (renderCount !== currentRenderCount + 1) return
-//           if (!buffer) continue
-//           const _chunk = { ...chunk, arrayBuffer: buffer }
-//           await appendChunk(sourceBuffer)(_chunk).catch(err => {
-//             bufferedChunksMap.delete(chunk.keyframeIndex)
-//             throw err
-//           })
-//           bufferedChunksMap.set(chunk.keyframeIndex, buffer)
-//         } catch (err) {
-//           if (!(err instanceof Event)) {
-//             for (const range of getTimeRanges(sourceBuffer)) {
-//               await removeRange(sourceBuffer)(range)
-//               // todo: remove cached buffers from Maps
-//             }
-//             if (!retry) await update({ currentTime, chunks, retry: true })
-//             else throw err
-//           }
-//           // if (err.message !== 'Failed to execute \'appendBuffer\' on \'SourceBuffer\': This SourceBuffer is still processing an \'appendBuffer\' or \'remove\' operation.') throw err
-//           break
-//         }
-//       }
-//     }
-    
-//     return update
-//   }
+      await tryToBuffer()
+      controller.enqueue(this.buffers.shift())
+      tryToBuffer()
+    },
+    cancel() {
+      this.reader!.cancel()
+    }
+  } as UnderlyingDefaultSource<Uint8Array> & {
+    reader: ReadableStreamDefaultReader<Uint8Array> | undefined
+    leftOverData: Uint8Array | undefined
+    buffers: Uint8Array[]
+    currentPullPromise: Promise<ReadableStreamReadResult<Uint8Array>> | undefined
+  })