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

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

  let inputValue = $state('');

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

    setResolving();
    try {
      const meta = await resolveUrl(trimmed);
      setMetadata(meta);
    } 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://'))) {
      inputValue = text;
      setTimeout(handleSubmit, 50);
    }
  }
</script>

<div class="url-input">
  <input
    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}
  {#if session.error}
    <span class="error" title={session.error}>⚠</span>
  {/if}
</div>

<style>
  .url-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .url-input input {
    width: 100%;
  }
  .spinner {
    animation: pulse 1s ease-in-out infinite;
  }
  .error {
    color: var(--danger);
    cursor: help;
  }
  @keyframes pulse {
    0%,
    100% {
      opacity: 1;
    }
    50% {
      opacity: 0.4;
    }
  }
</style>