From bf631cfa74207330cd8643001cdee8fec2cd5f44 Mon Sep 17 00:00:00 2001
From: Georges-Antoine Assi <contact@me.gantoine.com>
Date: Fri, 5 Sep 2025 09:42:25 -0400
Subject: [PATCH] fix updating image preview + force webp

---
 backend/handler/filesystem/resources_handler.py   |  9 +++++++--
 backend/tasks/scheduled/convert_images_to_webp.py |  4 ++--
 .../AppBar/Collection/CollectionInfoDrawer.vue    | 14 +++++++-------
 .../src/components/common/Collection/Card.vue     | 10 ++++++++++
 .../common/Collection/Dialog/CreateCollection.vue | 15 +++++++--------
 frontend/src/components/common/Game/Card/Base.vue |  4 ++++
 .../src/components/common/Game/Dialog/EditRom.vue | 11 +++++------
 7 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/backend/handler/filesystem/resources_handler.py b/backend/handler/filesystem/resources_handler.py
index 0ff753f33..de3bf5de5 100644
--- a/backend/handler/filesystem/resources_handler.py
+++ b/backend/handler/filesystem/resources_handler.py
@@ -79,7 +79,8 @@ class FSResourcesHandler(FSHandler):
 
                     if ENABLE_SCHEDULED_CONVERT_IMAGES_TO_WEBP:
                         self.image_converter.convert_to_webp(
-                            self.validate_path(f"{cover_file}/{size.value}.png")
+                            self.validate_path(f"{cover_file}/{size.value}.png"),
+                            force=True,
                         )
         except httpx.TransportError as exc:
             log.error(f"Unable to fetch cover at {url_cover}: {str(exc)}")
@@ -93,7 +94,7 @@ class FSResourcesHandler(FSHandler):
 
                 if ENABLE_SCHEDULED_CONVERT_IMAGES_TO_WEBP:
                     self.image_converter.convert_to_webp(
-                        self.validate_path(f"{cover_file}/{size.value}.png")
+                        self.validate_path(f"{cover_file}/{size.value}.png"), force=True
                     )
             except UnidentifiedImageError as exc:
                 log.error(f"Unable to identify image {cover_file}: {str(exc)}")
@@ -173,6 +174,10 @@ class FSResourcesHandler(FSHandler):
             with Image.open(artwork) as img:
                 img.save(path_cover_l)
                 self.resize_cover_to_small(img, save_path=str(path_cover_s))
+
+                if ENABLE_SCHEDULED_CONVERT_IMAGES_TO_WEBP:
+                    self.image_converter.convert_to_webp(path_cover_l, force=True)
+                    self.image_converter.convert_to_webp(path_cover_s, force=True)
         except UnidentifiedImageError as exc:
             log.error(
                 f"Unable to identify image for {entity.fs_resources_path}: {str(exc)}"
diff --git a/backend/tasks/scheduled/convert_images_to_webp.py b/backend/tasks/scheduled/convert_images_to_webp.py
index b983349bd..d548711b8 100644
--- a/backend/tasks/scheduled/convert_images_to_webp.py
+++ b/backend/tasks/scheduled/convert_images_to_webp.py
@@ -58,7 +58,7 @@ class ImageConverter:
         target_mode = self.MODE_CONVERSIONS.get(img.mode, "RGB")
         return img.convert(target_mode)
 
-    def convert_to_webp(self, image_path: Path) -> bool:
+    def convert_to_webp(self, image_path: Path, force: bool = False) -> bool:
         """Convert a single image to WebP format.
         Args:
             image_path: Path to the source image
@@ -68,7 +68,7 @@ class ImageConverter:
         webp_path = image_path.with_suffix(".webp")
 
         # Skip if WebP already exists
-        if webp_path.exists():
+        if webp_path.exists() and not force:
             log.debug(f"WebP already exists for {image_path}")
             return True
 
diff --git a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
index 8e2ee1f3b..699a715a8 100644
--- a/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
+++ b/frontend/src/components/Gallery/AppBar/Collection/CollectionInfoDrawer.vue
@@ -47,9 +47,8 @@ const collectionCoverImage = computed(() =>
   getCollectionCoverImage(updatedCollection.value.name),
 );
 
-emitter?.on("updateUrlCover", (url_cover) => {
-  updatedCollection.value.url_cover = url_cover;
-  setArtwork(url_cover);
+emitter?.on("updateUrlCover", (coverUrl) => {
+  setArtwork(coverUrl);
 });
 
 function showEditable() {
@@ -83,9 +82,10 @@ function previewImage(event: Event) {
   }
 }
 
-function setArtwork(imageUrl: string) {
-  if (!imageUrl) return;
-  imagePreviewUrl.value = imageUrl;
+function setArtwork(coverUrl: string) {
+  if (!coverUrl) return;
+  updatedCollection.value.url_cover = coverUrl;
+  imagePreviewUrl.value = coverUrl;
   removeCover.value = false;
 }
 
@@ -185,7 +185,7 @@ async function updateCollection() {
             :show-title="false"
             :with-link="false"
             :collection="currentCollection"
-            :src="imagePreviewUrl"
+            :coverSrc="imagePreviewUrl"
           >
             <template v-if="isEditable" #append-inner>
               <v-btn-group rounded="0" divided density="compact">
diff --git a/frontend/src/components/common/Collection/Card.vue b/frontend/src/components/common/Collection/Card.vue
index 8e8c68bb6..825254ffc 100644
--- a/frontend/src/components/common/Collection/Card.vue
+++ b/frontend/src/components/common/Collection/Card.vue
@@ -21,6 +21,7 @@ const EXTENSION_REGEX = /\.png|\.jpg|\.jpeg$/;
 const props = withDefaults(
   defineProps<{
     collection: CollectionType;
+    coverSrc?: string;
     transformScale?: boolean;
     showTitle?: boolean;
     titleOnHover?: boolean;
@@ -29,6 +30,7 @@ const props = withDefaults(
     enable3DTilt?: boolean;
   }>(),
   {
+    coverSrc: undefined,
     transformScale: false,
     showTitle: true,
     titleOnHover: false,
@@ -54,6 +56,14 @@ const collectionCoverImage = computed(() =>
 );
 
 watchEffect(() => {
+  if (props.coverSrc) {
+    memoizedCovers.value = {
+      large: [props.coverSrc, props.coverSrc],
+      small: [props.coverSrc, props.coverSrc],
+    };
+    return;
+  }
+
   // Check if it's a regular collection with covers or a smart collection with covers
   const isRegularOrSmartWithCovers =
     !props.collection.is_virtual &&
diff --git a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
index bbf896f76..2dec5e764 100644
--- a/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
+++ b/frontend/src/components/common/Collection/Dialog/CreateCollection.vue
@@ -29,10 +29,8 @@ emitter?.on("showCreateCollectionDialog", () => {
   show.value = true;
   removeCover.value = false;
 });
-emitter?.on("updateUrlCover", (url_cover) => {
-  if (!collection.value) return;
-  collection.value.url_cover = url_cover;
-  setArtwork(url_cover);
+emitter?.on("updateUrlCover", (coverUrl) => {
+  setArtwork(coverUrl);
 });
 
 const missingCoverImage = computed(() =>
@@ -57,9 +55,10 @@ function previewImage(event: Event) {
   }
 }
 
-function setArtwork(imageUrl: string) {
-  if (!imageUrl) return;
-  imagePreviewUrl.value = imageUrl;
+function setArtwork(coverUrl: string) {
+  if (!coverUrl || !collection.value) return;
+  collection.value.url_cover = coverUrl;
+  imagePreviewUrl.value = coverUrl;
   removeCover.value = false;
 }
 
@@ -165,7 +164,7 @@ function closeDialog() {
                 :show-title="false"
                 :with-link="false"
                 :collection="collection"
-                :src="imagePreviewUrl"
+                :coverSrc="imagePreviewUrl"
                 title-on-hover
               >
                 <template #append-inner>
diff --git a/frontend/src/components/common/Game/Card/Base.vue b/frontend/src/components/common/Game/Card/Base.vue
index 44dfefd70..e3e1c1158 100644
--- a/frontend/src/components/common/Game/Card/Base.vue
+++ b/frontend/src/components/common/Game/Card/Base.vue
@@ -33,6 +33,7 @@ const EXTENSION_REGEX = /\.png|\.jpg|\.jpeg$/;
 const props = withDefaults(
   defineProps<{
     rom: SimpleRom | SearchRomSchema;
+    coverSrc?: string;
     aspectRatio?: string | number;
     width?: string | number;
     height?: string | number;
@@ -49,6 +50,7 @@ const props = withDefaults(
     enable3DTilt?: boolean;
   }>(),
   {
+    coverSrc: undefined,
     aspectRatio: undefined,
     width: undefined,
     height: undefined,
@@ -142,6 +144,7 @@ const isWebpEnabled = computed(
 );
 
 const largeCover = computed(() => {
+  if (props.coverSrc) return props.coverSrc;
   if (!romsStore.isSimpleRom(props.rom))
     return (
       props.rom.igdb_url_cover ||
@@ -155,6 +158,7 @@ const largeCover = computed(() => {
 });
 
 const smallCover = computed(() => {
+  if (props.coverSrc) return props.coverSrc;
   if (!romsStore.isSimpleRom(props.rom)) return "";
   const pathCoverSmall = isWebpEnabled.value
     ? props.rom.path_cover_small?.replace(EXTENSION_REGEX, ".webp")
diff --git a/frontend/src/components/common/Game/Dialog/EditRom.vue b/frontend/src/components/common/Game/Dialog/EditRom.vue
index b39039e96..5c411c095 100644
--- a/frontend/src/components/common/Game/Dialog/EditRom.vue
+++ b/frontend/src/components/common/Game/Dialog/EditRom.vue
@@ -36,8 +36,6 @@ emitter?.on("showEditRomDialog", (romToEdit: UpdateRom | undefined) => {
   removeCover.value = false;
 });
 emitter?.on("updateUrlCover", (url_cover) => {
-  if (!rom.value) return;
-  rom.value.url_cover = url_cover;
   setArtwork(url_cover);
 });
 const computedAspectRatio = computed(() => {
@@ -68,9 +66,10 @@ function previewImage(event: Event) {
   }
 }
 
-function setArtwork(imageUrl: string) {
-  if (!imageUrl) return;
-  imagePreviewUrl.value = imageUrl;
+function setArtwork(coverUrl: string) {
+  if (!coverUrl || !rom.value) return;
+  rom.value.url_cover = coverUrl;
+  imagePreviewUrl.value = coverUrl;
   removeCover.value = false;
 }
 
@@ -211,7 +210,7 @@ function closeDialog() {
             <game-card
               width="240"
               :rom="rom"
-              :src="imagePreviewUrl"
+              :coverSrc="imagePreviewUrl"
               disableViewTransition
               :showPlatformIcon="false"
               :showActionBar="false"