EnkaBrowser improvements

- Add option to switch back to legacy iframe Enka Network
- Fix image errors by adding more timeout

app/(ui)/artifact/admin/[id]/client.tsx

@@ -1,8 +1,16 @@
 "use client";
 
-import { Copy, CopyCheck, OctagonAlert, ScanSearch } from "lucide-react";
+import {
+  Copy,
+  CopyCheck,
+  Dock,
+  ImageIcon,
+  OctagonAlert,
+  ScanSearch,
+} from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
+import { SimpleTooltip } from "@/components/tooltip";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
@@ -16,6 +24,7 @@ export function EnkaBrowser({
   const [id, setId] = useState(uid);
   const [ready, setReady] = useState(false);
   const [error, setError] = useState(false);
+  const [useWeb, setUseWeb] = useState(false);
   useEffect(() => {
     setReady(false);
     setError(false);
@@ -24,7 +33,12 @@ export function EnkaBrowser({
   return (
     <div className="h-full w-full relative">
       {!ready && !error && (
-        <ScanSearch className="animate-pulse absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 size-8 text-muted-foreground z-100" />
+        <ScanSearch
+          className={cn(
+            "animate-pulse absolute left-1/2 -translate-x-1/2 -translate-y-1/2 size-8 text-muted-foreground z-100",
+            useWeb ? "top-[calc(50%+80px)]" : "top-1/2",
+          )}
+        />
       )}
       {error && (
         <div className="flex flex-col items-center gap-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-100">
@@ -32,22 +46,54 @@ export function EnkaBrowser({
           <span>ไม่สามารถโหลดข้อมูลตัวละคร</span>
         </div>
       )}
-      <div
-        className={cn("w-full h-full border-0 bg-card transition-[filter]",
-          (!ready || error) &&
-            "grayscale blur-md brightness-50 pointer-events-none",
-        )}
-      >
-        <Image
-          src={`https://cards.enka.network/u/${id}/image`}
-          alt={`Enka card for ${id}`}
-          fill
-          objectFit="contain"
+      {(ready || error) && (
+        <SimpleTooltip text={useWeb ? "สลับเป็นรูปภาพ" : "สลับเป็น Enka"}>
+          <Button
+            variant="outline"
+            className={cn(
+              "absolute left-1 z-110 bg-[#222a]! backdrop-blur-sm opacity-20 hover:opacity-100",
+              useWeb ? "-bottom-19" : "bottom-1",
+            )}
+            size="icon"
+            onClick={() => {
+              setReady(false);
+              setError(false);
+              setUseWeb((x) => !x);
+            }}
+          >
+            {useWeb ? <ImageIcon /> : <Dock />}
+          </Button>
+        </SimpleTooltip>
+      )}
+      {useWeb ? (
+        <iframe
+          src={`https://enka.network/u/${uid}`}
+          className={cn(
+            "w-full border-0 bg-card -mt-20 h-[calc(100%+5rem)]",
+            !ready && "grayscale blur-md brightness-50 pointer-events-none",
+          )}
           title="Enka Network"
-          onLoadingComplete={() => setReady(true)}
-          onError={() => setError(true)}
+          onLoad={() => setReady(true)}
         />
-      </div>
+      ) : (
+        <div
+          className={cn(
+            "w-full h-full border-0 bg-card transition-[filter]",
+            (!ready || error) &&
+              "grayscale blur-md brightness-50 pointer-events-none",
+          )}
+        >
+          <Image
+            src={`https://cards.enka.network/u/${id}/image`}
+            alt={`Enka card for ${id}`}
+            fill
+            objectFit="contain"
+            title="Enka Network"
+            onLoadingComplete={() => setReady(true)}
+            onError={() => setError(true)}
+          />
+        </div>
+      )}
     </div>
   );
 }

next.config.ts

@@ -24,10 +24,12 @@ const nextConfig: NextConfig = withBundleAnalyzer({
         hostname: "cards.enka.network",
       },
     ],
+    minimumCacheTTL: 86400,
   },
   experimental: {
     useSkewCookie: true,
     authInterrupts: true,
+    imgOptTimeoutInSeconds: 30,
   },
   deploymentId: process.env.NEXT_DEPLOYMENT_ID,
   // reactCompiler: true,