From 8b0b744d98fe754d9cf7ed913da45fecd385d644 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Thu, 5 Jun 2025 21:36:52 +0300
Subject: [PATCH] Add option to completely disable videos thumbnail.

---
 ui/components/History.vue  | 27 ++++++++-----
 ui/components/Queue.vue    | 15 ++++++--
 ui/components/Settings.vue | 77 ++++++++++++++++++--------------------
 ui/pages/index.vue         |  6 ++-
 4 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/ui/components/History.vue b/ui/components/History.vue
index 14d300fc..71d74be3 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -107,7 +107,7 @@
                   </label>
                 </td>
                 <td class="is-vcentered">
-                  <div v-if="item.extras.thumbnail">
+                  <div v-if="showThumbnails && item.extras.thumbnail">
                     <FloatingImage :image="uri('/api/thumbnail?url=' + encodePath(item.extras.thumbnail))"
                       :title="item.title">
                       <div class="is-text-overflow">
@@ -198,37 +198,36 @@
     </div>
 
     <div class="columns is-multiline" v-else>
-      <LateLoader :unrender="true" :min-height="hideThumbnail ? 210 : 410" class="column is-6"
+      <LateLoader :unrender="true" :min-height="showThumbnails ? 410 : 210" class="column is-6"
         v-for="item in sortCompleted" :key="item._id">
         <div class="card is-flex is-full-height is-flex-direction-column"
           :class="{ 'is-bordered-danger': item.status === 'error', 'is-bordered-info': item.live_in || item.is_live }">
-          <header class="card-header has-tooltip">
-
+          <header class="card-header ">
             <div class="card-header-title is-text-overflow is-block" v-tooltip="item.title">
-              <NuxtLink target="_blank" :href="item.url">{{ item.title }}</NuxtLink>
+              <NuxtLink target="_blank" :href="item.url" class="has-tooltip">{{ item.title }}</NuxtLink>
             </div>
 
             <div class="card-header-icon">
-              <span v-if="hideThumbnail">
+              <span v-if="!showThumbnails">
                 <a v-if="'finished' === item.status && item.filename" href="#" @click.prevent="playVideo(item)"
                   v-tooltip="'Play video.'">
                   <span class="icon"><i class="fa-solid fa-play" /></span>
                 </a>
                 <a v-else-if="isEmbedable(item.url)" href="#" @click.prevent="embed_url = getEmbedable(item.url)"
-                  v-tooltip="'Play video.'">
+                  v-tooltip="'Play video.'" class="has-text-danger">
                   <span class="icon"><i class="fa-solid fa-play" /></span>
                 </a>
               </span>
               <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
                 <span class="icon"><i class="fa-solid fa-copy" /></span>
               </a>
-              <button @click="hideThumbnail = !hideThumbnail">
+              <button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
                 <span class="icon"><i class="fa-solid"
                     :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
               </button>
             </div>
           </header>
-          <div v-if="false === hideThumbnail" class="card-image">
+          <div v-if="showThumbnails" class="card-image">
             <figure class="image is-3by1">
               <span v-if="'finished' === item.status && item.filename" @click="playVideo(item)" class="play-overlay">
                 <div class="play-icon"></div>
@@ -382,6 +381,14 @@ import { makeDownload, formatBytes, uri } from '~/utils/index'
 import { isEmbedable, getEmbedable } from '~/utils/embedable'
 
 const emitter = defineEmits(['getInfo', 'add_new'])
+
+const props = defineProps({
+  thumbnails: {
+    type: Boolean,
+    default: true
+  }
+})
+
 const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
@@ -401,6 +408,8 @@ const video_item = ref(null)
 const playVideo = item => video_item.value = item
 const closeVideo = () => video_item.value = null
 
+const showThumbnails = computed(() => props.thumbnails && !hideThumbnail.value)
+
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.85)
 
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index a72fe52c..eff156c8 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -66,7 +66,7 @@
                   </label>
                 </td>
                 <td class="is-text-overflow is-vcentered">
-                  <div v-if="item.extras?.thumbnail">
+                  <div v-if="showThumbnails && item.extras?.thumbnail">
                     <FloatingImage :image="uri('/api/thumbnail?url=' + encodePath(item.extras.thumbnail))"
                       :title="item.title">
                       <div class="is-text-overflow">
@@ -128,7 +128,7 @@
     </div>
 
     <div class="columns is-multiline" v-else>
-      <LateLoader :unrender="true" :min-height="hideThumbnail ? 265 : 475" class="column is-6"
+      <LateLoader :unrender="true" :min-height="showThumbnails ? 475 : 265" class="column is-6"
         v-for="item in stateStore.queue" :key="item._id">
         <div class="card is-flex is-full-height is-flex-direction-column">
           <header class="card-header">
@@ -139,13 +139,13 @@
               <a :href="item.url" class="has-text-primary" v-tooltip="'Copy url.'" @click.prevent="copyText(item.url)">
                 <span class="icon"><i class="fa-solid fa-copy" /></span>
               </a>
-              <button @click="hideThumbnail = !hideThumbnail">
+              <button @click="hideThumbnail = !hideThumbnail" v-if="thumbnails">
                 <span class="icon"><i class="fa-solid"
                     :class="{ 'fa-arrow-down': hideThumbnail, 'fa-arrow-up': !hideThumbnail, }" /></span>
               </button>
             </div>
           </header>
-          <div v-if="false === hideThumbnail" class="card-image">
+          <div v-if="showThumbnails" class="card-image">
             <figure class="image is-3by1">
               <span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url)" class="play-overlay">
                 <div class="play-icon embed-icon"></div>
@@ -247,6 +247,12 @@ import { ucFirst } from '~/utils/index'
 import { isEmbedable, getEmbedable } from '~/utils/embedable'
 
 const emitter = defineEmits(['getInfo'])
+const props = defineProps({
+  thumbnails: {
+    type: Boolean,
+    default: true
+  }
+})
 const config = useConfigStore()
 const stateStore = useStateStore()
 const socket = useSocketStore()
@@ -257,6 +263,7 @@ const masterSelectAll = ref(false)
 const showQueue = useStorage('showQueue', true)
 const hideThumbnail = useStorage('hideThumbnailQueue', false)
 const display_style = useStorage('display_style', 'cards')
+const showThumbnails = computed(() => props.thumbnails && !hideThumbnail.value)
 
 const embed_url = ref('')
 
diff --git a/ui/components/Settings.vue b/ui/components/Settings.vue
index 184196c5..29ec989d 100644
--- a/ui/components/Settings.vue
+++ b/ui/components/Settings.vue
@@ -11,92 +11,87 @@
         <div class="card-content">
           <div class="columns is-multiline">
             <div class="column is-6">
+
               <div class="field">
-                <label class="label">Color scheme</label>
+                <label class="label is-unselectable">Color scheme</label>
                 <div class="control">
                   <label for="auto" class="radio">
                     <input id="auto" type="radio" v-model="selectedTheme" value="auto">
-                    System Default
+                    <span class="icon"><i class="fa-solid fa-circle-half-stroke" /></span>
+                    <span>Auto</span>
                   </label>
                   <label for="light" class="radio">
                     <input id="light" type="radio" v-model="selectedTheme" value="light">
-                    Light
+                    <span class="icon has-text-warning"><i class="fa-solid fa-sun" /></span>
+                    <span>Light</span>
                   </label>
                   <label for="dark" class="radio">
                     <input id="dark" type="radio" v-model="selectedTheme" value="dark">
-                    Dark
+                    <span class="icon"><i class="fa-solid fa-moon" /></span>
+                    <span>Dark</span>
                   </label>
                 </div>
-                <p class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Select the color scheme for the WebUI.</span>
-                </p>
               </div>
 
               <div class="field">
-                <label class="label" for="random_bg">Backgrounds</label>
+                <label class="label is-unselectable">
+                  Backgrounds
+                  <template v-if="bg_enable">
+                    <NuxtLink @click="$emit('reload_bg')" class="is-bold">Reload</NuxtLink>
+                    <span class="icon" v-if="isLoading"><i class="fa fa-spin fa-spinner" /></span>
+                  </template>
+                </label>
                 <div class="control">
                   <input id="random_bg" type="checkbox" class="switch is-success" v-model="bg_enable">
-                  <label for="random_bg" class="is-unselectable">&nbsp;Enable</label>
+                  <label for="random_bg" class="is-unselectable">
+                    &nbsp;{{ bg_enable ? 'Enabled' : 'Disabled' }}
+                  </label>
                 </div>
-                <p class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>
-                    Use random background image.
-                    <NuxtLink @click="$emit('reload_bg')" class="is-bold" v-if="bg_enable">
-                      Reload
-                    </NuxtLink>
-                    <span class="icon" v-if="isLoading"><i class="fa fa-spin fa-spinner" /></span>
-                  </span>
-                </p>
               </div>
 
               <div class="field">
-                <label class="label" for="random_bg_opacity">
-                  Background Visibility: (<code>{{ bg_opacity }}</code>)
+                <label class="label is-unselectable" for="random_bg_opacity">
+                  Background visibility <code>{{ parseFloat(1.0 - bg_opacity).toFixed(2) }}</code>
                 </label>
                 <div class="control">
                   <input id="random_bg_opacity" style="width: 100%" type="range" v-model="bg_opacity" min="0.50"
                     max="1.00" step="0.05">
                 </div>
-                <p class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>How visible the background image should be.</span>
-                </p>
               </div>
+
+              <div class="field">
+                <label class="label is-unselectable" for="show_thumbnail">Show Videos Thumbnail when possible</label>
+                <div class="control">
+                  <input id="show_thumbnail" type="checkbox" class="switch is-success" v-model="show_thumbnail">
+                  <label for="show_thumbnail" class="is-unselectable">
+                    &nbsp;{{ show_thumbnail ? 'Enabled' : 'Disabled' }}
+                  </label>
+                </div>
+              </div>
+
             </div>
             <div class="column is-6">
               <div class="field">
-                <label class="label" for="reduce_confirm">Reduce confirm box usage</label>
+                <label class="label is-unselectable" for="reduce_confirm">Reduce confirm box usage</label>
                 <div class="control">
                   <input id="reduce_confirm" type="checkbox" class="switch is-success" v-model="reduce_confirm">
                   <label for="reduce_confirm" class="is-unselectable">
                     &nbsp;{{ reduce_confirm ? 'Enabled' : 'Disabled' }}
                   </label>
                 </div>
-                <p class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span>Reduce the usage of confirm boxes in the WebUI.</span>
-                </p>
               </div>
 
               <div class="field">
-                <label class="label" for="allow_toasts">Show toasts</label>
+                <label class="label" for="allow_toasts">Show notifications toasts</label>
                 <div class="control">
                   <input id="allow_toasts" type="checkbox" class="switch is-success" v-model="allow_toasts">
                   <label for="allow_toasts" class="is-unselectable">
                     &nbsp;{{ allow_toasts ? 'Enabled' : 'Disabled' }}
                   </label>
                 </div>
-                <p class="help">
-                  <span class="icon"><i class="fa-solid fa-info" /></span>
-                  <span class="has-text-danger is-bold">
-                    Show notification toasts. If disabled, you will not see errors reported or anything else.
-                  </span>
-                </p>
               </div>
 
-              <div class="field">
+              <div class="field" v-if="allow_toasts">
                 <label class="label">Toasts position</label>
                 <div class="control">
                   <div class="select is-fullwidth">
@@ -112,7 +107,7 @@
                 </div>
               </div>
 
-              <div class="field">
+              <div class="field" v-if="allow_toasts">
                 <label class="label" for="dismiss_on_click">Dismiss toasts on click</label>
                 <div class="control">
                   <input id="dismiss_on_click" type="checkbox" class="switch is-success"
@@ -149,4 +144,6 @@ const allow_toasts = useStorage('allow_toasts', true)
 const reduce_confirm = useStorage('reduce_confirm', false)
 const toast_position = useStorage('toast_position', POSITION.TOP_RIGHT)
 const toast_dismiss_on_click = useStorage('toast_dismiss_on_click', true)
+const show_thumbnail = useStorage('show_thumbnail', true)
+
 </script>
diff --git a/ui/pages/index.vue b/ui/pages/index.vue
index b0e1f7ae..ba2170da 100644
--- a/ui/pages/index.vue
+++ b/ui/pages/index.vue
@@ -49,8 +49,8 @@
 
     <NewDownload v-if="config.showForm || config.app.basic_mode" @getInfo="url => get_info = url" :item="item_form"
       @clear_form="item_form = {}" />
-    <Queue @getInfo="url => get_info = url" />
-    <History @getInfo="url => get_info = url" @add_new="item => toNewDownload(item)" />
+    <Queue @getInfo="url => get_info = url" :thumbnails="show_thumbnail" />
+    <History @getInfo="url => get_info = url" @add_new="item => toNewDownload(item)" :thumbnails="show_thumbnail" />
     <GetInfo v-if="get_info" :link="get_info" @closeModel="get_info = ''" />
   </div>
 </template>
@@ -68,6 +68,8 @@ const get_info = ref('')
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.85)
 const display_style = useStorage('display_style', 'cards')
+const show_thumbnail = useStorage('show_thumbnail', true)
+
 const item_form = ref({})
 
 onMounted(() => {