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

<script lang="ts">
  import { resolveUrl } from '$lib/bindings/video';
  import {
    session,
    setMetadata,
    setError,
    setResolving,
    beginDownload,
  } from '$lib/stores/videoSession.svelte';

  let inputValue = $state('');
  let inputEl = $state<HTMLInputElement | null>(null);

  function blurInput() {
    inputEl?.blur();
  }

  async function handleSubmit() {
    const trimmed = inputValue.trim();
    if (!trimmed) return;

    blurInput();
    setResolving();
    try {
      const meta = await resolveUrl(trimmed);
      setMetadata(meta);
      void beginDownload();
    } catch (e) {
      setError(String(e));
    }
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === 'Enter') {
      handleSubmit();
    }
  }

  function handlePaste(e: ClipboardEvent) {
    const text = e.clipboardData?.getData('text')?.trim();
    if (text && (text.startsWith('http://') || text.startsWith('https://'))) {
      e.preventDefault();
      inputValue = text;
      setTimeout(handleSubmit, 50);
    }
  }
</script>

<div class="url-input-wrapper">
  <div class="url-input">
    <input
      bind:this={inputEl}
      type="text"
      placeholder="Paste a video URL and press Enter…"
      bind:value={inputValue}
      onkeydown={handleKeydown}
      onpaste={handlePaste}
      disabled={session.status === 'resolving'}
    />
    {#if session.status === 'resolving'}
      <span class="spinner">⏳</span>
    {/if}
  </div>
  {#if session.error}
    <div class="error-bar" title={session.error}>⚠ {session.error}</div>
  {/if}
</div>

<style>
  .url-input-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .url-input {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .url-input input {
    width: 100%;
  }
  .spinner {
    animation: pulse 1s ease-in-out infinite;
  }
  .error-bar {
    color: var(--danger);
    font-size: 12px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
  }
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
</style>