@banou/media-player 0.6.0 → 0.6.2

package/src/state-machines/thumbnails.ts

@@ -1,123 +1,123 @@
-import type { Index } from 'libav-wasm/build/worker'
-
-import { makeRemuxer } from 'libav-wasm'
-import PQueue from 'p-queue'
-
-import { fromAsyncCallback } from './utils'
-import { toStreamChunkSize } from '../utils'
-import { DownloadedRange } from '../utils/context'
-
-type ExtendedIndex = Index & { duration?: number }
-
-export type Thumbnail = {
-  url: string
-  blob: Blob
-  timestamp: number
-  duration: number
-  index: ExtendedIndex
-}
-
-type DataSourceEvents =
-  | { type: 'DOWNLOADED_RANGES_UPDATED', downloadedRanges: DownloadedRange[] }
-
-type DataSourceEmittedEvents =
-  | { type: 'NEW_THUMBNAIL', thumbnail: Thumbnail }
-
-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
-  
-  let resolve: (value: void) => void
-  const readyPromise = new Promise<void>(_resolve => {
-    resolve = _resolve
-  })
-
-  receive(async (event) => {
-    await readyPromise
-    if (event.type === 'DOWNLOADED_RANGES_UPDATED') {
-      // take 1 index every 5seconds
-      const selectedIndexes =
-        metadata
-          .indexes
-          .reduce((acc, index) => {
-            const lastIndex = acc.at(-1)
-            if (lastIndex && index.timestamp - lastIndex.timestamp < 5) {
-              return acc
-            } else {
-              const nextValidIndex =
-                metadata
-                  .indexes
-                  .slice(index.index + 1)
-                  .find(nextIndex => nextIndex.timestamp > index.timestamp + 5)
-              if (!nextValidIndex) return [...acc, index]
-              return [...acc, { ...index, duration: nextValidIndex.timestamp - index.timestamp }]
-            }
-          }, [] as Index[])
-
-      const readyIndexes =
-        selectedIndexes
-          .filter((index) => {
-            const nextIndex = metadata.indexes.at(index.index + 1)
-            const endByte = nextIndex ? nextIndex.pos : remuxerOptions.length
-            const startByte = index.pos
-            const isWithinDownloadedRange =
-              event
-              .downloadedRanges
-              .some(({ startByteOffset, endByteOffset }) =>
-                startByteOffset <= startByte && endByte <=endByteOffset
-              )
-            return isWithinDownloadedRange
-          })
-          .sort((a, b) => a.timestamp - b.timestamp)
-
-      readyIndexes.forEach(index => loadMore(index))
-    }
-  })
-
-  const remuxer = await makeRemuxer({
-    publicPath,
-    workerUrl,
-    bufferSize,
-    length,
-    read
-  })
-
-  const metadata = await remuxer.init()
-
-  const queue = new PQueue({ concurrency: 1 })
-  
-  let thumbnails: Thumbnail[] = []
-  const loadMore = (index: ExtendedIndex) =>
-    queue.add(async () => {
-      if (thumbnails.find(thumbnail => thumbnail.index.index === index.index)) return
-      const buffer = await remuxer.readKeyframe(index.timestamp)
-
-      const blob = new Blob([buffer], { type: 'image/png' })
-      const url = URL.createObjectURL(blob)
-      const nextIndex = metadata.indexes.at(index.index + 1)
-      const duration =
-        nextIndex
-          ? nextIndex.timestamp - index.timestamp
-          : metadata.info.input.duration - index.timestamp
-      const thumbnail = {
-        blob,
-        url,
-        timestamp: index.timestamp,
-        duration: index.duration ?? duration,
-        index
-      } satisfies Thumbnail
-      thumbnails.push(thumbnail)
-      sendBack({ type: 'NEW_THUMBNAIL', thumbnail })
-    })
-
-  // @ts-expect-error
-  resolve()
-
-  return () => {
-    remuxer.destroy()
-  }
-})
+import type { Index } from 'libav-wasm/build/worker'
+
+import { makeRemuxer } from 'libav-wasm'
+import PQueue from 'p-queue'
+
+import { fromAsyncCallback } from './utils'
+import { toStreamChunkSize } from '../utils'
+import { DownloadedRange } from '../utils/context'
+
+type ExtendedIndex = Index & { duration?: number }
+
+export type Thumbnail = {
+  url: string
+  blob: Blob
+  timestamp: number
+  duration: number
+  index: ExtendedIndex
+}
+
+type DataSourceEvents =
+  | { type: 'DOWNLOADED_RANGES_UPDATED', downloadedRanges: DownloadedRange[] }
+
+type DataSourceEmittedEvents =
+  | { type: 'NEW_THUMBNAIL', thumbnail: Thumbnail }
+
+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
+  
+  let resolve: (value: void) => void
+  const readyPromise = new Promise<void>(_resolve => {
+    resolve = _resolve
+  })
+
+  receive(async (event) => {
+    await readyPromise
+    if (event.type === 'DOWNLOADED_RANGES_UPDATED') {
+      // take 1 index every 5seconds
+      const selectedIndexes =
+        metadata
+          .indexes
+          .reduce((acc, index) => {
+            const lastIndex = acc.at(-1)
+            if (lastIndex && index.timestamp - lastIndex.timestamp < 5) {
+              return acc
+            } else {
+              const nextValidIndex =
+                metadata
+                  .indexes
+                  .slice(index.index + 1)
+                  .find(nextIndex => nextIndex.timestamp > index.timestamp + 5)
+              if (!nextValidIndex) return [...acc, index]
+              return [...acc, { ...index, duration: nextValidIndex.timestamp - index.timestamp }]
+            }
+          }, [] as Index[])
+
+      const readyIndexes =
+        selectedIndexes
+          .filter((index) => {
+            const nextIndex = metadata.indexes.at(index.index + 1)
+            const endByte = nextIndex ? nextIndex.pos : remuxerOptions.length
+            const startByte = index.pos
+            const isWithinDownloadedRange =
+              event
+              .downloadedRanges
+              .some(({ startByteOffset, endByteOffset }) =>
+                startByteOffset <= startByte && endByte <=endByteOffset
+              )
+            return isWithinDownloadedRange
+          })
+          .sort((a, b) => a.timestamp - b.timestamp)
+
+      readyIndexes.forEach(index => loadMore(index))
+    }
+  })
+
+  const remuxer = await makeRemuxer({
+    publicPath,
+    workerUrl,
+    bufferSize,
+    length,
+    read
+  })
+
+  const metadata = await remuxer.init()
+
+  const queue = new PQueue({ concurrency: 1 })
+  
+  let thumbnails: Thumbnail[] = []
+  const loadMore = (index: ExtendedIndex) =>
+    queue.add(async () => {
+      if (thumbnails.find(thumbnail => thumbnail.index.index === index.index)) return
+      const buffer = await remuxer.readKeyframe(index.timestamp)
+
+      const blob = new Blob([buffer], { type: 'image/png' })
+      const url = URL.createObjectURL(blob)
+      const nextIndex = metadata.indexes.at(index.index + 1)
+      const duration =
+        nextIndex
+          ? nextIndex.timestamp - index.timestamp
+          : metadata.info.input.duration - index.timestamp
+      const thumbnail = {
+        blob,
+        url,
+        timestamp: index.timestamp,
+        duration: index.duration ?? duration,
+        index
+      } satisfies Thumbnail
+      thumbnails.push(thumbnail)
+      sendBack({ type: 'NEW_THUMBNAIL', thumbnail })
+    })
+
+  // @ts-expect-error
+  resolve()
+
+  return () => {
+    remuxer.destroy()
+  }
+})

package/src/state-machines/utils.ts

@@ -1,94 +1,94 @@
-import type { AnyActorSystem } from 'xstate/dist/declarations/src/system'
-import type { AnyEventObject, CallbackActorLogic, CallbackActorRef, EventObject, NonReducibleUnknown } from 'xstate'
-
-import PQueue from 'p-queue'
-import { fromCallback } from 'xstate'
-
-type Receiver<TEvent extends EventObject> = (listener: {
-  bivarianceHack(event: TEvent): void
-}['bivarianceHack']) => void
-
-export type CallbackLogicFunction<TEvent extends EventObject = AnyEventObject, TSentEvent extends EventObject = AnyEventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject> = ({ input, system, self, sendBack, receive, emit }: {
-    input: TInput
-    system: AnyActorSystem
-    self: CallbackActorRef<TEvent>
-    sendBack: (event: TSentEvent) => void
-    receive: Receiver<TEvent>
-    emit: (emitted: TEmitted) => void
-}) => Promise<(() => void) | void>
-
-type FromAsyncCallback = <TEvent extends EventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject>(callback: CallbackLogicFunction<TEvent, AnyEventObject, TInput, TEmitted>) => CallbackActorLogic<TEvent, TInput, TEmitted>
-
-export const fromAsyncCallback =
-  ((callback: (...args: any[]) => Promise<() => any>) =>
-    fromCallback((...args: any[]) => {
-      const callbackPromise = callback(...args)
-      return () => {
-        callbackPromise
-          .then(callbackResult => callbackResult?.())
-      }
-    })) as FromAsyncCallback
-
-export const getTimeRanges = (sourceBuffer: SourceBuffer) =>
-  Array(sourceBuffer.buffered.length)
-    .fill(undefined)
-    .map((_, index) => ({
-      index,
-      start: sourceBuffer.buffered.start(index),
-      end: sourceBuffer.buffered.end(index)
-    }))
-
-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) => {
-    console.error(ev)
-    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 updateSourceBuffer = (sourceBuffer: SourceBuffer) => {
-  const queue = new PQueue({ concurrency: 1 })
-
-  const appendBuffer = (buffer: ArrayBuffer) =>
-    queue.add(() =>
-      new Promise<Event>((resolve, reject) => {
-        setupListeners(sourceBuffer, resolve, reject)
-        sourceBuffer.appendBuffer(buffer)
-      })
-    )
-
-  const unbufferRange = async (start: number, end: number) =>
-    queue.add(() =>
-      new Promise((resolve, reject) => {
-        setupListeners(sourceBuffer, resolve, reject)
-        sourceBuffer.remove(start, end)
-      })
-    )
-
-  const updateTimestampOffset = (timestampOffset: number) =>
-    queue.add(() => {
-      sourceBuffer.timestampOffset = timestampOffset
-    })
-
-  return {
-    appendBuffer,
-    unbufferRange,
-    updateTimestampOffset
-  }
-}
+import type { AnyActorSystem } from 'xstate/dist/declarations/src/system'
+import type { AnyEventObject, CallbackActorLogic, CallbackActorRef, EventObject, NonReducibleUnknown } from 'xstate'
+
+import PQueue from 'p-queue'
+import { fromCallback } from 'xstate'
+
+type Receiver<TEvent extends EventObject> = (listener: {
+  bivarianceHack(event: TEvent): void
+}['bivarianceHack']) => void
+
+export type CallbackLogicFunction<TEvent extends EventObject = AnyEventObject, TSentEvent extends EventObject = AnyEventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject> = ({ input, system, self, sendBack, receive, emit }: {
+    input: TInput
+    system: AnyActorSystem
+    self: CallbackActorRef<TEvent>
+    sendBack: (event: TSentEvent) => void
+    receive: Receiver<TEvent>
+    emit: (emitted: TEmitted) => void
+}) => Promise<(() => void) | void>
+
+type FromAsyncCallback = <TEvent extends EventObject, TInput = NonReducibleUnknown, TEmitted extends EventObject = EventObject>(callback: CallbackLogicFunction<TEvent, AnyEventObject, TInput, TEmitted>) => CallbackActorLogic<TEvent, TInput, TEmitted>
+
+export const fromAsyncCallback =
+  ((callback: (...args: any[]) => Promise<() => any>) =>
+    fromCallback((...args: any[]) => {
+      const callbackPromise = callback(...args)
+      return () => {
+        callbackPromise
+          .then(callbackResult => callbackResult?.())
+      }
+    })) as FromAsyncCallback
+
+export const getTimeRanges = (sourceBuffer: SourceBuffer) =>
+  Array(sourceBuffer.buffered.length)
+    .fill(undefined)
+    .map((_, index) => ({
+      index,
+      start: sourceBuffer.buffered.start(index),
+      end: sourceBuffer.buffered.end(index)
+    }))
+
+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) => {
+    console.error(ev)
+    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 updateSourceBuffer = (sourceBuffer: SourceBuffer) => {
+  const queue = new PQueue({ concurrency: 1 })
+
+  const appendBuffer = (buffer: ArrayBuffer) =>
+    queue.add(() =>
+      new Promise<Event>((resolve, reject) => {
+        setupListeners(sourceBuffer, resolve, reject)
+        sourceBuffer.appendBuffer(buffer)
+      })
+    )
+
+  const unbufferRange = async (start: number, end: number) =>
+    queue.add(() =>
+      new Promise((resolve, reject) => {
+        setupListeners(sourceBuffer, resolve, reject)
+        sourceBuffer.remove(start, end)
+      })
+    )
+
+  const updateTimestampOffset = (timestampOffset: number) =>
+    queue.add(() => {
+      sourceBuffer.timestampOffset = timestampOffset
+    })
+
+  return {
+    appendBuffer,
+    unbufferRange,
+    updateTimestampOffset
+  }
+}

package/src/utils/actor-utils.ts

@@ -1,19 +1,19 @@
-import { Actor, AnyActorLogic } from "xstate"
-
-export const togglePlay = (
-  mediaActor: Actor<AnyActorLogic>,
-  isPaused: boolean,
-  duration: number | undefined,
-  currentTime: number
-) => {
-  if (!mediaActor) throw new Error('Media actor not found')
-  if (!duration) throw new Error('Duration not found')
-  if (duration === currentTime) {
-    mediaActor.send({ type: 'SET_TIME', value: 0 })
-    mediaActor.send({ type: 'PLAY' })
-  } else if (isPaused) {
-    mediaActor.send({ type: 'PLAY' })
-  } else {
-    mediaActor.send({ type: 'PAUSE' })
-  }
-}
+import { Actor, AnyActorLogic } from "xstate"
+
+export const togglePlay = (
+  mediaActor: Actor<AnyActorLogic>,
+  isPaused: boolean,
+  duration: number | undefined,
+  currentTime: number
+) => {
+  if (!mediaActor) throw new Error('Media actor not found')
+  if (!duration) throw new Error('Duration not found')
+  if (duration === currentTime) {
+    mediaActor.send({ type: 'SET_TIME', value: 0 })
+    mediaActor.send({ type: 'PLAY' })
+  } else if (isPaused) {
+    mediaActor.send({ type: 'PLAY' })
+  } else {
+    mediaActor.send({ type: 'PAUSE' })
+  }
+}

package/src/utils/colors.ts

@@ -1,9 +1,9 @@
-const colors = {
-  primary: '#EAEBEE',
-  secondary: '#D0D0D9',
-  hover: 'rgba(255, 255, 255, 0.13)',
-  borderPrimary: '#384F70',
-  backgroundTooltip: '#222222',
-}
-
+const colors = {
+  primary: '#EAEBEE',
+  secondary: '#D0D0D9',
+  hover: 'rgba(255, 255, 255, 0.13)',
+  borderPrimary: '#384F70',
+  backgroundTooltip: '#222222',
+}
+
 export default colors

package/src/utils/context.ts

@@ -1,23 +1,23 @@
-import { createContext } from 'react'
-
-export type DownloadedRange =
-  // | {
-  //   startTimestamp: number
-  //   endTimestamp: number
-  // }
-  | {
-    startByteOffset: number
-    endByteOffset: number
-  }
-
-export type MediaPlayerContextType = {
-  videoElement?: HTMLVideoElement
-  title?: string
-  subtitle?: string
-  size?: number
-  downloadedRanges?: DownloadedRange[]
-  hideUI: boolean
-  update: (context: Omit<MediaPlayerContextType, 'update'>) => void
-}
-
-export const MediaPlayerContext = createContext<MediaPlayerContextType>({} as MediaPlayerContextType)
+import { createContext } from 'react'
+
+export type DownloadedRange =
+  // | {
+  //   startTimestamp: number
+  //   endTimestamp: number
+  // }
+  | {
+    startByteOffset: number
+    endByteOffset: number
+  }
+
+export type MediaPlayerContextType = {
+  videoElement?: HTMLVideoElement
+  title?: string
+  subtitle?: string
+  size?: number
+  downloadedRanges?: DownloadedRange[]
+  hideUI: boolean
+  update: (context: Omit<MediaPlayerContextType, 'update'>) => void
+}
+
+export const MediaPlayerContext = createContext<MediaPlayerContextType>({} as MediaPlayerContextType)