Merge pull request #2383 from rommapp/console-ui-improvements-2

Selecting collections should change background

Author: gantoine

backend/handler/filesystem/resources_handler.py

@@ -79,7 +79,8 @@ async def _store_cover(
 
                     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 @@ async def _store_cover(
 
                 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 @@ async def store_artwork(
             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)}"

backend/tasks/scheduled/convert_images_to_webp.py

@@ -58,7 +58,7 @@ def _convert_image_mode(self, img: Image.Image) -> Image.Image:
         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 @@ def convert_to_webp(self, image_path: Path) -> bool:
         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
 

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">

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 &&

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>

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")

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"

frontend/src/console/components/CollectionCard.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watchEffect, useTemplateRef } from "vue";
+import {
+  computed,
+  onMounted,
+  ref,
+  watchEffect,
+  useTemplateRef,
+  watch,
+} from "vue";
 import {
   collectionElementRegistry,
   smartCollectionElementRegistry,
@@ -17,7 +24,14 @@ const props = defineProps<{
   selected?: boolean;
   loaded?: boolean;
 }>();
-const emit = defineEmits(["click", "mouseenter", "focus", "loaded"]);
+const emit = defineEmits([
+  "click",
+  "mouseenter",
+  "focus",
+  "loaded",
+  "select",
+  "deselect",
+]);
 const collectionCardRef = useTemplateRef<HTMLButtonElement>(
   "collection-card-ref",
 );
@@ -29,7 +43,7 @@ const memoizedCovers = ref({
   small: ["", ""],
 });
 
-const collectionCoverImage = computed(() =>
+const fallbackCollectionCover = computed(() =>
   props.collection.name?.toLowerCase() == "favourites"
     ? getFavoriteCoverImage(props.collection.name)
     : getCollectionCoverImage(props.collection.name),
@@ -69,8 +83,8 @@ watchEffect(() => {
 
   if (largeCoverUrls.length < 2) {
     memoizedCovers.value = {
-      large: [collectionCoverImage.value, collectionCoverImage.value],
-      small: [collectionCoverImage.value, collectionCoverImage.value],
+      large: [fallbackCollectionCover.value, fallbackCollectionCover.value],
+      small: [fallbackCollectionCover.value, fallbackCollectionCover.value],
     };
     return;
   }
@@ -87,6 +101,22 @@ watchEffect(() => {
 const firstLargeCover = computed(() => memoizedCovers.value.large[0]);
 const secondLargeCover = computed(() => memoizedCovers.value.large[1]);
 
+watch(
+  () => props.selected,
+  (isSelected) => {
+    if (
+      isSelected &&
+      firstLargeCover.value &&
+      firstLargeCover.value !== fallbackCollectionCover.value
+    ) {
+      emit("select", firstLargeCover.value);
+    } else if (isSelected) {
+      emit("deselect");
+    }
+  },
+  { immediate: true },
+);
+
 onMounted(() => {
   if (!collectionCardRef.value) return;
   if (props.collection.is_smart) {

frontend/src/console/components/GameCard.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   isRecent?: boolean;
   registry?: "recent" | "gamesList";
 }>();
+
 const coverSrc = computed(
   () =>
     props.rom.path_cover_large ||
@@ -43,7 +44,9 @@ watch(
   () => props.selected,
   (isSelected) => {
     if (isSelected && coverSrc.value) {
-      emit("select", props.rom);
+      emit("select", coverSrc.value);
+    } else if (isSelected) {
+      emit("deselect");
     }
   },
   { immediate: true },

frontend/src/console/composables/useBackgroundArt.ts

@@ -0,0 +1,28 @@
+import { ref } from "vue";
+import { useConsoleTheme } from "@/stores/consoleTheme";
+
+const selectedBackgroundArt = ref<string | null>(null);
+
+export default function useBackgroundArt() {
+  const consoleTheme = useConsoleTheme();
+  const setSelectedBackgroundArt = (url: string) => {
+    selectedBackgroundArt.value = url;
+    if (url) {
+      document.documentElement.style.setProperty(
+        "--theme-background",
+        `url("${url}")`,
+      );
+    }
+  };
+
+  const clearSelectedBackgroundArt = () => {
+    selectedBackgroundArt.value = null;
+    consoleTheme.updateBackgroundCSS();
+  };
+
+  return {
+    setSelectedBackgroundArt,
+    clearSelectedBackgroundArt,
+    selectedBackgroundArt,
+  };
+}