feat(subtitles): per-preset text/stroke colour + left/center horizontal align

fralapo · claude · fralapo · commit 5548cae976d6 · 2026-06-25T00:42:06.000+02:00
Karaoke (animated) captions now expose Text color + Stroke color pickers in both the Create pre-selection panel and the per-clip Edit modal. The stroke defaults to black and the highlight accent stays the preset's; both the base text and stroke are recolourable per preset. generate_ass_karaoke gains a validated outline_color override. Subtitles can also be horizontally aligned left (ragged / "a bandiera") or centered — never right, since the social UI (like/comment/share) lives down the right edge. Left keeps a small margin from the edge and widens the right margin so the text column clears the social buttons. The pure, host-tested subtitles.ass_alignment_and_margins() maps the vertical anchor's ASS \an code to its left variant (+margins); the classic SRT path does the same on the legacy SSA codes via burn_subtitles(h_align=). normalize_h_align() rejects 'right'. Wired through seedSubtitleParams / optsToPreselections / compose._apply_subtitles. Host-tested (tests/domain/test_subtitle_align.py); ffmpeg burn paths verified by the Docker integration suite (30 passed). Frontend lint+build+tests green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Kggb11c98UYEA648Q2Y629
diff --git a/CLAUDE.md b/CLAUDE.md
@@ -250,7 +250,9 @@ When using ASS karaoke, the `ass` FFmpeg filter is used with `fontsdir` pointing
 
 The live subtitle controls live in **two** places, kept symmetric: the Create-tab pre-selection panel `create.jsx:SubConfig` (writes flat `opts.sub*` keys → `realApi.js:optsToPreselections` → `preselections.subtitles.*`) and the per-clip `captions.jsx:EditClipModal` (seeds from `preselections.subtitles` + the clip's saved `subtitleParams`). Both emit the **same `subtitle_params` shape** via `lib/seedClipParams.js:seedSubtitleParams`, consumed by `compose.py:_apply_subtitles` → `subtitles.py`.
 
-**Controls (both panels):** mode (karaoke/classic), position (top/center/bottom segmented), and a **Vertical nudge** slider (`offset_y`, −50…+50). Karaoke adds a **Style preset** grid + a **Font size** slider (`font_size`, 0 = Auto → preset size). Classic adds font, colour swatch, **Outline width** (`border_width`, 0–6) and a **Background box** toggle (`bg_opacity` 0/0.6 + black `bg_color`).
+**Controls (both panels):** mode (karaoke/classic), position (top/center/bottom segmented), an **Alignment** segmented (`align` — **left** = ragged "a bandiera" / **center**; **no right** because the social UI like/comment/share buttons sit on the right edge), and a **Vertical nudge** slider (`offset_y`, −50…+50). Karaoke adds a **Style preset** grid, a **Font size** slider (`font_size`, 0 = Auto → preset size), and **Text color** + **Stroke color** pickers (`font_color` / `outline_color` — stroke defaults black, both recolourable per preset; highlight accent stays the preset's). Classic adds font, colour swatch, **Outline width** (`border_width`, 0–6) and a **Background box** toggle (`bg_opacity` 0/0.6 + black `bg_color`).
+
+- **Horizontal alignment (`align`)** is left/center only, honoured in both modes. Karaoke: `subtitles.py:ass_alignment_and_margins(vpos, align)` (pure, host-tested) maps the vertical anchor's centred ASS \an code (top 8 / center 5 / bottom 2) to its left variant (7/4/1) and widens the right margin (`_SUB_MARGIN_LEFT_RIGHT=220` vs left `_SUB_MARGIN_EDGE=110`) so ragged-left text keeps a small edge margin but clears the right-edge social buttons. Classic SRT (`burn_subtitles(..., h_align=)`) does the same on the legacy SSA codes (centre 6/10/2 → left 5/9/1) + `MarginL`/`MarginR`. `normalize_h_align` collapses anything that isn't an explicit left request (incl. `right`) to `center`. Karaoke text/stroke colour overrides ride `font_color`/`outline_color` through `compose._apply_subtitles` → `generate_ass_karaoke`. Host-tested in `tests/domain/test_subtitle_align.py`.
 
 **Param-flow invariants (don't regress):**
 - **`offset_y` sign is unified** — positive moves the caption DOWN in *both* the karaoke ASS and classic SRT paths via the pure `subtitles.py:_offset_margin(position_norm, base, offset_y)` helper (top-anchor adds, bottom/center subtract; clamped ≥0). Host-tested in `tests/domain/test_subtitle_style.py`.
diff --git a/dashboard/src/lib/seedClipParams.js b/dashboard/src/lib/seedClipParams.js
@@ -61,6 +61,11 @@ export function seedSubtitleParams(preselections) {
         offset_y: subs?.offset_y ?? 0,
         font_color: subs?.font_color || '#FFFFFF',
         position: subs?.position || 'bottom',
+        // Horizontal alignment: 'center' (default) or 'left' (a bandiera). No
+        // 'right' — the social UI lives down the right edge.
+        align: subs?.align || 'center',
+        // Karaoke stroke (outline) colour — defaults black; recolourable.
+        outline_color: subs?.outline_color || '#000000',
         // Classic-mode stroke + background (passed through to burn_subtitles).
         border_color: subs?.border_color || '#000000',
         border_width: subs?.border_width ?? 2,
diff --git a/dashboard/src/redesign/captions.jsx b/dashboard/src/redesign/captions.jsx
@@ -85,6 +85,12 @@ export function EditClipModal({ clip, idx, jobId, initial, appliedMode, preselec
   const [position, setPosition] = useState(sp.position || preSubs.position || 'bottom');
   const [subFont, setSubFont] = useState(sp.font || preSubs.font || 'Montserrat-Black');
   const [subColor, setSubColor] = useState(sp.font_color || preSubs.font_color || '#FFFFFF');
+  // Karaoke stroke (outline) colour — defaults to black; the user can recolour
+  // it per preset, but the default stays black.
+  const [subStroke, setSubStroke] = useState(sp.outline_color || preSubs.outline_color || '#000000');
+  // Horizontal alignment: 'center' or 'left' (a bandiera). No 'right' — the
+  // social UI (like/comment/share) lives down the right edge.
+  const [align, setAlign] = useState(sp.align || preSubs.align || 'center');
   const [offsetY, setOffsetY] = useState(Number(sp.offset_y ?? preSubs.offset_y ?? 0));
   const [kSize, setKSize] = useState(Number(sp.font_size ?? preSubs.font_size ?? 0));
   const [cOutline, setCOutline] = useState(Number(sp.border_width ?? preSubs.border_width ?? 2));
@@ -184,10 +190,10 @@ export function EditClipModal({ clip, idx, jobId, initial, appliedMode, preselec
   const apply = () => {
     // Build from the clean seed + current UI state only (no raw `...sp` spread,
     // which would leak stale style keys into a karaoke re-compose).
-    const subtitleParams = { ...seedSubtitleParams(preselections), mode, preset, position,
+    const subtitleParams = { ...seedSubtitleParams(preselections), mode, preset, position, align,
       offset_y: offsetY,
       ...(mode === 'karaoke'
-        ? { font_size: kSize > 0 ? kSize : undefined }
+        ? { font_size: kSize > 0 ? kSize : undefined, font_color: subColor, outline_color: subStroke }
         : { font: subFont, font_color: subColor, border_width: cOutline,
             bg_opacity: cBg ? 0.6 : 0, bg_color: '#000000' }) };
     const hookParams = { ...seedHookParams(clip, preselections), ...(initial?.hookParams || {}), ...hookStyle, text: hookText };
@@ -334,6 +340,26 @@ export function EditClipModal({ clip, idx, jobId, initial, appliedMode, preselec
                           <input type="range" min="0" max="80" step="1" value={kSize} aria-label="Subtitle font size"
                             onChange={(e) => setKSize(Number(e.target.value))} style={{ width: '100%' }} />
                         </div>
+                        <div className="cf-row" style={{ display: 'flex', gap: 12 }}>
+                          <label style={{ flex: 1 }}>
+                            <span className="field-label" style={{ marginBottom: 9, display: 'flex' }}>Text color</span>
+                            <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                              <input type="color" aria-label="Subtitle text color" value={subColor}
+                                onChange={(e) => setSubColor(e.target.value)}
+                                style={{ width: 40, height: 30, padding: 0, border: 'none', background: 'none', cursor: 'pointer' }} />
+                              <span className="eo-d">{subColor.toUpperCase()}</span>
+                            </span>
+                          </label>
+                          <label style={{ flex: 1 }}>
+                            <span className="field-label" style={{ marginBottom: 9, display: 'flex' }}>Stroke color</span>
+                            <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                              <input type="color" aria-label="Subtitle stroke color" value={subStroke}
+                                onChange={(e) => setSubStroke(e.target.value)}
+                                style={{ width: 40, height: 30, padding: 0, border: 'none', background: 'none', cursor: 'pointer' }} />
+                              <span className="eo-d">{subStroke.toUpperCase()}</span>
+                            </span>
+                          </label>
+                        </div>
                       </>
                     )}
                     {mode === 'classic' && (
@@ -373,6 +399,12 @@ export function EditClipModal({ clip, idx, jobId, initial, appliedMode, preselec
                       <Segmented full value={position} onChange={setPosition}
                         options={[{ id: 'top', label: 'Top' }, { id: 'center', label: 'Center' }, { id: 'bottom', label: 'Bottom' }]} />
                     </div>
+                    <div className="cf-row">
+                      <span className="field-label" style={{ marginBottom: 9, display: 'flex' }}>Alignment</span>
+                      <Segmented full value={align} onChange={setAlign}
+                        options={[{ id: 'left', label: 'Left' }, { id: 'center', label: 'Center' }]} />
+                      <div className="eo-d" style={{ marginTop: 6 }}>Left = ragged (a bandiera) with a margin from the edge · no right (social buttons there)</div>
+                    </div>
                     <div className="cf-row">
                       <span className="field-label" style={{ marginBottom: 9, display: 'flex', justifyContent: 'space-between' }}>
                         <span>Vertical nudge</span><span className="eo-d">{offsetY > 0 ? `+${offsetY}` : offsetY}</span>
diff --git a/dashboard/src/redesign/create.jsx b/dashboard/src/redesign/create.jsx
@@ -194,6 +194,26 @@ function SubConfig({ opts, set }) {
             <input type="range" min="0" max="80" step="1" value={opts.subFontSize || 0} aria-label="Subtitle font size"
               onChange={(e) => set({ subFontSize: Number(e.target.value) })} style={{ width: '100%' }} />
           </div>
+          <div className="cf-row" style={{ display: 'flex', gap: 12 }}>
+            <label style={{ flex: 1 }}>
+              <span className="field-label" style={{ marginBottom: 9, display: 'flex' }}>Text color</span>
+              <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <input type="color" aria-label="Subtitle text color" value={opts.subColor || '#FFFFFF'}
+                  onChange={(e) => set({ subColor: e.target.value })}
+                  style={{ width: 40, height: 30, padding: 0, border: 'none', background: 'none', cursor: 'pointer' }} />
+                <span className="od">{(opts.subColor || '#FFFFFF').toUpperCase()}</span>
+              </span>
+            </label>
+            <label style={{ flex: 1 }}>
+              <span className="field-label" style={{ marginBottom: 9, display: 'flex' }}>Stroke color</span>
+              <span style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <input type="color" aria-label="Subtitle stroke color" value={opts.subStroke || '#000000'}
+                  onChange={(e) => set({ subStroke: e.target.value })}
+                  style={{ width: 40, height: 30, padding: 0, border: 'none', background: 'none', cursor: 'pointer' }} />
+                <span className="od">{(opts.subStroke || '#000000').toUpperCase()}</span>
+              </span>
+            </label>
+          </div>
         </>
       )}
       {opts.subMode === 'classic' && (
@@ -234,6 +254,12 @@ function SubConfig({ opts, set }) {
         <Segmented full value={opts.subPosition || 'bottom'} onChange={(id) => set({ subPosition: id })}
           options={[{ id: 'top', label: 'Top' }, { id: 'center', label: 'Center' }, { id: 'bottom', label: 'Bottom' }]} />
       </div>
+      <div className="cf-row">
+        <span className="field-label" style={{ marginBottom: 9, display: 'flex' }}>Alignment</span>
+        <Segmented full value={opts.subAlign || 'center'} onChange={(id) => set({ subAlign: id })}
+          options={[{ id: 'left', label: 'Left' }, { id: 'center', label: 'Center' }]} />
+        <div className="od" style={{ marginTop: 6 }}>Left = ragged (a bandiera), margin from edge · no right (social buttons)</div>
+      </div>
       <div className="cf-row">
         <span className="field-label" style={{ marginBottom: 9, display: 'flex', justifyContent: 'space-between' }}>
           <span>Vertical nudge</span><span className="od">{(opts.subOffsetY || 0) > 0 ? `+${opts.subOffsetY}` : (opts.subOffsetY || 0)}</span>
diff --git a/dashboard/src/redesign/realApi.js b/dashboard/src/redesign/realApi.js
@@ -317,12 +317,19 @@ export function optsToPreselections(opts) {
     subtitles: opts.subtitles
       ? {
           mode: opts.subMode, preset: opts.subPreset, position: opts.subPosition || 'bottom',
+          // Horizontal alignment applies to both modes ('center' | 'left').
+          align: opts.subAlign || 'center',
           // Vertical nudge applies to both modes.
           offset_y: opts.subOffsetY || 0,
           // Karaoke font-size override (0 = Auto → use the preset size; omitted
-          // so seedSubtitleParams doesn't force a value).
-          ...(opts.subMode === 'karaoke' && opts.subFontSize > 0
-            ? { font_size: opts.subFontSize }
+          // so seedSubtitleParams doesn't force a value) + text/stroke colours
+          // (stroke defaults black; both recolourable per preset).
+          ...(opts.subMode === 'karaoke'
+            ? {
+                font_color: opts.subColor || '#FFFFFF',
+                outline_color: opts.subStroke || '#000000',
+                ...(opts.subFontSize > 0 ? { font_size: opts.subFontSize } : {}),
+              }
             : {}),
           // Classic-mode typography (karaoke draws style from the preset, so
           // these are only meaningful for classic).
diff --git a/src/clippyme/domain/compose.py b/src/clippyme/domain/compose.py
@@ -237,6 +237,8 @@ async def _apply_subtitles(
                 font_size=subtitle_params.get("font_size"),
                 position=subtitle_params.get("position", "bottom"),
                 offset_y=sub_offset_y,
+                outline_color=subtitle_params.get("outline_color"),
+                align=subtitle_params.get("align", "center"),
             ),
         )
         if not success:
@@ -278,6 +280,7 @@ async def _apply_subtitles(
                 bg_color=subtitle_params.get("bg_color", "#000000"),
                 bg_opacity=subtitle_params.get("bg_opacity", 0.0),
                 offset_y=sub_offset_y,
+                h_align=subtitle_params.get("align", "center"),
             ),
         )
     return sub_output
diff --git a/src/clippyme/domain/subtitles.py b/src/clippyme/domain/subtitles.py
diff --git a/tests/domain/test_subtitle_align.py b/tests/domain/test_subtitle_align.py
