diff --git a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx index a9813698d..4e723858c 100644 --- a/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx +++ b/ui/v2.5/src/components/Movies/MovieDetails/Movie.tsx @@ -1,4 +1,5 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect, useMemo, useState } from "react"; +import { Button } from "react-bootstrap"; import { FormattedMessage, useIntl } from "react-intl"; import { Helmet } from "react-helmet"; import Mousetrap from "mousetrap"; @@ -12,6 +13,7 @@ import { useParams, useHistory } from "react-router-dom"; import { DetailsEditNavbar } from "src/components/Shared/DetailsEditNavbar"; import { ErrorMessage } from "src/components/Shared/ErrorMessage"; import { LoadingIndicator } from "src/components/Shared/LoadingIndicator"; +import { useLightbox } from "src/hooks/Lightbox/hooks"; import { ModalComponent } from "src/components/Shared/Modal"; import { useToast } from "src/hooks/Toast"; import { MovieScenesPanel } from "./MovieScenesPanel"; @@ -37,6 +39,43 @@ const MoviePage: React.FC = ({ movie }) => { const [backImage, setBackImage] = useState(); const [encodingImage, setEncodingImage] = useState(false); + const defaultImage = + movie.front_image_path && movie.front_image_path.includes("default=true") + ? true + : false; + + const lightboxImages = useMemo(() => { + const covers = [ + ...(movie.front_image_path && !defaultImage + ? [ + { + paths: { + thumbnail: movie.front_image_path, + image: movie.front_image_path, + }, + }, + ] + : []), + ...(movie.back_image_path + ? [ + { + paths: { + thumbnail: movie.back_image_path, + image: movie.back_image_path, + }, + }, + ] + : []), + ]; + return covers; + }, [movie.front_image_path, movie.back_image_path, defaultImage]); + + const index = lightboxImages.length; + + const showLightbox = useLightbox({ + images: lightboxImages, + }); + const [updateMovie, { loading: updating }] = useMovieUpdate(); const [deleteMovie, { loading: deleting }] = useMovieDestroy({ id: movie.id, @@ -129,12 +168,22 @@ const MoviePage: React.FC = ({ movie }) => { } } - if (image) { + if (image && defaultImage) { return (
Front Cover
); + } else if (image) { + return ( + + ); } } @@ -150,9 +199,13 @@ const MoviePage: React.FC = ({ movie }) => { if (image) { return ( -
+
+ ); } } diff --git a/ui/v2.5/src/components/Movies/styles.scss b/ui/v2.5/src/components/Movies/styles.scss index 09cfa97da..1a8d64e2a 100644 --- a/ui/v2.5/src/components/Movies/styles.scss +++ b/ui/v2.5/src/components/Movies/styles.scss @@ -32,6 +32,7 @@ max-width: 100%; .movie-image-container { + box-shadow: none; margin: 1rem; } diff --git a/ui/v2.5/src/components/Performers/styles.scss b/ui/v2.5/src/components/Performers/styles.scss index 7bc932363..bef4fa0eb 100644 --- a/ui/v2.5/src/components/Performers/styles.scss +++ b/ui/v2.5/src/components/Performers/styles.scss @@ -1,7 +1,13 @@ #performer-page { - .performer-image-container .performer { - max-height: calc(100vh - 6rem); - max-width: 100%; + .performer-image-container { + .btn { + box-shadow: none; + } + + .performer { + max-height: calc(100vh - 6rem); + max-width: 100%; + } } .content-container {