[FEAT] allow user to choose thumbnail aspect ratio.

ui/app/assets/css/style.css

@@ -370,3 +370,4 @@ div.is-centered {
   padding: 0;
   margin: 0 auto;
 }
+

ui/app/components/FloatingImage.vue

@@ -8,7 +8,7 @@
           <div class="is-block" style="word-break: all;" v-if="props.title">
             <span style="font-size: 120%;">{{ props.title }}</span>
           </div>
-          <figure class="image is-3by1 is-hidden-mobile">
+          <figure :class="['image', thumbnail_ratio, 'is-hidden-mobile']">
             <img @load="e => pImg(e)" :src="url" :alt="props.title" @error="clearCache"
               :crossorigin="props.privacy ? 'anonymous' : 'use-credentials'"
               :referrerpolicy="props.privacy ? 'no-referrer' : 'origin'" />
@@ -20,6 +20,7 @@
 </template>
 
 <script setup lang="ts">
+import { useStorage } from '@vueuse/core'
 import { disableOpacity, enableOpacity } from '~/utils'
 
 const props = defineProps<{
@@ -31,6 +32,7 @@ const props = defineProps<{
 
 const cache = useSessionCache()
 const toast = useNotification()
+const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
 const url = ref<string | null>(null)
 const error = ref(false)
 const isPreloading = ref(false)

ui/app/components/History.vue

@@ -266,7 +266,7 @@
             </div>
           </header>
           <div v-if="showThumbnails" class="card-image">
-            <figure class="image is-3by1">
+            <figure :class="['image', thumbnail_ratio]">
               <span v-if="'finished' === item.status && item.filename" @click="playVideo(item)" class="play-overlay">
                 <div class="play-icon"></div>
                 <img @load="(e: Event) => pImg(e)" :src="getImage(item)" v-if="getImage(item)" />
@@ -475,6 +475,7 @@ const direction = useStorage<'asc' | 'desc'>('sortCompleted', 'desc')
 const display_style = useStorage<'grid' | 'list'>('display_style', 'grid')
 const bg_enable = useStorage<boolean>('random_bg', true)
 const bg_opacity = useStorage<number>('random_bg_opacity', 0.95)
+const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
 
 const selectedElms = ref<string[]>([])
 const masterSelectAll = ref(false)

ui/app/components/Queue.vue

@@ -198,7 +198,7 @@
             </div>
           </header>
           <div v-if="showThumbnails" class="card-image">
-            <figure class="image is-3by1">
+            <figure :class="['image', thumbnail_ratio]">
               <span v-if="isEmbedable(item.url)" @click="embed_url = getEmbedable(item.url) as string"
                 class="play-overlay">
                 <div class="play-icon embed-icon"></div>
@@ -336,6 +336,7 @@ const hideThumbnail = useStorage('hideThumbnailQueue', false)
 const display_style = useStorage('display_style', 'grid')
 const bg_enable = useStorage('random_bg', true)
 const bg_opacity = useStorage('random_bg_opacity', 0.95)
+const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
 
 const selectedElms = ref<string[]>([])
 const masterSelectAll = ref(false)

ui/app/components/Settings.vue

@@ -104,6 +104,21 @@
                 <p class="help is-bold"> Show videos thumbnail if available.</p>
               </div>
 
+              <div class="field" v-if="show_thumbnail">
+                <label class="label is-unselectable">Thumbnail Aspect Ratio</label>
+                <div class="control">
+                  <label for="ratio_16by9" class="radio">
+                    <input id="ratio_16by9" type="radio" v-model="thumbnail_ratio" value="is-16by9">
+                    <span>&nbsp;16:9</span>
+                  </label>
+                  <label for="ratio_3by1" class="radio">
+                    <input id="ratio_3by1" type="radio" v-model="thumbnail_ratio" value="is-3by1">
+                    <span>&nbsp;3:1</span>
+                  </label>
+                </div>
+                <p class="help is-bold">Choose the aspect ratio for thumbnail display.</p>
+              </div>
+
               <div class="field">
                 <label class="label" for="allow_toasts">Show notifications</label>
                 <div class="control">
@@ -164,6 +179,7 @@ const allow_toasts = useStorage<boolean>('allow_toasts', true)
 const toast_position = useStorage<POSITION>('toast_position', POSITION.TOP_RIGHT)
 const toast_dismiss_on_click = useStorage<boolean>('toast_dismiss_on_click', true)
 const show_thumbnail = useStorage<boolean>('show_thumbnail', true)
+const thumbnail_ratio = useStorage<'is-16by9' | 'is-3by1'>('thumbnail_ratio', 'is-3by1')
 const separator = useStorage<string>('url_separator', separators[0]?.value ?? ',')
 const simpleMode = useStorage<boolean>('simple_mode', useConfigStore().app.simple_mode || false)
 </script>