From ff0d3f676e68e831ae8d059a15830f75ea840ce3 Mon Sep 17 00:00:00 2001 From: Stefan Forstenlechner Date: Thu, 26 May 2022 23:06:24 +0200 Subject: [PATCH] Show original image in big picture mode --- picture-gallery-client/src/ImageGallery/Image.tsx | 13 ++++++++----- .../src/ImageGallery/ImageGallery.tsx | 5 +++-- picture-gallery-client/src/ImageGallery/models.ts | 6 ++++++ picture-gallery-client/src/ImageGalleryLayout.tsx | 5 ++--- picture-gallery-server/src/controller/images.ts | 10 +++++++--- picture-gallery-server/src/models.ts | 1 + 6 files changed, 27 insertions(+), 13 deletions(-) diff --git a/picture-gallery-client/src/ImageGallery/Image.tsx b/picture-gallery-client/src/ImageGallery/Image.tsx index 313c848..ff8131f 100644 --- a/picture-gallery-client/src/ImageGallery/Image.tsx +++ b/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 = ({ + imageProps: { alt, style, src: _useSrcAndThumbnailFromPhoto, ...rest }, + photo, +}: PhotoProps): 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} /> - {alt} + {alt} ); diff --git a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx index 88ceb76..3634b88 100644 --- a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx +++ b/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 diff --git a/picture-gallery-client/src/ImageGallery/models.ts b/picture-gallery-client/src/ImageGallery/models.ts index e2206cd..c5c5d7c 100644 --- a/picture-gallery-client/src/ImageGallery/models.ts +++ b/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; +} diff --git a/picture-gallery-client/src/ImageGalleryLayout.tsx b/picture-gallery-client/src/ImageGalleryLayout.tsx index 2174d30..b25ee72 100644 --- a/picture-gallery-client/src/ImageGalleryLayout.tsx +++ b/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([]); + const [images, setImages] = useState([]); const [folders, setFolders] = useState({ name: "Home", fullPath: "/", diff --git a/picture-gallery-server/src/controller/images.ts b/picture-gallery-server/src/controller/images.ts index 299dda3..f1dc909 100644 --- a/picture-gallery-server/src/controller/images.ts +++ b/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({ - 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, }); diff --git a/picture-gallery-server/src/models.ts b/picture-gallery-server/src/models.ts index d8b5ce2..92b7e45 100644 --- a/picture-gallery-server/src/models.ts +++ b/picture-gallery-server/src/models.ts @@ -1,5 +1,6 @@ export interface Image { src: string; + thumbnail: string; width: number; height: number; }