From 9d3d3530ea77f9904ed0d64c80c2f3048a658f30 Mon Sep 17 00:00:00 2001
From: Sheldon Lee <sheldon@sheldonlee.com>
Date: Tue, 14 Nov 2023 00:31:10 +0800
Subject: [PATCH] Fix handling of thumbnail urls, so that original url is still
 linked on the top of image.

---
 src/App.tsx | 58 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 43 insertions(+), 15 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 36a0c70..1012024 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -60,7 +60,9 @@ function getContents(
       return getDir == item.is_dir;
     })
     .map((item: galleryItemInfo, index: number) => {
-      const url = item.thumbnail_url === null ? item.url : item.thumbnail_url;
+      const url = item.url;
+      const thumbnail_url =
+        item.thumbnail_url === null ? item.url : item.thumbnail_url;
       let onClick = () => {};
       if (item.is_dir) {
         onClick = () => {
@@ -73,27 +75,49 @@ function getContents(
 
           setCategory(category);
         };
-        return <DirectoryItem key={index} url={url} onClick={onClick} />;
+        return (
+          <DirectoryItem
+            key={index}
+            thumbnail_url={thumbnail_url}
+            url={url}
+            onClick={onClick}
+          />
+        );
       }
       if (url.endsWith('.mp4')) {
-        return <VideoItem key={index} url={url} onClick={onClick} />;
+        return (
+          <VideoItem
+            key={index}
+            thumbnail_url={thumbnail_url}
+            url={url}
+            onClick={onClick}
+          />
+        );
       }
-      return <ImageItem key={index} url={url} onClick={onClick} />;
+      return (
+        <ImageItem
+          key={index}
+          thumbnail_url={thumbnail_url}
+          url={url}
+          onClick={onClick}
+        />
+      );
     });
 }
 
 interface galleryItem {
   url: string;
+  thumbnail_url: string;
   onClick: () => void;
 }
 
-function ImageItem({ url }: galleryItem) {
+function ImageItem({ thumbnail_url, url }: galleryItem) {
   return (
     <div className="GalleryItem">
       <a href={url} target="_blank">
         {getFileName(url)}
       </a>
-      <img src={url} loading="lazy" />
+      <img src={thumbnail_url} loading="lazy" />
     </div>
   );
 }
@@ -130,15 +154,19 @@ function getFileName(string: string): string {
 }
 
 function post(category: string, callback: (text: string) => void) {
-  fetch('http://localhost/photo-viewer-backend/php/get.php', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    body: JSON.stringify({
-      category: category,
-    }),
-  })
+  fetch(
+    //'http://localhost/photo-viewer-backend/php/get.php',
+    'http://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        category: category,
+      }),
+    }
+  )
     .then((response) => {
       if (!response.ok) {
         throw new Error('Network response was not ok');