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

<script lang="ts">
  import {
    clipStore,
    selectClip,
    removeClip,
    updateClip,
  } from '$lib/stores/clips.svelte';
  import { formatTime, parseTime } from '$lib/utils/time';
  import { session } from '$lib/stores/videoSession.svelte';

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

  let clips = $derived(clipStore.clips);
  let selectedId = $derived(clipStore.selectedClipId);

  function handleSelect(id: string) {
    selectClip(id);
    const clip = clips.find((c) => c.id === id);
    if (clip) {
      session.currentTime = clip.startTime;
      const videoEl = document.querySelector('video');
      if (videoEl) videoEl.currentTime = clip.startTime;
    }
  }

  function handleTimeEdit(clipId: string, field: 'startTime' | 'endTime', value: string) {
    const parsed = parseTime(value);
    if (parsed !== null) {
      updateClip(clipId, { [field]: parsed });
    }
  }

  function handleLabelEdit(clipId: string, value: string) {
    updateClip(clipId, { label: value });
  }

  function handleContainerClick(e: MouseEvent) {
    const target = e.target as HTMLElement;
    // Only deselect if the click landed on the container itself, not a child
    if (target.classList.contains('clip-list')) {
      selectClip(null);
    }
  }
</script>

<div
  class="clip-list"
  role="listbox"
  tabindex="0"
  onclick={handleContainerClick}
  onkeydown={(e) => {
    if (e.key === 'Escape') {
      selectClip(null);
    }
  }}
>
  {#if clips.length === 0}
    <div class="empty">No clips yet — press I to mark in-point, O to mark out-point</div>
  {:else}
    <div class="header">
      <span>CLIPS ({clips.length})</span>
    </div>
    {#each clips as clip (clip.id)}
      <div
        class="clip-row"
        class:selected={clip.id === selectedId}
        role="option"
        aria-selected={clip.id === selectedId}
        tabindex="0"
        onclick={() => handleSelect(clip.id)}
        onkeydown={(e) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            handleSelect(clip.id);
          }
        }}
      >
        <span class="color-swatch" style="background: {clip.color}"></span>
        <input
          class="label-input"
          type="text"
          value={clip.label}
          onchange={(e) => handleLabelEdit(clip.id, (e.target as HTMLInputElement).value)}
          onclick={(e) => e.stopPropagation()}
        />
        <input
          class="time-input"
          type="text"
          value={formatTime(clip.startTime)}
          onchange={(e) =>
            handleTimeEdit(clip.id, 'startTime', (e.target as HTMLInputElement).value)}
          onclick={(e) => e.stopPropagation()}
        />
        <span class="arrow">→</span>
        <input
          class="time-input"
          type="text"
          value={formatTime(clip.endTime)}
          onchange={(e) =>
            handleTimeEdit(clip.id, 'endTime', (e.target as HTMLInputElement).value)}
          onclick={(e) => e.stopPropagation()}
        />
        <button
          class="delete-btn"
          onclick={(e) => {
            e.stopPropagation();
            removeClip(clip.id);
          }}
          title="Delete clip"
        >✕</button>
      </div>
    {/each}
    <div class="action-buttons">
      {#if selectedId}
        <button type="button" class="deselect-btn" onclick={() => selectClip(null)}>Deselect</button>
      {/if}
      {#if onExport}
        <button type="button" onclick={() => onExport()}>Export All</button>
      {/if}
    </div>
  {/if}
</div>

<style>
  .clip-list {
    padding: 8px 12px;
    background: var(--bg-secondary);
    height: 100%;
    min-height: 40px;
    overflow-y: auto;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
  }

  .empty {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
  }

  .header {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
  }

  .action-buttons {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
  }

  .action-buttons button {
    font-size: 13px;
    padding: 6px 12px;
  }

  .deselect-btn {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
  }

  .clip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 1px solid transparent;
  }

  .clip-row:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
  }

  .clip-row.selected {
    border-color: var(--accent);
    background: var(--bg-tertiary);
  }

  .color-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    flex-shrink: 0;
  }

  .label-input {
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    width: 80px;
    padding: 2px 4px;
  }

  .label-input:focus {
    background: var(--bg-primary);
    outline: 1px solid var(--accent);
    border-radius: 2px;
  }

  .time-input {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 12px;
    width: 85px;
    padding: 2px 4px;
    text-align: center;
  }

  .time-input:focus {
    background: var(--bg-primary);
    outline: 1px solid var(--accent);
    border-radius: 2px;
  }

  .arrow {
    color: var(--text-muted);
    font-size: 12px;
  }

  .delete-btn {
    font-size: 14px;
    padding: 2px 6px;
    color: var(--text-muted);
    background: transparent;
  }

  .delete-btn:hover {
    color: var(--danger);
    background: transparent;
  }
</style>