diff --git a/app/search/page.tsx b/app/search/page.tsx
index e899191..cbd9729 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -43,6 +43,7 @@ interface UnifiedResult {
isPoorPerformance?: boolean
bestFps?: number | null
latestVersion?: string | null
+ tinyImage?: string | null
}
function SearchContent() {
@@ -240,7 +241,7 @@ function SearchResultCard({
whileHover={{ scale: 1.03 }}
transition={{ duration: 0.2 }}
>
-
+
{/* Main Content */}
@@ -507,18 +508,29 @@ function protonColor(status: string): string {
return map[status] || "text-text/25"
}
-function GameCover({ image, title }: { image: string | null; title: string }) {
- const [error, setError] = useState(false)
+function GameCover({ image, tinyImage, title }: { image: string | null; tinyImage?: string | null; title: string }) {
+ const [src, setSrc] = useState(image)
+ const [fallbackStage, setFallbackStage] = useState(0)
- if (image && !error) {
+ const handleError = () => {
+ if (fallbackStage === 0 && tinyImage) {
+ setFallbackStage(1)
+ setSrc(tinyImage)
+ } else {
+ setFallbackStage(2)
+ setSrc(null)
+ }
+ }
+
+ if (src) {
return (
setError(true)}
+ onError={handleError}
/>
)
}
diff --git a/lib/api/search-unified.ts b/lib/api/search-unified.ts
index fa354c1..018243c 100644
--- a/lib/api/search-unified.ts
+++ b/lib/api/search-unified.ts
@@ -269,6 +269,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
appId: g.steamAppId,
title: g.title,
image: g.capsuleImage || g.headerImage,
+ tinyImage: g.capsuleImage || g.headerImage || null,
developer: g.developer,
publisher: g.publisher,
description: g.description,
@@ -299,6 +300,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
appId: item.id,
title: item.name,
image: `https://cdn.akamai.steamstatic.com/steam/apps/${item.id}/library_600x900.jpg`,
+ tinyImage: item.tiny_image || null,
developer: null,
publisher: null,
description: null,