diff --git a/ui/v2.5/package.json b/ui/v2.5/package.json index 5423cf023..9c72a67ce 100644 --- a/ui/v2.5/package.json +++ b/ui/v2.5/package.json @@ -36,7 +36,9 @@ "bootstrap": "^4.5.2", "classnames": "^2.2.6", "flag-icon-css": "^3.5.0", + "flexbin": "^0.2.0", "formik": "^2.1.5", + "fslightbox-react": "^1.5.0", "graphql": "^15.3.0", "graphql-tag": "^2.11.0", "i18n-iso-countries": "^6.0.0", @@ -67,6 +69,7 @@ "@graphql-codegen/typescript-operations": "^1.17.8", "@graphql-codegen/typescript-react-apollo": "^2.0.6", "@types/classnames": "^2.2.10", + "@types/fslightbox-react": "^1.4.0", "@types/lodash": "^4.14.161", "@types/node": "14.6.4", "@types/react": "16.9.43", diff --git a/ui/v2.5/src/components/Galleries/Gallery.tsx b/ui/v2.5/src/components/Galleries/Gallery.tsx index 3a57345b8..e586a2587 100644 --- a/ui/v2.5/src/components/Galleries/Gallery.tsx +++ b/ui/v2.5/src/components/Galleries/Gallery.tsx @@ -18,7 +18,7 @@ export const Gallery: React.FC = () => { if (error) return
{error.message}
; return ( -
+
); diff --git a/ui/v2.5/src/components/Galleries/GalleryViewer.tsx b/ui/v2.5/src/components/Galleries/GalleryViewer.tsx index 98785a2f9..b2c555124 100644 --- a/ui/v2.5/src/components/Galleries/GalleryViewer.tsx +++ b/ui/v2.5/src/components/Galleries/GalleryViewer.tsx @@ -1,58 +1,46 @@ -import React, { FunctionComponent, useState } from "react"; -import Lightbox from "react-images"; -import Gallery from "react-photo-gallery"; +import React, { useState } from "react"; import * as GQL from "src/core/generated-graphql"; +import FsLightbox from "fslightbox-react"; +import "flexbin/flexbin.css"; interface IProps { gallery: GQL.GalleryDataFragment; } -export const GalleryViewer: FunctionComponent = ({ gallery }) => { - const [currentImage, setCurrentImage] = useState(0); - const [lightboxIsOpen, setLightboxIsOpen] = useState(false); +export const GalleryViewer: React.FC = ({ gallery }) => { + const [lightboxToggle, setLightboxToggle] = useState(false); + const [currentIndex, setCurrentIndex] = useState(0); - function openLightbox( - _event: React.MouseEvent, - obj: { index: number } - ) { - setCurrentImage(obj.index); - setLightboxIsOpen(true); - } - function closeLightbox() { - setCurrentImage(0); - setLightboxIsOpen(false); - } - function gotoPrevious() { - setCurrentImage(currentImage - 1); - } - function gotoNext() { - setCurrentImage(currentImage + 1); - } + const openImage = (index: number) => { + setCurrentIndex(index); + setLightboxToggle(!lightboxToggle); + }; - const photos = gallery.files.map((file) => ({ - src: file.path ?? "", - caption: file.name ?? "", - })); - const thumbs = gallery.files.map((file) => ({ - src: `${file.path}?thumb=true` || "", - width: 1, - height: 1, - })); + const photos = gallery.files.map((file) => file.path ?? ""); + const thumbs = gallery.files.map((file, index) => ( +
openImage(index)} + onKeyPress={() => openImage(index)} + > + {file.name +
+ )); return ( -
- - - window.open(photos[currentImage].src ?? "", "_blank") - } - isOpen={lightboxIsOpen} - width={9999} +
+
{thumbs}
+
); diff --git a/ui/v2.5/src/components/Galleries/styles.scss b/ui/v2.5/src/components/Galleries/styles.scss index 6d7e58f23..60c986f53 100644 --- a/ui/v2.5/src/components/Galleries/styles.scss +++ b/ui/v2.5/src/components/Galleries/styles.scss @@ -1,16 +1,20 @@ -/* stylelint-disable selector-class-pattern */ -.react-photo-gallery--gallery { - img { - object-fit: contain; - } -} -/* stylelint-enable selector-class-pattern */ - .gallery-card { - padding: 0.5rem; + &.card { + padding: 0; + padding-bottom: 1rem; + } + + .card-section { + margin-top: auto; + } &-image { object-fit: contain; - vertical-align: middle; + } +} + +.gallery-image { + &:hover { + cursor: pointer; } } diff --git a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx index 1bf1fbb79..52148c695 100644 --- a/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx +++ b/ui/v2.5/src/components/Performers/PerformerDetails/Performer.tsx @@ -12,7 +12,7 @@ import { import { CountryFlag, Icon, LoadingIndicator } from "src/components/Shared"; import { useToast } from "src/hooks"; import { TextUtils } from "src/utils"; -import Lightbox from "react-images"; +import FsLightbox from "fslightbox-react"; import { PerformerDetailsPanel } from "./PerformerDetailsPanel"; import { PerformerOperationsPanel } from "./PerformerOperationsPanel"; import { PerformerScenesPanel } from "./PerformerScenesPanel"; @@ -34,7 +34,7 @@ export const Performer: React.FC = () => { >({}); const [imagePreview, setImagePreview] = useState(); const [imageEncoding, setImageEncoding] = useState(false); - const [lightboxIsOpen, setLightboxIsOpen] = useState(false); + const [lightboxToggle, setLightboxToggle] = useState(false); // if undefined then get the existing image // if null then get the default (no) image @@ -288,8 +288,6 @@ export const Performer: React.FC = () => {
); - const photos = [{ src: activeImage, caption: "Image" }]; - if (!performer.id) { return ; } @@ -300,7 +298,10 @@ export const Performer: React.FC = () => { {imageEncoding ? ( ) : ( - )} @@ -321,14 +322,7 @@ export const Performer: React.FC = () => {
{renderTabs()}
- setLightboxIsOpen(false)} - currentImage={0} - isOpen={lightboxIsOpen} - onClickImage={() => window.open(activeImage, "_blank")} - width={9999} - /> + ); }; diff --git a/ui/v2.5/yarn.lock b/ui/v2.5/yarn.lock index d2d93b411..d8e0c00b5 100644 --- a/ui/v2.5/yarn.lock +++ b/ui/v2.5/yarn.lock @@ -2919,6 +2919,13 @@ dependencies: "@types/node" "*" +"@types/fslightbox-react@^1.4.0": + version "1.4.0" + resolved "https://registry.yarnpkg.com/@types/fslightbox-react/-/fslightbox-react-1.4.0.tgz#d2b20486830745ae80318c1c478c9beae5f2cd8a" + integrity sha512-ocIiZqFQ3BWBZB8Bp0fuNma7Eb0aOjkgk/nEUfW0omdRw4ciaVivabfsWldNuR69KwRJrvs6MZQuvVV6JEqlFg== + dependencies: + "@types/react" "*" + "@types/glob@^7.1.1": version "7.1.1" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575" @@ -7143,6 +7150,11 @@ flatten@^1.0.2: resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b" integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg== +flexbin@^0.2.0: + version "0.2.0" + resolved "https://registry.yarnpkg.com/flexbin/-/flexbin-0.2.0.tgz#0126306d3d595fcb7dfcb87149b9c9599ff8f4e9" + integrity sha1-ASYwbT1ZX8t9/LhxSbnJWZ/49Ok= + flush-write-stream@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -7338,6 +7350,11 @@ fsevents@^1.2.7: bindings "^1.5.0" nan "^2.12.1" +fslightbox-react@^1.5.0: + version "1.5.0" + resolved "https://registry.yarnpkg.com/fslightbox-react/-/fslightbox-react-1.5.0.tgz#07cf41d7ff8b02a79a0886d13519550b79dc50e5" + integrity sha512-xBe1K06pa3opWar/xBtArsHMnxMJWsmg5EmNdDtheDL9nMCqk2AXYlNnstfYVqtJJjqNReqeL21wc52Yy4rwWg== + fstream@^1.0.0, fstream@^1.0.12: version "1.0.12" resolved "https://registry.yarnpkg.com/fstream/-/fstream-1.0.12.tgz#4e8ba8ee2d48be4f7d0de505455548eae5932045"