@banou/media-player 0.2.6 → 0.4.0

package/src/state-machines/utils.ts

@@ -0,0 +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
+  }
+}

package/src/utils/actor-utils.ts

@@ -0,0 +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' })
+  }
+}

package/src/utils/colors.ts

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

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

package/src/utils/fonts.ts

@@ -0,0 +1,156 @@
+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;
+      }
+    `,
+    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.ts → utils/index.ts}

@@ -1,11 +1,3 @@
-export type Chunk = {
-  offset: number
-  buffer: Uint8Array
-  pts: number
-  duration: number
-  pos: number
-  buffered: boolean
-}
 
 export function debounceImmediateAndLatest<T extends (...args: any[]) => any>(
   wait: number,
@@ -40,7 +32,7 @@ export function debounceImmediateAndLatest<T extends (...args: any[]) => any>(
   return debouncedFunction as T;
 }
 
-export const queuedDebounceWithLastCall = <T2 extends any[], T extends (...args: T2) => any>(time: number, func: 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
@@ -117,22 +109,6 @@ export const queuedDebounceWithLastCall = <T2 extends any[], T extends (...args:
   }
 }
 
-const getTimeRanges = (sourceBuffer: SourceBuffer) =>
-  Array(sourceBuffer.buffered.length)
-    .fill(undefined)
-    .map((_, index) => ({
-      index,
-      start: sourceBuffer.buffered.start(index),
-      end: sourceBuffer.buffered.end(index)
-    }))
-
-const getTimeRange =
-  (sourceBuffer: SourceBuffer) =>
-    (time: number) =>
-      getTimeRanges(sourceBuffer)
-        .find(({ start, end }) => time >= start && time <= end)
-
-
 // todo: reimplement this into a ReadableByteStream https://web.dev/streams/ once Safari gets support
 export const toStreamChunkSize = (SIZE: number) => (stream: ReadableStream) =>
   new ReadableStream<Uint8Array>({
@@ -176,7 +152,7 @@ export const toStreamChunkSize = (SIZE: number) => (stream: ReadableStream) =>
       if (done) controller.close()
     },
     cancel() {
-      this.reader!.cancel()
+      this.reader?.cancel()
       this.leftOverData = undefined
     }
   } as UnderlyingDefaultSource<Uint8Array> & {

package/src/utils/time.ts

@@ -0,0 +1,16 @@
+export const formatTime = (time: number | undefined): string => {
+  if (time === undefined) return '0:00'
+
+  const hours = Math.floor(time / 3600)
+  const minutes = Math.floor((time % 3600) / 60)
+  const seconds = Math.floor(time % 60)
+  // If there are hours, include them in the format
+  if (hours > 0) {
+    return `${hours}:${minutes < 10 ? '0' : ''}${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+  }
+  return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
+}
+
+export const formatMediaTime = (currentTime: number, duration: number | undefined): string => {
+  return `${formatTime(currentTime)} / ${formatTime(duration)}`
+}

package/src/utils/use-local-storage.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react'
+
+export const useLocalStorage = <T,>(name: string, defaultValue?: T) => {
+  const [storageValue, setStorageValue] = useState(() => localStorage.getItem(name) ?? defaultValue)
+
+  const updateStorage = (newValue: string) => {
+    localStorage.setItem(name, newValue)
+    setStorageValue(newValue)
+    window.dispatchEvent(new Event('storage'))
+  }
+
+  useEffect(() => {
+    const syncLocalStorage = () => {
+      const item = localStorage.getItem(name)
+      setStorageValue(item ?? defaultValue)
+    }
+
+    window.addEventListener('storage', syncLocalStorage)
+    return () => {
+      window.removeEventListener('storage', syncLocalStorage)
+    }
+  }, [name])
+
+  return [storageValue, updateStorage] as const
+}
+
+export default useLocalStorage
+
+export type mediaMutedType = 'true' | 'false' | undefined
+

package/src/{use-scrub.ts → utils/use-scrub.ts}

@@ -34,6 +34,7 @@ export default ({ ref, defaultValue }: { ref: RefObject<HTMLElement>, defaultVal
   return {
     value,
     scrubbing,
-    scrub
+    scrub,
+    setValue
   }
 }

package/src/utils/volume-utils.ts

@@ -0,0 +1,39 @@
+// Constants for logarithmic scaling
+const MIN_VOLUME = 0.0001 // Avoid zero which would give -Infinity when taking log
+const MAX_VOLUME = 1.0
+
+// Defines how "curved" the logarithmic response is
+// Higher values = more dramatic volume change at the low end
+export const VOLUME_EXPONENT = 2.0
+
+/**
+ * Converts a linear slider value (0-1) to logarithmic volume scale
+ * Uses formula: volume = minVolume * (maxVolume/minVolume)^position
+ * 
+ * @param linearValue Linear slider position (0-1)
+ * @returns Logarithmic volume value (0-1)
+ */
+export const linearToLogVolume = (linearValue: number): number => {
+  // Ensure value is within range
+  const normalizedLinear = Math.max(MIN_VOLUME, Math.min(MAX_VOLUME, linearValue))
+  
+  // Calculate using the formula: volume = minVolume * (maxVolume/minVolume)^position
+  // We can also use a simpler formula: Math.pow(normalizedLinear, VOLUME_EXPONENT)
+  // Which gives a good perceptual curve with proper scaling
+  return Math.pow(normalizedLinear, VOLUME_EXPONENT)
+}
+
+/**
+ * Converts a logarithmic volume (0-1) back to linear slider position (0-1)
+ * Inverse of the logarithmic formula
+ * 
+ * @param logVolume Logarithmic volume (0-1)
+ * @returns Linear slider position (0-1)
+ */
+export const logToLinearVolume = (logVolume: number): number => {
+  // Ensure value is within range
+  const normalizedLog = Math.max(MIN_VOLUME, Math.min(MAX_VOLUME, logVolume))
+  
+  // Inverse of our simplified formula
+  return Math.pow(normalizedLog, MAX_VOLUME/VOLUME_EXPONENT)
+}

package/src/utils/window-height.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+const useWindowSize = () => {
+  const [windowHeight, setWindowHeight] = useState(window.innerHeight)
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth)
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowHeight(window.innerHeight)
+      setWindowWidth(window.innerWidth)
+    }
+
+    window.addEventListener('resize', handleResize)
+
+    return () => { window.removeEventListener('resize', handleResize) }
+  }, [])
+  return [windowHeight, windowWidth]
+}
+
+export default useWindowSize

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -18,9 +18,11 @@
     "emitDeclarationOnly": true,
     "jsx": "react-jsx",
     "paths": {
-      "mp4box": ["./src/mp4box.ts"]
-    }
+      "mp4box": ["./src/utils/mp4box.ts"]
+    },
+    "types": []
   },
   "include": ["src"],
+  "exclude": ["node_modules"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/tsconfig.node.json

@@ -1,9 +1,9 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "module": "ESNext",
-    "moduleResolution": "Node",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/build/chrome/bottom.d.ts

@@ -1,20 +0,0 @@
-import type { Dispatch, HTMLAttributes, SetStateAction } from 'react';
-import type { ChromeOptions } from '.';
-import type { FKNVideoControl, Subtitle, TransmuxError } from '..';
-export type BottomOptions = {
-    duration?: number;
-    currentTime?: number;
-    togglePlay: () => void;
-    isSubtitleMenuHidden: boolean;
-    setIsSubtitleMenuHidden: Dispatch<SetStateAction<boolean>>;
-    isErrorMenuHidden: boolean;
-    setIsErrorMenuHidden: Dispatch<SetStateAction<boolean>>;
-    setCurrentSubtitleTrack: Dispatch<SetStateAction<number | undefined>>;
-    isFullscreen: boolean;
-    toggleFullscreen: () => void;
-    subtitleTrack: Subtitle | undefined;
-    errors: TransmuxError[];
-    customControls?: FKNVideoControl[];
-} & Pick<ChromeOptions, 'seek' | 'setVolume' | 'loadedTime' | 'isPlaying' | 'tracks' | 'pictureInPicture'> & HTMLAttributes<HTMLDivElement>;
-declare const _default: ({ duration, currentTime, togglePlay, seek, setVolume, isSubtitleMenuHidden, setIsSubtitleMenuHidden, isErrorMenuHidden, setIsErrorMenuHidden, setCurrentSubtitleTrack, loadedTime, isPlaying, tracks, isFullscreen, toggleFullscreen, subtitleTrack, pictureInPicture, errors, customControls, ...rest }: BottomOptions) => import("react/jsx-runtime").JSX.Element;
-export default _default;

package/build/chrome/index.d.ts

@@ -1,27 +0,0 @@
-import type { HTMLAttributes, MutableRefObject, ReactNode } from 'react';
-import type { Attachment, FKNVideoControl, Subtitle, TransmuxError } from '..';
-export type ChromeOptions = {
-    publicPath: string;
-    customOverlay?: ReactNode;
-    isPlaying?: boolean;
-    loading?: boolean;
-    duration?: number;
-    loadedTime?: [number, number];
-    currentTime?: number;
-    pictureInPicture: () => void;
-    fullscreen: () => void;
-    play: () => void;
-    seek: (time: number) => void;
-    getVolume: () => number | undefined;
-    setVolume: (volume: number) => void;
-    attachments: Attachment[] | undefined;
-    tracks: Subtitle[];
-    video: MutableRefObject<HTMLVideoElement | undefined>;
-    errors: TransmuxError[];
-    customControls?: FKNVideoControl[];
-    libassWorkerUrl: string;
-    wasmUrl: string;
-    needsInitialInteraction?: boolean;
-} & HTMLAttributes<HTMLDivElement>;
-declare const _default: ({ customOverlay, publicPath, isPlaying, loading, duration, loadedTime, currentTime, pictureInPicture, fullscreen, play, seek, getVolume, setVolume, attachments, tracks, video, errors, customControls, libassWorkerUrl, wasmUrl, needsInitialInteraction, ...rest }: ChromeOptions) => import("react/jsx-runtime").JSX.Element;
-export default _default;

package/build/chrome/overlay.d.ts

@@ -1,9 +0,0 @@
-import type { ClassAttributes } from 'react';
-export type OverlayOptions = {
-    loading?: boolean;
-    togglePlay: (ev: any) => void;
-    setCanvasRef: ClassAttributes<HTMLCanvasElement>['ref'];
-    needsInitialInteraction?: boolean;
-};
-declare const _default: ({ loading, needsInitialInteraction, togglePlay, setCanvasRef }: OverlayOptions) => import("react/jsx-runtime").JSX.Element;
-export default _default;