diff --git a/.gitignore b/.gitignore index f98378a..14cf86f 100644 --- a/.gitignore +++ b/.gitignore @@ -4,3 +4,6 @@ public/.thumbnail node_modules build dist + +# only on top level +package-lock.json diff --git a/package.json b/package.json index 4862c5e..a08ebeb 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,8 @@ "install-all": "npm i && concurrently npm:install:client npm:install:server", "install:client": "cd picture-gallery-client && npm i", "install:server": "cd picture-gallery-server && npm i", - "start-all": "npm run build:client && concurrently npm:start:client npm:run:server", - "build:client": "npm run --prefix picture-gallery-client client:build", - "start:client": "npm run --prefix picture-gallery-client client:start", + "start-all": "concurrently npm:run:client npm:run:server", + "run:client": "npm run --prefix picture-gallery-client client:run", "run:server": "npm run --prefix picture-gallery-server server:run", "docker:buildImage": "docker build . -t simple-picture-gallery" } diff --git a/picture-gallery-client/package-lock.json b/picture-gallery-client/package-lock.json index e6d018b..db7435a 100644 --- a/picture-gallery-client/package-lock.json +++ b/picture-gallery-client/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "picture-gallery-client", "version": "0.1.0", "dependencies": { "@emotion/react": "11.9.0", @@ -31,7 +32,8 @@ "react-router-dom": "6.3.0", "react-scripts": "5.0.0", "typescript": "4.6.3", - "web-vitals": "2.1.4" + "web-vitals": "2.1.4", + "yet-another-react-lightbox": "1.13.3" }, "devDependencies": { "@testing-library/jest-dom": "5.16.4", @@ -16992,6 +16994,19 @@ "node": ">=10" } }, + "node_modules/yet-another-react-lightbox": { + "version": "1.13.3", + "resolved": "https://artifactory.eksinfra.direct/artifactory/api/npm/allianz-direct-npm-public/yet-another-react-lightbox/-/yet-another-react-lightbox-1.13.3.tgz", + "integrity": "sha512-lWQ++7eRgJb9yw5QxgJd5gmHI+3qYYEWVoxPdcGCMvGi/jAIrLEp1je0KA+OEdXxjxyR9HfTBB5EgNky0545Mg==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", @@ -29032,6 +29047,12 @@ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==" }, + "yet-another-react-lightbox": { + "version": "1.13.3", + "resolved": "https://artifactory.eksinfra.direct/artifactory/api/npm/allianz-direct-npm-public/yet-another-react-lightbox/-/yet-another-react-lightbox-1.13.3.tgz", + "integrity": "sha512-lWQ++7eRgJb9yw5QxgJd5gmHI+3qYYEWVoxPdcGCMvGi/jAIrLEp1je0KA+OEdXxjxyR9HfTBB5EgNky0545Mg==", + "requires": {} + }, "yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", diff --git a/picture-gallery-client/package.json b/picture-gallery-client/package.json index 79fb578..afb8f67 100644 --- a/picture-gallery-client/package.json +++ b/picture-gallery-client/package.json @@ -13,13 +13,13 @@ "@types/node": "16.11.26", "@types/react": "18.0.0", "@types/react-dom": "18.0.0", - "eslint": "8.13.0", + "eslint": "8.21.0", "eslint-config-prettier": "8.5.0", - "eslint-import-resolver-typescript": "2.7.1", + "eslint-import-resolver-typescript": "3.4.0", "eslint-plugin-import": "2.26.0", - "eslint-plugin-jsx-a11y": "6.5.1", - "eslint-plugin-prettier": "4.0.0", - "eslint-plugin-react": "7.29.4", + "eslint-plugin-jsx-a11y": "6.6.1", + "eslint-plugin-prettier": "4.2.1", + "eslint-plugin-react": "7.30.1", "eslint-plugin-react-hooks": "4.4.0", "react": "18.0.0", "react-dom": "18.0.0", @@ -28,7 +28,8 @@ "react-scripts": "5.0.0", "react-inject-env": "2.1.0", "typescript": "4.6.3", - "web-vitals": "2.1.4" + "web-vitals": "2.1.4", + "yet-another-react-lightbox": "1.13.4" }, "scripts": { "format": "prettier --write \"**/*.+(ts|tsx)\"", @@ -37,6 +38,7 @@ "lint:fix": "eslint --fix src/**", "client:build": "react-scripts build && npm run set-environment", "client:eject": "react-scripts eject", + "client:run": "npm run client:build && npm run client:start", "client:start": "react-scripts start", "client:test": "react-scripts test", "set-environment": "npx react-inject-env set" @@ -60,11 +62,11 @@ ] }, "devDependencies": { - "@testing-library/jest-dom": "5.16.4", - "@testing-library/react": "12.1.4", - "@testing-library/user-event": "13.5.0", - "@typescript-eslint/eslint-plugin": "5.18.0", - "@typescript-eslint/parser": "5.18.0", - "prettier": "2.6.2" + "@testing-library/jest-dom": "5.16.5", + "@testing-library/react": "13.3.0", + "@testing-library/user-event": "14.4.2", + "@typescript-eslint/eslint-plugin": "5.32.0", + "@typescript-eslint/parser": "5.32.0", + "prettier": "2.7.1" } } diff --git a/picture-gallery-client/src/ImageGallery/Image.tsx b/picture-gallery-client/src/ImageGallery/Image.tsx index 194dbc5..e952942 100644 --- a/picture-gallery-client/src/ImageGallery/Image.tsx +++ b/picture-gallery-client/src/ImageGallery/Image.tsx @@ -1,25 +1,11 @@ import { PhotoProps } from "react-photo-album"; -import React from "react"; -import { Backdrop } from "@mui/material"; import { ImageWithThumbnail } from "./models"; -import { Spinner } from "./Spinner"; +import React from "react"; export const Image = ({ imageProps: { alt, style, src: _useSrcAndThumbnailFromPhoto, ...rest }, photo, }: PhotoProps): JSX.Element => { - const [open, setOpen] = React.useState(false); - const [loaded, setLoaded] = React.useState(false); - const handleClose = () => { - setOpen(false); - }; - const handleToggle = () => { - setOpen(!open); - }; - const handleImageLoaded = () => { - setLoaded(true); - }; - return ( <> ({ }} {...rest} src={photo.thumbnail} - onClick={handleToggle} + loading={"lazy"} /> - {open && ( - theme.zIndex.drawer + 1 }} - open={open} - onClick={handleClose} - > - {!loaded && } - {alt} - - )} ); }; diff --git a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx index 3634b88..35cfe59 100644 --- a/picture-gallery-client/src/ImageGallery/ImageGallery.tsx +++ b/picture-gallery-client/src/ImageGallery/ImageGallery.tsx @@ -1,19 +1,51 @@ import PhotoAlbum from "react-photo-album"; -import React from "react"; +import React, { useState } from "react"; import { Image } from "./Image"; import { ImageWithThumbnail } from "./models"; +import { Lightbox } from "yet-another-react-lightbox"; +import "yet-another-react-lightbox/styles.css"; + +import { Fullscreen } from "yet-another-react-lightbox/plugins/fullscreen"; +import { Slideshow } from "yet-another-react-lightbox/plugins/slideshow"; +import { Thumbnails } from "yet-another-react-lightbox/plugins/thumbnails"; +import "yet-another-react-lightbox/plugins/thumbnails.css"; +import "./yarl.thumbnails.override.css"; +import { Zoom } from "yet-another-react-lightbox/plugins/zoom"; function ImageGallery({ images }: { images: ImageWithThumbnail[] }) { + const [index, setIndex] = useState(-1); + + if (images.length === 0) { + return ( +

+ No images available. You may want to add images in your root directory. +

+ ); + } + // 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 - - return images.length === 0 ? ( -

- No images available. You may want to add images in your root directory. -

- ) : ( - + return ( + <> + setIndex(index)} + /> + = 0} + index={index} + close={() => setIndex(-1)} + controller={{ closeOnBackdropClick: true }} + plugins={[Fullscreen, Slideshow, Thumbnails, Zoom]} + styles={{ + root: { "--yarl__color_backdrop": "rgba(0, 0, 0, 0.85)" } as any, + }} + /> + ); } diff --git a/picture-gallery-client/src/ImageGallery/yarl.thumbnails.override.css b/picture-gallery-client/src/ImageGallery/yarl.thumbnails.override.css new file mode 100644 index 0000000..290815f --- /dev/null +++ b/picture-gallery-client/src/ImageGallery/yarl.thumbnails.override.css @@ -0,0 +1,12 @@ +.yarl__thumbnails_top .yarl__thumbnails_container::before, .yarl__thumbnails_bottom .yarl__thumbnails_container::before { + background: initial; +} +.yarl__thumbnails_top .yarl__thumbnails_container::after, .yarl__thumbnails_bottom .yarl__thumbnails_container::after { + background: initial; +} +.yarl__thumbnails_start .yarl__thumbnails_container::before, .yarl__thumbnails_end .yarl__thumbnails_container::before { + background: initial; +} +.yarl__thumbnails_start .yarl__thumbnails_container::after, .yarl__thumbnails_end .yarl__thumbnails_container::after { + background: initial; +} diff --git a/picture-gallery-server/package-lock.json b/picture-gallery-server/package-lock.json index 4118322..2bba0b8 100644 --- a/picture-gallery-server/package-lock.json +++ b/picture-gallery-server/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "picture-gallery-server", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/picture-gallery-server/package.json b/picture-gallery-server/package.json index ecb3c15..da70477 100644 --- a/picture-gallery-server/package.json +++ b/picture-gallery-server/package.json @@ -9,7 +9,7 @@ "lint:fix": "eslint --fix src/**", "server:build": "npx tsc", "server:start": "node dist/app.js", - "server:run": "npm run build-server && npm run start-server", + "server:run": "npm run server:build && npm run server:start", "server:watch": "npx nodemon src/app.ts", "test": "jest", "test:watch": "jest --watch"