Show original image in big picture mode

picture-gallery-client/src/ImageGallery/Image.tsx

@@ -1,10 +1,12 @@
-import { PhotoProps, RenderPhoto } from "react-photo-album";
+import { PhotoProps } from "react-photo-album";
 import React from "react";
 import { Backdrop } from "@mui/material";
+import { ImageWithThumbnail } from "./models";
 
-export const Image: RenderPhoto = ({
-  imageProps: { alt, style, ...rest },
-}: PhotoProps): JSX.Element => {
+export const Image = <T extends ImageWithThumbnail>({
+  imageProps: { alt, style, src: _useSrcAndThumbnailFromPhoto, ...rest },
+  photo,
+}: PhotoProps<T>): JSX.Element => {
   const [open, setOpen] = React.useState(false);
   const handleClose = () => {
     setOpen(false);
@@ -21,6 +23,7 @@ export const Image: RenderPhoto = ({
           ...style,
         }}
         {...rest}
+        src={photo.thumbnail}
         onClick={handleToggle}
       />
       <Backdrop
@@ -28,7 +31,7 @@ export const Image: RenderPhoto = ({
         open={open}
         onClick={handleClose}
       >
-        <img alt={alt} {...rest} />
+        <img alt={alt} {...rest} src={photo.src} />
       </Backdrop>
     </>
   );

picture-gallery-client/src/ImageGallery/ImageGallery.tsx

@@ -1,8 +1,9 @@
-import PhotoAlbum, { Photo } from "react-photo-album";
+import PhotoAlbum from "react-photo-album";
 import React from "react";
 import { Image } from "./Image";
+import { ImageWithThumbnail } from "./models";
 
-function ImageGallery({ images }: { images: Photo[] }) {
+function ImageGallery({ images }: { images: ImageWithThumbnail[] }) {
   //  For all kind of settings see:
   // https://react-photo-album.com/examples/playground
   // https://codesandbox.io/s/github/igordanchenko/react-photo-album/tree/main/examples/playground

picture-gallery-client/src/ImageGallery/models.ts

@@ -1,6 +1,12 @@
+import { Photo } from "react-photo-album";
+
 export interface Folders {
   name: string;
   fullPath: string;
   numberOfFiles: number;
   children: Folders[];
 }
+
+export interface ImageWithThumbnail extends Photo {
+  thumbnail: string;
+}

picture-gallery-client/src/ImageGalleryLayout.tsx

@@ -1,10 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Photo } from "react-photo-album";
 import Box from "@mui/material/Box";
 import CssBaseline from "@mui/material/CssBaseline";
 import { useLocation, useNavigate } from "react-router-dom";
 import { CircularProgress } from "@mui/material";
-import { Folders } from "./ImageGallery/models";
+import { Folders, ImageWithThumbnail } from "./ImageGallery/models";
 import ImageGalleryAppBar from "./ImageGallery/ImageGalleryAppBar";
 import DrawerHeader from "./MuiLayout/DrawerHeader";
 import ImageGalleryDrawer from "./ImageGallery/ImageGalleryDrawer";
@@ -18,7 +17,7 @@ function ImageGalleryLayout() {
   const [open, setOpen] = useState(true);
   const [error, setError] = useState(false);
   const [imagesLoaded, setImagesLoaded] = useState(false);
-  const [images, setImages] = useState<Photo[]>([]);
+  const [images, setImages] = useState<ImageWithThumbnail[]>([]);
   const [folders, setFolders] = useState<Folders>({
     name: "Home",
     fullPath: "/",

picture-gallery-server/src/controller/images.ts

@@ -28,14 +28,17 @@ const readThumbnails = (requestedPath: string): string[] => {
     : [];
 };
 
-const getSrc = (
+const getSrc = (requestedPath: string, f: Dirent): string =>
+  path.posix.join("/staticImages", requestedPath, f.name);
+
+const getThumbnail = (
   thumbnailExists: boolean,
   requestedPath: string,
   f: Dirent
 ): string =>
   thumbnailExists
     ? path.posix.join("/staticImages", thumbnailPath, requestedPath, f.name)
-    : path.posix.join("/staticImages", requestedPath, f.name);
+    : getSrc(requestedPath, f);
 
 const toImage = (
   metadata: sharp.Metadata,
@@ -45,7 +48,8 @@ const toImage = (
 ): Image => {
   const widthAndHeightSwap = metadata.orientation > 4; // see https://exiftool.org/TagNames/EXIF.html
   return a<Image>({
-    src: getSrc(thumbnailExists, requestedPath, f),
+    src: getSrc(requestedPath, f),
+    thumbnail: getThumbnail(thumbnailExists, requestedPath, f),
     width: widthAndHeightSwap ? metadata.height : metadata.width,
     height: widthAndHeightSwap ? metadata.width : metadata.height,
   });

picture-gallery-server/src/models.ts

@@ -1,5 +1,6 @@
 export interface Image {
   src: string;
+  thumbnail: string;
   width: number;
   height: number;
 }