67 lines
3.8 KiB
Markdown
67 lines
3.8 KiB
Markdown
|
# Extended Caption Styling Implementation Summary
|
||
|
|
|
||
|
|
**Date:** 2026-09-22 10:37
|
||
|
|
**Task:** Implement extended caption styling (font selection, drop shadow, dimmed text color, background toggle)
|
||
|
|
|
||
|
|
## Changes Made
|
||
|
|
|
||
|
|
### Task 1: Data model (commit `a4a1376`)
|
||
|
|
- **`src/lib/stores/preferences.svelte.ts`**: Extended `CaptionSettings` interface with 8 new fields: `fontFamily`, `backgroundEnabled`, `shadowEnabled`, `shadowDepth`, `shadowColor`, `dimmedColorMode`, `dimmedOpacity`, `dimmedColor`
|
||
|
|
- **`src-tauri/src/models.rs`**: Extended `CaptionStyle` Rust struct with matching fields (snake_case, serde camelCase)
|
||
|
|
- **`src/lib/bindings/export.ts`**: Extended TS `CaptionStyle` binding interface
|
||
|
|
- **`src/lib/components/ExportDialog.svelte`**: Updated captionStyle passthrough to include all 17 fields
|
||
|
|
|
||
|
|
### Task 2: System font detection (commit `1447071`)
|
||
|
|
- **`src-tauri/src/commands/media_analysis.rs`**: Added `list_system_fonts` command using `fc-list :lang=en family` with hardcoded fallback (8 common fonts)
|
||
|
|
- **`src-tauri/src/lib.rs`**: Registered new command in `generate_handler!`
|
||
|
|
- **`src/lib/bindings/mediaAnalysis.ts`**: Added `listSystemFonts()` TS binding
|
||
|
|
|
||
|
|
### Task 3: ASS generation wiring (commit `2cf8cdc`)
|
||
|
|
- **`src-tauri/src/services/clip_exporter.rs`**: Rewrote style extraction block in `vtt_to_ass_with_karaoke()`:
|
||
|
|
- Uses `font_family` instead of hardcoded `Arial`
|
||
|
|
- Dimmed color: auto mode derives from `textColor` + `dimmedOpacity`, custom mode uses `dimmedColor` directly
|
||
|
|
- Background/shadow mutual exclusivity: background mode (BorderStyle 3/4 + BackColour for box), shadow mode (BorderStyle 1 + BackColour for shadow + Shadow depth), or neither (transparent BackColour)
|
||
|
|
|
||
|
|
### Task 4: Preview caption rendering (commit `bc39c2a`)
|
||
|
|
- **`src/lib/components/VideoPlayer.svelte`**: Updated `captionStyle` derived to use `$derived.by()`, computing:
|
||
|
|
- `fontFamily`, `fontWeight` from settings
|
||
|
|
- Background conditional on `backgroundEnabled` with `rgba()` using `hexToRgb` helper
|
||
|
|
- Shadow conditional on `shadowEnabled` with depth/color
|
||
|
|
- Dimmed word colors: auto mode uses opacity, custom mode uses direct color
|
||
|
|
|
||
|
|
### Task 5: Settings panel UI (commit `5c47e38`)
|
||
|
|
- **`src/lib/components/CaptionSettingsPanel.svelte`**: Full rewrite with:
|
||
|
|
- System font dropdown (loaded on mount via `listSystemFonts()`, each option styled in its own font)
|
||
|
|
- Font size slider, bold checkbox
|
||
|
|
- Text color picker
|
||
|
|
- Dimmed text: auto/custom radio toggle with opacity slider or color picker
|
||
|
|
- Outline: checkbox + color picker
|
||
|
|
- Background: checkbox + color picker + opacity slider (disables shadow when enabled)
|
||
|
|
- Drop shadow: checkbox + depth slider + color picker (disables background when enabled)
|
||
|
|
- Position: bottom/top radio
|
||
|
|
- Word highlight checkbox
|
||
|
|
- Reset to defaults button
|
||
|
|
- 320px width, scrollable, dark theme
|
||
|
|
|
||
|
|
### Task 6: Verification
|
||
|
|
- `cargo build`: Clean (6 pre-existing warnings)
|
||
|
|
- `cargo test --lib services::clip_exporter::tests`: 23/23 passing
|
||
|
|
- `npm run check`: Only 4 pre-existing errors (node:path/process/url, overload)
|
||
|
|
|
||
|
|
## Approach
|
||
|
|
- Used Subagent-Driven Development: fresh subagent per task + task reviewer per task
|
||
|
|
- 5 implementer dispatches + 5 reviewer dispatches + 1 verification pass
|
||
|
|
- All reviews approved on first pass (no fix cycles needed)
|
||
|
|
|
||
|
|
## Minor Items for Future
|
||
|
|
- Font-family CSS quoting for multi-word names (e.g., `Times New Roman`) in dropdown options
|
||
|
|
- No defensive mutual exclusivity check in preview rendering (relies on settings panel enforcement)
|
||
|
|
- `hexToRgb` has no malformed-hex guard (UI-controlled values only)
|
||
|
|
- `dimmedColorMode` is `string` in Rust/TS binding vs `'auto' | 'custom'` union in preferences
|
||
|
|
- No ASS Style-line unit tests for new field combinations
|
||
|
|
|
||
|
|
## Follow-up Items
|
||
|
|
- Manual smoke test with `cargo tauri dev` recommended
|
||
|
|
- Test font selection with burn-in export
|
||
|
|
- Verify dimmed color auto vs custom modes in both preview and export
|