@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/teleprompter/TeleprompterView.tsx

@@ -1,338 +0,0 @@
-/**
- * TeleprompterView — the Narrate display-mode root mounted by
- * PreviewPanel. Owns the controller (single source of truth in the main
- * window) and the floating-window handle; renders the surface docked,
- * portals it into a Document-PiP/popup window, or pumps the canvas
- * rendition for the Safari video-PiP tier.
- *
- * Recording (scenario 1) is prop-gated: PreviewPanel passes
- * `recording` deps (media provider + markdown writers) when the host
- * allows it; without them this is a pure prompter (scenario 2) with
- * zero capture code paths.
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import type { SyntheticEvent } from 'react';
-import { createPortal } from 'react-dom';
-import type { Doc, MediaProvider, Theme } from '@bendyline/squisq/schemas';
-import type { ContentContainer } from '@bendyline/squisq/storage';
-import { wordIndexAtTime } from '@bendyline/squisq/narration';
-import { useTeleprompter } from './useTeleprompter';
-import { useFloatingWindow } from './useFloatingWindow';
-import { TeleprompterSurface } from './TeleprompterSurface';
-import { TeleprompterControls } from './TeleprompterControls';
-import { TeleprompterSelfView } from './TeleprompterSelfView';
-import { drawPrompterFrame, type CanvasPrompterFrame } from './canvasRenderer';
-import { ensureTeleprompterStyles, TELEPROMPTER_CSS } from './teleprompterTheme';
-import { useNarrationRecorder } from './recording/useNarrationRecorder';
-import { buildNarrationSavePlan, executeNarrationSave } from './recording/narrationSave';
-
-/** Editor plumbing the recording flow needs; omit for prompter-only use. */
-export interface TeleprompterRecordingDeps {
-  mediaProvider: MediaProvider;
-  container: ContentContainer | null;
-  markdownSource: string;
-  setMarkdownSource: (next: string) => void;
-  bumpMediaRevision: () => void;
-}
-
-export interface TeleprompterViewProps {
-  doc: Doc | null;
-  theme: Theme;
-  /** Kept for API symmetry with PreviewPanel; recording uses `recording.container`. */
-  workspaceContainer?: ContentContainer | null;
-  /** Media base path (reserved for future preview integrations). */
-  basePath?: string;
-  /**
-   * Optional audience-window portal owned by the editor's Presentation mode.
-   * The main controller remains authoritative; only this live surface is
-   * mirrored into the target.
-   */
-  presentationTarget?: HTMLElement | null;
-  /** Recording deps; null/omitted disables the Record affordance. */
-  recording?: TeleprompterRecordingDeps | null;
-}
-
-export function TeleprompterView(props: TeleprompterViewProps) {
-  const { doc, theme, presentationTarget = null, recording = null } = props;
-  const controller = useTeleprompter({ doc });
-  const float = useFloatingWindow(TELEPROMPTER_CSS);
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const controllerRef = useRef(controller);
-  controllerRef.current = controller;
-
-  const [saveNotice, setSaveNotice] = useState<string | null>(null);
-
-  const recorder = useNarrationRecorder({
-    mic: controller.mic,
-    getScript: () => controllerRef.current.script,
-    getWordPos: () => controllerRef.current.wordPos,
-    getMicDeviceId: () => controllerRef.current.prefs.micDeviceId,
-    onRecordingStart: () => controllerRef.current.play(),
-    onRecordingStop: () => controllerRef.current.pause(),
-  });
-  const recorderRef = useRef(recorder);
-  recorderRef.current = recorder;
-
-  // The docked chrome (controls, float note) also uses prompter classes.
-  useEffect(() => {
-    const ownerDoc = rootRef.current?.ownerDocument;
-    if (ownerDoc) ensureTeleprompterStyles(ownerDoc);
-  }, []);
-
-  useEffect(() => {
-    if (presentationTarget) ensureTeleprompterStyles(presentationTarget.ownerDocument);
-  }, [presentationTarget]);
-
-  // ── Video-PiP pump: draw on analysis ticks, never rAF ──────────────
-  const canvasFrameRef = useRef<Omit<CanvasPrompterFrame, 'wordPos'> | null>(null);
-  canvasFrameRef.current = controller.script
-    ? {
-        script: controller.script,
-        fontSizePx: controller.prefs.fontSizePx,
-        mirrored: controller.prefs.mirrored,
-        colors: {
-          bg: theme.colors.background,
-          text: theme.colors.text,
-          accent: theme.colors.primary,
-          muted: theme.colors.textMuted ?? theme.colors.text,
-        },
-        countdownRemaining: controller.countdownRemaining,
-        recording: recorder.state === 'recording',
-      }
-    : null;
-
-  useEffect(() => {
-    const sink = float.canvasSink;
-    if (float.tier !== 'video-pip' || !sink) return;
-    const draw = (wordPos: number) => {
-      const config = canvasFrameRef.current;
-      if (!config) return;
-      drawPrompterFrame(sink.canvas, { ...config, wordPos });
-      sink.requestFrame();
-    };
-    draw(controllerRef.current.wordPos);
-    const unsubscribe = controllerRef.current.subscribeTick(draw);
-    // Manual mode has no analysis ticks; a coarse interval keeps the PiP
-    // moving (best-effort under occlusion — voice mode is the robust path).
-    const interval = setInterval(() => draw(controllerRef.current.wordPos), 200);
-    return () => {
-      unsubscribe();
-      clearInterval(interval);
-    };
-  }, [float.tier, float.canvasSink]);
-
-  // ── Review playback: the prompter re-scrolls along the aligned take ──
-  const reviewAudioUrl = useMemo(
-    () => (recorder.take ? URL.createObjectURL(recorder.take.audioBlob) : null),
-    [recorder.take],
-  );
-  useEffect(() => {
-    return () => {
-      if (reviewAudioUrl) URL.revokeObjectURL(reviewAudioUrl);
-    };
-  }, [reviewAudioUrl]);
-
-  const handleReviewTimeUpdate = useCallback((event: SyntheticEvent<HTMLAudioElement>) => {
-    const alignment = recorderRef.current.take?.alignment;
-    if (!alignment || alignment.words.length === 0) return;
-    controllerRef.current.seekToToken(
-      wordIndexAtTime(alignment.words, event.currentTarget.currentTime),
-    );
-  }, []);
-
-  const handleSave = useCallback(async () => {
-    const take = recorderRef.current.take;
-    if (!take || !recording) return;
-    recorderRef.current.beginSave();
-    try {
-      const plan = buildNarrationSavePlan({
-        script: take.script,
-        alignment: take.alignment,
-        durationSec: take.durationSec,
-        audioExt: take.audioExt,
-        cameraExt: take.cameraExt,
-        baseWpm: controllerRef.current.prefs.baseWpm,
-        ...(take.cameraOffsetSec !== undefined ? { cameraOffsetSec: take.cameraOffsetSec } : {}),
-      });
-      const result = await executeNarrationSave(plan, take, {
-        mediaProvider: recording.mediaProvider,
-        container: recording.container,
-        markdownSource: recording.markdownSource,
-        setMarkdownSource: recording.setMarkdownSource,
-        bumpMediaRevision: recording.bumpMediaRevision,
-      });
-      recorderRef.current.finishSave(true);
-      setSaveNotice(
-        `Saved ${result.audioPath}${take.alignment ? ' — blocks re-timed to your voice' : ''}`,
-      );
-    } catch (err: unknown) {
-      recorderRef.current.finishSave(false, err instanceof Error ? err : new Error(String(err)));
-    }
-  }, [recording]);
-
-  const surfaceProps = useMemo(
-    () => ({
-      wordPos: controller.wordPos,
-      fontSizePx: controller.prefs.fontSizePx,
-      mirrored: controller.prefs.mirrored,
-      lineGuide: controller.prefs.lineGuide,
-      countdownRemaining: controller.countdownRemaining,
-      recordingIndicator: recorder.state === 'recording',
-      theme,
-      onSeekToken: controller.seekToToken,
-    }),
-    [
-      controller.wordPos,
-      controller.prefs.fontSizePx,
-      controller.prefs.mirrored,
-      controller.prefs.lineGuide,
-      controller.countdownRemaining,
-      controller.seekToToken,
-      recorder.state,
-      theme,
-    ],
-  );
-
-  if (!controller.script) {
-    return (
-      <>
-        <div ref={rootRef} className="squisq-teleprompter-root" data-testid="teleprompter-view">
-          <div className="squisq-teleprompter-float-note">
-            <p>Nothing to narrate yet — add some content to the document.</p>
-          </div>
-        </div>
-        {presentationTarget
-          ? createPortal(
-              <div className="squisq-presentation-teleprompter" aria-label="Audience presentation">
-                <div className="squisq-teleprompter-float-note">
-                  <p>Nothing to narrate yet — add some content to the document.</p>
-                </div>
-              </div>,
-              presentationTarget,
-            )
-          : null}
-      </>
-    );
-  }
-
-  const script = controller.script;
-  const portalOpen = float.portalTarget !== null;
-  const busyRecording = recorder.state === 'recording' || recorder.state === 'starting';
-
-  const recordSlot = recording ? (
-    <span className="squisq-teleprompter-group" data-testid="teleprompter-record">
-      {recorder.state === 'idle' || recorder.state === 'error' ? (
-        <>
-          <button
-            type="button"
-            onClick={() => void recorder.start()}
-            title="Record narration while you read"
-          >
-            ⏺ Record
-          </button>
-          <label title="Also capture your camera as a separate video file">
-            <input
-              type="checkbox"
-              checked={recorder.withCamera}
-              onChange={(e) => recorder.setWithCamera(e.target.checked)}
-            />
-            camera
-          </label>
-          {recorder.state === 'error' ? (
-            <span title={recorder.error?.message}>⚠ {recorder.error?.message}</span>
-          ) : null}
-        </>
-      ) : busyRecording ? (
-        <button type="button" onClick={() => void recorder.stop()}>
-          ⏹ Stop
-        </button>
-      ) : recorder.state === 'processing' ? (
-        <span>Aligning take…</span>
-      ) : recorder.state === 'saving' ? (
-        <span>Saving…</span>
-      ) : null}
-    </span>
-  ) : null;
-
-  return (
-    <div
-      ref={rootRef}
-      className="squisq-teleprompter-root"
-      data-testid="teleprompter-view"
-      tabIndex={0}
-      onKeyDown={controller.handleKeyDown}
-    >
-      <div className="squisq-teleprompter-stage">
-        {portalOpen ? (
-          <div className="squisq-teleprompter-float-note">
-            <p>The prompter is floating in its own window.</p>
-            <button type="button" onClick={float.close}>
-              ⇤ Bring it back
-            </button>
-          </div>
-        ) : (
-          <TeleprompterSurface key="docked" script={script} {...surfaceProps} />
-        )}
-        {portalOpen && float.portalTarget
-          ? createPortal(
-              <TeleprompterSurface
-                key={`float-${float.tier}`}
-                script={script}
-                {...surfaceProps}
-                compact
-              />,
-              float.portalTarget,
-            )
-          : null}
-        {presentationTarget
-          ? createPortal(
-              <div className="squisq-presentation-teleprompter" aria-label="Audience presentation">
-                <TeleprompterSurface
-                  key="presentation-audience"
-                  script={script}
-                  {...surfaceProps}
-                />
-              </div>,
-              presentationTarget,
-            )
-          : null}
-        <TeleprompterSelfView stream={recorder.cameraStream} />
-      </div>
-
-      {recorder.state === 'review' && recorder.take ? (
-        <div className="squisq-teleprompter-review" data-testid="teleprompter-review">
-          <span>
-            Take: {recorder.take.durationSec.toFixed(1)}s
-            {recorder.take.alignment
-              ? ` · ${recorder.take.alignment.detectedSyllables} syllables aligned`
-              : ' · timing unavailable (saved without re-timing)'}
-          </span>
-          {reviewAudioUrl ? (
-            <audio controls src={reviewAudioUrl} onTimeUpdate={handleReviewTimeUpdate} />
-          ) : null}
-          <button type="button" onClick={() => void handleSave()}>
-            ✓ Save narration
-          </button>
-          <button type="button" onClick={recorder.retake}>
-            ↺ Retake
-          </button>
-          <button type="button" onClick={recorder.discard}>
-            ✕ Discard
-          </button>
-          {recorder.error ? <span>⚠ {recorder.error.message}</span> : null}
-        </div>
-      ) : null}
-      {saveNotice ? (
-        <div className="squisq-teleprompter-review" data-testid="teleprompter-save-notice">
-          <span>{saveNotice}</span>
-          <button type="button" onClick={() => setSaveNotice(null)}>
-            Dismiss
-          </button>
-        </div>
-      ) : null}
-
-      <TeleprompterControls controller={controller} float={float} recordSlot={recordSlot} />
-    </div>
-  );
-}

package/src/teleprompter/canvasRenderer.ts

@@ -1,161 +0,0 @@
-/**
- * Canvas renderer for the video-PiP tier.
- *
- * Safari has no Document Picture-in-Picture, so the float there is a
- * `<canvas>.captureStream()` piped into a `<video>` in PiP. No script
- * runs in that window — the main window draws this read-only rendition
- * of the prompter on analysis ticks (never rAF, which throttles when
- * the browser is occluded).
- */
-
-import type { NarrationScript } from '@bendyline/squisq/narration';
-
-export interface CanvasPrompterFrame {
-  script: NarrationScript;
-  /** Fractional word position (floor = active token). */
-  wordPos: number;
-  fontSizePx: number;
-  mirrored: boolean;
-  colors: { bg: string; text: string; accent: string; muted: string };
-  countdownRemaining: number | null;
-  recording: boolean;
-}
-
-interface LayoutCache {
-  key: string;
-  /** Line index of each token. */
-  tokenLine: number[];
-  /** Tokens per line, in order. */
-  lines: number[][];
-}
-
-let layoutCache: LayoutCache | null = null;
-
-/** Nearest spoken token at or before `idx` (falling forward for leading punctuation). */
-function nearestSpoken(tokens: NarrationScript['tokens'], idx: number): number {
-  for (let i = idx; i >= 0; i--) {
-    if (tokens[i].spoken) return i;
-  }
-  for (let i = idx + 1; i < tokens.length; i++) {
-    if (tokens[i].spoken) return i;
-  }
-  return idx;
-}
-
-/** Wrap script tokens into lines for a given canvas width/font (cached). */
-function layoutTokens(
-  ctx: CanvasRenderingContext2D,
-  script: NarrationScript,
-  fontPx: number,
-  maxWidth: number,
-): LayoutCache {
-  const key = `${script.tokens.length}:${script.sourceText.length}:${fontPx}:${maxWidth}`;
-  if (layoutCache && layoutCache.key === key) return layoutCache;
-  const spaceW = ctx.measureText(' ').width;
-  const tokenLine = new Array<number>(script.tokens.length);
-  const lines: number[][] = [];
-  let current: number[] = [];
-  let x = 0;
-  for (let i = 0; i < script.tokens.length; i++) {
-    const token = script.tokens[i];
-    const w = ctx.measureText(token.text).width;
-    const startsBlock = i === 0 || script.tokens[i - 1].blockIndex !== token.blockIndex;
-    const startsPara = i > 0 && script.tokens[i - 1].pauseAfter >= 2;
-    if (current.length > 0 && (x + w > maxWidth || startsBlock || startsPara)) {
-      lines.push(current);
-      current = [];
-      x = 0;
-    }
-    tokenLine[i] = lines.length;
-    current.push(i);
-    x += w + spaceW;
-  }
-  if (current.length > 0) lines.push(current);
-  layoutCache = { key, tokenLine, lines };
-  return layoutCache;
-}
-
-/** Draw one prompter frame. Cheap enough to run at analysis-tick rate. */
-export function drawPrompterFrame(canvas: HTMLCanvasElement, frame: CanvasPrompterFrame): void {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) return;
-  const { width, height } = canvas;
-  const fontPx = Math.round(frame.fontSizePx * 0.72);
-  const lineH = Math.round(fontPx * 1.4);
-  const marginX = Math.round(width * 0.06);
-
-  ctx.save();
-  ctx.fillStyle = frame.colors.bg;
-  ctx.fillRect(0, 0, width, height);
-  if (frame.mirrored) {
-    ctx.translate(width, 0);
-    ctx.scale(-1, 1);
-  }
-  ctx.font = `500 ${fontPx}px system-ui, sans-serif`;
-  ctx.textBaseline = 'top';
-
-  const layout = layoutTokens(ctx, frame.script, fontPx, width - marginX * 2);
-  const count = frame.script.tokens.length;
-  if (count > 0) {
-    const rawActive = Math.min(Math.max(Math.floor(frame.wordPos), 0), count - 1);
-    const frac = Math.min(Math.max(frame.wordPos - rawActive, 0), 1);
-    // Keep the highlight off standalone punctuation (em-dashes, bullets).
-    const active = nearestSpoken(frame.script.tokens, rawActive);
-    const activeLine = layout.tokenLine[active] ?? 0;
-    const eyeY = height * 0.38;
-    const spaceW = ctx.measureText(' ').width;
-    const scrollY = (activeLine + frac) * lineH - eyeY;
-
-    const firstLine = Math.max(0, Math.floor(scrollY / lineH) - 1);
-    const lastLine = Math.min(layout.lines.length - 1, Math.ceil((scrollY + height) / lineH) + 1);
-    for (let line = firstLine; line <= lastLine; line++) {
-      const y = line * lineH - scrollY;
-      let x = marginX;
-      for (const tokenIdx of layout.lines[line]) {
-        const token = frame.script.tokens[tokenIdx];
-        if (tokenIdx === active) {
-          ctx.fillStyle = frame.colors.accent;
-          ctx.font = `800 ${fontPx}px system-ui, sans-serif`;
-        } else {
-          ctx.fillStyle = frame.colors.text;
-          ctx.font = `500 ${fontPx}px system-ui, sans-serif`;
-          ctx.globalAlpha = tokenIdx < active ? 0.9 : 0.45;
-        }
-        ctx.fillText(token.text, x, y);
-        ctx.globalAlpha = 1;
-        x += ctx.measureText(token.text).width + spaceW;
-      }
-    }
-
-    // Eye-line chevron.
-    ctx.fillStyle = frame.colors.accent;
-    ctx.beginPath();
-    ctx.moveTo(4, eyeY + lineH * 0.2);
-    ctx.lineTo(14, eyeY + lineH * 0.5);
-    ctx.lineTo(4, eyeY + lineH * 0.8);
-    ctx.closePath();
-    ctx.fill();
-  }
-  ctx.restore();
-
-  // Overlays draw unmirrored so they stay readable.
-  if (frame.countdownRemaining !== null) {
-    ctx.save();
-    ctx.fillStyle = `${frame.colors.bg}cc`;
-    ctx.fillRect(0, 0, width, height);
-    ctx.fillStyle = frame.colors.accent;
-    ctx.font = `800 ${Math.round(height * 0.4)}px system-ui, sans-serif`;
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'middle';
-    ctx.fillText(String(frame.countdownRemaining), width / 2, height / 2);
-    ctx.restore();
-  }
-  if (frame.recording) {
-    ctx.save();
-    ctx.fillStyle = '#e5484d';
-    ctx.beginPath();
-    ctx.arc(width - 20, 20, 8, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.restore();
-  }
-}