@banou/media-player 0.2.6 → 0.4.0

package/src/state-machines/media.ts

@@ -0,0 +1,245 @@
+import type { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
+
+import { makeRemuxer } from 'libav-wasm'
+import { assign, setup, sendTo, enqueueActions } from 'xstate'
+
+import mediaPropertiesLogic from './media-properties'
+import mediaSourceLogic, { MediaSourceOptions } from './media-source'
+import dataSourceLogic from './data-source'
+import subtitlesLogic, { SubtitleStream } from './subtitles'
+import thumbnailsLogic, { Thumbnail } from './thumbnails'
+import { JassubOptions } from 'jassub'
+import { DownloadedRange } from '../utils/context'
+
+export default setup({
+  types: {} as {
+    context: {
+      mediaSourceOptions: MediaSourceOptions | undefined
+      subtitlesRendererOptions: Omit<JassubOptions, 'video' | 'canvas'> | undefined
+      remuxerOptions: Parameters<typeof makeRemuxer>[0] | undefined
+      videoElement: HTMLVideoElement | undefined
+      canvasElement: HTMLCanvasElement | undefined
+      media: {
+        duration?: number
+        paused: boolean
+        currentTime: number
+        volume: number
+        muted: boolean
+        playbackRate: number
+      },
+      attachments: Attachment[]
+      subtitleFragments: SubtitleFragment[]
+      subtitleStreams: SubtitleStream[]
+      selectedSubtitleStreamIndex: number | undefined
+      thumbnails: Thumbnail[]
+      isReady: boolean
+    },
+    events:
+      | { type: 'MEDIA_SOURCE_OPTIONS', mediaSourceOptions: MediaSourceOptions }
+      | { type: 'SUBTITLES_RENDERER_OPTIONS', subtitlesRendererOptions: Omit<JassubOptions, 'video' | 'canvas'> }
+      | { type: 'REMUXER_OPTIONS', remuxerOptions: Parameters<typeof makeRemuxer>[0] }
+      | { type: 'SET_VIDEO_ELEMENT', videoElement: HTMLVideoElement }
+      | { type: 'SET_CANVAS_ELEMENT', canvasElement: HTMLCanvasElement }
+      | { type: 'IS_READY' }
+      | { type: 'PLAY' }
+      | { type: 'PAUSE' }
+      | { type: 'SET_TIME', value: number }
+      | { type: 'PLAYING' }
+      | { type: 'PAUSED' }
+      | { type: 'ENDED' }
+      | { type: 'TIME_UPDATE', currentTime: number }
+      | { type: 'VOLUME_UPDATE', muted: boolean, volume: number }
+      | { type: 'PLAYBACK_RATE_UPDATE', playbackRate: number }
+      | { type: 'DURATION_UPDATE', duration: number }
+      | { type: 'SET_VOLUME', muted: boolean, volume: number }
+      | { type: 'SET_PLAYBACK_RATE', playbackRate: number }
+      | { type: 'SEEKING', currentTime: number }
+      | { type: 'NEED_DATA' }
+      | { type: 'METADATA', mimeType: string, duration: number, data: ArrayBuffer }
+      | { type: 'DATA', data: ArrayBuffer }
+      | { type: 'TIMESTAMP_OFFSET', timestampOffset: number }
+      | { type: 'NEW_ATTACHMENTS', attachments: Attachment[] }
+      | { type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: SubtitleFragment[] }
+      | { type: 'SUBTITLE_STREAMS_UPDATED', subtitlesStreams: SubtitleStream[] }
+      | { type: 'SELECT_SUBTITLE_STREAM', streamIndex: number }
+      | { type: 'NEW_THUMBNAIL', thumbnail: Thumbnail }
+      | { type: 'DOWNLOADED_RANGES_UPDATED', downloadedRanges: DownloadedRange[] }
+      | { type: 'DESTROY' }
+  },
+  actions: {
+    isReady: enqueueActions(({ context, enqueue }) => {
+      if (context.videoElement && context.canvasElement && context.remuxerOptions && context.subtitlesRendererOptions && context.mediaSourceOptions) {
+        enqueue.raise({ type: 'IS_READY' })
+      }
+    })
+  },
+  actors: {
+    mediaLogic: mediaPropertiesLogic,
+    mediaSourceLogic: mediaSourceLogic,
+    dataSourceLogic: dataSourceLogic,
+    thumbnailsLogic: thumbnailsLogic,
+    subtitlesLogic: subtitlesLogic,
+  },
+}).createMachine({
+  context: {
+    mediaSourceOptions: undefined,
+    subtitlesRendererOptions: undefined,
+    remuxerOptions: undefined,
+    videoElement: undefined,
+    canvasElement: undefined,
+    media: {
+      paused: true,
+      currentTime: 0,
+      volume: 1,
+      muted: false,
+      playbackRate: 1,
+      duration: undefined
+    },
+    attachments: [],
+    subtitleFragments: [],
+    subtitleStreams: [],
+    selectedSubtitleStreamIndex: undefined,
+    thumbnails: [],
+    isReady: false
+  },
+  initial: 'WAITING',
+  on: {
+    'SET_VIDEO_ELEMENT': {
+      actions: [
+        assign({
+          videoElement: ({ event }) => event.videoElement,
+        }),
+        { type: 'isReady' }
+      ]
+    },
+    'SET_CANVAS_ELEMENT': {
+      actions: [
+        assign({
+          canvasElement: ({ event }) => event.canvasElement,
+        }),
+        { type: 'isReady' }
+      ]
+    },
+    'IS_READY': {
+      target: '.OK',
+      actions: assign({ isReady: () => true })
+    },
+  },
+  states: {
+    WAITING: {
+      on: {
+        'MEDIA_SOURCE_OPTIONS': {
+          actions: [
+            assign({
+              mediaSourceOptions: ({ event }) => event.mediaSourceOptions
+            }),
+            { type: 'isReady' }
+          ]
+        },
+        'REMUXER_OPTIONS': {
+          actions: [
+            assign({
+              remuxerOptions: ({ event }) => event.remuxerOptions
+            }),
+            { type: 'isReady' }
+          ]
+        },
+        'SUBTITLES_RENDERER_OPTIONS': {
+          actions: [
+            assign({
+              subtitlesRendererOptions: ({ event }) => event.subtitlesRendererOptions
+            }),
+            { type: 'isReady' }
+          ]
+        },
+      }
+    },
+    OK: {
+      type: 'parallel',
+      invoke: [
+        {
+          id: 'media',
+          src: 'mediaLogic',
+          input: ({ context }) => ({ videoElement: context.videoElement!, remuxerOptions: context.remuxerOptions! }),
+        },
+        {
+          id: 'mediaSource',
+          src: 'mediaSourceLogic',
+          input: ({ context }) => ({ videoElement: context.videoElement!, remuxerOptions: context.remuxerOptions! }),
+        },
+        {
+          id: 'dataSource',
+          src: 'dataSourceLogic',
+          input: ({ context }) => ({ remuxerOptions: context.remuxerOptions! }),
+        },
+        {
+          id: 'thumbnails',
+          src: 'thumbnailsLogic',
+          input: ({ context }) => ({ remuxerOptions: context.remuxerOptions! }),
+        },
+        {
+          id: 'subtitles',
+          src: 'subtitlesLogic',
+          input: ({ context }) => ({
+            publicPath: context.remuxerOptions!.publicPath,
+            videoElement: context.videoElement!,
+            canvasElement: context.canvasElement!,
+            subtitlesRendererOptions: context.subtitlesRendererOptions!
+          }),
+        }
+      ],
+      on: {
+        'PLAY': { actions: sendTo('media', ({ event }) => event) },
+        'PAUSE': { actions: sendTo('media', ({ event }) => event) },
+        'SET_TIME': { actions: sendTo('media', ({ event }) => event) },
+        'SET_PLAYBACK_RATE': { actions: sendTo('media', ({ event }) => event) },
+        'PLAYING': { actions: assign({ media: ({ context }) => ({ ...context.media, paused: false }) }) },
+        'PAUSED': { actions: assign({ media: ({ context }) => ({ ...context.media, paused: true }) }) },
+        'ENDED': { actions: assign({ media: ({ context }) => ({ ...context.media, paused: true }) }) },
+        'TIME_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, currentTime: event.currentTime }) }) },
+        'VOLUME_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, muted: event.muted, volume: event.volume }) }) },
+        'SET_VOLUME': { actions: sendTo('media', ({ event }) => event) },
+        'PLAYBACK_RATE_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, playbackRate: event.playbackRate }) }) },
+        'DURATION_UPDATE': { actions: assign({ media: ({ context, event }) => ({ ...context.media, duration: event.duration }) }) },
+        'NEED_DATA': { actions: sendTo('dataSource', ({ event }) => event) },
+        'METADATA': { actions: sendTo('mediaSource', ({ event }) => event) },
+        'SEEKING': { actions: sendTo('dataSource', ({ event }) => event) },
+        'DATA': { actions: sendTo('mediaSource', ({ event }) => event) },
+        'TIMESTAMP_OFFSET': { actions: sendTo('mediaSource', ({ event }) => event) },
+        'NEW_THUMBNAIL': { actions: [assign({ thumbnails: ({ context, event }) => [...context.thumbnails, event.thumbnail] })] },
+        'DOWNLOADED_RANGES_UPDATED': { actions: sendTo('thumbnails', ({ event }) => event) },
+        'NEW_ATTACHMENTS': {
+          actions: [
+            assign({ attachments: ({ context, event }) => [...context.attachments, ...event.attachments] }),
+            sendTo('subtitles', ({ event }) => event)
+          ]
+        },
+        'NEW_SUBTITLE_FRAGMENTS': {
+          actions: [
+            assign({ subtitleFragments: ({ context, event }) => [...context.subtitleFragments, ...event.subtitles] }),
+            sendTo('subtitles', ({ event }) => event)
+            // emit(({ event }) => ({ type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: event.subtitles }))
+          ]
+        },
+        'SUBTITLE_STREAMS_UPDATED': {
+          actions: [
+            assign({ subtitleStreams: ({ event }) => event.subtitlesStreams }),
+            sendTo('subtitles', ({ event }) => event)
+          ]
+        },
+        'SELECT_SUBTITLE_STREAM': {
+          actions: [
+            sendTo('subtitles', ({ event }) => event)
+          ]
+        },
+        'SELECTED_SUBTITLE_STREAM_UPDATED': {
+          actions: [
+            assign({ selectedSubtitleStreamIndex: ({ event }) => event.streamIndex })
+          ]
+        },
+        'DESTROY': { target: 'WAITING' }
+      }
+    },
+    DESTROYED: {}
+  }
+})

package/src/state-machines/subtitles.ts

@@ -0,0 +1,247 @@
+import type { ParsedASS, ParsedASSStyles } from 'ass-compiler'
+import type { ASS_Event, JassubOptions } from 'jassub'
+
+import JASSUB from 'jassub'
+import { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
+
+import { parse } from 'ass-compiler'
+import { fromAsyncCallback } from './utils'
+
+type SubtitlesEvents =
+  | { type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: SubtitleFragment[] }
+  | { type: 'NEW_ATTACHMENTS', attachments: Attachment[] }
+  | { type: 'SELECT_SUBTITLE_STREAM', streamIndex: number }
+
+type SubtitlesEmittedEvents =
+  | { type: 'WAITING' }
+  | { type: 'SUBTITLE_STREAMS_UPDATED', subtitlesStreams: SubtitleStream[] }
+  | { type: 'SELECTED_SUBTITLE_STREAM_UPDATED', streamIndex: number }
+
+type SubtitlesInput = {
+  publicPath: string
+  videoElement: HTMLVideoElement
+  canvasElement: HTMLCanvasElement
+  subtitlesRendererOptions: Omit<JassubOptions, 'video' | 'canvas'>
+}
+
+export type SubtitlePart =
+  | { type: 'header', streamIndex: number, content: string, eventsContent: string, dialogueFormatContent: string, parsed: ParsedASS }
+  | { type: 'dialogue', streamIndex: number, index: number, content: string, parsed: ParsedASS, assEvent: ASS_Event }
+
+export type SubtitleStream = {
+  header: SubtitlePart & { type: 'header' }
+  dialogues: (SubtitlePart & { type: 'dialogue' })[]
+}
+
+const convertTimestamp = (ms: number) =>
+  new Date(ms)
+    .toISOString()
+    .slice(11, 22)
+
+const appendParsedStyle = (jassubInstance: JASSUB, style: ParsedASSStyles['style'][number]) => {
+  jassubInstance.createStyle({
+    ...style,
+    SecondaryColour: Number(style.SecondaryColour),
+    treat_fontname_as_pattern: 0,
+    Blur: 0,
+    Justify: 0,
+    FontName: style.Fontname,
+    FontSize: Number(style.Fontsize),
+    PrimaryColour: Number(style.PrimaryColour),
+    BackColour: Number(style.BackColour),
+    OutlineColour: Number(style.OutlineColour),
+    Bold: Number(style.Bold),
+    Italic: Number(style.Italic),
+    Underline: Number(style.Underline),
+    StrikeOut: Number(style.StrikeOut),
+    ScaleX: Number(style.ScaleX),
+    ScaleY: Number(style.ScaleY),
+    Spacing: Number(style.Spacing),
+    Angle: Number(style.Angle),
+    BorderStyle: Number(style.BorderStyle),
+    Outline: Number(style.Outline),
+    Shadow: Number(style.Shadow),
+    Alignment: Number(style.Alignment),
+    MarginL: Number(style.MarginL),
+    MarginR: Number(style.MarginR),
+    MarginV: Number(style.MarginV),
+    Encoding: Number(style.Encoding)
+  })
+}
+
+const subtitleHeaderFragmentToSubtitleHeaderPart = (subtitleHeaderFragment: SubtitleFragment) => {
+  const eventsContent =
+    subtitleHeaderFragment
+      .content
+      .match(/\r\n\[Events\]\r\nFormat: (.*)/)
+      ?.[0]
+  const dialogueFormatContent =
+    eventsContent
+      ?.trim()
+      .split('\n')
+      [1]
+  if (!eventsContent || !dialogueFormatContent) {
+    throw new Error('dialogueFormatContent is undefined')
+  }
+  return {
+    type: 'header',
+    streamIndex: subtitleHeaderFragment.streamIndex,
+    content: subtitleHeaderFragment.content,
+    eventsContent,
+    dialogueFormatContent,
+    parsed: parse(subtitleHeaderFragment.content)
+  } as SubtitlePart & { type: 'header' }
+}
+
+const subtitleDialogueFragmentToSubtitleDialoguePart = (
+  header: SubtitlePart & { type: 'header' },
+  subtitleFragment: SubtitleFragment & { type: 'dialogue' }
+) => {
+  const [dialogueIndexString, layer] = subtitleFragment.content.split(',')
+  const dialogueIndex = Number(dialogueIndexString)
+  const startTimestamp = convertTimestamp(subtitleFragment.start)
+  const endTimestamp = convertTimestamp(subtitleFragment.end)
+  const dialogueSourceContent = subtitleFragment.content.replace(`${dialogueIndex},${layer},`, '')
+  const dialogueContent = `Dialogue: ${layer},${startTimestamp},${endTimestamp},${dialogueSourceContent}`
+  const parsedEvent = parse(`${header.eventsContent}\r\n${dialogueContent}`)
+  const dialogueEvent = parsedEvent.events.dialogue[0]
+  if (!dialogueEvent) {
+    throw new Error('dialogueEvent is undefined')
+  }
+  return {
+    type: 'dialogue',
+    streamIndex: subtitleFragment.streamIndex,
+    index: dialogueIndex,
+    content: dialogueContent,
+    parsed: parse(`${header.eventsContent}\r\n${dialogueContent}`),
+    assEvent: {
+      ...dialogueEvent,
+      Effect: dialogueEvent.Effect ?? '',
+      Text: dialogueEvent.Text.raw,
+      Duration: (dialogueEvent.End - dialogueEvent.Start) * 1000,
+      Start: dialogueEvent.Start * 1000,
+      End: dialogueEvent.End * 1000,
+      ReadOrder: dialogueIndex,
+      _index: dialogueIndex
+    } as ASS_Event
+  } as SubtitlePart & { type: 'dialogue' }
+}
+
+export default fromAsyncCallback<SubtitlesEvents, SubtitlesInput, SubtitlesEmittedEvents>(async ({ sendBack, receive, input, self, emit }) => {
+  const { publicPath, subtitlesRendererOptions, videoElement: video, canvasElement: canvas } = input
+
+  let attachments: [string, Uint8Array][] = []
+  let jassubInstance: JASSUB | undefined
+
+  const subtitlesStreams = new Map<number, SubtitleStream>()
+  let appendedSubtitleParts: SubtitlePart[] = []
+  let selectedStreamIndex: number | undefined
+
+  receive((event) => {
+    if (event.type === 'SELECT_SUBTITLE_STREAM') {
+      selectedStreamIndex = event.streamIndex
+      sendBack({ type: 'SELECTED_SUBTITLE_STREAM_UPDATED', streamIndex: event.streamIndex })
+      if (!jassubInstance) return
+      jassubInstance.freeTrack()
+      appendedSubtitleParts = []
+      const newSubtitleStreams = subtitlesStreams.get(selectedStreamIndex)
+      if (!newSubtitleStreams) {
+        throw new Error('newSubtitleStreams is undefined')
+      }
+      jassubInstance.setTrack(newSubtitleStreams.header.content)
+      jassubInstance.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
+      for (const styleIndex in newSubtitleStreams.header.parsed.styles) {
+        const style = newSubtitleStreams.header.parsed.styles.style[Number(styleIndex)]
+        if (!style) continue
+        appendParsedStyle(jassubInstance, style)
+      }
+      for (const dialogue of newSubtitleStreams?.dialogues ?? []) {
+        const alreadyAppended =
+          appendedSubtitleParts
+            .filter(appendedSubtitlePart => appendedSubtitlePart.type === 'dialogue')
+            .find(appendedSubtitlePart =>
+              appendedSubtitlePart.streamIndex === dialogue.streamIndex
+              && appendedSubtitlePart.index === dialogue.index
+            )
+        if (alreadyAppended || selectedStreamIndex !== dialogue.streamIndex) {
+          continue
+        }
+        jassubInstance?.createEvent(dialogue.assEvent)
+        appendedSubtitleParts.push(dialogue)
+      }
+    }
+    if (event.type === 'NEW_SUBTITLE_FRAGMENTS') {
+      const subtitleParts = event.subtitles.map((subtitleFragment) => {
+        if (subtitleFragment.type === 'header') {
+          const header = subtitleHeaderFragmentToSubtitleHeaderPart(subtitleFragment)
+          subtitlesStreams.set(subtitleFragment.streamIndex, { header, dialogues: [] })
+          if (selectedStreamIndex === undefined) {
+            selectedStreamIndex = subtitleFragment.streamIndex
+            sendBack({ type: 'SELECTED_SUBTITLE_STREAM_UPDATED', streamIndex: subtitleFragment.streamIndex })
+          }
+          sendBack({ type: 'SUBTITLE_STREAMS_UPDATED', subtitlesStreams: [...subtitlesStreams.values()] })
+          return header
+        } else {
+          const header = subtitlesStreams.get(subtitleFragment.streamIndex)?.header
+          if (!header) {
+            throw new Error('SubtitleStream or its header is undefined')
+          }
+          const dialogue = subtitleDialogueFragmentToSubtitleDialoguePart(header, subtitleFragment)
+          subtitlesStreams.get(subtitleFragment.streamIndex)?.dialogues.push(dialogue)
+          sendBack({ type: 'SUBTITLE_STREAMS_UPDATED', subtitlesStreams: [...subtitlesStreams.values()] })
+          return dialogue
+        }
+      })
+
+      for (const subtitlePart of subtitleParts) {
+        if (subtitlePart.type === 'dialogue') {
+          const alreadyAppended =
+            appendedSubtitleParts
+              .filter(appendedSubtitlePart => appendedSubtitlePart.type === 'dialogue')
+              .find(appendedSubtitlePart =>
+                appendedSubtitlePart.streamIndex === subtitlePart.streamIndex
+                && appendedSubtitlePart.index === subtitlePart.index
+              )
+          if (alreadyAppended || selectedStreamIndex !== subtitlePart.streamIndex) {
+            continue
+          }
+          jassubInstance?.createEvent(subtitlePart.assEvent)
+          appendedSubtitleParts.push(subtitlePart)
+        } else if (subtitlePart.type === 'header') {
+          if (!jassubInstance) {
+            jassubInstance = new JASSUB({
+              video,
+              canvas,
+              subContent: subtitlePart.content,
+              workerUrl: subtitlesRendererOptions.workerUrl,
+              modernWasmUrl: subtitlesRendererOptions.wasmUrl,
+              fonts: attachments.filter(Boolean).map(([filename, data]) => data),
+              availableFonts: { ...Object.fromEntries(attachments), 'liberation sans': `${publicPath}default.woff2` },
+              // fallbackFont: 'liberation sans',
+            })
+          }
+          for (const styleIndex in subtitlePart.parsed.styles) {
+            const style = subtitlePart.parsed.styles.style[Number(styleIndex)]
+            if (!style) continue
+            appendParsedStyle(jassubInstance, style)
+          }
+        } else {
+          throw new Error('Unknown subtitlePart type')
+        }
+      }
+    }
+    if (event.type === 'NEW_ATTACHMENTS') {
+      attachments =
+        event
+          .attachments
+          .map(attachment => [
+            attachment.filename,
+            new Uint8Array(attachment.data)
+          ])
+    }
+  })
+
+  return () => {
+    jassubInstance?.destroy()
+  }
+})

package/src/state-machines/thumbnails.ts

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