SteamGridDB integration

backend/endpoints/heartbeat.py

@@ -11,6 +11,7 @@
 from handler.filesystem import fs_platform_handler
 from handler.metadata.igdb_handler import IGDB_API_ENABLED
 from handler.metadata.moby_handler import MOBY_API_ENABLED
+from handler.metadata.sgdb_handler import STEAMGRIDDB_API_ENABLED
 from utils import get_version
 
 router = APIRouter()
@@ -27,6 +28,7 @@ def heartbeat() -> HeartbeatResponse:
     return {
         "VERSION": get_version(),
         "ANY_SOURCE_ENABLED": IGDB_API_ENABLED or MOBY_API_ENABLED,
+        "STEAMGRIDDB_ENABLED": STEAMGRIDDB_API_ENABLED,
         "METADATA_SOURCES": {
             "IGDB_API_ENABLED": IGDB_API_ENABLED,
             "MOBY_API_ENABLED": MOBY_API_ENABLED,

backend/endpoints/responses/heartbeat.py

@@ -27,4 +27,5 @@ class HeartbeatResponse(TypedDict):
     SCHEDULER: SchedulerDict
     ANY_SOURCE_ENABLED: bool
     METADATA_SOURCES: MetadataSourcesDict
+    STEAMGRIDDB_ENABLED: bool
     FS_PLATFORMS: list

backend/endpoints/responses/search.py

@@ -9,3 +9,8 @@ class SearchRomSchema(BaseModel):
     summary: str
     igdb_url_cover: str = ""
     moby_url_cover: str = ""
+
+
+class SearchCoverSchema(BaseModel):
+    name: str
+    resources: list

backend/endpoints/search.py

@@ -1,9 +1,9 @@
 import emoji
 from decorators.auth import protected_route
-from endpoints.responses.search import SearchRomSchema
+from endpoints.responses.search import SearchCoverSchema, SearchRomSchema
 from fastapi import APIRouter, HTTPException, Request, status
 from handler.database import db_rom_handler
-from handler.metadata import meta_igdb_handler, meta_moby_handler
+from handler.metadata import meta_igdb_handler, meta_moby_handler, meta_sgdb_handler
 from handler.metadata.igdb_handler import IGDB_API_ENABLED
 from handler.metadata.moby_handler import MOBY_API_ENABLED
 from handler.scan_handler import _get_main_platform_igdb_id
@@ -107,3 +107,12 @@ async def search_rom(
         log.info(f"\t - {m_rom['name']}")
 
     return matched_roms
+
+
+@protected_route(router.get, "/search/cover", ["roms.read"])
+async def search_cover(
+    request: Request,
+    search_term: str | None = None,
+) -> list[SearchCoverSchema]:
+
+    return meta_sgdb_handler.get_details(search_term)

backend/handler/filesystem/resources_handler.py

@@ -38,8 +38,12 @@ def _cover_exists(rom: Rom, size: CoverSize):
     def resize_cover_to_small(cover_path: str):
         """Path of the cover image to resize"""
         cover = Image.open(cover_path)
-        small_width = int(cover.width * 0.1)
-        small_height = int(cover.height * 0.1)
+        if cover.height >= 1000:
+            ratio = 0.2
+        else:
+            ratio = 0.4
+        small_width = int(cover.width * ratio)
+        small_height = int(cover.height * ratio)
         small_size = (small_width, small_height)
         small_img = cover.resize(small_size)
         small_img.save(cover_path)

backend/handler/metadata/igdb_handler.py

@@ -179,13 +179,14 @@ def extract_metadata_from_igdb_rom(rom: dict) -> IGDBMetadata:
 
 class IGDBBaseHandler(MetadataHandler):
     def __init__(self) -> None:
-        self.platform_endpoint = "https://api.igdb.com/v4/platforms"
-        self.platform_version_endpoint = "https://api.igdb.com/v4/platform_versions"
-        self.platforms_fields = ["id", "name"]
-        self.games_endpoint = "https://api.igdb.com/v4/games"
+        self.BASE_URL = "https://api.igdb.com/v4"
+        self.platform_endpoint = f"{self.BASE_URL}/platforms"
+        self.platform_version_endpoint = f"{self.BASE_URL}/platform_versions"
+        self.platforms_fields = PLATFORMS_FIELDS
+        self.games_endpoint = f"{self.BASE_URL}/games"
         self.games_fields = GAMES_FIELDS
-        self.search_endpoint = "https://api.igdb.com/v4/search"
-        self.search_fields = ["game.id", "name"]
+        self.search_endpoint = f"{self.BASE_URL}/search"
+        self.search_fields = SEARCH_FIELDS
         self.pagination_limit = 200
         self.twitch_auth = TwitchAuth()
         self.headers = {
@@ -617,6 +618,8 @@ def get_oauth_token(self) -> str:
         return token
 
 
+PLATFORMS_FIELDS = ["id", "name"]
+
 GAMES_FIELDS = [
     "id",
     "name",
@@ -667,6 +670,8 @@ def get_oauth_token(self) -> str:
     "similar_games.cover.url",
 ]
 
+SEARCH_FIELDS = ["game.id", "name"]
+
 # Generated from the following code on https://www.igdb.com/platforms/:
 # Array.from(document.querySelectorAll(".media-body a")).map(a => ({
 #   slug: a.href.split("/")[4],

backend/handler/metadata/sgdb_handler.py

@@ -1,42 +1,63 @@
+from typing import Final
+
 import requests
 from config import STEAMGRIDDB_API_KEY
 from logger.logger import log
 
+# Used to display the Mobygames API status in the frontend
+STEAMGRIDDB_API_ENABLED: Final = bool(STEAMGRIDDB_API_KEY)
+
+# SteamGridDB dimensions
+STEAMVERTICAL = "600x900"
+GALAXY342 = "342x482"
+GALAXY660 = "660x930"
+SQUARE512 = "512x512"
+SQUARE1024 = "1024x1024"
+
 
 class SGDBBaseHandler:
     def __init__(self) -> None:
+        self.BASE_URL = "https://www.steamgriddb.com/api/v2"
+        self.search_endpoint = f"{self.BASE_URL}/search/autocomplete"
+        self.grid_endpoint = f"{self.BASE_URL}/grids/game"
         self.headers = {
             "Authorization": f"Bearer {STEAMGRIDDB_API_KEY}",
             "Accept": "*/*",
         }
-        self.BASE_URL = "https://www.steamgriddb.com/api/v2"
-        self.DEFAULT_IMAGE_URL = "https://www.steamgriddb.com/static/img/logo-512.png"
 
-    def get_details(self, term):
+    def get_details(self, search_term):
         search_response = requests.get(
-            f"{self.BASE_URL}/search/autocomplete/{term}",
+            f"{self.search_endpoint}/{search_term}",
             headers=self.headers,
             timeout=120,
         ).json()
 
         if len(search_response["data"]) == 0:
-            log.info(f"Could not find {term} on SteamGridDB")
-            return ("", "", self.DEFAULT_IMAGE_URL)
-
-        game_id = search_response["data"][0]["id"]
-        game_name = search_response["data"][0]["name"]
-
-        game_response = requests.get(
-            f"{self.BASE_URL}/grid/game/{game_id}", headers=self.headers, timeout=120
-        ).json()
-
-        if len(game_response["data"]) == 0:
-            log.info(f"Could not find {game_name} image on SteamGridDB")
-            return (game_id, game_name, self.DEFAULT_IMAGE_URL)
-
-        game_image_url = game_response["data"][0]["url"]
-
-        return (game_id, game_name, game_image_url)
+            log.warning(f"Could not find '{search_term}' on SteamGridDB")
+            return ""
+
+        games = []
+        for game in search_response["data"]:
+            covers_response = requests.get(
+                f"{self.grid_endpoint}/{game['id']}",
+                headers=self.headers,
+                timeout=120,
+                params={
+                    "dimensions": f"{STEAMVERTICAL},{GALAXY342},{GALAXY660},{SQUARE512},{SQUARE1024}",
+                },
+            ).json()
+
+            games.append(
+                {
+                    "name": game["name"],
+                    "resources": [
+                        {"thumb": cover["thumb"], "url": cover["url"]}
+                        for cover in covers_response["data"]
+                    ],
+                }
+            )
+
+        return games
 
 
 sgdb_handler = SGDBBaseHandler()

frontend/src/components/Details/BackgroundHeader.vue

@@ -16,6 +16,7 @@ const theme = useTheme();
           : `/assets/romm/resources/${rom.path_cover_l}`
       "
       lazy
+      cover
     >
       <template #error>
         <v-img
@@ -38,9 +39,7 @@ const theme = useTheme();
 </template>
 <style scoped>
 #background-header {
-  width: 100%;
   height: 300px;
-  transform: scale(10);
-  filter: blur(5px);
+  filter: blur(30px);
 }
 </style>

frontend/src/components/common/Game/AdminMenu.vue

@@ -11,38 +11,46 @@ const heartbeat = storeHeartbeat();
 </script>
 
 <template>
-  <v-list
-    rounded="0"
-    class="pa-0"
-  >
+  <v-list rounded="0" class="pa-0">
     <v-list-item
       :disabled="!heartbeat.value.ANY_SOURCE_ENABLED"
       class="py-4 pr-5"
       @click="emitter?.emit('showMatchRomDialog', rom)"
     >
       <v-list-item-title class="d-flex">
-        <v-icon
-          icon="mdi-search-web"
-          class="mr-2"
-        />Manual
-        search
+        <v-icon icon="mdi-search-web" class="mr-2" />Manual match
       </v-list-item-title>
       <v-list-item-subtitle>
         {{
-          !heartbeat.value.ANY_SOURCE_ENABLED ? "No metadata source enabled" : ""
+          !heartbeat.value.ANY_SOURCE_ENABLED
+            ? "No metadata source enabled"
+            : ""
         }}
       </v-list-item-subtitle>
     </v-list-item>
+
+    <v-list-item
+      :disabled="!heartbeat.value.STEAMGRIDDB_ENABLED"
+      class="py-4 pr-5"
+      @click="emitter?.emit('showSearchCoverDialog', rom)"
+    >
+      <v-list-item-title class="d-flex">
+        <v-icon icon="mdi-image-outline" class="mr-2" />Cover search
+      </v-list-item-title>
+      <v-list-item-subtitle>
+        {{
+          !heartbeat.value.STEAMGRIDDB_ENABLED ? "No SteamgridDB enabled" : ""
+        }}
+      </v-list-item-subtitle>
+    </v-list-item>
+
     <v-divider />
     <v-list-item
       class="py-4 pr-5"
       @click="emitter?.emit('showEditRomDialog', { ...rom })"
     >
       <v-list-item-title class="d-flex">
-        <v-icon
-          icon="mdi-pencil-box"
-          class="mr-2"
-        />Edit
+        <v-icon icon="mdi-pencil-box" class="mr-2" />Edit
       </v-list-item-title>
     </v-list-item>
     <v-divider />
@@ -51,10 +59,7 @@ const heartbeat = storeHeartbeat();
       @click="emitter?.emit('showDeleteRomDialog', [rom])"
     >
       <v-list-item-title class="d-flex">
-        <v-icon
-          icon="mdi-delete"
-          class="mr-2"
-        />Delete
+        <v-icon icon="mdi-delete" class="mr-2" />Delete
       </v-list-item-title>
     </v-list-item>
   </v-list>

frontend/src/components/common/Game/Card/Base.vue

@@ -82,6 +82,7 @@ onMounted(() => {
           v-bind="hoverProps"
           class="pointer"
           ref="card"
+          cover
           :src="
             src
               ? src
@@ -110,7 +111,7 @@ onMounted(() => {
               ? rom.igdb_url_cover
               : rom.moby_url_cover
           "
-          :aspect-ratio="3 / 4"
+          :aspect-ratio="2 / 3"
         >
           <div v-bind="props" style="position: absolute; top: 0; width: 100%">
             <template v-if="titleOnHover">
@@ -143,7 +144,7 @@ onMounted(() => {
           <template #error>
             <v-img
               :src="`/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`"
-              :aspect-ratio="3 / 4"
+              cover
             ></v-img>
           </template>
           <template #placeholder>

frontend/src/components/common/Game/Card/Related.vue

@@ -30,7 +30,8 @@ const theme = useTheme();
           ? `https:${rom.cover_url.replace('t_thumb', 't_cover_big')}`
           : `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
       "
-      :aspect-ratio="3 / 4"
+      :aspect-ratio="2 / 3"
+      cover
       lazy
       ><v-chip
         class="px-2 position-absolute chip-type text-white translucent-dark"

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

@@ -375,7 +375,8 @@ onBeforeUnmount(() => {
                           ? `/assets/default/cover/big_${theme.global.name.value}_missing_cover.png`
                           : source.url_cover
                       "
-                      :aspect-ratio="3 / 4"
+                      :aspect-ratio="2 / 3"
+                      cover
                       lazy
                     >
                       <template #placeholder>