diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index c4507d164..e8655a214 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -6,6 +6,8 @@ import { } from '@heroicons/react/outline'; import { CheckCircleIcon, + ChevronDoubleDownIcon, + ChevronDoubleUpIcon, DocumentRemoveIcon, ExternalLinkIcon, } from '@heroicons/react/solid'; @@ -73,6 +75,8 @@ const messages = defineMessages({ play4konplex: 'Play in 4K on Plex', markavailable: 'Mark as Available', mark4kavailable: 'Mark as Available in 4K', + showmore: 'Show More', + showless: 'Show Less', }); interface MovieDetailsProps { @@ -86,6 +90,8 @@ const MovieDetails: React.FC = ({ movie }) => { const intl = useIntl(); const { locale } = useLocale(); const [showManager, setShowManager] = useState(false); + const minStudios = 3; + const [showMoreStudios, setShowMoreStudios] = useState(false); const { data, error, revalidate } = useSWR( `/api/v1/movie/${router.query.movieId}`, @@ -111,6 +117,7 @@ const MovieDetails: React.FC = ({ movie }) => { return ; } + const showAllStudios = data.productionCompanies.length <= minStudios + 1; const mediaLinks: PlayButtonLink[] = []; if ( @@ -627,16 +634,44 @@ const MovieDetails: React.FC = ({ movie }) => { })} - {data.productionCompanies.map((s) => { - return ( - - {s.name} - - ); - })} + {data.productionCompanies + .slice( + 0, + showAllStudios || showMoreStudios + ? data.productionCompanies.length + : minStudios + ) + .map((s) => { + return ( + + {s.name} + + ); + })} + {!showAllStudios && ( + + )} )} diff --git a/src/i18n/locale/en.json b/src/i18n/locale/en.json index e1ccbb868..4d4bae4e5 100644 --- a/src/i18n/locale/en.json +++ b/src/i18n/locale/en.json @@ -83,6 +83,8 @@ "components.MovieDetails.releasedate": "Release Date", "components.MovieDetails.revenue": "Revenue", "components.MovieDetails.runtime": "{minutes} minutes", + "components.MovieDetails.showless": "Show Less", + "components.MovieDetails.showmore": "Show More", "components.MovieDetails.similar": "Similar Titles", "components.MovieDetails.studio": "{studioCount, plural, one {Studio} other {Studios}}", "components.MovieDetails.viewfullcrew": "View Full Crew", diff --git a/src/styles/globals.css b/src/styles/globals.css index e7829896c..939e415bd 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -160,7 +160,8 @@ ul.media-crew > li { } a.crew-name, -.media-fact-value a { +.media-fact-value a, +.media-fact-value button { @apply font-normal text-gray-400 transition duration-300 hover:underline hover:text-gray-100; } @@ -173,11 +174,11 @@ a.crew-name, } .media-fact { - @apply flex px-4 py-2 border-b border-gray-700 last:border-b-0; + @apply flex justify-between px-4 py-2 border-b border-gray-700 last:border-b-0; } .media-fact-value { - @apply flex-1 text-sm font-normal text-right text-gray-400; + @apply text-sm font-normal text-right text-gray-400; } .media-ratings {