@banou/media-player 0.6.2 → 0.7.0

package/src/main.tsx

@@ -1,169 +0,0 @@
-/// <reference types="@emotion/react/types/css-prop" />
-import { useCallback, useEffect, useMemo, useState } from 'react'
-import { createRoot } from 'react-dom/client'
-import { css, Global } from '@emotion/react'
-
-import MediaPlayer from './index'
-import { DownloadedRange } from './utils/context'
-
-const mountStyle = css`
-  display: grid;
-  height: 100vh;
-  width: 100vw;
-`
-
-const BASE_BUFFER_SIZE = 2_500_000
-const url = '/video.mkv'
-
-const Mount = () => {
-  const [contentLength, setContentLength] = useState<number>()
-
-  const read = useCallback(
-    (offset: number, size: number) => {
-      if (contentLength === undefined) return Promise.resolve(new Uint8Array(0).buffer)
-      if (offset >= contentLength) return Promise.resolve(new Uint8Array(0).buffer)
-      return (
-        fetch(url, { headers: { Range: `bytes=${offset}-${Math.min(offset + size, contentLength) - 1}` } })
-          .then(res => res.arrayBuffer())
-      )
-    },
-    [contentLength]
-  )
-
-  useEffect(() => {
-    fetch(url, { headers: { Range: `bytes=${0}-${1}` } })
-      .then(async ({ headers, body }) => {
-        if (!body) throw new Error('no body')
-        const contentRangeContentLength = headers.get('Content-Range')?.split('/').at(1)
-        const contentLength =
-          contentRangeContentLength
-            ? Number(contentRangeContentLength)
-            : Number(headers.get('Content-Length'))
-        setContentLength(contentLength)
-      })
-  }, [])
-
-  const jassubWorkerUrl = useMemo(() => {
-    const workerUrl = new URL('/build/jassub-worker.js', import.meta.url).toString()
-    const blob = new Blob([`importScripts(${JSON.stringify(workerUrl)})`], { type: 'application/javascript' })
-    return URL.createObjectURL(blob)
-  }, [])
-
-  const libavWorkerUrl = useMemo(() => {
-    const workerUrl = new URL('/build/libav.js', new URL(window.location.toString()).origin).toString()
-    const blob = new Blob([`importScripts(${JSON.stringify(workerUrl)})`], { type: 'application/javascript' })
-    return URL.createObjectURL(blob)
-  }, [])
-
-  const jassubWasmUrl = useMemo(() => {
-    return new URL('/build/jassub-worker.wasm', new URL(window.location.toString()).origin).toString()
-  }, [])
-
-  const jassubModernWasmUrl = useMemo(() => {
-    return new URL('/build/jassub-modern-worker.wasm', new URL(window.location.toString()).origin).toString()
-  }, [])
-
-  const [downloadedRanges, setDownloadedRanges] = useState<DownloadedRange[]>([])
-
-  useEffect(() => {
-    if (!contentLength) return
-    let i = 0
-    const increaseDownloadedRanges = () => {
-      setDownloadedRanges(() => [
-        {
-          startByteOffset: 0,
-          endByteOffset: contentLength * i
-        }
-      ])
-      i += 0.1
-      if (i < 1) {
-        setTimeout(increaseDownloadedRanges, 1000)
-      }
-    }
-    increaseDownloadedRanges()
-  }, [contentLength])
-
-  return (
-    <div css={mountStyle}>
-      <MediaPlayer
-        title={'video.mkv'}
-        downloadedRanges={contentLength ? downloadedRanges : undefined}
-        bufferSize={BASE_BUFFER_SIZE}
-        read={read}
-        size={contentLength}
-        autoplay={true}
-        publicPath={new URL('/build/', new URL(import.meta.url).origin).toString()}
-        jassubModernWasmUrl={jassubModernWasmUrl}
-        jassubWorkerUrl={jassubWorkerUrl}
-        jassubWasmUrl={jassubWasmUrl}
-        libavWorkerUrl={libavWorkerUrl}
-      />
-    </div>
-  )
-}
-
-const globalStyle = css`
-  @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-  *, *::before, *::after {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
-
-  html {
-    font-size: 62.5%;
-    height: 100%;
-    width: 100%;
-  }
-
-  body {
-    margin: 0;
-    height: 100%;
-    width: 100%;
-    font-size: 1.6rem;
-    font-family: Fira Sans;
-    color: #fff;
-
-    font-family: Montserrat;
-  }
-
-  body > div {
-    height: 100%;
-    width: 100%;
-  }
-
-  a {
-    color: #777777;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #fff;
-    text-decoration: underline;
-  }
-
-  ul {
-    list-style: none;
-  }
-`
-
-const mountElement = document.createElement('div')
-
-const root = createRoot(
-  document.body.appendChild(mountElement)
-)
-
-root.render(
-  <>
-    <Global styles={globalStyle}/>
-    <Mount/>
-  </>
-)
-
-if (import.meta.hot) {
-  import.meta.hot.dispose(() => {
-    root.unmount()
-    mountElement.remove()
-  })
-}

package/src/state-machines/data-source.ts

@@ -1,84 +0,0 @@
-import { makeRemuxer } from 'libav-wasm'
-
-import { fromAsyncCallback } from './utils'
-import { queuedThrottleWithLastCall, toStreamChunkSize } from '../utils'
-import { Attachment, SubtitleFragment } from 'libav-wasm/build/worker'
-
-type DataSourceEvents =
-  | { type: 'METADATA', mimeType: string, duration: number }
-  | { type: 'SEEKING', currentTime: number }
-  | { type: 'NEED_DATA' }
-
-type DataSourceEmittedEvents =
-  | { type: 'DATA', data: Uint8Array }
-  | { type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: SubtitleFragment[] }
-  | { type: 'NEW_ATTACHMENTS', attachments: Attachment[] }
-
-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
-
-  const remuxer = await makeRemuxer({
-    publicPath,
-    workerUrl,
-    bufferSize,
-    length,
-    read
-  })
-
-  const metadata = await remuxer.init()
-  if (metadata.indexes) sendBack({ type: 'INDEXES', indexes: metadata.indexes })
-  if (metadata.attachments?.length) sendBack({ type: 'NEW_ATTACHMENTS', attachments: metadata.attachments })
-  if (metadata.subtitles?.length) sendBack({ type: 'NEW_SUBTITLE_FRAGMENTS', subtitles: metadata.subtitles })
-  sendBack({ type: 'METADATA', ...metadata })
-
-  let isFinished = false
-  let currentSeeks: { currentTime: number }[] = []
-  const loadMore = queuedThrottleWithLastCall(100, async () => {
-    if (currentSeeks.length || isFinished) return
-    try {
-      const { data, subtitles, finished } = await remuxer.read()
-      if (finished) {
-        isFinished = true
-      }
-      if (subtitles.length) {
-        sendBack({ type: 'NEW_SUBTITLE_FRAGMENTS', subtitles })
-      }
-      sendBack({ type: 'DATA', data })
-    } catch (err: any) {
-      if (err.message === 'Cancelled') return
-      console.error(err)
-    }
-  })
-
-  receive(async (event) => {
-    if (event.type === 'NEED_DATA') {
-      loadMore()
-    } else if (event.type === 'SEEKING') {
-      isFinished = false
-      const { currentTime } = event
-      const seekObject = { currentTime }
-      currentSeeks = [...currentSeeks, seekObject]
-      try {
-        const { data, pts } = await remuxer
-          .seek(currentTime)
-          .finally(() => {
-            currentSeeks = currentSeeks.filter(seekObj => seekObj !== seekObject)
-          })
-        sendBack({ type: 'TIMESTAMP_OFFSET', timestampOffset: pts })
-        sendBack({ type: 'DATA', data })
-      } catch (err: any) {
-        if (err.message === 'Cancelled') return
-        console.error(err)
-      }
-    }
-  })
-
-  return () => {
-    remuxer.destroy()
-  }
-})

package/src/state-machines/index.ts

@@ -1,5 +0,0 @@
-import { createActorContext } from '@xstate/react'
-
-import mediaMachine from './media'
-
-export const MediaMachineContext = createActorContext(mediaMachine)

package/src/state-machines/media-properties.ts

@@ -1,82 +0,0 @@
-import { fromCallback } from 'xstate'
-
-type MediaPropertiesEvents =
-  | { type: 'PLAY' }
-  | { type: 'PAUSE' }
-  | { type: 'SET_TIME', value: number }
-  | { type: 'SET_VOLUME', muted: boolean, volume: number }
-  | { type: 'SET_PLAYBACK_RATE', playbackRate: number }
-  | { type: 'DESTROY' }
-
-type MediaPropertiesEmittedEvents =
-  | { type: 'PLAYING' }
-  | { type: 'PAUSED' }
-  | { type: 'TIME_UPDATE', currentTime: number }
-  | { type: 'VOLUME_UPDATE', muted: boolean, volume: number }
-  | { type: 'PLAYBACK_RATE_UPDATE', playbackRate: number }
-  | { type: 'DURATION_UPDATE', duration: number }
-  | { type: 'SEEKING', currentTime: number }
-  | { type: 'ENDED' }
-
-type MediaPropertiesInput = { videoElement: HTMLVideoElement }
-
-export default fromCallback<MediaPropertiesEvents, MediaPropertiesInput, MediaPropertiesEmittedEvents>(({ sendBack, receive, input }) => {
-  const { videoElement } = input
-
-  receive((event) => {
-    if (event.type === 'PLAY') {
-      videoElement
-        .play()
-        .then(() => handlePlay())
-        .catch((error) => {
-          console.error(error)
-        })
-    }
-    if (event.type === 'PAUSE') {
-      videoElement.pause()
-      handlePause()
-    }
-    if (event.type === 'SET_TIME') {
-      videoElement.currentTime = event.value
-      handleTimeUpdate()
-    }
-    if (event.type === 'SET_VOLUME') {
-      videoElement.volume = event.volume
-      videoElement.muted = event.muted
-      handleVolumeUpdate()
-    }
-    if (event.type === 'SET_PLAYBACK_RATE') {
-      videoElement.playbackRate = event.playbackRate
-      handlePlaybackRateUpdate()
-    }
-  })
-
-  const handlePlay = () => sendBack({ type: 'PLAYING' })
-  const handlePause = () => sendBack({ type: 'PAUSED' })
-  const handleEnded = () => sendBack({ type: 'ENDED' })
-  const handleTimeUpdate = () => sendBack({ type: 'TIME_UPDATE', currentTime: videoElement.currentTime })
-  const handleVolumeUpdate = () => sendBack({ type: 'VOLUME_UPDATE', muted: videoElement.muted, volume: videoElement.volume })
-  const handlePlaybackRateUpdate = () => sendBack({ type: 'PLAYBACK_RATE_UPDATE', playbackRate: videoElement.playbackRate })
-  const handleSeeking = () => sendBack({ type: 'SEEKING', currentTime: videoElement.currentTime })
-  const handleDurationChange = () => sendBack({ type: 'DURATION_UPDATE', duration: videoElement.duration })
-
-  videoElement.addEventListener('play', handlePlay)
-  videoElement.addEventListener('pause', handlePause)
-  videoElement.addEventListener('ended', handleEnded)
-  videoElement.addEventListener('timeupdate', handleTimeUpdate)
-  videoElement.addEventListener('volumechange', handleVolumeUpdate)
-  videoElement.addEventListener('ratechange', handlePlaybackRateUpdate)
-  videoElement.addEventListener('seeking', handleSeeking)
-  videoElement.addEventListener('durationchange', handleDurationChange)
-
-  return () => {
-    videoElement.removeEventListener('play', handlePlay)
-    videoElement.removeEventListener('pause', handlePause)
-    videoElement.removeEventListener('ended', handleEnded)
-    videoElement.removeEventListener('timeupdate', handleTimeUpdate)
-    videoElement.removeEventListener('volumechange', handleVolumeUpdate)
-    videoElement.removeEventListener('ratechange', handlePlaybackRateUpdate)
-    videoElement.removeEventListener('seeking', handleSeeking)
-    videoElement.removeEventListener('durationchange', handleDurationChange)
-  }
-})

package/src/state-machines/media-source.ts

@@ -1,129 +0,0 @@
-import { makeRemuxer } from 'libav-wasm'
-
-import { fromAsyncCallback, getTimeRanges, updateSourceBuffer } from './utils'
-
-type MediaSourceEvents =
-  | ({ type: 'METADATA' } & Awaited<ReturnType<Awaited<ReturnType<typeof makeRemuxer>>['init']>>)
-  | { type: 'TIMESTAMP_OFFSET', timestampOffset: number }
-  | { type: 'DATA', data: ArrayBuffer }
-
-type MediaSourceEmittedEvents =
-  | { type: 'SOURCE_BUFFER_READY' }
-  | { type: 'SOURCE_OPEN' }
-  | { type: 'SOURCE_ENDED' }
-  | { type: 'SOURCE_ERROR' }
-  | { type: 'NEED_DATA' }
-
-export type MediaSourceOptions = {
-  preEvictionTime?: number
-  postEvictionTime?: number
-  bufferTargetTime?: number
-}
-
-type MediaSourceInput = {
-  videoElement: HTMLVideoElement
-  preEvictionTime?: number
-  postEvictionTime?: number
-  bufferTargetTime?: number
-}
-
-const defaultPreEvictionTime = -20
-const defaultPostEvictionTime = 60
-const defaultBufferTargetTime = 30
-
-export default fromAsyncCallback<MediaSourceEvents, MediaSourceInput, MediaSourceEmittedEvents>(async ({ sendBack, receive, input, self, emit }) => {
-  const { videoElement, preEvictionTime, postEvictionTime, bufferTargetTime } = input
-
-  const handlError = () => console.error(videoElement.error)
-  videoElement.addEventListener('error', handlError)
-
-  const mediaSource = new MediaSource()
-  const mediaSourceUrl = URL.createObjectURL(mediaSource)
-  videoElement.src = mediaSourceUrl
-
-  const getPreEvictionTime = () => videoElement.currentTime + (preEvictionTime ?? defaultPreEvictionTime)
-  const getPostEvictionTime = () => videoElement.currentTime + (postEvictionTime ?? defaultPostEvictionTime)
-  const getBufferTargetTime = () => videoElement.currentTime + (bufferTargetTime ?? defaultBufferTargetTime)
-
-  let headerBuffer: ArrayBuffer | undefined
-  const sourceBuffer =
-    await new Promise<SourceBuffer>(resolve =>
-      mediaSource.addEventListener(
-        'sourceopen',
-        () => {
-          let resolved = false
-          receive((event) => {
-            if (resolved) return
-            if (event.type === 'METADATA') {
-              const sourceBuffer = mediaSource.addSourceBuffer(`video/mp4; codecs="${[event.info.output.videoMimeType, event.info.output.audioMimeType].filter(Boolean).join(',')}"`)
-              sourceBuffer.mode = 'segments'
-              mediaSource.duration = event.info.input.duration
-              headerBuffer = event.data
-              resolved = true
-              resolve(sourceBuffer)
-            }
-          })
-        },
-        { once: true }
-      )
-    )
-
-  if (!headerBuffer) throw new Error('No header buffer')
-
-  const { appendBuffer, unbufferRange, updateTimestampOffset } = updateSourceBuffer(sourceBuffer)
-  appendBuffer(headerBuffer)
-
-  receive(async (event) => {
-    if (event.type === 'DATA') {
-      await appendBuffer(event.data)
-    } else if (event.type === 'TIMESTAMP_OFFSET') {
-      await updateTimestampOffset(event.timestampOffset)
-    }
-  })
-
-  const unbuffer = async () => {
-    const preEvictionTime = getPreEvictionTime()
-    const postEvictionTime = getPostEvictionTime()
-    const bufferedRanges = getTimeRanges(sourceBuffer)
-    for (const { start, end } of bufferedRanges) {
-      if (start < preEvictionTime) {
-        await unbufferRange(
-          start,
-          preEvictionTime
-        )
-      }
-      if (end > postEvictionTime) {
-        await unbufferRange(
-          postEvictionTime,
-          end
-        )
-      }
-    }
-  }
-
-  const interval = setInterval(async () => {
-    await unbuffer()
-    const timeRanges = getTimeRanges(sourceBuffer)
-    const maxBufferedTime  = Math.max(...timeRanges.map(({ end }) => end))
-    if (maxBufferedTime < getBufferTargetTime()) {
-      sendBack({ type: 'NEED_DATA' })
-    }
-  }, 100)
-
-  const handleSourceOpen = () => sendBack({ type: 'SOURCE_OPEN' })
-  const handleSourceEnded = () => sendBack({ type: 'SOURCE_ENDED' })
-  const handleSourceError = () => sendBack({ type: 'SOURCE_ERROR' })
-
-  mediaSource.addEventListener('sourceopen', handleSourceOpen)
-  mediaSource.addEventListener('sourceended', handleSourceEnded)
-  mediaSource.addEventListener('error', handleSourceError)
-
-  return () => {
-    URL.revokeObjectURL(mediaSourceUrl)
-    clearInterval(interval)
-    videoElement.removeEventListener('error', handlError)
-    mediaSource.removeEventListener('sourceopen', handleSourceOpen)
-    mediaSource.removeEventListener('sourceended', handleSourceEnded)
-    mediaSource.removeEventListener('error', handleSourceError)
-  }
-})