added filter for static/animated cover

backend/handler/metadata/sgdb_handler.py

@@ -8,11 +8,17 @@
 STEAMGRIDDB_API_ENABLED: Final = bool(STEAMGRIDDB_API_KEY)
 
 # SteamGridDB dimensions
-STEAMVERTICAL = "600x900"
-GALAXY342 = "342x482"
-GALAXY660 = "660x930"
-SQUARE512 = "512x512"
-SQUARE1024 = "1024x1024"
+STEAMVERTICAL: Final = "600x900"
+GALAXY342: Final = "342x482"
+GALAXY660: Final = "660x930"
+SQUARE512: Final = "512x512"
+SQUARE1024: Final = "1024x1024"
+
+# SteamGridDB types
+STATIC: Final = "static"
+ANIMATED: Final = "animated"
+
+SGDB_API_COVER_LIMIT: Final = 50
 
 
 class SGDBBaseHandler:
@@ -34,28 +40,58 @@ def get_details(self, search_term):
 
         if len(search_response["data"]) == 0:
             log.warning(f"Could not find '{search_term}' on SteamGridDB")
-            return ""
+            return []
 
         games = []
         for game in search_response["data"]:
+            page = 0
             covers_response = requests.get(
                 f"{self.grid_endpoint}/{game['id']}",
                 headers=self.headers,
                 timeout=120,
                 params={
                     "dimensions": f"{STEAMVERTICAL},{GALAXY342},{GALAXY660},{SQUARE512},{SQUARE1024}",
+                    "types": f"{STATIC},{ANIMATED}",
+                    "page": page,
                 },
             ).json()
 
-            games.append(
-                {
-                    "name": game["name"],
-                    "resources": [
-                        {"thumb": cover["thumb"], "url": cover["url"]}
-                        for cover in covers_response["data"]
-                    ],
-                }
-            )
+            while (
+                len(covers_response["data"]) < covers_response["total"]
+                and covers_response["total"] > SGDB_API_COVER_LIMIT
+            ):
+                page += 1
+                covers_response["data"].extend(
+                    requests.get(
+                        f"{self.grid_endpoint}/{game['id']}",
+                        headers=self.headers,
+                        timeout=120,
+                        params={
+                            "dimensions": f"{STEAMVERTICAL},{GALAXY342},{GALAXY660},{SQUARE512},{SQUARE1024}",
+                            "types": f"{STATIC},{ANIMATED}",
+                            "page": page,
+                        },
+                    ).json()["data"]
+                )
+
+            if len(covers_response["data"]) > 0:
+                games.append(
+                    {
+                        "name": game["name"],
+                        "resources": [
+                            {
+                                "thumb": cover["thumb"],
+                                "url": cover["url"],
+                                "type": (
+                                    "animated"
+                                    if cover["thumb"].split(".")[-1] == "webm"
+                                    else "static"
+                                ),
+                            }
+                            for cover in covers_response["data"]
+                        ],
+                    }
+                )
 
         return games
 

frontend/src/components/common/Game/Dialog/SearchCoverRom.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import type { SearchCoverSchema, SearchRomSchema } from "@/__generated__";
+import type { SearchCoverSchema } from "@/__generated__";
 import RDialog from "@/components/common/RDialog.vue";
 import romApi from "@/services/api/rom";
 import storeRoms, { type SimpleRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
 import type { Emitter } from "mitt";
 import { inject, onBeforeUnmount, ref } from "vue";
-import { useDisplay, useTheme } from "vuetify";
+import { useDisplay } from "vuetify";
 
 // Props
-const { xs, lgAndUp } = useDisplay();
+const { lgAndUp } = useDisplay();
 const show = ref(false);
 const romsStore = storeRoms();
-const theme = useTheme();
 const rom = ref<SimpleRom | null>(null);
 const searching = ref(false);
 const searchTerm = ref("");
 const games = ref<SearchCoverSchema[]>();
+const filteredGames = ref<SearchCoverSchema[]>();
 const panels = ref([0]);
-const panelIndex = ref(0);
 const emitter = inject<Emitter<Events>>("emitter");
+const type = ref("all");
 emitter?.on("showSearchCoverDialog", (romToSearch) => {
   rom.value = romToSearch;
   searchTerm.value = romToSearch.name || romToSearch.file_name_no_tags || "";
@@ -45,6 +45,19 @@ async function searchCovers() {
       })
       .then((response) => {
         games.value = response.data;
+        filteredGames.value = games.value
+          .map((game) => {
+            return {
+              ...game,
+              resources:
+                type.value === "all"
+                  ? game.resources
+                  : game.resources.filter(
+                      (resource) => resource.type === type.value
+                    ),
+            };
+          })
+          .filter((item) => item.resources.length > 0);
       })
       .catch((error) => {
         emitter?.emit("snackbarShow", {
@@ -62,9 +75,6 @@ async function searchCovers() {
 async function updateCover(url_cover: string) {
   if (!rom.value) return;
 
-  console.log(url_cover);
-  console.log(url_cover.replace("thumb", "grid"));
-
   show.value = false;
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
 
@@ -92,6 +102,24 @@ async function updateCover(url_cover: string) {
     });
 }
 
+function filterCovers() {
+  if (games.value) {
+    filteredGames.value = games.value
+      .map((game) => {
+        return {
+          ...game,
+          resources:
+            type.value === "all"
+              ? game.resources
+              : game.resources.filter(
+                  (resource) => resource.type === type.value
+                ),
+        };
+      })
+      .filter((item) => item.resources.length > 0);
+  }
+}
+
 function closeDialog() {
   show.value = false;
   games.value = undefined;
@@ -108,15 +136,15 @@ onBeforeUnmount(() => {
     v-model="show"
     icon="mdi-image-outline"
     :loading-condition="searching"
-    :empty-state-condition="games?.length == 0"
+    :empty-state-condition="filteredGames?.length == 0"
     empty-state-type="game"
     scroll-content
     :width="lgAndUp ? '60vw' : '95vw'"
     :height="lgAndUp ? '90vh' : '775px'"
   >
     <template #toolbar>
       <v-row class="align-center" no-gutters>
-        <v-col cols="10" sm="11">
+        <v-col cols="8" sm="9">
           <v-text-field
             id="search-text-field"
             @keyup.enter="searchCovers()"
@@ -128,6 +156,16 @@ onBeforeUnmount(() => {
             clearable
           />
         </v-col>
+        <v-col cols="2" sm="2">
+          <v-select
+            :disabled="searching"
+            v-model="type"
+            hide-details
+            label="Type"
+            @update:model-value="filterCovers"
+            :items="['all', 'static', 'animated']"
+          />
+        </v-col>
         <v-col>
           <v-btn
             type="submit"
@@ -150,7 +188,7 @@ onBeforeUnmount(() => {
         rounded="0"
         variant="accordion"
       >
-        <v-expansion-panel v-for="game in games" :key="game.name">
+        <v-expansion-panel v-for="game in filteredGames" :key="game.name">
           <v-expansion-panel-title class="bg-terciary">
             <v-row no-gutters class="justify-center">
               <v-list-item class="pa-0">{{ game.name }}</v-list-item>
@@ -176,10 +214,7 @@ onBeforeUnmount(() => {
                     cover
                   >
                     <template #error>
-                      <v-img
-                        :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
-                        cover
-                      ></v-img>
+                      <v-img :src="resource.url" cover></v-img>
                     </template>
                     <template #placeholder>
                       <div