formats selection

ui/src/lib/Footer.svelte

@@ -44,7 +44,7 @@
   {#if $height > 100}
     <div class="mt-2">
       <NewDownload />
-      <Settings />
+      <!-- <Settings /> -->
     </div>
   {/if}
 </footer>

ui/src/lib/FormatsList.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { DLFormat } from './types';
+
+  let group = '';
+  export let formats: DLFormat[];
+</script>
+
+<div class="flex w-full flex-col items-center justify-center">
+  <div class="w-full px-4 py-16">
+    <div class="mx-auto w-full max-w-md">
+      <fieldset class="flex flex-col space-y-2">
+        {#each formats as format}
+          <div class="relative">
+            <input
+              id="startup"
+              class="absolute opacity-0 w-0 h-0 peer"
+              type="radio"
+              bind:group
+              name="type"
+              value="startup"
+            />
+            <label
+              for="startup"
+              class="[&_p]:text-gray-900 [&_span]:text-gray-500 peer-checked:[&_p]:text-white peer-checked:[&_span]:text-sky-100 peer-focus:ring-2 peer-focus:ring-white peer-focus:ring-opacity-60 peer-focus:ring-offset-2 peer-focus:ring-offset-sky-300 bg-white relative flex cursor-pointer rounded-lg px-5 py-4 shadow-md focus:outline-none peer-checked:bg-sky-900/75 peer-checked:text-white"
+            >
+              <div class="flex w-full items-center justify-between">
+                <div class="flex items-center">
+                  <div class="text-sm">
+                    <p class="font-medium" id="headlessui-label-:R5mm:">
+                      {format.resolution}
+                    </p>
+                    <span class="inline" id="headlessui-description-:R9mm:">
+                      <span>{format.vcodec}</span>
+                      <span aria-hidden="true">·</span>
+                      <span>{format.vcodec}</span></span
+                    >
+                  </div>
+                </div>
+                <div class="shrink-0 text-white">
+                  <svg viewBox="0 0 24 24" fill="none" class="h-6 w-6">
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="12"
+                      fill="#fff"
+                      opacity="0.2"
+                    /><path
+                      d="M7 13l3 3 7-7"
+                      stroke="#fff"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        {/each}
+      </fieldset>
+    </div>
+  </div>
+</div>

ui/src/lib/NewDownload.svelte

@@ -3,28 +3,47 @@
   import Button from './Button.svelte';
   import TextField from './TextField.svelte';
   import { downloadTemplates, rpcClient } from './store';
+  import Select from './Select.svelte';
+  import type { DLMetadata } from './types';
+  import FormatsList from './FormatsList.svelte';
 
   let url: string = '';
   let args: string = '';
-
-  $: console.log(args);
+  let metadata: DLMetadata;
 
   const download = () =>
     get(rpcClient).download({
       url,
       args,
     });
+
+  const getFormats = () =>
+    get(rpcClient)
+      .formats(url)
+      ?.then((f) => (metadata = f.result));
 </script>
 
-<div class="w-full">
-  <div class="flex gap-2 w-full mb-2">
-    <TextField label="url" class="w-96" bind:value={url} />
-    <TextField label="args" class="w-96" bind:value={args} />
+<div class="w-full px-8">
+  <div class="my-4 font-semibold text-xl">New download</div>
+  <div class="grid grid-cols-2 gap-2 w-full mb-2">
+    <TextField placeholder="https://..." label="URL" bind:value={url} />
+    <TextField
+      placeholder="arguments separated by space"
+      label="yt-dlp arguments"
+      bind:value={args}
+    />
+    <Select bind:value={args}>
+      <option selected disabled value=""> Select download template </option>
+      {#each $downloadTemplates as template}
+        <option id={template.id} value={template.content}>
+          {template.name}
+        </option>
+      {/each}
+    </Select>
   </div>
-  <Button on:click={download}>Download</Button>
-  <select bind:value={args}>
-    {#each $downloadTemplates as template}
-      <option id={template.id} value={template.content}>{template.name}</option>
-    {/each}
-  </select>
+  <Button class="mt-2" on:click={download}>Download</Button>
+  <Button class="mt-2" on:click={getFormats}>Select format</Button>
+  {#if metadata}
+    <FormatsList formats={metadata.formats} />
+  {/if}
 </div>

ui/src/lib/Select.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let value: any;
+
+  export let disabled: boolean = false;
+  export let placeholder: string = '';
+  export { clazz as class };
+</script>
+
+<select
+  class="p-2 bg-neutral-50 border rounded-lg appearance-none text-sm font-semibold"
+  bind:value
+  {disabled}
+  {placeholder}
+>
+  <slot />
+</select>

ui/src/lib/TextField.svelte

@@ -4,16 +4,18 @@
   export let value: any;
 
   export let disabled: boolean = false;
+  export let placeholder: string = '';
   export { clazz as class };
 </script>
 
-<div class="flex flex-col gap-0.5 text-sm">
+<div class="flex flex-col gap-0.5 text-sm font-semibold">
   <label for=""> {label} </label>
   <input
     type="text"
     class={`p-2 bg-neutral-50 border rounded-lg ${clazz}`}
     on:keyup
     bind:value
+    {placeholder}
     {disabled}
   />
 </div>