Merge pull request #188 from arabcoders/dev

Minor frontend improvements

README.md

@@ -43,13 +43,12 @@ Your `yt-dlp` config should include the following options for optimal working co
 ## Run using Docker
 
 ```bash
-docker run -d --name ytptube -p 8081:8081 -v ./config:/config:rw -v ./downloads:/downloads:rw ghcr.io/arabcoders/ytptube
+docker run -d --rm --name ytptube -p 8081:8081 -v ./config:/config:rw -v ./downloads:/downloads:rw ghcr.io/arabcoders/ytptube
 ```
 
-## Run using docker-compose
+## Run using compose file.
 
 ```yaml
-version: "3.9"
 services:
   ytptube:
     user: "1000:1000"
@@ -67,7 +66,7 @@ services:
 
 ## Configuration via environment variables
 
-Certain values can be set via environment variables, using the `-e` parameter on the docker command line, or the `environment:` section in docker-compose.
+Certain values can be set via environment variables, using the `-e` parameter on the docker command line, or the `environment:` section in `compose.yaml` file.
 
 * __YTP_CONFIG_PATH__: path to where the queue persistence files will be saved. Defaults to `/config` in the docker image, and `./var/config` otherwise.
 * __YTP_DOWNLOAD_PATH__: path to where the downloads will be saved. Defaults to `/downloads` in the docker image, and `./var/downloads` otherwise.
@@ -99,7 +98,8 @@ Certain values can be set via environment variables, using the `-e` parameter on
 * __YTP_PIP_IGNORE_UPDATES__: Do not update the custom pip packages. Defaults to `false`.
 * __YTP_BASIC_MODE__: Whether to run WebUI in basic mode. Defaults to `false`. In basic mode, A minimal UI will be shown, the majority of the features will be disabled.
 * __YTP_DEFAULT_PRESET__: The default preset to use for the download. Defaults to `default`.
-
+* __YTP_INSTANCE_TITLE__: The title of the instance. Defaults to empty string.
+  
 ## Running behind a reverse proxy
 
 It's advisable to run YTPTube behind a reverse proxy, if authentication and/or HTTPS support are required.
@@ -237,6 +237,11 @@ The `config/ytdlp.json`, is a json file which can be used to alter the default `
   ]
 }
 ``` 
+The options can be fount at [yt-dlp YoutubeDL.py](https://github.com/yt-dlp/yt-dlp/blob/master/yt_dlp/YoutubeDL.py#L214) file.
+And for the postprocessors at [yt-dlp postprocessor](https://github.com/yt-dlp/yt-dlp/tree/master/yt_dlp/postprocessor).
+
+> [!NOTE]
+> You can use the `yt-dlp json config` box in the new Download page to convert your cli options to json format.
 
 ### presets.json File
 

app/library/config.py

@@ -136,6 +136,9 @@ class Config:
     default_preset: str = "default"
     "The default preset to use when no preset is specified."
 
+    instance_title: str | None = None
+    "The title of the instance."
+
     _manual_vars: tuple = (
         "temp_path",
         "config_path",
@@ -191,6 +194,7 @@ class Config:
         "max_workers",
         "basic_mode",
         "default_preset",
+        "instance_title",
     )
     "The variables that are relevant to the frontend."
 

ui/components/NewDownload.vue

@@ -70,8 +70,9 @@
                     placeholder="Uses default output template naming if empty.">
                 </div>
                 <span class="help">
-                  All output template naming options can be found at <NuxtLink target="_blank"
+                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                    to="https://github.com/yt-dlp/yt-dlp#output-template">this page</NuxtLink>.
+                  <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>
@@ -80,33 +81,36 @@
                 <label class="label is-inline" for="ytdlpConfig"
                   v-tooltip="'Extends current global yt-dlp config. (JSON)'">
                   JSON yt-dlp config or CLI options.
+                  <NuxtLink v-if="ytdlpConfig && !ytdlpConfig.trim().startsWith('{')" @click="convertOptions()">
+                    Convert to JSON
+                  </NuxtLink>
                 </label>
                 <div class="control">
                   <textarea class="textarea" id="ytdlpConfig" v-model="ytdlpConfig"
-                    :disabled="!socket.isConnected || addInProgress"
+                    :disabled="!socket.isConnected || addInProgress || convertInProgress"
                     placeholder="--no-embed-metadata --no-embed-thumbnail"></textarea>
                 </div>
                 <span class="help">
-                  Some config fields are ignored like <code>format</code> <code>cookiefile</code>, <code>paths</code>,
+                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  and <code>outtmpl</code> etc. Available option can be found at <NuxtLink target="_blank"
+                  <span>Extends current global yt-dlp config with given options. Some fields are ignored like
-                    to="https://github.com/yt-dlp/yt-dlp/blob/a0b19d319a6ce8b7059318fa17a34b144fde1785/yt_dlp/YoutubeDL.py#L194">
+                    <code>format</code> <code>cookiefile</code>, <code>paths</code>, and <code>outtmpl</code> etc.
-                    this page</NuxtLink>. Warning: Use with caution some of those options can break yt-dlp or the
+                    Warning: Use with caution some of those options can break yt-dlp or the frontend.</span>
-                  frontend.
                 </span>
               </div>
             </div>
             <div class="column is-6-tablet is-12-mobile">
               <div class="field">
                 <label class="label is-inline" for="ytdlpCookies" v-tooltip="'JSON exported cookies for downloading.'">
-                  yt-dlp Cookies
+                  Cookies
                 </label>
                 <div class="control">
                   <textarea class="textarea" id="ytdlpCookies" v-model="ytdlpCookies"
                     :disabled="!socket.isConnected || addInProgress"></textarea>
                 </div>
                 <span class="help">
-                  Use <NuxtLink target="_blank" to="https://github.com/jrie/flagCookies">
+                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                    flagCookies</NuxtLink> to extract cookies as JSON string.
+                  <span>Use <NuxtLink target="_blank" to="https://github.com/jrie/flagCookies">
+                      flagCookies</NuxtLink> to extract cookies as JSON string.</span>
                 </span>
               </div>
             </div>
@@ -157,25 +161,12 @@ const downloadPath = useStorage('downloadPath', null)
 const url = useStorage('downloadUrl', null)
 const showAdvanced = useStorage('show_advanced', false)
 const addInProgress = ref(false)
+const convertInProgress = ref(false)
 
 const addDownload = async () => {
   // -- send request to convert cli options to JSON
   if (ytdlpConfig.value && !ytdlpConfig.value.trim().startsWith('{')) {
-    const response = await request('/api/yt-dlp/convert', {
+    await convertOptions()
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ args: ytdlpConfig.value }),
-    });
-
-    const data = await response.json()
-    if (200 !== response.status) {
-      toast.error(`Error: (${response.status}): ${data.error}`)
-      return
-    }
-
-    ytdlpConfig.value = JSON.stringify(data, null, 2)
   }
 
   if (ytdlpConfig.value) {
@@ -242,6 +233,21 @@ const unlockDownload = async stream => {
   }
 }
 
+const convertOptions = async () => {
+  if (convertInProgress.value) {
+    return
+  }
+
+  try {
+    convertInProgress.value = true
+    ytdlpConfig.value = await convertCliOptions(ytdlpConfig.value)
+  } catch (e) {
+    toast.error(e.message)
+  } finally {
+    convertInProgress.value = false
+  }
+}
+
 onMounted(() => {
   socket.on('status', statusHandler)
   socket.on('error', unlockDownload)

ui/components/TaskForm.vue

@@ -127,7 +127,8 @@
             <div class="column is-6-tablet is-12-mobile">
               <div class="field">
                 <label class="label is-inline" for="config" v-tooltip="'Extends current global yt-dlp config. (JSON)'">
-                  JSON yt-dlp config or CLI options.
+                  JSON yt-dlp config or CLI options. <NuxtLink v-if="form.config && !form.config.trim().startsWith('{')"
+                    @click="convertOptions()">Convert to JSON</NuxtLink>
                 </label>
                 <div class="control">
                   <textarea class="textarea" id="config" v-model="form.config" :disabled="addInProgress"
@@ -135,8 +136,9 @@
                 </div>
                 <span class="help">
                   <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Extends current global yt-dlp config with given options. If CLI options are given, they will be
+                  <span> Extends current global yt-dlp config with given options. Some fields are ignored like
-                    converted pre-saving.</span>
+                    <code>format</code> <code>cookiefile</code>, <code>paths</code>, and <code>outtmpl</code> etc.
+                    Warning: Use with caution some of those options can break yt-dlp or the frontend.</span>
                 </span>
               </div>
             </div>
@@ -193,6 +195,7 @@ import { request } from '~/utils/index'
 const emitter = defineEmits(['cancel', 'submit']);
 const toast = useToast();
 const config = useConfigStore();
+const convertInProgress = ref(false);
 
 const props = defineProps({
   reference: {
@@ -249,26 +252,10 @@ const checkInfo = async () => {
     return;
   }
 
-  // -- send request to convert cli options to JSON
+  if (form.config && !form.config.trim().startsWith('{')) {
-  if (form.config && form.config.length > 2 && !form.config.trim().startsWith('{')) {
+    await convertOptions();
-    const response = await request('/api/yt-dlp/convert', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ args: form.config }),
-    });
-
-    const data = await response.json()
-    if (200 !== response.status) {
-      toast.error(`Error: (${response.status}): ${data.error}`)
-      return
-    }
-
-    form.config = JSON.stringify(data, null, 4)
   }
 
-  // -- check config
   if (form.config) {
     try {
       form.config = JSON.parse(form.config)
@@ -278,7 +265,6 @@ const checkInfo = async () => {
     }
   }
 
-  // -- check cookies syntax
   if (form.cookies) {
     try {
       JSON.parse(form.cookies);
@@ -290,4 +276,20 @@ const checkInfo = async () => {
 
   emitter('submit', { reference: toRaw(props.reference), task: toRaw(form) });
 }
+
+const convertOptions = async () => {
+  if (convertInProgress.value) {
+    return
+  }
+
+  try {
+    convertInProgress.value = true
+    form.config = await convertCliOptions(form.config)
+  } catch (e) {
+    toast.error(e.message)
+  } finally {
+    convertInProgress.value = false
+  }
+}
+
 </script>

ui/layouts/default.vue

@@ -1,46 +1,28 @@
 <template>
   <div id="main_container" class="container">
     <nav class="navbar is-mobile is-dark">
-      <div class="navbar-brand pl-5">
+      <div class="navbar-brand pl-5 is-hidden-mobile">
         <NuxtLink class="navbar-item  has-tooltip-bottom" to="/"
           v-tooltip="socket.isConnected ? 'Connected' : 'Connecting'">
           <span>
             <span class="icon"> <i class="fas fa-home" /></span>
-            <span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'"><b>YTPTube</b></span>
+            <span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'">
+              <b>YTPTube</b>
+            </span>
+            <span v-if="config?.app?.instance_title">: {{ config.app.instance_title }}</span>
           </span>
         </NuxtLink>
       </div>
 
       <div class="navbar-end is-flex" style="flex-flow:wrap">
 
-        <div class="navbar-item">
+        <div class="navbar-item is-hidden-tablet">
           <NuxtLink class="button is-dark has-tooltip-bottom" to="/" v-tooltip.bottom="'Downloads'">
-            <span class="icon"><i class="fa-solid fa-download" /></span>
+            <span :class="socket.isConnected ? 'has-text-success' : 'has-text-danger'" class="icon"><i
+                class="fa-solid fa-home" /></span>
           </NuxtLink>
         </div>
 
-        <div class="navbar-item has-dropdown is-unselectable" :class="{ 'is-active': theme_open }"
-          @click.prevent="openCloseTheme" v-tooltip.bottom="'Change Theme'">
-          <a class="navbar-link is-arrowless">
-            <span class="icon"><i class="fas fa-repeat" /></span>
-          </a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" :class="{ 'is-selected': 'auto' === selectedTheme }" @click="selectTheme('auto')">
-              <span class="icon"><i class="fas fa-sync" /></span>
-              <span>Auto</span>
-            </a>
-            <hr class="navbar-divider">
-            <a class="navbar-item" :class="{ 'is-selected': 'light' === selectedTheme }" @click="selectTheme('light')">
-              <span class="icon"><i class="fas fa-sun" /></span>
-              <span>Light</span>
-            </a>
-            <a class="navbar-item" :class="{ 'is-selected': 'dark' === selectedTheme }" @click="selectTheme('dark')">
-              <span class="icon"><i class="fas fa-moon" /></span>
-              <span>Dark</span>
-            </a>
-          </div>
-        </div>
-
         <div class="navbar-item" v-if="!config.app.basic_mode">
           <NuxtLink class="button is-dark has-tooltip-bottom" to="/console" v-tooltip.bottom="'Terminal'">
             <span class="icon"><i class="fa-solid fa-terminal" /></span>
@@ -59,6 +41,21 @@
           </NuxtLink>
         </div>
 
+        <div class="navbar-item">
+          <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Light theme'"
+            v-if="'auto' == selectedTheme" @click="selectTheme('light')">
+            <span class="icon has-text-warning"><i class="fas fa-sun" /></span>
+          </button>
+          <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to Dark theme'"
+            v-if="'light' == selectedTheme" @click="selectTheme('dark')">
+            <span class="icon"><i class="fas fa-moon" /></span>
+          </button>
+          <button class="button is-dark has-tooltip-bottom" v-tooltip.bottom="'Switch to auto theme'"
+            v-if="'dark' == selectedTheme" @click="selectTheme('auto')">
+            <span class="icon"><i class="fas fa-microchip" /></span>
+          </button>
+        </div>
+
         <div class="navbar-item">
           <button class="button is-dark" @click="reloadPage">
             <span class="icon"><i class="fas fa-refresh"></i></span>
@@ -101,8 +98,6 @@ const Year = new Date().getFullYear()
 const selectedTheme = useStorage('theme', 'auto')
 const socket = useSocketStore()
 const config = useConfigStore()
-const theme_open = ref(false)
-const theme_inner_click = ref(false)
 
 const applyPreferredColorScheme = scheme => {
   if (!scheme || 'auto' === scheme) {
@@ -165,23 +160,9 @@ watch(selectedTheme, value => {
 const reloadPage = () => window.location.reload()
 
 const selectTheme = theme => {
-  theme_inner_click.value = true
-  theme_open.value = false
-  console.log('selectedTheme', selectedTheme.value, theme_open.value)
-  if (theme === selectedTheme.value) {
-    return
-  }
-
   selectedTheme.value = theme
   if ('auto' === theme) {
     return reloadPage()
   }
 }
-const openCloseTheme = () => {
-  if (theme_inner_click.value) {
-    theme_inner_click.value = false
-    return
-  }
-  theme_open.value = !theme_open.value
-}
 </script>

ui/pages/index.vue

@@ -9,7 +9,8 @@
 .navbar-item.is-hoverable:hover .navbar-dropdown {
   display: block;
 }
-.navbar-item.has-dropdown{
+
+.navbar-item.has-dropdown {
   padding: 0.5rem 0.75rem;
 }
 </style>
@@ -20,7 +21,10 @@
         <span class="title is-4">
           <span class="icon-text">
             <span class="icon"><i class="fa-solid fa-download" /></span>
-            <span>Downloads</span>
+            <span class="is-hidden-mobile">Downloads</span>
+            <span class="is-hidden-tablet">
+              {{ config?.app?.instance_title ? config.app.instance_title : 'Downloads' }}
+            </span>
           </span>
         </span>
 

ui/stores/ConfigStore.js

@@ -14,6 +14,7 @@ const CONFIG_KEYS = {
     has_cookies: false,
     basic_mode: true,
     default_preset: 'default',
+    instance_title: null,
   },
   presets: [
     {

ui/utils/index.js

@@ -381,6 +381,28 @@ const formatBytes = (bytes, decimals = 2) => {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
 
+
+/**
+ * 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 JSON.stringify(data, null, 2)
+}
+
 export {
   ag_set,
   ag,
@@ -402,4 +424,5 @@ export {
   getQueryParams,
   makeDownload,
   formatBytes,
+  convertCliOptions,
 }