@bycrux/editor 0.11.2 → 1.0.1

package/src/video/CaptionRegenModal.tsx

@@ -8,19 +8,28 @@ interface CaptionRegenModalProps<P extends Project = Project> {
   /** Adapter driving the caption-regeneration stream. Must implement
    *  `generateCaptions` — callers gate rendering on its presence. */
   adapter: EditorAdapter<P>
+  /** Caption rows the project has right now (`maxCaptionLane(segments) + 1`,
+   *  so 1 for a lane-less or empty track). Regeneration replaces the whole
+   *  track with a single fresh row, so this is the count the warning banner
+   *  below reports as about to be discarded. */
+  existingRowCount: number
   /** Fired on terminal success with the freshly transcribed caption track. The
    *  caller patches `project.captions` from this; the modal then closes. */
   onDone: (captions: Captions) => void
   /** Fired when the modal closes (cancel, error dismiss, or post-done). */
   onClose: () => void
+  /** Editor theme mode — light/dark. The panel and log box follow
+   *  `--editor-surface`, so log/status hues need to darken in light mode.
+   *  Absent -> dark, matching every existing caller. */
+  mode?: 'light' | 'dark'
 }
 
-function LogLine({ text }: { text: string }) {
+function LogLine({ text, mode = 'dark' }: { text: string; mode?: 'light' | 'dark' }) {
   let color = 'text-[var(--editor-text)]/60'
-  if (/ready|complete|done|transcribed/i.test(text))      color = 'text-green-400'
-  else if (/transcrib|detecting|loading|model/i.test(text)) color = 'text-sky-400'
-  else if (/extract|building|composing/i.test(text))      color = 'text-amber-400'
-  else if (/error|fail|warn/i.test(text))                 color = 'text-red-400'
+  if (/ready|complete|done|transcribed/i.test(text))      color = mode === 'light' ? 'text-green-700' : 'text-green-400'
+  else if (/transcrib|detecting|loading|model/i.test(text)) color = mode === 'light' ? 'text-sky-700' : 'text-sky-400'
+  else if (/extract|building|composing|mixing/i.test(text)) color = mode === 'light' ? 'text-amber-700' : 'text-amber-400'
+  else if (/error|fail|warn/i.test(text))                 color = mode === 'light' ? 'text-red-600' : 'text-red-400'
 
   return (
     <span className={`leading-relaxed whitespace-pre-wrap break-all ${color}`}>
@@ -29,7 +38,7 @@ function LogLine({ text }: { text: string }) {
   )
 }
 
-export default function CaptionRegenModal<P extends Project = Project>({ projectId, adapter, onDone, onClose }: CaptionRegenModalProps<P>) {
+export default function CaptionRegenModal<P extends Project = Project>({ projectId, adapter, existingRowCount, onDone, onClose, mode = 'dark' }: CaptionRegenModalProps<P>) {
   const [logs, setLogs]     = useState<string[]>([])
   const [status, setStatus] = useState<'running' | 'done' | 'error'>('running')
   const [errorMsg, setError] = useState<string | null>(null)
@@ -124,6 +133,15 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
                   : status === 'done' ? 'Captions regenerated'
                   : 'Caption regeneration failed'}
               </h2>
+              {/* What gets transcribed is not obvious from the button that
+                  opened this modal, and mute is the one control the editor
+                  has over it — worth one line here rather than a support
+                  question about why a clip's audio showed up in the
+                  captions. Read at generation time only: unmuting later just
+                  means the next run sees it. */}
+              <p className="text-[11px] text-[var(--editor-text)]/50">
+                Transcribes everything audible on the timeline. Muted clips and tracks are skipped.
+              </p>
             </div>
           </div>
           {status !== 'running' && (
@@ -131,6 +149,16 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
           )}
         </div>
 
+        {/* Discard warning — only when there is more than one row to lose.
+            Regeneration always replaces project.captions wholesale with a
+            single fresh row (see onDone below), so a hand-built second or
+            third row (a title card, a call-out) is silently gone otherwise. */}
+        {existingRowCount > 1 && (
+          <div className={`px-5 py-2 text-[11px] leading-snug border-b border-[var(--editor-border)] ${mode === 'light' ? 'text-amber-700' : 'text-amber-400/90'}`}>
+            This will replace all {existingRowCount} caption rows with a single new row.
+          </div>
+        )}
+
         {/* Log output */}
         <div className="relative">
           <button
@@ -148,10 +176,10 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
               <span className="text-[var(--editor-text)]/40 italic">Starting transcription…</span>
             )}
             {logs.map((line, i) => (
-              <LogLine key={i} text={line} />
+              <LogLine key={i} text={line} mode={mode} />
             ))}
             {status === 'error' && errorMsg && (
-              <span className="text-red-400 mt-1">{errorMsg}</span>
+              <span className={`mt-1 ${mode === 'light' ? 'text-red-600' : 'text-red-400'}`}>{errorMsg}</span>
             )}
           </div>
         </div>
@@ -161,7 +189,7 @@ export default function CaptionRegenModal<P extends Project = Project>({ project
           {status === 'running' ? (
             <button
               onClick={handleCancel}
-              className="text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 hover:bg-red-900/40 hover:border-red-700 hover:text-red-300 transition-colors"
+              className={`text-sm px-4 py-1.5 rounded-md bg-[var(--editor-surface)] border border-[var(--editor-border)] text-[var(--editor-text)]/80 transition-colors ${mode === 'light' ? 'hover:bg-red-50 hover:border-red-300 hover:text-red-700' : 'hover:bg-red-900/40 hover:border-red-700 hover:text-red-300'}`}
             >
               Cancel
             </button>

package/src/video/CaptionSpecimen.tsx

@@ -0,0 +1,160 @@
+/**
+ * CaptionSpecimen — the live font-and-size specimen strip for the caption
+ * styling panel. Shows the ACTIVE WORD from the user's own video (via
+ * `captionActiveWord`), rendered in the candidate typeface at a size
+ * proportional to the real caption render size, so a font choice is judged
+ * against real content and real scale rather than fixed-size placeholder
+ * text.
+ *
+ * This is deliberately NOT a duplicate of `FontFamilyPicker`'s dropdown
+ * (src/text/FontPicker.tsx), which already previews every option in its own
+ * face, at a small fixed UI size, inside the list itself. This strip is the
+ * larger, in-context confirmation of the CURRENT pick — real word, real
+ * relative size.
+ *
+ * Presentational only: takes caption/time/style data in, owns no state
+ * beyond the width measurement below, and never touches the project.
+ */
+import { useEffect, useRef, useState } from 'react'
+import type { Captions } from '../schema'
+import { activeCaptionWord } from './captionActiveWord'
+import { findFontOption } from '../text/FontPicker'
+import { CAPTION_STYLE_FONT_FAMILY, CAPTION_STYLE_FONT_WEIGHT } from './captionStyleDefaults'
+
+// Captions render against a fixed 1080-wide frame — a `fontsize` of 46 is
+// 46px OF THAT 1080-wide frame, not 46 real screen px (see RENDER_W in
+// preview/CaptionPreview.tsx, the source of truth for this constant).
+// Duplicated rather than imported: CaptionPreview.tsx is being edited
+// elsewhere in this change and must not gain a new export for this.
+const RENDER_W = 1080
+
+// Readable floor / blow-out ceiling for the specimen word's on-screen size.
+// The floor covers two degenerate cases: before the first ResizeObserver
+// callback fires the measured width is 0, and in a test environment where
+// no callback ever fires (or jsdom, which never lays anything out) it STAYS
+// 0 — both would otherwise compute a 0px, invisible specimen. The ceiling
+// keeps an unexpectedly wide host row from blowing the specimen past a
+// normal caption-panel row height.
+const MIN_SPECIMEN_PX = 11
+const MAX_SPECIMEN_PX = 64
+
+export interface CaptionSpecimenProps {
+  captions: Captions | undefined
+  currentTime: number
+  selectedSegmentId?: string
+  /** The candidate family being previewed — `captions.fontFamily`, or the
+   *  style's default when unset. */
+  fontFamily?: string
+  /** The caption's real render font size, in project pixels (`captions.fontsize`). */
+  fontSize: number
+  textTransform?: string
+  letterSpacing?: string
+  /** `captions.fontWeight` — absent means the active style's own designed
+   *  weight (the browser/template default), so leaving this unset is what
+   *  the specimen should show for "bold on". */
+  fontWeight?: number | string
+}
+
+export default function CaptionSpecimen({
+  captions,
+  currentTime,
+  selectedSegmentId,
+  fontFamily,
+  fontSize,
+  textTransform,
+  letterSpacing,
+  fontWeight,
+}: CaptionSpecimenProps) {
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const [measuredWidth, setMeasuredWidth] = useState(0)
+
+  // Measure the strip's own width so the specimen can be scaled the same way
+  // CaptionPreview scales the caption layer: `measuredWidth / RENDER_W`.
+  useEffect(() => {
+    const el = wrapRef.current
+    if (!el) return
+    const obs = new ResizeObserver(([entry]) => {
+      setMeasuredWidth(entry.contentRect.width)
+    })
+    obs.observe(el)
+    return () => obs.disconnect()
+  }, [])
+
+  const active = activeCaptionWord(captions, currentTime, selectedSegmentId)
+
+  // Mirrors captionActiveWord's own `currentTime >= seg.start && currentTime
+  // < seg.end` predicate (captionActiveWord.ts) rather than importing a
+  // helper for it — used only to tell whether the resolved word came from
+  // directly under the playhead (some segment is active) or from the
+  // selectedSegmentId fallback (activeCaptionWord only reaches for that
+  // fallback when no segment is active at all).
+  const anySegmentActive = (captions?.segments ?? []).some(
+    (seg) => currentTime >= seg.start && currentTime < seg.end,
+  )
+  const isFallback = !!active && !anySegmentActive
+
+  const scale = measuredWidth / RENDER_W
+  const specimenPx = Math.min(MAX_SPECIMEN_PX, Math.max(MIN_SPECIMEN_PX, fontSize * scale))
+
+  const fontOption = fontFamily ? findFontOption(fontFamily) : null
+  const familyLabel = fontFamily ? fontOption?.label ?? 'Custom' : 'Default'
+
+  // The specimen must show what will ACTUALLY render, not just what was
+  // explicitly picked — `fontWeight`/`fontFamily` are absent by default
+  // (each style's own designed weight/face), so falling back to the raw
+  // props here would always preview weight 400 in the editor's own UI font,
+  // never the style's real look. `captionStyleDefaults.ts` is the duplicated
+  // source of truth for what each style's template actually defaults to; a
+  // style string this table doesn't recognize (or no `captions` at all)
+  // resolves to `undefined` here, same as before this fallback existed.
+  const styleDefaultWeight = captions ? CAPTION_STYLE_FONT_WEIGHT[captions.style] : undefined
+  const styleDefaultFamily = captions ? CAPTION_STYLE_FONT_FAMILY[captions.style] : undefined
+  const resolvedFontWeight = fontWeight ?? styleDefaultWeight
+  const resolvedFontFamily = fontFamily ?? styleDefaultFamily
+
+  return (
+    <div
+      ref={wrapRef}
+      data-testid="caption-specimen"
+      className="flex flex-col gap-1 rounded-md border border-[var(--editor-border)] bg-[var(--editor-surface)] px-2.5 py-2"
+    >
+      <div className="flex items-center justify-between gap-2">
+        {active ? (
+          <span
+            data-testid="caption-specimen-word"
+            className="flex-1 min-w-0 truncate leading-tight text-[var(--editor-text)]"
+            style={{
+              fontFamily: resolvedFontFamily,
+              fontSize: `${specimenPx}px`,
+              fontWeight: resolvedFontWeight,
+              textTransform,
+              letterSpacing,
+            }}
+          >
+            {active.word}
+          </span>
+        ) : (
+          <span
+            data-testid="caption-specimen-word"
+            className="flex-1 min-w-0 truncate text-xs italic text-[var(--editor-text)] opacity-50"
+          >
+            Move the playhead over a caption to preview it
+          </span>
+        )}
+        {isFallback && (
+          <span className="shrink-0 rounded border border-[var(--editor-border)] px-1 py-px text-[9px] text-[var(--editor-text)] opacity-60">
+            Selected caption
+          </span>
+        )}
+      </div>
+
+      {/* Family + size stay visible in the empty state too, so the row does
+          not change height when the playhead moves on/off a caption. */}
+      <div className="flex items-center gap-1.5 text-[10px] text-[var(--editor-text)] opacity-50">
+        <span className="truncate">{familyLabel}</span>
+        <span aria-hidden="true">&middot;</span>
+        <span className="font-mono">{fontSize}px</span>
+      </div>
+    </div>
+  )
+}