fix: add image fallback chain for missing game covers in search
This commit is contained in:
+18
-6
@@ -43,6 +43,7 @@ interface UnifiedResult {
|
|||||||
isPoorPerformance?: boolean
|
isPoorPerformance?: boolean
|
||||||
bestFps?: number | null
|
bestFps?: number | null
|
||||||
latestVersion?: string | null
|
latestVersion?: string | null
|
||||||
|
tinyImage?: string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
function SearchContent() {
|
function SearchContent() {
|
||||||
@@ -240,7 +241,7 @@ function SearchResultCard({
|
|||||||
whileHover={{ scale: 1.03 }}
|
whileHover={{ scale: 1.03 }}
|
||||||
transition={{ duration: 0.2 }}
|
transition={{ duration: 0.2 }}
|
||||||
>
|
>
|
||||||
<GameCover image={result.image} title={result.title} />
|
<GameCover image={result.image} tinyImage={result.tinyImage} title={result.title} />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
@@ -507,18 +508,29 @@ function protonColor(status: string): string {
|
|||||||
return map[status] || "text-text/25"
|
return map[status] || "text-text/25"
|
||||||
}
|
}
|
||||||
|
|
||||||
function GameCover({ image, title }: { image: string | null; title: string }) {
|
function GameCover({ image, tinyImage, title }: { image: string | null; tinyImage?: string | null; title: string }) {
|
||||||
const [error, setError] = useState(false)
|
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 (
|
return (
|
||||||
<Image
|
<Image
|
||||||
src={image}
|
src={src}
|
||||||
alt={title}
|
alt={title}
|
||||||
fill
|
fill
|
||||||
className="object-cover"
|
className="object-cover"
|
||||||
sizes="(max-width: 640px) 80px, 112px"
|
sizes="(max-width: 640px) 80px, 112px"
|
||||||
onError={() => setError(true)}
|
onError={handleError}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -269,6 +269,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
|
|||||||
appId: g.steamAppId,
|
appId: g.steamAppId,
|
||||||
title: g.title,
|
title: g.title,
|
||||||
image: g.capsuleImage || g.headerImage,
|
image: g.capsuleImage || g.headerImage,
|
||||||
|
tinyImage: g.capsuleImage || g.headerImage || null,
|
||||||
developer: g.developer,
|
developer: g.developer,
|
||||||
publisher: g.publisher,
|
publisher: g.publisher,
|
||||||
description: g.description,
|
description: g.description,
|
||||||
@@ -299,6 +300,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
|
|||||||
appId: item.id,
|
appId: item.id,
|
||||||
title: item.name,
|
title: item.name,
|
||||||
image: `https://cdn.akamai.steamstatic.com/steam/apps/${item.id}/library_600x900.jpg`,
|
image: `https://cdn.akamai.steamstatic.com/steam/apps/${item.id}/library_600x900.jpg`,
|
||||||
|
tinyImage: item.tiny_image || null,
|
||||||
developer: null,
|
developer: null,
|
||||||
publisher: null,
|
publisher: null,
|
||||||
description: null,
|
description: null,
|
||||||
|
|||||||
Reference in New Issue
Block a user