From 0cb90645cd16f7559762c8677b5516475a0604e0 Mon Sep 17 00:00:00 2001
From: ArabCoders <admin@arabcoders.org>
Date: Thu, 27 Feb 2025 14:09:11 +0300
Subject: [PATCH] display portrait image in more clean way

---
 ui/assets/css/style.css   | 5 +++++
 ui/components/History.vue | 8 ++++++--
 ui/components/Queue.vue   | 5 +++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/assets/css/style.css b/ui/assets/css/style.css
index 95632bdd..20e9fd69 100644
--- a/ui/assets/css/style.css
+++ b/ui/assets/css/style.css
@@ -249,3 +249,8 @@ hr {
 .play-active {
   opacity: 1;
 }
+
+.image-portrait {
+  object-fit: cover;
+  object-position: top;
+}
diff --git a/ui/components/History.vue b/ui/components/History.vue
index d3008801..b5aab95d 100644
--- a/ui/components/History.vue
+++ b/ui/components/History.vue
@@ -99,11 +99,13 @@
             <figure class="image is-3by1">
               <span v-if="'finished' === item.status" @click="playVideo(item)" class="play-overlay">
                 <div class="play-icon"></div>
-                <img :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" v-if="item.extras?.thumbnail" />
+                <img @load="e => pImg(e)" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)"
+                  v-if="item.extras?.thumbnail" />
                 <img v-else src="/images/placeholder.png" />
               </span>
               <template v-else>
-                <img v-if="item.extras?.thumbnail" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
+                <img @load="e => pImg(e)" v-if="item.extras?.thumbnail"
+                  :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
                 <img v-else src="/images/placeholder.png" />
               </template>
             </figure>
@@ -473,4 +475,6 @@ const reQueueItem = item => {
     template: item.template,
   })
 }
+
+const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
 </script>
diff --git a/ui/components/Queue.vue b/ui/components/Queue.vue
index db3498e8..4ae417e8 100644
--- a/ui/components/Queue.vue
+++ b/ui/components/Queue.vue
@@ -53,8 +53,7 @@
           </header>
           <div v-if="false === hideThumbnail" class="card-image">
             <figure class="image is-3by1" v-if="item.extras?.thumbnail">
-              <img :alt="item.title"
-                :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
+              <img :alt="item.title" :src="'/api/thumbnail?url=' + encodePath(item.extras.thumbnail)" />
             </figure>
             <figure class="image is-3by1" v-else>
               <img :src="'/images/placeholder.png'" />
@@ -274,4 +273,6 @@ const cancelItems = item => {
 
   items.forEach(id => socket.emit('item_cancel', id));
 }
+
+const pImg = e => e.target.naturalHeight > e.target.naturalWidth ? e.target.classList.add('image-portrait') : null
 </script>