From f782cad21325006552de1cd50d312f7c17918eba Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 10 Jul 2025 01:02:38 +0300
Subject: [PATCH] minor download form improvements.

---
 ui/@types/item.d.ts           |   2 +
 ui/@types/responses.d.ts      |  18 +++
 ui/components/NewDownload.vue | 204 ++++++++++++++++++----------------
 ui/utils/index.js             |  21 ----
 ui/utils/utils.ts             |  24 ++++
 5 files changed, 151 insertions(+), 118 deletions(-)
 create mode 100644 ui/@types/responses.d.ts
 create mode 100644 ui/utils/utils.ts

diff --git a/ui/@types/item.d.ts b/ui/@types/item.d.ts
index 51abcfff..547d2666 100644
--- a/ui/@types/item.d.ts
+++ b/ui/@types/item.d.ts
@@ -1,4 +1,6 @@
 export type item_request = {
+  /** Unique identifier for the item */
+  id?: string|null,
   /** URL of the item to download */
   url: string,
   /** Preset to use for the download */
diff --git a/ui/@types/responses.d.ts b/ui/@types/responses.d.ts
new file mode 100644
index 00000000..377ed414
--- /dev/null
+++ b/ui/@types/responses.d.ts
@@ -0,0 +1,18 @@
+export type error_response = {
+  /** The error message */
+  error: string,
+}
+
+export type convert_args_response = {
+  /** The converted CLI args */
+  opts?: Record<string, any>,
+  /** The output template if was provided */
+  output_template?: string,
+  /** The download path if was provided */
+  download_path?: string,
+  /** The download format if was provided */
+  format?: string,
+  /** The removed options from the original CLI args if any. */
+  removed_options?: string[],
+}
+
diff --git a/ui/components/NewDownload.vue b/ui/components/NewDownload.vue
index 6a2ae274..5238feba 100644
--- a/ui/components/NewDownload.vue
+++ b/ui/components/NewDownload.vue
@@ -7,33 +7,31 @@
             <div class="column is-12">
               <label class="label is-inline is-unselectable" for="url">
                 <span class="icon"><i class="fa-solid fa-link" /></span>
-                URLs
+                URLs. separated by <span class="is-bold">{{ getSeparatorsName(separator) }}</span>
               </label>
               <div class="field is-grouped">
                 <div class="control is-expanded">
-                  <input type="text" class="input" id="url" placeholder="Video or playlist link"
+                  <input type="text" class="input" id="url" placeholder="URLs to download"
                     :disabled="!socket.isConnected || addInProgress" v-model="form.url">
                 </div>
-                <div class="control is-align-content-space-around" v-if="!config.app.basic_mode"
-                v-tooltip="'Auto start the download after adding it.'">
-                  <input id="auto_start" type="checkbox" v-model="auto_start" :disabled="addInProgress"
-                    class="switch is-success" />
-                  <label for="auto_start" class="is-unselectable">Start</label>
+                <div class="control">
+                  <button type="submit" class="button is-primary"
+                    :class="{ 'is-loading': !socket.isConnected || addInProgress }"
+                    :disabled="!socket.isConnected || addInProgress || !form?.url">
+                    <span class="icon"><i class="fa-solid fa-plus" /></span>
+                    <span>Add</span>
+                  </button>
                 </div>
               </div>
-              <span class="help is-bold is-unselectable">
-                <span class="icon"><i class="fa-solid fa-info" /></span>
-                <span>You can add multiple URLs separated by <code
-                    class="is-bold">{{ getSeparatorsName(separator) }}</code>.</span>
-              </span>
             </div>
+
             <div class="column is-4-tablet is-12-mobile" v-if="!config.app.basic_mode">
               <div class="field has-addons">
-                <div class="control">
-                  <a href="#" class="button is-static">
+                <div class="control" @click="show_description = !show_description">
+                  <label class="button is-static">
                     <span class="icon"><i class="fa-solid fa-sliders" /></span>
                     <span>Preset</span>
-                  </a>
+                  </label>
                 </div>
                 <div class="control is-expanded">
                   <div class="select is-fullwidth">
@@ -55,13 +53,14 @@
                 </div>
               </div>
             </div>
+
             <div class="column is-6-tablet is-12-mobile" v-if="!config.app.basic_mode">
               <div class="field has-addons" v-tooltip="'Folder relative to ' + config.app.download_path">
                 <div class="control">
-                  <a href="#" class="button is-static">
+                  <label class="button is-static">
                     <span class="icon"><i class="fa-solid fa-folder" /></span>
                     <span>Save in</span>
-                  </a>
+                  </label>
                 </div>
                 <div class="control is-expanded">
                   <input type="text" class="input is-fullwidth" id="path" v-model="form.folder" placeholder="Default"
@@ -69,23 +68,24 @@
                 </div>
               </div>
             </div>
-            <div class="column">
-              <button type="submit" class="button is-primary"
-                :class="{ 'is-loading': !socket.isConnected || addInProgress }"
-                :disabled="!socket.isConnected || addInProgress || !form?.url">
-                <span class="icon"><i class="fa-solid fa-plus" /></span>
-                <span>Add</span>
-              </button>
+
+            <div class="column is-narrow" v-if="!config.app.basic_mode"
+              v-tooltip="`Automatically start downloading after adding. [${auto_start ? 'Enabled' : 'Disabled'}]`">
+              <input id="auto_start" type="checkbox" v-model="auto_start" :disabled="addInProgress"
+                class="switch is-success" />
+              <label for="auto_start" class="is-unselectable"></label>
             </div>
+
             <div class="column" v-if="!config.app.basic_mode">
               <button type="button" class="button is-info" @click="showAdvanced = !showAdvanced"
                 :class="{ 'is-loading': !socket.isConnected }" :disabled="!socket.isConnected">
                 <span class="icon"><i class="fa-solid fa-cog" /></span>
-                <span>Opts</span>
+                <span>Options</span>
               </button>
             </div>
+
             <div class="column is-12"
-              v-if="!config.app.basic_mode && !hasFormatInConfig && get_preset(form.preset)?.description">
+              v-if="show_description && !config.app.basic_mode && !hasFormatInConfig && get_preset(form.preset)?.description">
               <div class="is-overflow-auto" style="max-height: 150px;">
                 <div class="is-ellipsis is-clickable" @click="expand_description">
                   <span class="icon"><i class="fa-solid fa-info" /></span> {{ get_preset(form.preset)?.description }}
@@ -96,12 +96,14 @@
 
           <div class="columns is-multiline is-mobile" v-if="showAdvanced && !config.app.basic_mode">
             <div class="column is-4-tablet is-12-mobile" v-if="!config.app.basic_mode">
-              <div class="field">
-                <label class="label is-inline is-unselectable">
-                  <span class="icon"><i class="fa-solid fa-object-ungroup" /></span>
-                  <span>URLs Separator</span>
-                </label>
+              <div class="field has-addons">
                 <div class="control">
+                  <label class="button is-static">
+                    <span class="icon"><i class="fa-solid fa-object-ungroup" /></span>
+                    <span>Separator</span>
+                  </label>
+                </div>
+                <div class="control is-expanded">
                   <div class="select is-fullwidth">
                     <select class="is-fullwidth" :disabled="!socket.isConnected || addInProgress" v-model="separator">
                       <option v-for="(sep, index) in separators" :key="`sep-${index}`" :value="sep.value">
@@ -110,31 +112,33 @@
                     </select>
                   </div>
                 </div>
-                <span class="help is-bold">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Use this to separate multiple URLs in the input field.</span>
-                </span>
               </div>
+              <span class="help is-bold is-unselectable">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>Use this to separate multiple URLs in the input field.</span>
+              </span>
             </div>
 
             <div class="column is-8-tablet is-12-mobile">
-              <div class="field">
-                <label class="label is-inline is-unselectable" for="output_format"
-                  v-tooltip="'Default: ' + config.app.output_template">
-                  <span class="icon"><i class="fa-solid fa-file" /></span>
-                  Output Template
-                </label>
+              <div class="field has-addons">
                 <div class="control">
+                  <label for="output_format" v-tooltip="'Default: ' + config.app.output_template"
+                    class="button is-static is-unselectable">
+                    <span class="icon"><i class="fa-solid fa-file" /></span>
+                    <span>Template</span>
+                  </label>
+                </div>
+                <div class="control is-expanded">
                   <input type="text" class="input" v-model="form.template" id="output_format"
                     :disabled="!socket.isConnected || addInProgress"
                     placeholder="Uses default output template naming if empty.">
                 </div>
-                <span class="help is-bold">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>All output template naming options can be found at <NuxtLink target="_blank"
-                      to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.</span>
-                </span>
               </div>
+              <span class="help is-bold is-unselectable">
+                <span class="icon"><i class="fa-solid fa-info" /></span>
+                <span>All output template naming options can be found at <NuxtLink target="_blank"
+                    to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.</span>
+              </span>
             </div>
 
             <div class="column is-6-tablet is-12-mobile">
@@ -154,7 +158,7 @@
                   <span>Check <NuxtLink target="_blank" to="https://github.com/yt-dlp/yt-dlp#general-options">this page
                     </NuxtLink> for more info. <span class="has-text-danger">Not all options are supported <NuxtLink
                         target="_blank"
-                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L24-L46">some are
+                        to="https://github.com/arabcoders/ytptube/blob/master/app/library/Utils.py#L26-L48">some are
                         ignored</NuxtLink>. Use with caution these options can break yt-dlp or the frontend.</span>
                   </span>
                 </span>
@@ -222,7 +226,7 @@
 
                 <div class="control">
                   <button type="button" class="button is-danger" @click="resetConfig"
-                    :disabled="!socket.isConnected || form?.id" v-tooltip="'Reset local settings'">
+                    :disabled="!!(!socket.isConnected || form?.id)" v-tooltip="'Reset local settings'">
                     <span class="icon"><i class="fa-solid fa-rotate-left" /></span>
                     <span>Reset</span>
                   </button>
@@ -237,22 +241,23 @@
     <datalist id="folders" v-if="config?.folders">
       <option v-for="dir in config.folders" :key="dir" :value="dir" />
     </datalist>
+    <ConfirmDialog v-if="dialog_confirm.visible" :visible="dialog_confirm.visible" :title="dialog_confirm.title"
+      :message="dialog_confirm.message" :options="dialog_confirm.options" @confirm="dialog_confirm.confirm"
+      @cancel="() => dialog_confirm.visible = false" />
   </main>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import 'assets/css/bulma-switch.css'
 import { useStorage } from '@vueuse/core'
+import type { item_request } from '~/@types/item'
 
-const props = defineProps({
-  item: {
-    type: Object,
-    required: false,
-    default: () => { },
-  },
-})
-
-const emitter = defineEmits(['getInfo', 'clear_form', 'remove_archive'])
+const props = defineProps<{ item?: Partial<item_request> }>()
+const emitter = defineEmits<{
+  (e: 'getInfo', url: string, preset: string | undefined): void
+  (e: 'clear_form'): void
+  (e: 'remove_archive', url: string): void
+}>()
 const config = useConfigStore()
 const socket = useSocketStore()
 const toast = useNotification()
@@ -266,18 +271,19 @@ const separators = [
   { name: 'Space', value: ' ', }
 ]
 
-const getSeparatorsName = (value) => {
+const getSeparatorsName = (value: string): string => {
   const sep = separators.find(s => s.value === value)
   return sep ? `${sep.name} (${value})` : 'Unknown'
 }
 
-const showAdvanced = useStorage('show_advanced', false)
-const separator = useStorage('url_separator', separators[0].value)
-const auto_start = useStorage('auto_start', true)
+const showAdvanced = useStorage<boolean>('show_advanced', false)
+const separator = useStorage<string>('url_separator', separators[0].value)
+const auto_start = useStorage<boolean>('auto_start', true)
+const show_description = useStorage<boolean>('show_description', true)
 
-const addInProgress = ref(false)
+const addInProgress = ref<boolean>(false)
 
-const form = useStorage('local_config_v1', {
+const form = useStorage<item_request>('local_config_v1', {
   id: null,
   url: '',
   preset: config.app.default_preset,
@@ -286,6 +292,14 @@ const form = useStorage('local_config_v1', {
   template: '',
   folder: '',
   extras: {},
+}) as Ref<item_request>
+
+const dialog_confirm = ref({
+  visible: false,
+  title: 'Confirm Action',
+  confirm: () => { },
+  message: '',
+  options: [],
 })
 
 const addDownload = async () => {
@@ -296,9 +310,9 @@ const addDownload = async () => {
     }
   }
 
-  const request_data = []
+  const request_data = [] as Array<item_request>
 
-  form.value.url.split(separator.value).forEach(async (url) => {
+  form.value.url.split(separator.value).forEach(async (url: string) => {
     if (!url.trim()) {
       return
     }
@@ -311,7 +325,7 @@ const addDownload = async () => {
       cookies: config.app.basic_mode ? '' : form.value.cookies,
       cli: config.app.basic_mode ? null : form.value.cli,
       auto_start: config.app.basic_mode ? true : auto_start.value
-    }
+    } as item_request
 
     if (form.value?.extras && Object.keys(form.value.extras).length > 0) {
       data.extras = form.value.extras
@@ -334,7 +348,7 @@ const addDownload = async () => {
       return
     }
 
-    data.forEach(item => {
+    data.forEach((item: Record<string, any>) => {
       if (false !== item.status) {
         return
       }
@@ -344,7 +358,7 @@ const addDownload = async () => {
     form.value.url = ''
     emitter('clear_form')
   }
-  catch (e) {
+  catch (e: any) {
     console.error(e)
     toast.error(`Error: ${e.message}`)
   } finally {
@@ -353,12 +367,13 @@ const addDownload = async () => {
 }
 
 const resetConfig = () => {
-  if (true !== box.confirm('Reset your local configuration?')) {
-    return
-  }
+  dialog_confirm.value.visible = true
+  dialog_confirm.value.message = `Reset local configuration?`
+  dialog_confirm.value.confirm = reset_config
+}
 
+const reset_config = () => {
   form.value = {
-    id: null,
     url: '',
     preset: config.app.default_preset,
     cookies: '',
@@ -366,15 +381,16 @@ const resetConfig = () => {
     template: '',
     folder: '',
     extras: {},
-  }
+  } as item_request
 
   showAdvanced.value = false
   separator.value = separators[0].value
 
   toast.success('Local configuration has been reset.')
+  dialog_confirm.value.visible = false
 }
 
-const convertOptions = async args => {
+const convertOptions = async (args: string) => {
   try {
     const response = await convertCliOptions(args)
 
@@ -387,7 +403,7 @@ const convertOptions = async args => {
     }
 
     return response.opts
-  } catch (e) {
+  } catch (e: any) {
     toast.error(e.message)
   }
 
@@ -418,36 +434,30 @@ onMounted(async () => {
   }
 
   if (props?.item) {
-    Object.keys(props.item).forEach(key => {
-      if (key in form.value) {
-        let value = props.item[key]
-        if ('extras' === key) {
-          value = JSON.parse(JSON.stringify(props.item[key]))
-        }
-        form.value[key] = value
-      }
-    })
-    emitter('clear_form');
+    const updates: Partial<item_request> = {}
+    const keys = Object.keys(props.item) as (keyof item_request)[]
+    for (const key of keys) {
+      const value = props.item[key]
+      updates[key] = key === 'extras' ? JSON.parse(JSON.stringify(value)) : value!
+    }
+    form.value = { ...form.value, ...updates }
+    emitter('clear_form')
   }
 
   await nextTick()
+
   if (!separators.some(s => s.value === separator.value)) {
     separator.value = separators[0].value
   }
 })
 
-const hasFormatInConfig = computed(() => {
-  if (!form.value?.cli) {
-    return false
-  }
-  return /(?<!\S)(-f|--format)(=|\s)(\S+)/.test(form.value.cli)
-})
+const hasFormatInConfig = computed((): boolean => !!form.value.cli?.match(/(?<!\S)(-f|--format)(=|\s)(\S+)/))
 
-const filter_presets = (flag = true) => config.presets.filter(item => item.default === flag)
-const get_preset = name => config.presets.find(item => item.name === name)
-const expand_description = e => toggleClass(e.target, ['is-ellipsis', 'is-pre-wrap'])
+const filter_presets = (flag: boolean = true) => config.presets.filter(item => item.default === flag)
+const get_preset = (name: string | undefined) => config.presets.find(item => item.name === name)
+const expand_description = (e: Event) => toggleClass(e.target, ['is-ellipsis', 'is-pre-wrap'])
 
-const removeFromArchive = async url => {
+const removeFromArchive = async (url: string) => {
   try {
     const req = await request(`/api/archive/0`, {
       credentials: 'include',
@@ -463,7 +473,7 @@ const removeFromArchive = async url => {
     }
 
     toast.success(data.message ?? `Removed item from archive.`)
-  } catch (e) {
+  } catch (e: any) {
     toast.error(`Error: ${e.message}`)
   }
 }
diff --git a/ui/utils/index.js b/ui/utils/index.js
index 9d4a4d2c..5a1aaea6 100644
--- a/ui/utils/index.js
+++ b/ui/utils/index.js
@@ -385,26 +385,6 @@ const formatBytes = (bytes, decimals = 2) => {
 }
 
 
-/**
- * Convert options to JSON
- *
- * @param {string} opts
- *
- * @returns {Promise<string>}
- */
-const convertCliOptions = async opts => {
-  const response = await request('/api/yt-dlp/convert', {
-    method: 'POST',
-    body: JSON.stringify({ args: opts }),
-  });
-
-  const data = await response.json()
-  if (200 !== response.status) {
-    throw new Error(`Error: (${response.status}): ${data.error}`)
-  }
-
-  return data
-}
 
 /**
  * Check if array or object has data.
@@ -513,7 +493,6 @@ export {
   getQueryParams,
   makeDownload,
   formatBytes,
-  convertCliOptions,
   has_data,
   toggleClass,
   cleanObject,
diff --git a/ui/utils/utils.ts b/ui/utils/utils.ts
new file mode 100644
index 00000000..e873864d
--- /dev/null
+++ b/ui/utils/utils.ts
@@ -0,0 +1,24 @@
+import type { convert_args_response } from "~/@types/responses";
+
+/**
+ * Convert options to JSON
+ *
+ * @param {string} opts
+ *
+ * @returns {Promise<convert_args_response>} The converted options
+ */
+const convertCliOptions = async (opts: string): Promise<convert_args_response> => {
+  const response = await request('/api/yt-dlp/convert', {
+    method: 'POST',
+    body: JSON.stringify({ args: opts }),
+  });
+
+  const data = await response.json()
+  if (200 !== response.status) {
+    throw new Error(`Error: (${response.status}): ${data.error}`)
+  }
+
+  return data
+}
+
+export { convertCliOptions }