@lincyaw/addon-lecture 1.0.0-rc.12 → 1.0.0-rc.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/addon-lecture",
-  "version": "1.0.0-rc.12",
+  "version": "1.0.0-rc.14",
   "description": "Presmium plugin: lecture tracks: recording, playback, scripted lectures with speech, and video export (presmium-lecture)",
   "license": "Apache-2.0",
   "repository": {
@@ -41,9 +41,9 @@
     "playwright-chromium": "^1.40.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@lincyaw/compiler": "^1.0.0-rc.12",
-    "@lincyaw/host": "^1.0.0-rc.12",
-    "@lincyaw/kernel": "^1.0.0-rc.12"
+    "@lincyaw/compiler": "^1.0.0-rc.14",
+    "@lincyaw/host": "^1.0.0-rc.14",
+    "@lincyaw/kernel": "^1.0.0-rc.14"
   },
   "peerDependenciesMeta": {
     "playwright-chromium": {
@@ -57,11 +57,11 @@
     "@types/react": "18.3.28",
     "react-dom": "18.3.1",
     "@types/react-dom": "18.3.7",
-    "@lincyaw/cli": "1.0.0-rc.12",
-    "@lincyaw/host": "1.0.0-rc.12",
-    "@lincyaw/compiler": "1.0.0-rc.12",
-    "@lincyaw/viewer": "1.0.0-rc.12",
-    "@lincyaw/kernel": "1.0.0-rc.12"
+    "@lincyaw/compiler": "1.0.0-rc.14",
+    "@lincyaw/host": "1.0.0-rc.14",
+    "@lincyaw/cli": "1.0.0-rc.14",
+    "@lincyaw/viewer": "1.0.0-rc.14",
+    "@lincyaw/kernel": "1.0.0-rc.14"
   },
   "presmium": {
     "preview": {

package/src/client/PlayerPanel.css

@@ -129,25 +129,6 @@ html.pm-lecture-exporting .pm-slide-fit__canvas {
   pointer-events: none;
 }
 
-.pm-lecture-start__button {
-  display: grid;
-  place-items: center;
-  width: var(--pm-size-start);
-  height: var(--pm-size-start);
-  border: 0;
-  border-radius: var(--pm-radius-pill);
-  background: color-mix(in srgb, var(--pm-color-ink) 78%, transparent);
-  color: var(--pm-color-bg);
-  box-shadow: var(--pm-shadow-float);
-  cursor: pointer;
+.pm-lecture-start > * {
   pointer-events: auto;
 }
-
-.pm-lecture-start__button:hover {
-  background: var(--pm-color-ink);
-}
-
-.pm-lecture-start__button .pm-ui-icon {
-  width: var(--pm-size-start-icon);
-  height: var(--pm-size-start-icon);
-}

package/src/client/PlayerPanel.tsx

@@ -1,6 +1,6 @@
-import { PmCaption, PmDrawer, PmIcon, PmIconButton, PmMenu, PmTabs, PRODUCTION_PLAYBACK, TIMED_CAPTIONS, useMessages, useServer, useService, useStore } from '@lincyaw/host'
+import { PmCaption, PmDrawer, PmIconButton, PmMenu, PmTabs, PRODUCTION_PLAYBACK, TIMED_CAPTIONS, useMessages, useServer, useService, useStore } from '@lincyaw/host'
 import type { MenuItem } from '@lincyaw/host'
-import { isPreviewEmbedded } from '@lincyaw/kernel'
+import { isPreviewEmbedded, notifyEmbedder } from '@lincyaw/kernel'
 import { useEffect, useMemo, useState } from 'react'
 import type { CSSProperties } from 'react'
 import {
@@ -63,6 +63,11 @@ export default function PlayerPanel(_props: { view?: string }) {
   const time = useStore(player?.time, 0),
     clockPlaying = useStore(player?.clock.playing, false),
     rate = useStore(player?.clock.rate, 1)
+  // The page that embeds this one learns the lecture's state: it keeps its cover while loading, offers Play when waiting.
+  useEffect(() => {
+    if (!id) return
+    notifyEmbedder({ lecture: failure || status === 'missing' ? 'failed' : blocked ? 'waiting' : !player ? 'loading' : clockPlaying ? 'playing' : 'paused' })
+  }, [id, failure, status, blocked, player, clockPlaying])
   const groupedCaptions = useMemo(() => new Map(player?.track.utterances.map(utterance => [utterance.id, captionGroups(utterance)])), [player?.track])
   const cursor = useStore(player?.cursor), positionMode = useStore(player?.positionMode, 'time')
   const [compact, setCompact] = useState(() => matchMedia('(max-width: 479px)').matches)
@@ -175,7 +180,7 @@ export default function PlayerPanel(_props: { view?: string }) {
     else if (option === 'close') play(undefined)
   }
   return <>
-    {blocked && <div className="pm-lecture-start"><button type="button" className="pm-lecture-start__button" aria-label={t.player.play} onClick={() => void player.play()}><PmIcon name="play" /></button></div>}
+    {blocked && <div className="pm-lecture-start"><PmIconButton variant="overlay" icon="play" label={t.player.play} onClick={() => void player.play()} /></div>}
     {(captions || current?.unsaid) && (current || manual) && caption && <PmCaption overlay label={t.player.captions} lines={[caption]} lang={lang}
       data-stale={current && stale.has(current.id) ? 'true' : undefined} hint={current && stale.has(current.id) ? t.player.stale : undefined} />}
     {panel && <PmDrawer open label={panel === 'transcript' ? t.player.transcript : t.player.chapters} onClose={() => setPanel(undefined)}>

package/src/client/clock.ts

@@ -77,21 +77,35 @@ export interface ClockMedia {
 }
 
 const DRIFT_MS = 250
+// How far a paused element may be from where it resumes: under a frame, not worth a seek.
+const RESUME_MS = 20
 
+/** A part of an audio file on the timeline: from `start` for `duration`, playing the file from `sourceStartMs`. */
+interface Clip { start: number, duration: number, sourceStartMs: number, volume: number, muted: boolean }
+
+/**
+ * Plays the timeline's audio with one element per file: a clip is where on the timeline a part of its file plays,
+ * so clips that continue one another (a score cut at every step) run on in one element, without a pause, a seek or a
+ * click at their boundary. A file gets another element only for clips of it that overlap in time.
+ */
 export class MediaClock extends SilentClock {
-  private readonly media: { el: HTMLAudioElement, start: number, duration: number, sourceStartMs: number }[]
+  private readonly voices: { el: HTMLAudioElement, clips: Clip[] }[] = []
 
   constructor(duration: number, media: ClockMedia[]) {
     super(duration)
-    this.media = media.map(({ url, start, duration: length, sourceStartMs = 0, volume = 1, muted = false }) => {
+    for (const { url, start, duration: length, sourceStartMs = 0, volume = 1, muted = false } of [...media].sort((a, b) => a.start - b.start)) {
+      const clip = { start, duration: length, sourceStartMs, volume, muted }
+      const free = this.voices.find(voice => voice.el.src === new URL(url, location.href).href && voice.clips.at(-1)!.start + voice.clips.at(-1)!.duration <= start)
+      if (free) {
+        free.clips.push(clip)
+        continue
+      }
       const el = new Audio()
       el.preload = 'auto'
       el.onerror = () => this.fail(new Error([url, el.error?.message].filter(Boolean).join(': ')))
       el.src = url
-      el.volume = volume
-      el.muted = muted
-      return { el, start, duration: length, sourceStartMs }
-    })
+      this.voices.push({ el, clips: [clip] })
+    }
   }
 
   private fail(error: Error): void {
@@ -99,8 +113,16 @@ export class MediaClock extends SilentClock {
     this.error.set(error)
   }
 
+  private static clipAt(clips: readonly Clip[], t: number): Clip | undefined {
+    return clips.find(clip => t >= clip.start && t < clip.start + clip.duration)
+  }
+
   private mediaAt(t: number) {
-    return this.media.find(m => t >= m.start && t < m.start + m.duration)
+    for (const voice of this.voices) {
+      const clip = MediaClock.clipAt(voice.clips, t)
+      if (clip) return { el: voice.el, ...clip }
+    }
+    return undefined
   }
 
   override now(): number {
@@ -121,37 +143,43 @@ export class MediaClock extends SilentClock {
 
   override pause(): void {
     super.pause()
-    for (const { el } of this.media) el.pause()
+    for (const { el } of this.voices) el.pause()
   }
 
   override seek(t: number): void {
     super.seek(t)
-    for (const m of this.media) {
-      if (t >= m.start && t < m.start + m.duration) m.el.currentTime = (m.sourceStartMs + t - m.start) / 1000
-      else m.el.pause()
+    for (const { el, clips } of this.voices) {
+      const clip = MediaClock.clipAt(clips, t)
+      if (clip) el.currentTime = (clip.sourceStartMs + t - clip.start) / 1000
+      else el.pause()
     }
     this.tick()
   }
 
   override setRate(rate: number): void {
     super.setRate(rate)
-    for (const { el } of this.media) el.playbackRate = rate
+    for (const { el } of this.voices) el.playbackRate = rate
   }
 
   override tick(): void {
     super.tick()
     const t = this.now()
-    for (const m of this.media) {
-      if (!this.playing.getSnapshot() || t < m.start || t >= m.start + m.duration) {
-        if (!m.el.paused) m.el.pause()
+    for (const { el, clips } of this.voices) {
+      const clip = this.playing.getSnapshot() ? MediaClock.clipAt(clips, t) : undefined
+      if (!clip) {
+        if (!el.paused) el.pause()
         continue
       }
-      const offset = (m.sourceStartMs + t - m.start) / 1000
-      if (m.el.paused || Math.abs(m.el.currentTime - offset) * 1000 > DRIFT_MS) m.el.currentTime = offset
-      m.el.playbackRate = this.rate.getSnapshot()
-      if (m.el.paused) void m.el.play().then(() => {
-        const at = super.now()
-        if (!this.playing.getSnapshot() || at < m.start || at >= m.start + m.duration) m.el.pause()
+      el.volume = clip.volume
+      el.muted = clip.muted
+      // Where the file should be now; the element is moved only when it is elsewhere (a jump, or a clip that does not
+      // continue the last one), never at the boundary between clips that continue each other.
+      // A playing element is left alone within DRIFT_MS; a paused one resumes exactly where its clip is.
+      const offset = (clip.sourceStartMs + t - clip.start) / 1000
+      if (Math.abs(el.currentTime - offset) * 1000 > (el.paused ? RESUME_MS : DRIFT_MS)) el.currentTime = offset
+      el.playbackRate = this.rate.getSnapshot()
+      if (el.paused) void el.play().then(() => {
+        if (!this.playing.getSnapshot() || !MediaClock.clipAt(clips, super.now())) el.pause()
       }).catch((error: unknown) => {
         if (error instanceof DOMException && error.name === 'AbortError') return
         // Autoplay without the reader's gesture: not a failure, playback waits for their click.
@@ -167,7 +195,7 @@ export class MediaClock extends SilentClock {
 
   override dispose(): void {
     super.dispose()
-    for (const { el } of this.media) {
+    for (const { el } of this.voices) {
       el.pause()
       el.onerror = null
       const url = el.src

package/src/client/recorder.ts

@@ -4,7 +4,6 @@ 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
@@ -125,6 +124,8 @@ export class LectureRecorder {
       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
+      // The encoders load with the first recording, not with every presentation.
+      const { captureAudio, captureVideo } = await import('./media.ts')
       const capture = await (source === 'audio' ? captureAudio : captureVideo)(track, chunk => segment.pending.push(chunk))
       if (!capture) {
         if (source === 'audio') throw new Error('no audio encoder')

package/src/node/production.ts

@@ -10,7 +10,7 @@ import { synthesizeLecture } from './synthesize.ts'
 import type { SynthesizedClip } from './synthesize.ts'
 import type { ServedDeck } from './routes/served-deck.ts'
 import { RouteRefusal } from './routes/served-deck.ts'
-import { assertProductionAssetFile, inspectProductionAsset, readProductionAssetFile } from './production-assets.ts'
+import { assertProductionAssetFile, inspectProductionAsset } from './production-assets.ts'
 import type { ProductionAssetFile } from './production-assets.ts'
 
 interface ClipFile { audio?: ProductionAudio, asset?: ProductionAssetFile, path: string, stamp: string }
@@ -85,18 +85,22 @@ export async function productionAsset(served: ServedDeck, query: ProductionAsset
   return { source: now.source, irRevision: now.revision, asset: inspected.asset }
 }
 
-export async function productionMedia(served: ServedDeck, query: ProductionMediaQuery, signal?: AbortSignal): Promise<string | { bytes: Uint8Array<ArrayBuffer>, mediaType: string }> {
+/**
+ * The file a clip plays, in the deck. A production asset was read and hashed when the snapshot was made; it is the same
+ * file while its stamp is, and its hash tags it, so a reader who has it is answered without reading it again.
+ */
+export async function productionMedia(served: ServedDeck, query: ProductionMediaQuery, signal?: AbortSignal): Promise<{ path: string, etag?: string, mediaType?: string }> {
   const snapshot = await productionSnapshot(served, query, signal), file = snapshot.clips.get(query.clipId)
   if (!file) throw new RouteRefusal(404, 'production-clip-unknown')
   if (file.asset) {
-    const bytes = await readProductionAssetFile(file.asset, served.deckDir, signal)
+    assertProductionAssetFile(file.asset, served.deckDir)
     await current(served, query); signal?.throwIfAborted()
-    return { bytes: new Uint8Array(bytes), mediaType: file.asset.asset.mediaType }
+    return { path: file.asset.path, etag: `"${file.asset.asset.sha256}"`, mediaType: file.asset.asset.mediaType }
   }
   const hit = await served.speech().cached?.(query.clipId, signal)
   if (!hit || typeof hit.audio !== 'string' || hit.audio !== file.path || Math.round(hit.duration * 1000) !== file.audio!.durationMs) throw new RouteRefusal(409, 'production-media-changed')
   if (await fileStamp(file.path) !== file.stamp) throw new RouteRefusal(409, 'production-media-changed')
   await current(served, query)
   signal?.throwIfAborted()
-  return file.path
+  return { path: file.path }
 }

package/src/node/routes/production.ts

@@ -1,26 +1,12 @@
-import { createHash } from 'node:crypto'
 import { errorMessage, jsonResponse } from '@lincyaw/kernel'
 import type { ProductionMediaQuery, ProductionPlanQuery, Route } from '@lincyaw/kernel'
 import { productionAsset, productionMedia, productionSnapshot } from '../production.ts'
 import { ProductionAssetRefusal } from '../production-assets.ts'
 import { canonicalSource, VoiceSourceRefusal } from '../voice-source.ts'
-import { MEDIA_CACHE, notModified, serveFile } from './serve-file.ts'
+import { serveFile } from './serve-file.ts'
 import { RouteRefusal } from './served-deck.ts'
 import type { ServedDeck } from './served-deck.ts'
 
-function audioBytes(bytes: Uint8Array<ArrayBuffer>, mediaType: string, request: Request): Response {
-  const etag = `"${createHash('sha256').update(bytes).digest('base64url').slice(0, 22)}"`
-  const size = bytes.byteLength, headers = { 'Content-Type': mediaType, 'Cache-Control': MEDIA_CACHE, 'Accept-Ranges': 'bytes', ETag: etag }
-  const unchanged = notModified(request, etag, headers)
-  if (unchanged) return unchanged
-  const range = /^bytes=(\d*)-(\d*)$/.exec(request.headers.get('range') ?? '')
-  if (!range || !range[1] && !range[2]) return new Response(request.method === 'HEAD' ? null : bytes, { headers: { ...headers, 'Content-Length': String(size) } })
-  const start = range[1] ? Number(range[1]) : Math.max(0, size - Number(range[2]))
-  const end = range[1] && range[2] ? Math.min(size - 1, Number(range[2])) : size - 1
-  if (start >= size || start > end) return new Response(null, { status: 416, headers: { ...headers, 'Content-Range': `bytes */${size}` } })
-  return new Response(request.method === 'HEAD' ? null : bytes.subarray(start, end + 1), { status: 206, headers: { ...headers, 'Content-Length': String(end - start + 1), 'Content-Range': `bytes ${start}-${end}/${size}` } })
-}
-
 function query(request: Request, media = false): ProductionPlanQuery | ProductionMediaQuery {
   const params = new URL(request.url).searchParams
   let source: unknown
@@ -48,8 +34,8 @@ export function productionRoutes(served: ServedDeck): Record<string, Route> {
       return jsonResponse(await productionAsset(served, { ...query(request), assetId }, request.signal))
     }),
     'production-media': read(async request => {
-      const media = await productionMedia(served, query(request, true) as ProductionMediaQuery, request.signal)
-      return typeof media === 'string' ? serveFile(served.deckDir, media, request) : audioBytes(media.bytes, media.mediaType, request)
+      const { path, ...known } = await productionMedia(served, query(request, true) as ProductionMediaQuery, request.signal)
+      return serveFile(served.deckDir, path, request, known)
     }),
   }
 }

package/src/node/routes/serve-file.ts

@@ -24,12 +24,22 @@ export function notModified(request: Request, etag: string, headers: Record<stri
   return request.headers.get('if-none-match')?.split(',').some(tag => tag.trim() === etag) ? new Response(null, { status: 304, headers: { ...headers, ETag: etag } }) : undefined
 }
 
-export function serveFile(deckDir: string, file: string | undefined, request: Request): Response {
+/** What the caller knows of the file: a tag of its content (else its size and time make one) and its media type. */
+export interface ServedFile {
+  etag?: string
+  mediaType?: string
+}
+
+export function serveFile(deckDir: string, file: string | undefined, request: Request, known: ServedFile = {}): Response {
+  if (known.etag) {
+    const unchanged = notModified(request, known.etag, { 'Cache-Control': MEDIA_CACHE })
+    if (unchanged) return unchanged
+  }
   const fd = file === undefined ? undefined : openInDeck(deckDir, file)
   if (fd === undefined) return problemResponse(404, 'no such file')
   const { size, mtimeMs } = fstatSync(fd)
-  const etag = `"${size.toString(36)}-${Math.round(mtimeMs).toString(36)}"`
-  const headers = { 'Content-Type': TYPES[extname(file!)] ?? 'application/octet-stream', 'Accept-Ranges': 'bytes', 'Cache-Control': MEDIA_CACHE, ETag: etag }
+  const etag = known.etag ?? `"${size.toString(36)}-${Math.round(mtimeMs).toString(36)}"`
+  const headers = { 'Content-Type': known.mediaType ?? TYPES[extname(file!)] ?? 'application/octet-stream', 'Accept-Ranges': 'bytes', 'Cache-Control': MEDIA_CACHE, ETag: etag }
   const body = (start: number, end: number) => Readable.toWeb(createReadStream('', { fd, start, end })) as ReadableStream<Uint8Array>
   const empty = (response: Response) => {
     closeSync(fd)