chore: sync with main

src/main/events/catalogue/get-trending-games.ts

@@ -0,0 +1,22 @@
+import { registerEvent } from "../register-event";
+import { HydraApi } from "@main/services";
+import { userPreferencesRepository } from "@main/repository";
+import { TrendingGame } from "@types";
+
+const getTrendingGames = async (_event: Electron.IpcMainInvokeEvent) => {
+  const userPreferences = await userPreferencesRepository.findOne({
+    where: { id: 1 },
+  });
+
+  const language = userPreferences?.language || "en";
+
+  const trendingGames = await HydraApi.get<TrendingGame[]>(
+    "/games/trending",
+    { language },
+    { needsAuth: false }
+  ).catch(() => []);
+
+  return trendingGames;
+};
+
+registerEvent("getTrendingGames", getTrendingGames);

src/main/events/index.ts

@@ -9,6 +9,7 @@ import "./catalogue/get-random-game";
 import "./catalogue/search-games";
 import "./catalogue/search-game-repacks";
 import "./catalogue/get-game-stats";
+import "./catalogue/get-trending-games";
 import "./hardware/get-disk-free-space";
 import "./library/add-game-to-library";
 import "./library/create-game-shortcut";

src/preload/index.ts

@@ -48,6 +48,7 @@ contextBridge.exposeInMainWorld("electron", {
     ipcRenderer.invoke("searchGameRepacks", query),
   getGameStats: (objectId: string, shop: GameShop) =>
     ipcRenderer.invoke("getGameStats", objectId, shop),
+  getTrendingGames: () => ipcRenderer.invoke("getTrendingGames"),
 
   /* User preferences */
   getUserPreferences: () => ipcRenderer.invoke("getUserPreferences"),

src/renderer/src/components/hero/hero.tsx

@@ -1,17 +1,14 @@
 import { useNavigate } from "react-router-dom";
 import * as styles from "./hero.css";
 import { useEffect, useState } from "react";
-import { ShopDetails } from "@types";
+import { TrendingGame } from "@types";
-import { buildGameDetailsPath, getSteamLanguage } from "@renderer/helpers";
 import { useTranslation } from "react-i18next";
-import { steamUrlBuilder } from "@shared";
+import Skeleton from "react-loading-skeleton";
-
-const FEATURED_GAME_TITLE = "ELDEN RING";
-const FEATURED_GAME_ID = "1245620";
 
 export function Hero() {
-  const [featuredGameDetails, setFeaturedGameDetails] =
+  const [featuredGameDetails, setFeaturedGameDetails] = useState<
-    useState<ShopDetails | null>(null);
+    TrendingGame[] | null
+  >(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const { i18n } = useTranslation();
@@ -22,11 +19,7 @@ export function Hero() {
     setIsLoading(true);
 
     window.electron
-      .getGameShopDetails(
+      .getTrendingGames()
-        FEATURED_GAME_ID,
-        "steam",
-        getSteamLanguage(i18n.language)
-      )
       .then((result) => {
         setFeaturedGameDetails(result);
       })
@@ -35,41 +28,32 @@ export function Hero() {
       });
   }, [i18n.language]);
 
-  return (
+  if (isLoading) {
-    <button
+    return <Skeleton className={styles.hero} />;
-      type="button"
+  }
-      onClick={() =>
-        navigate(
-          buildGameDetailsPath({
-            title: FEATURED_GAME_TITLE,
-            objectID: FEATURED_GAME_ID,
-            shop: "steam",
-          })
-        )
-      }
-      className={styles.hero}
-    >
-      <div className={styles.backdrop}>
-        <img
-          src="https://cdn2.steamgriddb.com/hero/95eb39b541856d43649b208b65b6ca9f.jpg"
-          alt={FEATURED_GAME_TITLE}
-          className={styles.heroMedia}
-        />
 
-        <div className={styles.content}>
+  if (featuredGameDetails?.length) {
+    return featuredGameDetails.map((game, index) => (
+      <button
+        type="button"
+        onClick={() => navigate(game.uri)}
+        className={styles.hero}
+        key={index}
+      >
+        <div className={styles.backdrop}>
           <img
-            src={steamUrlBuilder.logo(FEATURED_GAME_ID)}
+            src={game.background}
-            width="250px"
+            alt={game.description}
-            alt={FEATURED_GAME_TITLE}
+            className={styles.heroMedia}
           />
 
-          {!isLoading && featuredGameDetails && (
+          <div className={styles.content}>
-            <p className={styles.description}>
+            <p className={styles.description}>{game.description}</p>
-              {featuredGameDetails?.short_description}
+          </div>
-            </p>
-          )}
         </div>
-      </div>
+      </button>
-    </button>
+    ));
-  );
+  }
+
+  return null;
 }

src/renderer/src/declaration.d.ts

@@ -21,6 +21,7 @@ import type {
   UserBlocks,
   UpdateProfileRequest,
   GameStats,
+  TrendingGame,
 } from "@types";
 import type { DiskSpace } from "check-disk-space";
 
@@ -60,6 +61,7 @@ declare global {
     ) => Promise<{ results: CatalogueEntry[]; cursor: number }>;
     searchGameRepacks: (query: string) => Promise<GameRepack[]>;
     getGameStats: (objectId: string, shop: GameShop) => Promise<GameStats>;
+    getTrendingGames: () => Promise<TrendingGame[]>;
 
     /* Library */
     addGameToLibrary: (

src/types/index.ts

@@ -345,3 +345,9 @@ export interface GameStats {
   downloadCount: number;
   playerCount: number;
 }
+
+export interface TrendingGame {
+  uri: string;
+  description: string;
+  background: string;
+}