@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/teleprompter/TeleprompterControls.tsx

@@ -1,218 +0,0 @@
-/**
- * Docked controls rail for the Narrate mode: transport, pacing, mic,
- * display, and pop-out. Lives under the surface (never in the main
- * toolbar). The Record affordance mounts through `recordSlot` in
- * Phase B so scenario 2 (prompter-only) has zero recording code paths.
- */
-
-import type { ReactNode } from 'react';
-import type { TeleprompterController } from './useTeleprompter';
-import type { FloatingWindowHandle } from './useFloatingWindow';
-import type { FloatTier } from './types';
-
-const TIER_LABELS: Record<FloatTier, string> = {
-  'document-pip': 'Floating window (always on top)',
-  'video-pip': 'Picture-in-picture (read-only)',
-  popup: 'Popup window',
-  docked: 'Docked',
-};
-
-export interface TeleprompterControlsProps {
-  controller: TeleprompterController;
-  float: FloatingWindowHandle;
-  /** Phase B mounts the narration Record button here. */
-  recordSlot?: ReactNode;
-}
-
-export function TeleprompterControls({ controller, float, recordSlot }: TeleprompterControlsProps) {
-  const { transport, prefs, setPrefs, mic } = controller;
-  const rolling = transport === 'rolling' || transport === 'countdown';
-  const voiceLive = prefs.voiceTracking && mic.status === 'live';
-
-  return (
-    <div
-      className="squisq-teleprompter-controls"
-      data-testid="teleprompter-controls"
-      data-mic-status={mic.status}
-      data-transport={transport}
-      data-voice-live={voiceLive || undefined}
-    >
-      <span className="squisq-teleprompter-group">
-        <button
-          type="button"
-          onClick={() => (rolling ? controller.pause() : controller.play())}
-          aria-label={rolling ? 'Pause prompter' : 'Start prompter'}
-        >
-          {rolling ? '⏸ Pause' : transport === 'paused' ? '▶ Resume' : '▶ Start'}
-        </button>
-        <button type="button" onClick={controller.restart} aria-label="Restart prompter">
-          ⟲ Restart
-        </button>
-      </span>
-
-      <span className="squisq-teleprompter-group">
-        <label htmlFor="squisq-prompter-countdown">Countdown</label>
-        <select
-          id="squisq-prompter-countdown"
-          value={prefs.countdownSec}
-          onChange={(e) => setPrefs({ countdownSec: Number(e.target.value) as 0 | 3 | 5 | 10 })}
-        >
-          <option value={0}>Off</option>
-          <option value={3}>3s</option>
-          <option value={5}>5s</option>
-          <option value={10}>10s</option>
-        </select>
-      </span>
-
-      <span className="squisq-teleprompter-group">
-        <label htmlFor="squisq-prompter-wpm">Speed</label>
-        <input
-          id="squisq-prompter-wpm"
-          type="range"
-          min={80}
-          max={260}
-          step={5}
-          value={prefs.baseWpm}
-          onChange={(e) => setPrefs({ baseWpm: Number(e.target.value) })}
-        />
-        <span aria-live="off">{prefs.baseWpm} wpm</span>
-      </span>
-
-      <span className="squisq-teleprompter-group">
-        <button
-          type="button"
-          aria-pressed={prefs.voiceTracking}
-          onClick={() => {
-            const next = !prefs.voiceTracking;
-            setPrefs({ voiceTracking: next });
-            if (next && mic.status === 'idle') void mic.start(prefs.micDeviceId);
-            if (!next && mic.status !== 'idle') mic.stop();
-          }}
-          title="Match the prompter speed to your voice (halts when you stop speaking)"
-        >
-          🎙 Voice pace
-        </button>
-        {prefs.voiceTracking ? (
-          <>
-            <label htmlFor="squisq-prompter-sensitivity" title="Voice detection sensitivity">
-              Sens.
-            </label>
-            <input
-              id="squisq-prompter-sensitivity"
-              type="range"
-              min={0}
-              max={1}
-              step={0.05}
-              value={prefs.vadSensitivity}
-              onChange={(e) => setPrefs({ vadSensitivity: Number(e.target.value) })}
-              style={{ width: 70 }}
-            />
-            <select
-              aria-label="Microphone"
-              value={prefs.micDeviceId ?? ''}
-              onChange={(e) => setPrefs({ micDeviceId: e.target.value || null })}
-            >
-              <option value="">Default mic</option>
-              {mic.devices.map((device) => (
-                <option key={device.deviceId} value={device.deviceId}>
-                  {device.label || `Mic ${device.deviceId.slice(0, 6)}`}
-                </option>
-              ))}
-            </select>
-            <span
-              className={`squisq-teleprompter-meter${controller.voiceActive ? ' squisq-teleprompter-meter--voice' : ''}`}
-              role="meter"
-              aria-label="Mic level"
-              aria-valuemin={0}
-              aria-valuemax={1}
-              aria-valuenow={Math.round(controller.micLevel * 100) / 100}
-            >
-              <span
-                className="squisq-teleprompter-meter-fill"
-                style={{ width: `${Math.round(controller.micLevel * 100)}%` }}
-              />
-            </span>
-            {mic.status === 'error' ? (
-              <span title={mic.error?.message ?? 'Microphone unavailable'}>
-                ⚠ mic unavailable — constant speed
-              </span>
-            ) : null}
-          </>
-        ) : null}
-      </span>
-
-      <span className="squisq-teleprompter-group">
-        <label htmlFor="squisq-prompter-fontsize">Aa</label>
-        <input
-          id="squisq-prompter-fontsize"
-          type="range"
-          min={28}
-          max={96}
-          step={2}
-          value={prefs.fontSizePx}
-          onChange={(e) => setPrefs({ fontSizePx: Number(e.target.value) })}
-          style={{ width: 80 }}
-          aria-label="Prompter font size"
-        />
-        <button
-          type="button"
-          aria-pressed={prefs.mirrored}
-          onClick={() => setPrefs({ mirrored: !prefs.mirrored })}
-          title="Mirror for beam-splitter teleprompter rigs (M)"
-        >
-          ⇋ Mirror
-        </button>
-        <button
-          type="button"
-          aria-pressed={prefs.lineGuide}
-          onClick={() => setPrefs({ lineGuide: !prefs.lineGuide })}
-          title="Eye-line guide"
-        >
-          ▸ Guide
-        </button>
-      </span>
-
-      {recordSlot}
-
-      {float.supportedTiers.length > 0 ? (
-        <span className="squisq-teleprompter-group" style={{ marginLeft: 'auto' }}>
-          {float.isOpen ? (
-            <button type="button" onClick={float.close}>
-              ⇤ Bring back
-            </button>
-          ) : (
-            <>
-              {float.supportedTiers.length > 1 ? (
-                <select
-                  aria-label="Float mode"
-                  data-testid="teleprompter-float-tier"
-                  defaultValue={float.supportedTiers[0]}
-                  id="squisq-prompter-float-tier"
-                >
-                  {float.supportedTiers.map((tier) => (
-                    <option key={tier} value={tier}>
-                      {TIER_LABELS[tier]}
-                    </option>
-                  ))}
-                </select>
-              ) : null}
-              <button
-                type="button"
-                onClick={() => {
-                  const select = document.getElementById(
-                    'squisq-prompter-float-tier',
-                  ) as HTMLSelectElement | null;
-                  const preferred = (select?.value as FloatTier | undefined) ?? undefined;
-                  void float.open(preferred);
-                }}
-                title="Pop the prompter out so it can sit next to your camera"
-              >
-                ⇱ Pop out
-              </button>
-            </>
-          )}
-        </span>
-      ) : null}
-    </div>
-  );
-}

package/src/teleprompter/TeleprompterSelfView.tsx

@@ -1,22 +0,0 @@
-/**
- * Small corner self-view shown while recording with the camera on.
- */
-
-import { useRef } from 'react';
-import { useStreamPreview } from '../recorder/hooks/useStreamPreview';
-
-export function TeleprompterSelfView({ stream }: { stream: MediaStream | null }) {
-  const videoRef = useRef<HTMLVideoElement | null>(null);
-  useStreamPreview(videoRef, stream);
-  if (!stream) return null;
-  return (
-    <video
-      ref={videoRef}
-      className="squisq-teleprompter-selfview"
-      muted
-      playsInline
-      autoPlay
-      data-testid="teleprompter-selfview"
-    />
-  );
-}

package/src/teleprompter/TeleprompterSurface.tsx

@@ -1,267 +0,0 @@
-/**
- * The teleprompter script surface — pure presentational and portal-able.
- *
- * Zero context reads: everything arrives via props, so the same element
- * renders docked, inside a Document-PiP window, or in a popup. Two
- * performance-critical details:
- *
- * 1. The token spans render ONCE per script/font change (memoized
- *    column). The active-word highlight and the smooth scroll are
- *    applied imperatively from a rAF loop — re-rendering thousands of
- *    spans through React at 15 Hz would jank.
- * 2. The rAF loop is requested on the surface's OWN window
- *    (`ownerDocument.defaultView`), not the opener — a Document-PiP
- *    window keeps animating while the main window is occluded. Mount
- *    with a `key` per float target so the loop rebinds on window moves.
- */
-
-import { memo, useEffect, useMemo, useRef } from 'react';
-import type { MouseEvent as ReactMouseEvent } from 'react';
-import type { Theme } from '@bendyline/squisq/schemas';
-import type { NarrationScript } from '@bendyline/squisq/narration';
-import {
-  EYE_LINE_FRACTION,
-  measureTokenLines,
-  stepScroll,
-  targetOffsetFor,
-  type TokenLineMap,
-} from './scrollModel';
-import { ensureTeleprompterStyles, prompterVarsFromTheme } from './teleprompterTheme';
-
-export interface TeleprompterSurfaceProps {
-  script: NarrationScript;
-  /** Fractional word position; floor is the active token. */
-  wordPos: number;
-  fontSizePx: number;
-  mirrored: boolean;
-  lineGuide: boolean;
-  countdownRemaining: number | null;
-  recordingIndicator: boolean;
-  theme: Theme;
-  /** Hide block markers / tighten padding for small float windows. */
-  compact?: boolean;
-  /** Click a word to jump the prompter there. */
-  onSeekToken?: (tokenIndex: number) => void;
-}
-
-interface Paragraph {
-  key: string;
-  tokenIndexes: number[];
-}
-
-interface BlockGroup {
-  blockId: string;
-  heading?: string;
-  paragraphs: Paragraph[];
-}
-
-function groupScript(script: NarrationScript): BlockGroup[] {
-  return script.blocks.map((range) => {
-    const paragraphs: Paragraph[] = [];
-    let current: number[] = [];
-    for (let i = range.tokenStart; i < range.tokenEnd; i++) {
-      current.push(i);
-      if (script.tokens[i].pauseAfter >= 2 && i < range.tokenEnd - 1) {
-        paragraphs.push({ key: `${range.blockId}-${paragraphs.length}`, tokenIndexes: current });
-        current = [];
-      }
-    }
-    if (current.length > 0) {
-      paragraphs.push({ key: `${range.blockId}-${paragraphs.length}`, tokenIndexes: current });
-    }
-    const group: BlockGroup = { blockId: range.blockId, paragraphs };
-    if (range.heading !== undefined) group.heading = range.heading;
-    return group;
-  });
-}
-
-/** The static token column — memoized so wordPos updates never re-render it. */
-const ScriptColumn = memo(function ScriptColumn({
-  script,
-  compact,
-}: {
-  script: NarrationScript;
-  compact: boolean;
-}) {
-  const groups = useMemo(() => groupScript(script), [script]);
-  return (
-    <>
-      {groups.map((group) => (
-        <section key={group.blockId} data-block-id={group.blockId}>
-          {!compact && group.heading ? (
-            <span className="squisq-teleprompter-block-marker">{group.heading}</span>
-          ) : null}
-          {group.paragraphs.map((paragraph) => (
-            <p key={paragraph.key} className="squisq-teleprompter-para">
-              {paragraph.tokenIndexes.map((idx) => (
-                <span key={idx} className="squisq-teleprompter-word" data-token-idx={idx}>
-                  {script.tokens[idx].text}{' '}
-                </span>
-              ))}
-            </p>
-          ))}
-        </section>
-      ))}
-    </>
-  );
-});
-
-export function TeleprompterSurface({
-  script,
-  wordPos,
-  fontSizePx,
-  mirrored,
-  lineGuide,
-  countdownRemaining,
-  recordingIndicator,
-  theme,
-  compact = false,
-  onSeekToken,
-}: TeleprompterSurfaceProps) {
-  const surfaceRef = useRef<HTMLDivElement | null>(null);
-  const columnRef = useRef<HTMLDivElement | null>(null);
-  const wordPosRef = useRef(wordPos);
-  wordPosRef.current = wordPos;
-
-  const vars = useMemo(() => prompterVarsFromTheme(theme), [theme]);
-
-  // Inject the shared stylesheet into whichever document hosts us.
-  useEffect(() => {
-    const doc = surfaceRef.current?.ownerDocument;
-    if (doc) ensureTeleprompterStyles(doc);
-  }, []);
-
-  // Imperative highlight + smooth scroll on the surface's own window.
-  useEffect(() => {
-    const surface = surfaceRef.current;
-    const column = columnRef.current;
-    if (!surface || !column) return;
-    const win = surface.ownerDocument.defaultView ?? window;
-
-    let lines: TokenLineMap | null = null;
-    let spans: HTMLElement[] = [];
-    let activeIdx = -1;
-    let offset = 0;
-    let lastTime = performance.now();
-    let raf = 0;
-
-    // Map each token index to the token that should be highlighted when the
-    // prompter is on it: the nearest spoken word at or before it (falling
-    // forward for leading punctuation). Keeps the active-word marker off
-    // standalone punctuation as the cursor glides across it.
-    const tokens = script.tokens;
-    const spokenAt = new Int32Array(tokens.length);
-    let lastSpoken = -1;
-    for (let i = 0; i < tokens.length; i++) {
-      if (tokens[i].spoken) lastSpoken = i;
-      spokenAt[i] = lastSpoken;
-    }
-    let firstSpoken = -1;
-    for (let i = 0; i < tokens.length; i++) {
-      if (tokens[i].spoken) {
-        firstSpoken = i;
-        break;
-      }
-    }
-    for (let i = 0; i < tokens.length && spokenAt[i] === -1; i++) spokenAt[i] = firstSpoken;
-
-    const remeasure = () => {
-      lines = measureTokenLines(column);
-      spans = Array.from(column.querySelectorAll<HTMLElement>('[data-token-idx]'));
-    };
-    remeasure();
-
-    const applyHighlight = (nextIdx: number) => {
-      if (nextIdx === activeIdx) return;
-      const lo = Math.min(activeIdx, nextIdx);
-      const hi = Math.max(activeIdx, nextIdx);
-      for (let i = Math.max(0, lo); i <= hi && i < spans.length; i++) {
-        const span = spans[i];
-        if (!span) continue;
-        span.classList.toggle('squisq-teleprompter-word--active', i === nextIdx);
-        span.classList.toggle('squisq-teleprompter-word--read', i < nextIdx);
-      }
-      activeIdx = nextIdx;
-    };
-
-    const loop = (now: number) => {
-      const dtMs = now - lastTime;
-      lastTime = now;
-      const pos = wordPosRef.current;
-      const clampedIdx = Math.min(Math.max(Math.floor(pos), 0), spans.length - 1);
-      // Snap the highlight off punctuation onto the nearest spoken word.
-      const highlightIdx =
-        clampedIdx < spokenAt.length && spokenAt[clampedIdx] >= 0
-          ? spokenAt[clampedIdx]
-          : clampedIdx;
-      if (spans.length > 0) applyHighlight(highlightIdx);
-      if (lines) {
-        const target = targetOffsetFor(pos, lines, surface.clientHeight);
-        offset = stepScroll(offset, target, dtMs);
-        column.style.transform = `translateY(${-offset}px)`;
-      }
-      raf = win.requestAnimationFrame(loop);
-    };
-    raf = win.requestAnimationFrame(loop);
-
-    // The opener's ResizeObserver observing a same-cluster window's
-    // element is fine; only rAF must belong to the surface's window.
-    const resizeObserver =
-      typeof ResizeObserver !== 'undefined' ? new ResizeObserver(remeasure) : null;
-    resizeObserver?.observe(surface);
-
-    return () => {
-      win.cancelAnimationFrame(raf);
-      resizeObserver?.disconnect();
-    };
-    // fontSizePx/compact change the layout → remeasure via effect rerun.
-  }, [script, fontSizePx, compact]);
-
-  const handleClick = onSeekToken
-    ? (event: ReactMouseEvent<HTMLDivElement>) => {
-        const target = event.target as HTMLElement | null;
-        const span = target?.closest<HTMLElement>('[data-token-idx]');
-        if (!span) return;
-        const idx = Number(span.dataset.tokenIdx);
-        if (Number.isFinite(idx)) onSeekToken(idx);
-      }
-    : undefined;
-
-  return (
-    <div
-      ref={surfaceRef}
-      className={`squisq-teleprompter-surface${mirrored ? ' squisq-teleprompter-surface--mirrored' : ''}`}
-      style={{ ...vars, fontSize: `${fontSizePx}px` }}
-      data-testid="teleprompter-surface"
-    >
-      <div className="squisq-teleprompter-flip">
-        <div
-          ref={columnRef}
-          className="squisq-teleprompter-scroll"
-          style={compact ? { padding: '30vh 5% 60vh' } : undefined}
-          onClick={handleClick}
-        >
-          <ScriptColumn script={script} compact={compact} />
-        </div>
-      </div>
-      {lineGuide ? (
-        <>
-          <div
-            className="squisq-teleprompter-guide-band"
-            style={{ top: `calc(${EYE_LINE_FRACTION * 100}% - 0.75em)`, height: '1.5em' }}
-          />
-          <div
-            className="squisq-teleprompter-line-guide"
-            style={{ top: `calc(${EYE_LINE_FRACTION * 100}% - 0.75em)`, height: '1.5em' }}
-          />
-        </>
-      ) : null}
-      {countdownRemaining !== null ? (
-        <div className="squisq-teleprompter-countdown">
-          <span className="squisq-teleprompter-countdown-digit">{countdownRemaining}</span>
-        </div>
-      ) : null}
-      {recordingIndicator ? <div className="squisq-teleprompter-recdot" /> : null}
-    </div>
-  );
-}