GalleryItem img now acts as a link to full file when clicked

Implement react router
Update add react-router-dom packge
2024-03-11 18:40:46 +08:00 · 2023-11-30 04:49:16 +08:00 · 2023-11-30 04:48:43 +08:00 · 2023-11-25 17:46:26 +08:00 · 2023-11-25 17:32:23 +08:00 · 2023-11-25 17:30:54 +08:00
7 changed files with 1456 additions and 1221 deletions
@@ -1,5 +1,6 @@
 {
  "name": "react-photo-viewer",
  "homepage": "https://dundun.ddns.net/photos",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
@@ -46,6 +47,7 @@
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
-    "typescript": "^5.2.2"
+    "react-router-dom": "^6.20.0",
    "typescript": "4.9.5"
  }
 }
@@ -24,7 +24,7 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
+    <title>Photos</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -8,8 +8,7 @@ body {
  display: flex;
  flex-direction: row;
-  margin: 1em;
+  padding: 1em;
  padding: 0;
 }
 .Contents {
@@ -39,7 +38,14 @@ body {
  overflow: clip;
 }
-.GalleryItem > img, video {
+.GalleryItem > .ImgLink {
  margin: 0;
  padding: 0;
 }
 .GalleryItem > .ImgLink > img,
 .GalleryItem > video {
  object-fit: contain;
  max-height: 80vh;
 }
@@ -62,7 +68,30 @@ body {
  background-color: #0056b3;
 }
 .PlaceholderItem {
  animation: loading 1.5s infinite;
 }
 .PlaceholderItem > button,
 .ParentDirectoryItem > button {
 	background-color: #4D4F5D;
 }
 .PlaceholderItem > button,
 .DirectoryItem > button {
  height: 2.5em;
  min-width: 6em;
 }
 .PlaceholderItem > a {
  height: 1em;
 }
@keyframes loading {
  0%, 100% {
    filter: brightness(80%);
  }
  50% {
    filter: brightness(100%);
  }
 }
@@ -1,157 +1,15 @@
-import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 //import logo from './logo.svg';
 import './App.css';
-import { useState, useEffect } from 'react';
+import Gallery from './Gallery/index';
 function App() {
  const [data, setData] = useState('');
  const [category, setCategory] = useState('');
  useEffect(() => {
    post(category, (json: string) => {
      setData(json);
    });
  });
  return (
-    <div className="App">
+    <BrowserRouter>
-      <div className="Header">
+      <Routes>
-        {getContents(data, true, category, setCategory)}
+        <Route path="/photos/*" element={<Gallery />} />
-      </div>
+      </Routes>
-      <div className="Contents">
+    </BrowserRouter>
        {getContents(data, false, category, setCategory)}
      </div>
    </div>
  );
 }
 interface galleryItemInfo {
  is_dir: boolean;
  url: string;
  thumbnail_url: string;
 }
 function getContents(
  data: string,
  getDir: boolean,
  category: string,
  setCategory: (category: string) => void
 ) {
  if (data === '') return;
  let obj = null;
  try {
    obj = JSON.parse(data);
  } catch (error: unknown) {
    if (!(error instanceof SyntaxError)) {
      throw new Error(error as unknown as undefined);
    }
    return data;
  }
  return obj
    .sort((a: galleryItemInfo, b: galleryItemInfo) => {
      if (a.is_dir && b.is_dir) return 0;
      if (a.is_dir && !b.is_dir) return -1;
      if (!a.is_dir && b.is_dir) return 1;
      if (!a.is_dir && !b.is_dir) return 0;
    })
    .filter((item: galleryItemInfo) => {
      return getDir == item.is_dir;
    })
    .map((item: galleryItemInfo, index: number) => {
      const url = item.thumbnail_url === null ? item.url : item.thumbnail_url;
      let onClick = () => {};
      if (item.is_dir) {
        onClick = () => {
          const subCategory = getFileName(url);
          if (category !== '') category = `${category}/${subCategory}`;
          else category = subCategory;
          if (subCategory === '..')
            category = category.split('/').slice(0, -2).join('/');
          setCategory(category);
        };
        return <DirectoryItem key={index} url={url} onClick={onClick} />;
      }
      if (url.endsWith('.mp4')) {
        return <VideoItem key={index} url={url} onClick={onClick} />;
      }
      return <ImageItem key={index} url={url} onClick={onClick} />;
    });
 }
 interface galleryItem {
  url: string;
  onClick: () => void;
 }
 function ImageItem({ url }: galleryItem) {
  return (
    <div className="GalleryItem">
      <a href={url} target="_blank">
        {getFileName(url)}
      </a>
      <img src={url} loading="lazy" />
    </div>
  );
 }
 function VideoItem({ url }: galleryItem) {
  return (
    <div className="GalleryItem">
      <a href={url} target="_blank">
        {getFileName(url)}
      </a>
      <video controls>
        <source src={url} type="video/mp4" />
      </video>
    </div>
  );
 }
 function DirectoryItem({ url, onClick }: galleryItem) {
  let buttonText = getFileName(url);
  const isBackButton = buttonText === '..';
  buttonText = isBackButton ? 'Back' : `Category: ${buttonText}`;
  const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
  return (
    <div className={`DirectoryItem ${backButtonClass}`}>
      <button className="DirectoryItem" onClick={onClick}>
        {buttonText}
      </button>
    </div>
  );
 }
 function getFileName(string: string): string {
  return string.split('/').at(-1) as unknown as 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,
    }),
  })
    .then((response) => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response;
    })
    .then((response) => response.text())
    .then((data) => {
      callback(data as unknown as string);
    })
    .catch((error) => {
      console.error('There was a problem with the fetch operation:', error);
    });
 }
 export default App;
@@ -0,0 +1,223 @@
 import '../App.css';
 import placeholderPng from './placeholder.png';
 import { useState, useEffect } from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 function Gallery() {
  const params = useParams<string>()['*'];
  const location = useLocation();
  const navigate = useNavigate();
  const [data, setData] = useState<galleryItemInfo[]>([]);
  const [category, setCategory] = useState(params === undefined ? '' : params);
  useEffect(() => {
    post(category, (data: galleryItemInfo[]) => {
      if (data.length === 0) {
        updateCategory('');
      }
      setData(data);
    });
  }, [category]);
  useEffect(() => {
    setData(getPlaceholderData());
    setCategory(params as string);
  }, [location]);
  const updateCategory = (category: string) => {
    setData(getPlaceholderData());
    setCategory(category);
    navigate(`/photos/${category}`);
  };
  return (
    <div className="Gallery">
      <div className="Header">
        {Contents(data, true, category, updateCategory)}
      </div>
      <div className="Contents">
        {Contents(data, false, category, updateCategory)}
      </div>
    </div>
  );
 }
 interface galleryItemInfo {
  is_dir: boolean;
  url: string;
  thumbnail_url: string;
  isPlaceholder: boolean;
 }
 function Contents(
  data: galleryItemInfo[],
  getDir: boolean,
  category: string,
  setCategory: (category: string) => void
 ) {
  if (data === null) return;
  return data
    .sort((a: galleryItemInfo, b: galleryItemInfo): number => {
      if (a.is_dir && b.is_dir) return 0;
      if (a.is_dir && !b.is_dir) return -1;
      if (!a.is_dir && b.is_dir) return 1;
      if (!a.is_dir && !b.is_dir) return 0;
      return 0;
    })
    .filter((item: galleryItemInfo) => {
      return getDir == item.is_dir;
    })
    .map((item: galleryItemInfo, index: number) => {
      const itemProps = {
        key: index,
        url: item.url,
        thumbnail_url:
          item.thumbnail_url === null ? item.url : item.thumbnail_url,
        onClick: () => {},
        isPlaceholder: item.isPlaceholder,
      };
      if (item.is_dir) {
        itemProps.onClick = item.isPlaceholder
          ? () => {}
          : () => {
              const subCategory = getFileName(itemProps.url);
              if (category !== '') category = `${category}/${subCategory}`;
              else category = subCategory;
              if (subCategory === '..')
                category = category.split('/').slice(0, -2).join('/');
              setCategory(category);
            };
        return <DirectoryItem {...itemProps} />;
      }
      if (itemProps.url.endsWith('.mp4')) {
        return <VideoItem {...itemProps} />;
      }
      return <ImageItem {...itemProps} />;
    });
 }
 interface galleryItem {
  url: string;
  thumbnail_url: string;
  onClick: () => void;
  isPlaceholder: boolean;
 }
 function ImageItem({ thumbnail_url, url, isPlaceholder }: galleryItem) {
  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
  return (
    <div className={`GalleryItem ${placeholderClass}`}>
      <a href={url} target="_blank">
        {getFileName(url)}
      </a>
      <a href={url} target="_blank" className="ImgLink">
        <img src={thumbnail_url} loading="lazy" />
      </a>
    </div>
  );
 }
 function VideoItem({ url }: galleryItem) {
  return (
    <div className="GalleryItem">
      <a href={url} target="_blank">
        {getFileName(url)}
      </a>
      <video controls>
        <source src={url} type="video/mp4" />
      </video>
    </div>
  );
 }
 function DirectoryItem({ url, onClick, isPlaceholder }: galleryItem) {
  let buttonText = getFileName(url);
  const isBackButton = buttonText === '..';
  const placeholderClass = isPlaceholder ? 'PlaceholderItem' : '';
  buttonText = isBackButton ? 'Back' : `${buttonText}`;
  const backButtonClass = isBackButton ? 'ParentDirectoryItem' : '';
  return (
    <div className={`DirectoryItem ${backButtonClass} ${placeholderClass}`}>
      <button onClick={onClick}>{buttonText}</button>
    </div>
  );
 }
 function getFileName(string: string): string {
  return string.split('/').at(-1) as unknown as string;
 }
 function getPlaceholderData(): galleryItemInfo[] {
  const backDir = (): galleryItemInfo => {
    return {
      is_dir: true,
      url: '..',
      thumbnail_url: '',
      isPlaceholder: true,
    };
  };
  const placeholderDir = (): galleryItemInfo => {
    return {
      is_dir: true,
      url: '',
      thumbnail_url: '',
      isPlaceholder: true,
    };
  };
  const placeholderImg = (): galleryItemInfo => {
    return {
      is_dir: false,
      url: '',
      thumbnail_url: `${placeholderPng}`,
      isPlaceholder: true,
    };
  };
  return [
    backDir(),
    placeholderDir(),
    placeholderDir(),
    placeholderImg(),
    placeholderImg(),
    placeholderImg(),
  ];
 }
 async function post(
  category: string,
  setDataCallback: (data: galleryItemInfo[]) => void
 ) {
  try {
    const response = await fetch(
      //'http://localhost/photo-viewer-backend/php/get.php',
      'https://dundun.ddns.net/photo-viewer/photo-viewer-backend/php/get.php',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          category: category,
        }),
      }
    );
    setDataCallback(await response.json());
  } catch (error) {
    console.error('Error fetching data: ', error);
    setDataCallback([
      {
        is_dir: false,
        url: 'error_fetching',
        thumbnail_url: '',
        isPlaceholder: false,
      },
    ]);
  }
 }
 export default Gallery;
Author	SHA1	Message	Date
sheldonmlee	76b50ec462	GalleryItem img now acts as a link to full file when clicked	2024-03-11 18:40:46 +08:00
sheldonmlee	d332635d6a	Implement react router	2023-11-30 04:49:16 +08:00
sheldonmlee	1d0c3f68c5	Update add react-router-dom packge	2023-11-30 04:48:43 +08:00
sheldonmlee	8743133f05	Update button css for consistency between placeholder normal versions	2023-11-25 17:46:26 +08:00
sheldonmlee	dae708c765	Update placeholder data and make placeholder dir callbacks empty	2023-11-25 17:32:23 +08:00
sheldonmlee	162f21089d	Add pulsing effect for placeholder items	2023-11-25 17:30:54 +08:00
sheldonmlee	f3d7c7abf2	Implement basic placeholder skeleton when loading	2023-11-24 19:24:40 +08:00
sheldonmlee	07dd094d6b	Fix css selectors for img and video as direct child	2023-11-24 19:10:15 +08:00
sheldonmlee	1555cf37cd	Refactor post() and deal with fetched data as a typed interface. the post() function now uses await syntax rather than .then()	2023-11-23 19:17:45 +08:00
sheldonmlee	8a1b52749b	Move Gallery component into own file, and some refactoring	2023-11-23 16:31:56 +08:00
sheldonmlee	d959c004dd	Tweak css	2023-11-22 17:43:21 +08:00
sheldonmlee	098777bb02	Use hosted backend	2023-11-14 03:51:09 +08:00
sheldonmlee	2c31cf8820	Change title to Photos	2023-11-14 00:32:09 +08:00
sheldonmlee	9d3d3530ea	Fix handling of thumbnail urls, so that original url is still linked on the top of image.	2023-11-14 00:31:10 +08:00