@lincyaw/addon-lecture 0.0.0-stage → 1.0.0-rc.10

package/src/client/pointer-ink.ts

@@ -0,0 +1,143 @@
+import { blockElement, codeLinesBox } from '@lincyaw/host'
+import type { PathPoint } from '../domain/index.ts'
+
+const LASER_MS = 1500
+
+interface Pointer {
+  block: string
+  path: PathPoint[]
+  from: number
+  animate: boolean
+}
+
+interface Ink {
+  block: string
+  tool: 'laser' | 'marker'
+  lines?: string
+  range?: [number, number, number, number]
+  until?: number
+}
+
+let pointer: Pointer | undefined
+let inks: Ink[] = []
+let layer: HTMLElement | undefined
+let frame = 0
+
+function path(value: unknown): PathPoint[] {
+  return Array.isArray(value)
+    ? value.filter((p): p is PathPoint => Array.isArray(p) && p.length === 3 && p.every(n => typeof n === 'number'))
+    : []
+}
+
+function range(value: unknown): Ink['range'] {
+  return Array.isArray(value) && value.length === 4 && value.every(n => typeof n === 'number') ? value as Ink['range'] : undefined
+}
+
+function along(points: PathPoint[], elapsed: number): PathPoint {
+  const next = points.findIndex(([t]) => t > elapsed)
+  if (next <= 0) return next === 0 ? points[0]! : points.at(-1)!
+  const [t0, x0, y0] = points[next - 1]!
+  const [t1, x1, y1] = points[next]!
+  const k = (elapsed - t0) / Math.max(1, t1 - t0)
+  return [elapsed, x0 + (x1 - x0) * k, y0 + (y1 - y0) * k]
+}
+
+function ensureLayer(): HTMLElement {
+  if (layer?.isConnected) return layer
+  layer = document.createElement('div')
+  layer.className = 'pm-lecture-pointer-ink'
+  layer.setAttribute('aria-hidden', 'true')
+  Object.assign(layer.style, { position: 'fixed', inset: '0', pointerEvents: 'none', zIndex: 'calc(var(--pm-cue-z, 1) + 2)' })
+  document.body.append(layer)
+  return layer
+}
+
+function inkBox(ink: Ink, block: HTMLElement): DOMRect | undefined {
+  if (ink.lines) return codeLinesBox(block, ink.lines)
+  if (!ink.range) return undefined
+  const box = block.getBoundingClientRect()
+  const [x0, y0, x1, y1] = ink.range
+  return new DOMRect(box.left + Math.min(x0, x1) * box.width, box.top + Math.min(y0, y1) * box.height, Math.abs(x1 - x0) * box.width, Math.abs(y1 - y0) * box.height)
+}
+
+const STYLES: Record<string, Partial<CSSStyleDeclaration>> = {
+  marker: { background: 'rgb(250 204 21 / 0.35)', borderRadius: '3px', mixBlendMode: 'multiply' },
+  laser: { boxShadow: '0 0 0 3px rgb(239 68 68 / 0.85), 0 0 18px rgb(239 68 68 / 0.6)', borderRadius: '6px' },
+  pointer: { width: '16px', height: '16px', borderRadius: '50%', background: 'rgb(239 68 68 / 0.9)', boxShadow: '0 0 0 4px rgb(239 68 68 / 0.25)' },
+}
+
+function slot(root: HTMLElement, k: number, kind: string, block: string): HTMLElement {
+  let el = root.children[k] as HTMLElement | undefined
+  if (!el || el.dataset.kind !== kind) {
+    const made = document.createElement('div')
+    made.className = kind === 'pointer' ? 'pm-lecture-pointer' : `pm-lecture-ink pm-lecture-ink--${kind}`
+    made.dataset.kind = kind
+    Object.assign(made.style, { position: 'absolute', ...STYLES[kind] })
+    if (el) el.replaceWith(made)
+    else root.append(made)
+    el = made
+  }
+  el.dataset.block = block
+  return el
+}
+
+function draw(): void {
+  frame = 0
+  const now = performance.now()
+  inks = inks.filter(ink => ink.until === undefined || ink.until > now)
+  const root = pointer || inks.length > 0 ? ensureLayer() : layer
+  let k = 0
+  for (const ink of inks) {
+    const block = blockElement(ink.block)
+    const box = block && inkBox(ink, block)
+    if (!box || !root) continue
+    const el = slot(root, k++, ink.tool, ink.block)
+    Object.assign(el.style, { left: `${box.left}px`, top: `${box.top}px`, width: `${box.width}px`, height: `${box.height}px` })
+    if (ink.until !== undefined) el.style.opacity = String(Math.min(1, (ink.until - now) / 400))
+  }
+  const block = pointer && blockElement(pointer.block)
+  if (pointer && block && root) {
+    const [, x, y] = pointer.animate ? along(pointer.path, now - pointer.from) : pointer.path.at(-1)!
+    const box = block.getBoundingClientRect()
+    const dot = slot(root, k++, 'pointer', pointer.block)
+    Object.assign(dot.style, { left: `${box.left + x * box.width - 8}px`, top: `${box.top + y * box.height - 8}px` })
+  }
+  while (root && root.children.length > k) root.lastElementChild!.remove()
+  if (pointer || inks.length > 0) frame = requestAnimationFrame(draw)
+}
+
+function redraw(): void {
+  if (!frame) frame = requestAnimationFrame(draw)
+}
+
+export function applyPoint(data: Record<string, unknown>, seeking: boolean): void {
+  const points = path(data.path)
+  if (typeof data.block !== 'string' || points.length === 0) return
+  pointer = { block: data.block, path: points, from: performance.now(), animate: !seeking }
+  redraw()
+}
+
+export function applyInk(data: Record<string, unknown>, seeking: boolean): void {
+  if (data.clear === true) {
+    inks = []
+    redraw()
+    return
+  }
+  const tool = data.tool === 'laser' ? 'laser' : 'marker'
+  if (typeof data.block !== 'string' || (tool === 'laser' && seeking)) return
+  const ink: Ink = { block: data.block, tool, ...typeof data.lines === 'string' ? { lines: data.lines } : {}, ...range(data.range) ? { range: range(data.range) } : {} }
+  if (!ink.lines && !ink.range) return
+  if (tool === 'laser') ink.until = performance.now() + LASER_MS
+  inks.push(ink)
+  redraw()
+}
+
+export function clearPointer(): void {
+  pointer = undefined
+  redraw()
+}
+
+export function clearInks(): void {
+  inks = []
+  redraw()
+}

package/src/client/production-playback.ts

@@ -0,0 +1,188 @@
+import { createStore } from '@lincyaw/host'
+import { PRODUCTION_PLAYBACK_RATES as PLAYBACK_RATES, sameProductionBinding } from '@lincyaw/kernel'
+import { flushSync } from 'react-dom'
+import type { ProductionPlayback, StepClock } from '@lincyaw/host'
+import type { ProductionBinding, ProductionPlan, ProductionPlaybackCommand, ProductionPlaybackState } from '@lincyaw/kernel'
+import type { LecturePlayer } from './player.ts'
+
+export { PLAYBACK_RATES }
+interface Loader { load(binding: ProductionBinding, signal: AbortSignal): Promise<void>, current(binding: ProductionBinding): boolean }
+interface Driver { plan: ProductionPlan, player: LecturePlayer, clock?: StepClock }
+
+/** Let newly mounted pictures register their preparation, then await the real shared step clock. */
+export async function settleProductionPlayback(clock?: StepClock, signal?: AbortSignal): Promise<void> {
+  const frame = () => new Promise<void>((resolve, reject) => {
+    signal?.throwIfAborted()
+    const abort = () => { cancelAnimationFrame(id); reject(signal?.reason ?? new DOMException('Playback cancelled', 'AbortError')) }
+    const id = requestAnimationFrame(() => { signal?.removeEventListener('abort', abort); resolve() })
+    signal?.addEventListener('abort', abort, { once: true })
+  })
+  await frame(); signal?.throwIfAborted()
+  await clock?.settled(); signal?.throwIfAborted()
+  await frame(); signal?.throwIfAborted()
+}
+
+/** A versioned handle to one existing LecturePlayer, with no scheduler or independent playback clock. */
+export class ProductionPlaybackController implements ProductionPlayback {
+  readonly version = 1 as const
+  readonly state = createStore<ProductionPlaybackState | undefined>(undefined)
+  readonly engaged = createStore(false)
+  #loader?: Loader
+  #driver?: Driver
+  #request?: AbortController
+  #command?: ProductionPlaybackCommand
+  #generation = 0
+  #stopped = false
+  #waiting = new Set<() => void>()
+
+  register(loader: Loader): () => void {
+    this.#loader = loader
+    for (const ready of [...this.#waiting]) ready()
+    return () => {
+      if (this.#loader !== loader) return
+      this.#loader = undefined; this.#request?.abort(); this.#driver?.player.pause()
+      const before = this.state.getSnapshot()
+      if (before) this.state.set({ binding: before.binding, status: 'unavailable', error: 'production-playback-unavailable' })
+    }
+  }
+
+  loading(binding: ProductionBinding): void {
+    this.state.set({ binding, status: 'loading' })
+  }
+
+  #publish(driver: Driver): void {
+    if (this.#stopped || this.#driver !== driver || !this.#loader?.current(driver.plan.binding)) return
+    const shown = this.state.getSnapshot()
+    if (shown && !sameProductionBinding(shown.binding, driver.plan.binding)) return
+    const { player, plan } = driver, error = player.clock.error.getSnapshot()
+    const at = player.time.getSnapshot(), cursor = player.cursor.getSnapshot()
+    const page = plan.pages.find(page => page.sectionId === cursor?.sectionId)
+    const step = page?.steps.find(step => step.index === cursor?.step)
+    this.state.set({ binding: plan.binding, status: error ? 'failed' : 'ready', position: {
+      timeMs: at, durationMs: player.duration, stepTimeMs: player.stepTime.getSnapshot(),
+      ...page ? { sectionId: page.sectionId } : {}, ...step ? { stepId: step.stepId } : {},
+      playing: player.clock.playing.getSnapshot(), rate: player.clock.rate.getSnapshot(), trying: player.trying.getSnapshot(),
+      ...player.waitingFor.getSnapshot() ? { waitingFor: player.waitingFor.getSnapshot() } : {},
+    }, ...error ? { error: 'production-playback-failed' } : {} })
+  }
+
+  attach(plan: ProductionPlan, player?: LecturePlayer, clock?: StepClock): () => void {
+    if (!player) {
+      this.#driver = undefined
+      this.state.set({ binding: plan.binding, status: plan.timing === 'estimated' ? 'estimated' : 'unavailable', error: plan.canPreview ? undefined : 'production-plan-unavailable' })
+      return () => {}
+    }
+    const driver = { plan, player, clock }
+    this.#driver = driver
+    let queued = false
+    const report = () => { if (!queued) { queued = true; queueMicrotask(() => { queued = false; this.#publish(driver) }) } }
+    const stops = [player.time.subscribe(report), player.stepTime.subscribe(report), player.cursor.subscribe(report), player.trying.subscribe(report), player.waitingFor.subscribe(report), player.clock.playing.subscribe(report), player.clock.rate.subscribe(report), player.clock.error.subscribe(report)]
+    this.#publish(driver)
+    return () => {
+      stops.forEach(stop => stop())
+      if (this.#driver !== driver) return
+      this.#driver = undefined
+      this.state.set({ binding: plan.binding, status: 'unavailable', error: 'production-playback-unavailable' })
+    }
+  }
+
+  async #ready(signal: AbortSignal): Promise<Loader> {
+    if (this.#loader) return this.#loader
+    return new Promise((resolve, reject) => {
+      const finish = () => {
+        if (!this.#waiting.delete(finish)) return
+        signal.removeEventListener('abort', finish)
+        signal.aborted || this.#stopped ? reject(new DOMException('Playback cancelled', 'AbortError')) : this.#loader ? resolve(this.#loader) : reject(new Error('production-playback-unavailable'))
+      }
+      this.#waiting.add(finish); signal.addEventListener('abort', finish, { once: true })
+      if (signal.aborted || this.#stopped) finish()
+    })
+  }
+
+  async control(command: ProductionPlaybackCommand, signal?: AbortSignal): Promise<ProductionPlaybackState> {
+    signal?.throwIfAborted()
+    if (this.#stopped) throw new Error('production-playback-unavailable')
+    if (this.#loader && !this.#loader.current(command.binding)) throw new Error('production-binding-stale')
+    const cancellingLoad = command.action === 'pause' && this.#request && this.#command
+      && (this.#command.action === 'load' || this.state.getSnapshot()?.status === 'loading') && sameProductionBinding(this.#command.binding, command.binding)
+    if (command.action !== 'load' && command.action !== 'step' && !cancellingLoad && !sameProductionBinding(this.state.getSnapshot()?.binding ?? command.binding, command.binding)) throw new Error('production-binding-stale')
+    const request = new AbortController(), generation = ++this.#generation
+    this.#request?.abort(); this.#request = request; this.#command = command
+    const combined = signal ? AbortSignal.any([signal, request.signal]) : request.signal
+    let driver = this.#driver
+    const loads = command.action === 'load' || command.action === 'step'
+      && (!driver || !sameProductionBinding(driver.plan.binding, command.binding) || this.state.getSnapshot()?.status !== 'ready')
+    const cancel = () => { if (driver && this.#driver === driver) driver.player.pause() }
+    combined.addEventListener('abort', cancel, { once: true })
+    const check = () => {
+      combined.throwIfAborted()
+      if (this.#stopped || generation !== this.#generation || !this.#loader?.current(command.binding)) throw new Error('production-binding-stale')
+    }
+    try {
+      if (command.action === 'load' && driver && sameProductionBinding(driver.plan.binding, command.binding) && this.state.getSnapshot()?.status === 'ready') {
+        this.engaged.set(true); driver.player.pause(); check(); this.#publish(driver)
+        return this.state.getSnapshot()!
+      }
+      if (cancellingLoad || command.action === 'pause' && !this.#loader) {
+        this.#driver?.player.pause()
+        const state: ProductionPlaybackState = { binding: command.binding, status: 'unavailable', error: 'production-playback-cancelled' }
+        this.state.set(state)
+        return state
+      }
+      if (loads) { this.engaged.set(true); this.loading(command.binding) }
+      const loader = await this.#ready(combined)
+      if (!loader.current(command.binding)) throw new Error('production-binding-stale')
+      if (loads) {
+        await loader.load(command.binding, combined); check()
+        if (!sameProductionBinding(this.state.getSnapshot()?.binding ?? command.binding, command.binding)) throw new Error('production-binding-stale')
+      }
+      if (command.action !== 'load') {
+        check()
+        driver = this.#driver
+        if (driver && !sameProductionBinding(driver.plan.binding, command.binding)) throw new Error('production-binding-stale')
+        if (command.action === 'pause') driver?.player.pause()
+        else {
+          if (!driver || !driver.plan.canPreview || this.state.getSnapshot()?.status !== 'ready') throw new Error('production-plan-unavailable')
+          if (command.action === 'seek') {
+            if (driver.plan.timing !== 'confirmed') throw new Error('production-plan-unavailable')
+            if (!Number.isFinite(command.timeMs) || command.timeMs < 0 || command.timeMs > driver.player.duration) throw new Error('production-playback-time')
+            flushSync(() => driver!.player.seek(command.timeMs))
+          } else if (command.action === 'step') {
+            const step = driver.plan.pages.find(page => page.sectionId === command.sectionId)?.steps.find(step => step.stepId === command.stepId)
+            if (!step || step.startMs === undefined) throw new Error('production-binding-stale')
+            const utterance = command.utteranceId ? driver.player.track.utterances.find(unit => unit.id === command.utteranceId && unit.section === command.sectionId && !unit.unsaid) : undefined
+            if (command.utteranceId && !utterance) throw new Error('production-binding-stale')
+            let selected = false
+            flushSync(() => {
+              if (utterance && utterance.step === step.index) { driver!.player.seek(utterance.t); selected = true }
+              else selected = driver!.player.seekStep(command.sectionId, step.index)
+            })
+            if (!selected) throw new Error('production-binding-stale')
+          } else if (command.action === 'rate') {
+            if (!PLAYBACK_RATES.some(rate => rate === command.rate)) throw new Error('production-playback-rate')
+            driver.player.setRate(command.rate)
+          } else if (!await driver.player.play()) throw new Error('production-playback-cancelled')
+          await settleProductionPlayback(driver.clock, combined); check()
+        }
+        if (driver) this.#publish(driver)
+      }
+      check()
+      const state = this.state.getSnapshot()
+      if (!state || !sameProductionBinding(state.binding, command.binding)) throw new Error('production-playback-unavailable')
+      return state
+    } catch (error) {
+      if (this.#request === request && (command.action === 'load' || loads && this.state.getSnapshot()?.status === 'loading')) this.state.set({ binding: command.binding, status: combined.aborted ? 'unavailable' : 'failed', error: combined.aborted ? 'production-playback-cancelled' : 'production-playback-failed' })
+      throw error
+    } finally {
+      combined.removeEventListener('abort', cancel)
+      if (this.#request === request) { this.#request = undefined; this.#command = undefined }
+    }
+  }
+
+  dispose(): void {
+    this.#stopped = true; this.#generation++; this.#request?.abort(); this.#driver?.player.pause()
+    for (const ready of [...this.#waiting]) ready()
+    this.#loader = undefined; this.#driver = undefined; this.engaged.set(false)
+    this.state.set(undefined)
+  }
+}

package/src/client/recorder.ts

@@ -0,0 +1,245 @@
+import type { Operations, ServerClient } from '@lincyaw/host'
+import type { IRDocument, Operation, TrackEvent } from '@lincyaw/kernel'
+import { createStore } from '@lincyaw/host'
+import { irHash, LECTURE_ID, referencedBlocks, sectionHashes } from '../domain/index.ts'
+import type { MediaSegment, Recording, VideoSegment } from '../domain/index.ts'
+import type { Capture, Chunk } from './media.ts'
+import { captureAudio, captureVideo } from './media.ts'
+import { readAnswer } from './source.ts'
+
+const UPLOAD_MS = 5000
+
+export type RecorderState = 'starting' | 'recording' | 'saving' | 'saved' | 'failed'
+
+export interface RecorderOptions {
+  server: ServerClient
+  operations: Operations
+  doc: () => IRDocument
+  position: () => { section: string, step: number }
+  speaker?: string
+  camera?: boolean
+  screen?: boolean
+  track?: string
+}
+
+type Source = 'audio' | 'camera' | 'screen'
+
+interface Segment {
+  source: Source
+  section: string
+  start: number
+  end?: number
+  capture: Capture
+  src: Promise<string>
+  pending: Chunk[]
+  stopped?: Promise<void>
+}
+
+export class LectureRecorder {
+  readonly state = createStore<RecorderState>('starting')
+  readonly error = createStore<string | undefined>(undefined)
+  readonly elapsed = createStore(0)
+  id?: string
+  readonly rerecordSection?: string
+  private current?: string
+
+  private readonly options: RecorderOptions
+  private readonly events: TrackEvent[] = []
+  private readonly paths = new WeakMap<object, number>()
+  private readonly segments: Segment[] = []
+  private streams: Partial<Record<Source, MediaStream>> = {}
+  private t0 = 0
+  private timers: ReturnType<typeof setInterval>[] = []
+  private unsubscribe?: () => void
+  private uploading = Promise.resolve()
+  private rotating = Promise.resolve()
+  private stopping?: Promise<void>
+
+  constructor(options: RecorderOptions) {
+    this.options = options
+    if (options.track) this.rerecordSection = options.position().section
+  }
+
+  now(): number {
+    return Math.round(performance.now() - this.t0)
+  }
+
+  async start(): Promise<void> {
+    try {
+      if (this.options.screen) this.streams.screen = await navigator.mediaDevices.getDisplayMedia({ video: true })
+      this.streams.audio = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } })
+      if (this.options.camera) this.streams.camera = await navigator.mediaDevices.getUserMedia({ video: true })
+      const { id } = await readAnswer<{ id: string }>(this.post('recordings', { track: this.options.track }))
+      this.id = id
+      this.t0 = performance.now()
+      const position = this.options.position()
+      this.current = position.section
+      this.events.push([0, 'go', { section: position.section, step: position.step, view: 'present' }])
+      await this.open(position.section)
+      this.unsubscribe = this.options.operations.subscribe(operation => this.record(operation))
+      this.timers.push(setInterval(() => void this.upload(), UPLOAD_MS), setInterval(() => this.elapsed.set(this.now()), 250))
+      this.state.set('recording')
+    } catch (error) {
+      this.fail(error)
+      this.release()
+    }
+  }
+
+  notePointerPathStart(data: Record<string, unknown>, at: number): void {
+    this.paths.set(data, at)
+  }
+
+  stop(): Promise<void> {
+    this.stopping ??= this.finish()
+    return this.stopping
+  }
+
+  private post(path: string, body: unknown): Promise<Response> {
+    return this.options.server.fetch(LECTURE_ID, path, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) })
+  }
+
+  private record({ type, data }: Operation): void {
+    if (this.state.getSnapshot() !== 'recording') return
+    const began = this.paths.get(data)
+    const path = type === 'point' && Array.isArray(data.path) ? data.path as [number, number, number][] : undefined
+    const t = Math.max(0, Math.round(began !== undefined ? began - this.t0 : this.now() - (path?.at(-1)?.[0] ?? 0)))
+    if (type === 'go' && typeof data.section === 'string' && data.section !== this.current) {
+      if (this.rerecordSection) {
+        void this.stop()
+        return
+      }
+      this.current = data.section
+      this.events.push([t, type, data])
+      const section = data.section
+      this.rotating = this.rotating.then(() => this.rotate(section)).catch(error => this.fail(error))
+      return
+    }
+    this.events.push([t, type, data])
+  }
+
+  private async open(section: string): Promise<void> {
+    const start = this.now()
+    const sources: Source[] = ['audio', ...this.streams.camera ? ['camera' as const] : [], ...this.streams.screen ? ['screen' as const] : []]
+    for (const source of sources) {
+      const stream = this.streams[source]!
+      const track = source === 'audio' ? stream.getAudioTracks()[0] : stream.getVideoTracks()[0]
+      if (!track) continue
+      const segment = { source, section, start, pending: [] as Chunk[] } as Omit<Segment, 'capture' | 'src'> as Segment
+      const capture = await (source === 'audio' ? captureAudio : captureVideo)(track, chunk => segment.pending.push(chunk))
+      if (!capture) {
+        if (source === 'audio') throw new Error('no audio encoder')
+        continue
+      }
+      capture.failed.catch(error => this.fail(error))
+      segment.capture = capture
+      segment.src = readAnswer<{ src: string }>(this.post(`recordings/${this.id}/media`, {
+        folder: source === 'audio' ? 'audio' : 'video',
+        section,
+        ...source === 'audio' ? {} : { kind: source },
+        ext: capture.ext,
+      })).then(({ src }) => src)
+      segment.src.catch(error => this.fail(error))
+      this.segments.push(segment)
+    }
+  }
+
+  private close(segment: Segment): Promise<void> {
+    segment.end ??= this.now()
+    segment.stopped ??= segment.capture.stop()
+    return segment.stopped
+  }
+
+  private async rotate(section: string): Promise<void> {
+    const open = this.segments.filter(s => s.end === undefined)
+    open.forEach(s => s.end = this.now())
+    await this.open(section)
+    await Promise.all(open.map(s => this.close(s)))
+  }
+
+  private upload(): Promise<void> {
+    this.uploading = this.uploading.then(async () => {
+      for (const segment of this.segments) {
+        const chunks = segment.pending.splice(0)
+        if (chunks.length === 0) continue
+        const src = await segment.src
+        const runs: Chunk[] = []
+        for (const chunk of chunks) {
+          const last = runs.at(-1)
+          if (last && last.position + last.data.byteLength === chunk.position) {
+            const joined = new Uint8Array(last.data.byteLength + chunk.data.byteLength)
+            joined.set(last.data)
+            joined.set(chunk.data, last.data.byteLength)
+            runs[runs.length - 1] = { data: joined, position: last.position }
+          } else {
+            runs.push(chunk)
+          }
+        }
+        for (const run of runs) {
+          await readAnswer(this.options.server.fetch(LECTURE_ID, `recordings/${this.id}/files/${src.split('/').map(encodeURIComponent).join('/')}?at=${run.position}`, {
+            method: 'PUT',
+            body: run.data,
+          }))
+        }
+      }
+    }).catch(error => this.fail(error))
+    return this.uploading
+  }
+
+  private async finish(): Promise<void> {
+    if (this.state.getSnapshot() !== 'recording') {
+      this.release()
+      return
+    }
+    this.state.set('saving')
+    this.unsubscribe?.()
+    const duration = this.now()
+    try {
+      await this.rotating
+      await Promise.all(this.segments.map(s => this.close(s)))
+      await this.upload()
+      if (this.failed()) return
+      const media = async (s: Segment) => ({ section: s.section, start: s.start / 1000, src: await s.src, duration: (s.end! - s.start) / 1000 })
+      const recording: Recording = {
+        events: this.events,
+        audio: await Promise.all(this.segments.filter(s => s.source === 'audio').map(media)) as MediaSegment[],
+        video: await Promise.all(this.segments.filter(s => s.source !== 'audio').map(async s => ({ ...await media(s), kind: s.source }))) as VideoSegment[],
+        utterances: [],
+        duration,
+      }
+      const doc = this.options.doc()
+      const head = {
+        doc: doc.meta.entry,
+        lang: doc.meta.lang ?? 'zh-CN',
+        irHash: irHash(doc),
+        sections: sectionHashes(doc),
+        voice: { kind: 'recorded', ...this.options.speaker ? { speaker: this.options.speaker } : {} },
+        blocks: referencedBlocks(doc, this.events),
+      }
+      await readAnswer(this.post(`recordings/${this.id}/finish`, { head, recording, ...this.rerecordSection ? { section: this.rerecordSection } : {} }))
+      this.state.set('saved')
+    } catch (error) {
+      this.fail(error)
+    } finally {
+      this.release()
+    }
+  }
+
+  private failed(): boolean {
+    return this.state.getSnapshot() === 'failed'
+  }
+
+  private fail(error: unknown): void {
+    if (this.state.getSnapshot() === 'failed') return
+    console.error('[presmium] lecture recording failed', error)
+    this.error.set(error instanceof Error ? error.message : String(error))
+    this.state.set('failed')
+  }
+
+  private release(): void {
+    this.timers.forEach(clearInterval)
+    this.timers = []
+    this.unsubscribe?.()
+    for (const stream of Object.values(this.streams)) stream?.getTracks().forEach(track => track.stop())
+    this.streams = {}
+  }
+}