feat(captions): extend data model with font, shadow, dimmed color, bg toggle fields

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-22 10:29:22 -04:00
parent e6e3fcb5b4
commit cc0ca95846
4 changed files with 256 additions and 11 deletions
--- a/src/lib/bindings/export.ts
+++ b/src/lib/bindings/export.ts
@@ -1,5 +1,25 @@
 import { invoke, Channel } from '@tauri-apps/api/core';

+export interface CaptionStyle {
+  fontFamily: string;
+  fontSize: number;
+  textColor: string;
+  bold: boolean;
+  outlineColor: string;
+  backgroundEnabled: boolean;
+  backgroundOpacity: number;
+  backgroundColor: string;
+  textOutline: boolean;
+  shadowEnabled: boolean;
+  shadowDepth: number;
+  shadowColor: string;
+  dimmedColorMode: string;
+  dimmedOpacity: number;
+  dimmedColor: string;
+  position: string;
+  wordHighlight: boolean;
+}
+
 export interface ExportConfig {
  clips: Array<{
    id: string;
@@ -13,10 +33,15 @@ export interface ExportConfig {
  outputDirectory: string;
  videoTitle: string;
  sourceFilePath: string;
+  includeCaptions: boolean;
+  burnInCaptions: boolean;
+  captionFilePath: string | null;
+  captionStyle: CaptionStyle | null;
 }

 type ExportEvent =
  | { event: 'progress'; data: { current: number; total: number; label: string } }
+  | { event: 'clipProgress'; data: { current: number; total: number; label: string; percent: number } }
  | { event: 'finished'; data: { paths: string[] } }
  | { event: 'error'; data: { message: string } };

@@ -24,7 +49,8 @@ export async function exportClips(
  config: ExportConfig,
  onProgress: (current: number, total: number, label: string) => void,
  onFinished: (paths: string[]) => void,
-  onError: (message: string) => void
+  onError: (message: string) => void,
+  onClipProgress?: (current: number, total: number, label: string, percent: number) => void
 ): Promise<void> {
  const onEvent = new Channel<ExportEvent>();
  onEvent.onmessage = (message) => {
@@ -32,6 +58,9 @@ export async function exportClips(
      case 'progress':
        onProgress(message.data.current, message.data.total, message.data.label);
        break;
+      case 'clipProgress':
+        onClipProgress?.(message.data.current, message.data.total, message.data.label, message.data.percent);
+        break;
      case 'finished':
        onFinished(message.data.paths);
        break;
--- a/src/lib/components/ExportDialog.svelte
+++ b/src/lib/components/ExportDialog.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
  import { open } from '@tauri-apps/plugin-dialog';
  import { exportClips, type ExportConfig } from '$lib/bindings/export';
+  import { checkSubtitlesFilterAvailable } from '$lib/bindings/dependencies';
  import { session } from '$lib/stores/videoSession.svelte';
  import { getClips, getSelectedClipId } from '$lib/stores/clips.svelte';
  import { preferences, setOutputDirectory } from '$lib/stores/preferences.svelte';
@@ -11,17 +12,30 @@
  let exportScope = $state<'individual' | 'merged'>('individual');
  let cutMode = $state<'lossless' | 'precise'>('lossless');
  let preciseFormat = $state('mp4');
+  let includeCaptions = $state(true);
+  let burnInCaptions = $state(false);
+  let canBurnIn = $state(true);
  let isExporting = $state(false);
+  let exportClipPercent = $state(0);
+  let exportClipLabel = $state('');
+
+  $effect(() => {
+    checkSubtitlesFilterAvailable().then((available) => {
+      canBurnIn = available;
+      if (!available) burnInCaptions = false;
+    });
+  });
  let exportProgress = $state('');
  let exportError = $state<string | null>(null);
  let exportedPaths = $state<string[]>([]);

  let clips = $derived(getClips());
  let selectedId = $derived(getSelectedClipId());
-  let isDownloadComplete = $derived(
-    session.downloadProgress >= 1 && session.localFilePath !== null
+  let isExportReady = $derived(
+    session.exportStatus === 'complete' && session.exportFilePath !== null
  );
-  let downloadPercent = $derived(Math.round(session.downloadProgress * 100));
+  let exportDownloadPercent = $derived(Math.round(session.exportProgress * 100));
+  let hasCaptions = $derived(session.captionFilePath !== null);

  let clipsToExport = $derived(
    clipScope === 'selected' && selectedId
@@ -41,7 +55,7 @@
  }

  async function handleExport() {
-    if (!session.localFilePath || clipsToExport.length === 0) return;
+    if (!session.exportFilePath || clipsToExport.length === 0) return;

    isExporting = true;
    exportError = null;
@@ -65,7 +79,31 @@
          : { scope: 'merged' },
      outputDirectory: preferences.outputDirectory,
      videoTitle: session.title,
-      sourceFilePath: session.localFilePath,
+      sourceFilePath: session.exportFilePath,
+      includeCaptions: includeCaptions && hasCaptions,
+      burnInCaptions: burnInCaptions && includeCaptions && hasCaptions,
+      captionFilePath: hasCaptions ? session.captionFilePath : null,
+      captionStyle: (burnInCaptions && includeCaptions && hasCaptions)
+        ? {
+            fontFamily: preferences.captionSettings.fontFamily,
+            fontSize: preferences.captionSettings.fontSize,
+            textColor: preferences.captionSettings.textColor,
+            bold: preferences.captionSettings.bold,
+            outlineColor: preferences.captionSettings.outlineColor,
+            backgroundEnabled: preferences.captionSettings.backgroundEnabled,
+            backgroundOpacity: preferences.captionSettings.backgroundOpacity,
+            backgroundColor: preferences.captionSettings.backgroundColor,
+            textOutline: preferences.captionSettings.textOutline,
+            shadowEnabled: preferences.captionSettings.shadowEnabled,
+            shadowDepth: preferences.captionSettings.shadowDepth,
+            shadowColor: preferences.captionSettings.shadowColor,
+            dimmedColorMode: preferences.captionSettings.dimmedColorMode,
+            dimmedOpacity: preferences.captionSettings.dimmedOpacity,
+            dimmedColor: preferences.captionSettings.dimmedColor,
+            position: preferences.captionSettings.position,
+            wordHighlight: preferences.captionSettings.wordHighlight,
+          }
+        : null,
    };

    try {
@@ -73,6 +111,8 @@
        config,
        (current, total, label) => {
          exportProgress = `Exporting ${current}/${total}: ${label}`;
+          exportClipPercent = 0;
+          exportClipLabel = label;
        },
        (paths) => {
          exportedPaths = paths;
@@ -81,6 +121,11 @@
        (message) => {
          exportError = message;
          isExporting = false;
+        },
+        (current, total, label, percent) => {
+          exportClipPercent = Math.round(percent * 100);
+          exportClipLabel = label;
+          exportProgress = `Exporting ${current}/${total}: ${label}`;
        }
      );
    } catch {
@@ -95,11 +140,11 @@
  <div class="dialog" role="dialog" onclick={(e) => e.stopPropagation()}>
    <h2>Export Clips</h2>

-    {#if !isDownloadComplete}
+    {#if !isExportReady}
      <div class="waiting">
-        <p>Download at {downloadPercent}% — export will start when ready.</p>
+        <p>Downloading best quality ({exportDownloadPercent}%)…</p>
        <div class="progress-bar">
-          <div class="progress-fill" style="width: {downloadPercent}%"></div>
+          <div class="progress-fill" style="width: {exportDownloadPercent}%"></div>
        </div>
      </div>
    {:else if exportedPaths.length > 0}
@@ -161,6 +206,33 @@
        {/if}
      </section>

+      {#if hasCaptions}
+        <section>
+          <h3>Captions</h3>
+          <label>
+            <input type="checkbox" bind:checked={includeCaptions} />
+            Include captions{session.captionsAreAuto ? ' (auto-generated)' : ''}
+          </label>
+          {#if includeCaptions}
+            <div class="caption-sub-options">
+              <label class:disabled={!canBurnIn}>
+                <input type="checkbox" bind:checked={burnInCaptions} disabled={!canBurnIn} />
+                Burn into video
+              </label>
+              {#if !canBurnIn}
+                <p class="caption-note caption-note-warn">Burn-in requires ffmpeg compiled with libass (the <code>subtitles</code> filter). The standard Homebrew <code>ffmpeg</code> formula does not include it. Install the full build instead: <code>brew install ffmpeg-full</code>, then add <code>/opt/homebrew/opt/ffmpeg-full/bin</code> to your PATH ahead of the regular ffmpeg.</p>
+              {:else if burnInCaptions && cutMode === 'lossless'}
+                <p class="caption-note caption-note-warn">Burn-in requires re-encoding (precise mode will be used)</p>
+              {:else if burnInCaptions}
+                <p class="caption-note">Captions will be burned into the video with your style settings</p>
+              {:else}
+                <p class="caption-note">Captions will be muxed as a subtitle track</p>
+              {/if}
+            </div>
+          {/if}
+        </section>
+      {/if}
+
      <section>
        <h3>Save to</h3>
        <div class="row">
@@ -174,7 +246,13 @@
      {/if}

      {#if isExporting}
-        <div class="exporting">{exportProgress}</div>
+        <div class="exporting">
+          <div class="export-label">{exportProgress}</div>
+          <div class="export-progress-bar">
+            <div class="export-progress-fill" style="width: {exportClipPercent}%"></div>
+          </div>
+          <div class="export-percent">{exportClipPercent}%</div>
+        </div>
      {/if}

      <div class="actions">
@@ -263,6 +341,25 @@
    padding: 4px 8px;
  }

+  .caption-sub-options {
+    margin-left: 28px;
+  }
+
+  label.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .caption-note {
+    margin: 4px 0 0 0;
+    font-size: 12px;
+    color: var(--text-muted);
+  }
+
+  .caption-note-warn {
+    color: var(--warning, #f9e2af);
+  }
+
  .actions {
    display: flex;
    justify-content: flex-end;
@@ -280,9 +377,33 @@
    margin-bottom: 8px;
  }
  .exporting {
+    margin-bottom: 8px;
+  }
+
+  .export-label {
    color: var(--accent);
    font-size: 13px;
-    margin-bottom: 8px;
+    margin-bottom: 6px;
+  }
+
+  .export-progress-bar {
+    height: 6px;
+    background: var(--bg-primary);
+    border-radius: 3px;
+    overflow: hidden;
+    margin-bottom: 4px;
+  }
+
+  .export-progress-fill {
+    height: 100%;
+    background: var(--accent, #89b4fa);
+    border-radius: 3px;
+    transition: width 0.2s ease;
+  }
+
+  .export-percent {
+    font-size: 12px;
+    color: var(--text-secondary);
  }

  .waiting p {
--- a/src/lib/stores/preferences.svelte.ts
+++ b/src/lib/stores/preferences.svelte.ts
@@ -3,14 +3,56 @@ import type { CookieSource } from '$lib/bindings/dependencies';

 export type { CookieSource };

+export interface CaptionSettings {
+  fontFamily: string;
+  fontSize: number;
+  textColor: string;
+  bold: boolean;
+  outlineColor: string;
+  backgroundEnabled: boolean;
+  backgroundOpacity: number;
+  backgroundColor: string;
+  textOutline: boolean;
+  shadowEnabled: boolean;
+  shadowDepth: number;
+  shadowColor: string;
+  dimmedColorMode: 'auto' | 'custom';
+  dimmedOpacity: number;
+  dimmedColor: string;
+  position: 'bottom' | 'top';
+  wordHighlight: boolean;
+}
+
+export const DEFAULT_CAPTION_SETTINGS: CaptionSettings = {
+  fontFamily: 'Arial',
+  fontSize: 18,
+  textColor: '#ffffff',
+  bold: true,
+  outlineColor: '#000000',
+  backgroundEnabled: true,
+  backgroundOpacity: 0.75,
+  backgroundColor: '#000000',
+  textOutline: true,
+  shadowEnabled: false,
+  shadowDepth: 2,
+  shadowColor: '#000000',
+  dimmedColorMode: 'auto',
+  dimmedOpacity: 0.4,
+  dimmedColor: '#999999',
+  position: 'bottom',
+  wordHighlight: true,
+};
+
 export interface Preferences {
  outputDirectory: string;
  cookieSource: CookieSource;
+  captionSettings: CaptionSettings;
 }

 const DEFAULT_PREFERENCES: Preferences = {
  outputDirectory: '~/',
  cookieSource: { type: 'browser', browser: 'firefox' },
+  captionSettings: { ...DEFAULT_CAPTION_SETTINGS },
 };

 let store: Store | null = null;
@@ -27,8 +69,10 @@ export async function loadPreferences(): Promise<void> {
    store = await load('preferences.json', { autoSave: true });
    const savedDir = await store.get<string>('outputDirectory');
    const savedCookie = await store.get<CookieSource>('cookieSource');
+    const savedCaptions = await store.get<CaptionSettings>('captionSettings');
    if (savedDir) preferences.outputDirectory = savedDir;
    if (savedCookie) preferences.cookieSource = savedCookie;
+    if (savedCaptions) preferences.captionSettings = { ...DEFAULT_CAPTION_SETTINGS, ...savedCaptions };
  })();
  await loadPromise;
 }
@@ -40,6 +84,7 @@ export async function savePreferences(): Promise<void> {
  if (!store) return;
  await store.set('outputDirectory', preferences.outputDirectory);
  await store.set('cookieSource', preferences.cookieSource);
+  await store.set('captionSettings', preferences.captionSettings);
  await store.save();
 }

@@ -52,3 +97,8 @@ export async function setCookieSource(source: CookieSource): Promise<void> {
  preferences.cookieSource = source;
  await savePreferences();
 }
+
+export async function setCaptionSettings(settings: Partial<CaptionSettings>): Promise<void> {
+  Object.assign(preferences.captionSettings, settings);
+  await savePreferences();
+}