gui-video-clipper/src/lib/components/ExportDialog.svelte

<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';

  let { onClose }: { onClose: () => void } = $props();

  let clipScope = $state<'selected' | 'all'>('all');
  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 isExportReady = $derived(
    session.exportStatus === 'complete' && session.exportFilePath !== null
  );
  let exportDownloadPercent = $derived(Math.round(session.exportProgress * 100));
  let hasCaptions = $derived(session.captionFilePath !== null);

  let clipsToExport = $derived(
    clipScope === 'selected' && selectedId
      ? clips.filter((c) => c.id === selectedId)
      : clips
  );

  async function pickOutputDir() {
    const selected = await open({
      directory: true,
      defaultPath: preferences.outputDirectory,
      title: 'Choose export directory',
    });
    if (selected) {
      await setOutputDirectory(selected as string);
    }
  }

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

    isExporting = true;
    exportError = null;
    exportedPaths = [];

    const config: ExportConfig = {
      clips: clipsToExport.map((c) => ({
        id: c.id,
        startTime: c.startTime,
        endTime: c.endTime,
        label: c.label,
        color: c.color,
      })),
      cutMode:
        cutMode === 'lossless'
          ? { mode: 'lossless' }
          : { mode: 'precise', format: preciseFormat },
      exportScope:
        exportScope === 'individual'
          ? { scope: 'individual' }
          : { scope: 'merged' },
      outputDirectory: preferences.outputDirectory,
      videoTitle: session.title,
      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 {
      await exportClips(
        config,
        (current, total, label) => {
          exportProgress = `Exporting ${current}/${total}: ${label}`;
          exportClipPercent = 0;
          exportClipLabel = label;
        },
        (paths) => {
          exportedPaths = paths;
          isExporting = false;
        },
        (message) => {
          exportError = message;
          isExporting = false;
        },
        (current, total, label, percent) => {
          exportClipPercent = Math.round(percent * 100);
          exportClipLabel = label;
          exportProgress = `Exporting ${current}/${total}: ${label}`;
        }
      );
    } catch {
      if (!exportError) {
        isExporting = false;
      }
    }
  }
</script>

<div class="overlay" role="presentation" onclick={onClose}>
  <div class="dialog" role="dialog" onclick={(e) => e.stopPropagation()}>
    <h2>Export Clips</h2>

    {#if !isExportReady}
      <div class="waiting">
        <p>Downloading best quality ({exportDownloadPercent}%)…</p>
        <div class="progress-bar">
          <div class="progress-fill" style="width: {exportDownloadPercent}%"></div>
        </div>
      </div>
    {:else if exportedPaths.length > 0}
      <div class="success">
        <h3>✓ Export complete</h3>
        {#each exportedPaths as path}
          <code class="path">{path}</code>
        {/each}
        <button class="primary" onclick={onClose}>Done</button>
      </div>
    {:else}
      <section>
        <h3>Clips to export</h3>
        <label>
          <input type="radio" bind:group={clipScope} value="all" />
          All clips ({clips.length})
        </label>
        {#if selectedId}
          <label>
            <input type="radio" bind:group={clipScope} value="selected" />
            Selected clip only
          </label>
        {/if}
      </section>

      <section>
        <h3>Output mode</h3>
        <label>
          <input type="radio" bind:group={exportScope} value="individual" />
          Individual files
        </label>
        <label>
          <input type="radio" bind:group={exportScope} value="merged" />
          Merged into one video
        </label>
      </section>

      <section>
        <h3>Cut mode</h3>
        <label>
          <input type="radio" bind:group={cutMode} value="lossless" />
          Lossless (fast, keyframe-aligned)
        </label>
        <label>
          <input type="radio" bind:group={cutMode} value="precise" />
          Precise (re-encode, exact frames)
        </label>
        {#if cutMode === 'precise'}
          <div class="format-select">
            <label>
              Format:
              <select bind:value={preciseFormat}>
                <option value="mp4">MP4 (H.264)</option>
                <option value="mkv">MKV</option>
                <option value="webm">WebM</option>
              </select>
            </label>
          </div>
        {/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">
          <code class="path">{preferences.outputDirectory}</code>
          <button onclick={pickOutputDir}>Change…</button>
        </div>
      </section>

      {#if exportError}
        <div class="error">{exportError}</div>
      {/if}

      {#if isExporting}
        <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">
        <button onclick={onClose}>Cancel</button>
        <button
          class="primary"
          onclick={handleExport}
          disabled={isExporting || clipsToExport.length === 0}
        >
          Export
        </button>
      </div>
    {/if}
  </div>
</div>

<style>
  .overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
  }

  .dialog {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px 32px;
    max-width: 480px;
    width: 100%;
  }

  h2 {
    margin-bottom: 16px;
  }
  h3 {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
  }

  section {
    margin-bottom: 16px;
  }

  label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 4px;
  }

  .row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .path {
    background: var(--bg-primary);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 13px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .format-select {
    margin-top: 4px;
    margin-left: 24px;
  }

  select {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    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;
    gap: 12px;
    margin-top: 16px;
  }
  .primary {
    background: var(--accent);
    color: var(--bg-primary);
    font-weight: 600;
  }
  .error {
    color: var(--danger);
    font-size: 13px;
    margin-bottom: 8px;
  }
  .exporting {
    margin-bottom: 8px;
  }

  .export-label {
    color: var(--accent);
    font-size: 13px;
    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 {
    color: var(--text-secondary);
    margin-bottom: 8px;
  }
  .progress-bar {
    height: 4px;
    background: var(--bg-primary);
    border-radius: 2px;
    overflow: hidden;
  }
  .progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.3s;
  }

  .success h3 {
    color: var(--success);
    margin-bottom: 12px;
  }
  .success .path {
    display: block;
    margin-bottom: 8px;
  }
  .success .primary {
    margin-top: 12px;
  }
</style>