@banou/media-player 0.6.2 → 0.7.0

package/src/state-machines/media.ts

@@ -1,255 +0,0 @@
-import type { Attachment, Index, 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
-      indexes: Index[]
-      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 | undefined }
-      | { 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,
-    indexes: [],
-    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 }) }),
-          sendTo('subtitles', ({ event }) => event)
-        ] },
-        '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) },
-        'INDEXES': {
-          actions: [
-            assign({ indexes: ({ event }) => event.indexes })
-          ]
-        },
-        '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

@@ -1,285 +0,0 @@
-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, stringify } 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: 'TIME_UPDATE', currentTime: 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
-
-  const currentTimeInterval = setInterval(() => {
-    if (jassubInstance) {
-      jassubInstance.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
-    }
-  }, 100)
-
-  receive((event) => {
-    if (event.type === 'TIME_UPDATE' && jassubInstance) {
-      jassubInstance.setCurrentTime(video.paused, event.currentTime, video.playbackRate)
-    }
-    if (event.type === 'SELECT_SUBTITLE_STREAM') {
-      selectedStreamIndex = event.streamIndex
-      sendBack({ type: 'SELECTED_SUBTITLE_STREAM_UPDATED', streamIndex: event.streamIndex })
-      if (!jassubInstance) return
-      jassubInstance.freeTrack()
-      jassubInstance.setCurrentTime(video.paused, video.currentTime, video.playbackRate)
-      if (selectedStreamIndex === undefined) {
-        return
-      }
-      appendedSubtitleParts = []
-      const newSubtitleStreams = subtitlesStreams.get(selectedStreamIndex)
-      if (!newSubtitleStreams) {
-        throw new Error('newSubtitleStreams is undefined')
-      }
-      const parsedHeader = parse(newSubtitleStreams.header.content)
-      const modifiedHeader = {
-        ...parsedHeader,
-        info: {
-          ...parsedHeader.info,
-          ScaledBorderAndShadow: 'no' as const,
-          LayoutResX: '',
-          LayoutResY: ''
-        }
-      }
-      const header = stringify(modifiedHeader)
-      jassubInstance.setTrack(header)
-      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) {
-            const parsedHeader = parse(subtitlePart.content)
-            const modifiedHeader = {
-              ...parsedHeader,
-              info: {
-                ...parsedHeader.info,
-                ScaledBorderAndShadow: 'no' as const,
-                LayoutResX: '',
-                LayoutResY: ''
-              }
-            }
-            const header = stringify(modifiedHeader)
-            jassubInstance = new JASSUB({
-              onDemandRender: false,
-              video,
-              canvas,
-              subContent: header,
-              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 () => {
-    clearInterval(currentTimeInterval)
-    jassubInstance?.destroy()
-  }
-})

package/src/state-machines/thumbnails.ts

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