@banou/media-player 0.6.2 → 0.8.0

package/src/state-machines/utils.ts

@@ -1,94 +0,0 @@
-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 +0,0 @@
-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/context.ts

@@ -1,23 +0,0 @@
-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)

package/src/utils/fonts.ts

@@ -1,160 +0,0 @@
-export const fonts = {
-  headings: {
-    large: `
-      font-weight: 600;
-      font-size: 2.8rem;
-      line-height: 3.4rem;
-      @media (min-width: 960px) {
-        font-size: 3.4rem;
-        line-height: 4.1rem;
-      }
-    `,
-    medium: `
-      font-weight: 600;
-      font-size: 2.4rem;
-      line-height: 2.9rem;
-      @media (min-width: 960px) {
-        font-size: 2.8rem;
-        line-height: 3.4rem;
-      }
-    `,
-    small: `
-      font-weight: 500;
-      font-size: 1.8rem;
-      line-height: 1.9rem;
-      @media (min-width: 960px) {
-        font-size: 1.8rem;
-        line-height: 2.2rem;
-      }
-      @media (min-width: 2560px) {
-        font-size: 2.2rem;
-        line-height: 2.6rem;
-      }
-    `,
-    extraSmall: `
-      font-weight: 500;
-      font-size: 1.4rem;
-      line-height: 1.7rem;
-      @media (min-width: 960px) {
-        font-size: 1.6rem;
-        line-height: 1.9rem;
-      }
-    `
-  },
-  bLarge: {
-    bold: `
-      font-weight: 600;
-      font-size: 1.4rem;
-      line-height: 2rem;
-      @media (min-width: 960px) {
-        font-size: 1.6rem;
-        line-height: 2.2rem;
-      }
-    `,
-    medium: `
-      font-weight: 500;
-      font-size: 1.4rem;
-      line-height: 2rem;
-      @media (min-width: 960px) {
-        font-size: 1.6rem;
-        line-height: 2.2rem;
-      }
-    `,
-    regular: `
-      font-weight: 400;
-      font-size: 1.4rem;
-      line-height: 2rem;
-      @media (min-width: 960px) {
-        font-size: 1.6rem;
-        line-height: 2.2rem;
-      }
-    `,
-  },
-  bMedium: {
-    bold: `
-      font-weight: 600;
-      font-size: 1.2rem;
-      line-height: 1.7rem;
-      @media (min-width: 960px) {
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-    `,
-    medium: `
-      font-weight: 500;
-      font-size: 1.2rem;
-      line-height: 1.7rem;
-      @media (min-width: 960px) {
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-    `,
-    regular: `
-      font-weight: 400;
-      font-size: 1.2rem;
-      line-height: 1.7rem;
-      @media (min-width: 960px) {
-        font-size: 1.4rem;
-        line-height: 2rem;
-      }
-    `,
-  },
-  bSmall: {
-    bold: `
-      font-weight: 600;
-      font-size: 1rem;
-      line-height: 1.4rem;
-      @media (min-width: 960px) {
-        font-size: 1.2rem;
-        line-height: 1.7rem;
-      }
-    `,
-    medium: `
-      font-weight: 500;
-      font-size: 1rem;
-      line-height: 1.4rem;
-      @media (min-width: 960px) {
-        font-size: 1.2rem;
-        line-height: 1.7rem;
-      }
-    `,
-    regular: `
-      font-weight: 400;
-      font-size: 1rem;
-      line-height: 1.4rem;
-      @media (min-width: 960px) {
-        font-size: 1.2rem;
-        line-height: 1.7rem;
-      }
-    `,
-  },
-  bExtraSmall: {
-    bold: `
-      font-weight: 600;
-      font-size: 0.8rem;
-      line-height: 1.1rem;
-      @media (min-width: 960px) {
-        font-size: 1rem;
-        line-height: 1.4rem;
-      }
-    `,
-    medium: `
-      font-weight: 500;
-      font-size: 0.8rem;
-      line-height: 1.1rem;
-      @media (min-width: 960px) {
-        font-size: 1rem;
-        line-height: 1.4rem;
-      }
-    `,
-    regular: `
-      font-weight: 400;
-      font-size: 0.8rem;
-      line-height: 1.1rem;
-      @media (min-width: 960px) {
-        font-size: 1rem;
-        line-height: 1.4rem;
-      }
-    `,
-  },
-}

package/src/utils/index.ts

@@ -1,229 +0,0 @@
-
-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[]) {
-    // @ts-expect-error
-    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 queuedThrottleWithLastCall = <T2 extends any[], T extends (...args: T2) => any>(time: number, func: T) => {
-  let runningFunction: Promise<ReturnType<T>> | undefined
-  let lastCall: Promise<ReturnType<T>> | undefined
-  let lastCallArguments: T2 | undefined
-
-  const checkForLastCall = (
-    timeStart: number,
-    resolve: (value: ReturnType<T> | PromiseLike<ReturnType<T>>) => void,
-    reject: (reason?: any) => void
-  ) =>
-    (result: ReturnType<T>) => {
-      const currentTime = performance.now()
-      setTimeout(() => {
-        if (!lastCallArguments) {
-          runningFunction = undefined
-          lastCall = undefined
-          return
-        }
-        const funcResult = (async () => (func(...lastCallArguments)))()
-        lastCallArguments = undefined
-        funcResult
-          .then(resolve)
-          .catch((err) => {
-            console.error(err)
-            reject(err)
-          })
-
-        let _resolve: (value: ReturnType<T> | PromiseLike<ReturnType<T>>) => void
-        let _reject: (reason?: any) => void
-        lastCall = new Promise((resolve, reject) => {
-          _resolve = resolve
-          _reject = reject
-        })
-  
-        runningFunction =
-          funcResult
-            // @ts-ignore
-            .then(checkForLastCall(currentTime, _resolve, _reject))
-            // @ts-ignore
-            .catch(err => {
-              console.error(err)
-              return checkForLastCall(timeStart, _resolve, _reject)(err)
-            })
-      }, time - (currentTime - timeStart))
-      return result
-    }
-
-  return (...args: Parameters<T>) => {
-    lastCallArguments = args
-    if (!runningFunction) {
-      const timeStart = performance.now()
-      const funcResult = (async () => (func(...args)))()
-      lastCallArguments = undefined
-      let _resolve: (value: ReturnType<T> | PromiseLike<ReturnType<T>>) => void
-      let _reject: (reason?: any) => void
-      lastCall = new Promise((resolve, reject) => {
-        _resolve = resolve
-        _reject = reject
-      })
-
-      runningFunction =
-        funcResult
-            // @ts-ignore
-          .then(checkForLastCall(timeStart, _resolve, _reject))
-            // @ts-ignore
-          .catch(err => {
-            console.error(err)
-            return checkForLastCall(timeStart, _resolve, _reject)(err)
-          })
-
-      return funcResult
-  } else {
-      return lastCall
-    }
-  }
-}
-
-// 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
-  })
-
-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 {
-            for (const buffer of this.buffers) controller.enqueue(buffer)
-            controller.close()
-          } catch (err) {
-            // console.error(err)
-          }
-          return
-        }
-        this.buffers.push(newBuffer)
-        return newBuffer
-      }
-
-      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()
-          })
-        }
-      }
-
-      await tryToBuffer()
-      try {
-        controller.enqueue(this.buffers.shift())
-        tryToBuffer()
-      } catch(err) {
-        if (!(
-          err instanceof TypeError && (
-            err.message === 'ReadableStreamDefaultController.enqueue: Cannot enqueue into a stream that has already been requested to close.' ||
-            err.message === `Failed to execute 'enqueue' on 'ReadableStreamDefaultController': Cannot enqueue a chunk into a readable stream that is closed or has been requested to be closed`
-          )
-        )) {
-          throw err
-        }
-      }
-    },
-    cancel() {
-      this.reader!.cancel()
-    }
-  } as UnderlyingDefaultSource<Uint8Array> & {
-    reader: ReadableStreamDefaultReader<Uint8Array> | undefined
-    leftOverData: Uint8Array | undefined
-    buffers: Uint8Array[]
-    currentPullPromise: Promise<ReadableStreamReadResult<Uint8Array>> | undefined
-  })