@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/teleprompter/TeleprompterView.tsx

@@ -0,0 +1,338 @@
+/**
+ * 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

@@ -0,0 +1,161 @@
+/**
+ * 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();
+  }
+}