@bycrux/editor 0.8.8 → 0.8.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bycrux/editor",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "private": false,
   "type": "module",
   "exports": {

package/src/schema.ts

@@ -43,13 +43,15 @@ export interface CaptionSegment {
 }
 
 export interface Captions {
-  style: 'word-by-word' | 'pop' | 'karaoke' | 'subtitle'
+  style: 'word-by-word' | 'pop' | 'karaoke' | 'subtitle' | 'highlight-box' | 'outline' | 'clean'
   segments: CaptionSegment[]
   // ffmpeg-drawtext render params — ignored by JSX preview, used by render.js ffmpeg branch
   position?: 'center' | 'top-left' | 'bottom-left'
   color?: string
   fontsize?: number
   bgColor?: string
+  accentColor?: string    // active-word/box accent color — highlight-box, outline
+  googleFonts?: string[]  // Google Fonts family specs for the caption template (e.g. ["Figtree:wght@700"])
 }
 
 export interface VisualItem {

package/src/video/preview/CaptionPreview.tsx

@@ -58,8 +58,17 @@ export default function CaptionPreview({ track, currentTime, fps, compileOverlay
 
   const frame    = Math.round(currentTime * fps)
   const lastSeg  = track.segments[track.segments.length - 1]
+
+  // Theme props for the template: everything on the track except style/segments
+  // (handled separately) and googleFonts (a render-time font-loading hint, not
+  // a template prop). Normalize the legacy lowercase `fontsize` key to the
+  // camelCase `fontSize` templates actually read.
+  const { style: _style, segments: _segments, googleFonts: _googleFonts, fontsize, ...theme } = track
+  const themeProps: Record<string, unknown> = { ...theme }
+  if (fontsize != null) themeProps.fontSize = fontsize
+
   const element  = (factory && scale !== null)
-    ? factory(frame, fps, Math.round((lastSeg?.end ?? 0) * fps), { segments: track.segments })
+    ? factory(frame, fps, Math.round((lastSeg?.end ?? 0) * fps), { segments: track.segments, ...themeProps })
     : null
 
   return (

package/src/video/timeline/Timeline.tsx

@@ -138,7 +138,12 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     const fps = project.settings?.fps ?? 30
     const frame = 1 / fps
     const onKey = (e: globalThis.KeyboardEvent) => {
+      // While the transcript modal is open, or the caret is in editable text
+      // (caption segments are contentEditable), arrows move the text cursor —
+      // never the playhead.
+      if (transcriptModalOpen) return
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return
+      if ((e.target as HTMLElement).isContentEditable) return
       if (e.key === 'Escape') { setMarkers([null, null]); return }
       if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') return
       e.preventDefault()
@@ -152,7 +157,7 @@ export default function Timeline({ project, currentTime, onTimeUpdate, onProject
     }
     document.addEventListener('keydown', onKey)
     return () => document.removeEventListener('keydown', onKey)
-  }, [totalDuration, currentTime, onTimeUpdate, project.settings?.fps])
+  }, [totalDuration, currentTime, onTimeUpdate, project.settings?.fps, transcriptModalOpen])
 
   // Derive selection from two placed markers
   const selection = markers[0] !== null && markers[1] !== null

package/src/video/timeline/TranscriptPanel.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useRef, useState } from 'react'
 import type { Project } from '../../types'
 import { formatTime } from './utils'
 import { EditableSegment } from './EditableSegment'
@@ -17,6 +18,21 @@ interface TranscriptPanelProps {
 
 export default function TranscriptPanel({ project, captionTrack, currentTime, onCaptionEdit, onProjectChange, onExpand, onRegenerateCaptions }: TranscriptPanelProps) {
   const segs = captionTrack?.segments ?? []
+  const [confirmRemove, setConfirmRemove] = useState(false)
+  const removeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  // Live slider value during a drag — only committed (persisted) on
+  // pointer-up/key-up so mid-drag ticks don't each trigger a server PUT.
+  const [fontsize, setFontsize] = useState(captionTrack?.fontsize ?? 46)
+
+  useEffect(() => {
+    setFontsize(captionTrack?.fontsize ?? 46)
+  }, [captionTrack?.fontsize])
+
+  useEffect(() => {
+    return () => {
+      if (removeTimeoutRef.current) clearTimeout(removeTimeoutRef.current)
+    }
+  }, [])
   // Find active segment index
   const activeIdx = segs.findIndex(s => currentTime >= s.start && currentTime < s.end)
   const nearIdx   = activeIdx !== -1 ? activeIdx
@@ -31,8 +47,8 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
     <div className="rounded border border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 px-3 py-2.5">
       <div className="flex items-center justify-between mb-2">
         <span className="text-[10px] text-gray-500 uppercase tracking-wider">Captions</span>
-        <div className="flex items-center gap-2">
-          {captionTrack && (['word-by-word', 'pop', 'karaoke', 'subtitle'] as const).map(style => {
+        <div className="flex items-center gap-2 flex-wrap justify-end">
+          {captionTrack && (['word-by-word', 'pop', 'karaoke', 'subtitle', 'highlight-box', 'outline', 'clean'] as const).map(style => {
             const active = captionTrack.style === style
             return (
               <button
@@ -52,6 +68,38 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               </button>
             )
           })}
+          {captionTrack && (
+            <div className="flex items-center gap-1">
+              <input
+                type="range"
+                min={28}
+                max={120}
+                step={2}
+                value={fontsize}
+                className="w-20 sm:w-24 accent-purple-500"
+                onChange={e => {
+                  if (!project.captions) return
+                  const v = Number(e.target.value)
+                  setFontsize(v)
+                  // Live preview only — cheap local-state update, no save.
+                  onProjectChange?.({ ...project, captions: { ...project.captions, fontsize: v } })
+                }}
+                onPointerUp={e => {
+                  if (!project.captions) return
+                  const v = Number((e.target as HTMLInputElement).value)
+                  onCaptionEdit?.({ ...project, captions: { ...project.captions, fontsize: v } })
+                }}
+                onKeyUp={e => {
+                  if (!project.captions) return
+                  const v = Number((e.target as HTMLInputElement).value)
+                  onCaptionEdit?.({ ...project, captions: { ...project.captions, fontsize: v } })
+                }}
+              />
+              <span className="text-[10px] text-gray-500 dark:text-gray-400 font-mono w-9 text-right">
+                {fontsize}px
+              </span>
+            </div>
+          )}
           {onRegenerateCaptions && (
             <button
               className="text-[10px] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded px-2 py-0.5 transition-all"
@@ -60,6 +108,30 @@ export default function TranscriptPanel({ project, captionTrack, currentTime, on
               Regenerate
             </button>
           )}
+          {captionTrack && (
+            <button
+              className={`text-[10px] rounded px-2 py-0.5 transition-all border ${
+                confirmRemove
+                  ? 'bg-red-500/20 border-red-500/60 text-red-400'
+                  : 'bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300 hover:border-gray-400 dark:hover:border-gray-500'
+              }`}
+              onClick={() => {
+                if (!confirmRemove) {
+                  setConfirmRemove(true)
+                  if (removeTimeoutRef.current) clearTimeout(removeTimeoutRef.current)
+                  removeTimeoutRef.current = setTimeout(() => setConfirmRemove(false), 3000)
+                  return
+                }
+                if (removeTimeoutRef.current) clearTimeout(removeTimeoutRef.current)
+                setConfirmRemove(false)
+                // Persistence needs an explicit `null` to clear the field server-side
+                // (a live PUT test confirmed `undefined` is dropped from the JSON body).
+                onCaptionEdit?.({ ...project, captions: null as unknown as undefined })
+              }}
+            >
+              {confirmRemove ? 'Really remove?' : 'Remove'}
+            </button>
+          )}
           {segs.length > 0 && (
             <button
               className="text-[10px] text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white border border-gray-300 dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-500 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 rounded px-2 py-0.5 transition-all"