shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-28 04:52:59 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add 'show more/less...' for studios on movie details page (#1770)

Browse Source
This commit is contained in:
Dustin Hildebrandt
2021-07-13 04:13:21 -05:00
committed by GitHub
parent 57b52fc9cc
commit 680ea0c87a
3 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/MovieDetails/index.tsx
View File

@@ -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<MovieDetailsProps> = ({ 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<MovieDetailsType>(
`/api/v1/movie/${router.query.movieId}`,
@@ -111,6 +117,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
return <Error statusCode={404} />;
}
const showAllStudios = data.productionCompanies.length <= minStudios + 1;
const mediaLinks: PlayButtonLink[] = [];
if (
@@ -627,16 +634,44 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
})}
</span>
<span className="media-fact-value">
{data.productionCompanies.map((s) => {
return (
<Link
href={`/discover/movies/studio/${s.id}`}
key={`studio-${s.id}`}
>
<a className="block">{s.name}</a>
</Link>
);
})}
{data.productionCompanies
.slice(
0,
showAllStudios || showMoreStudios
? data.productionCompanies.length
: minStudios
)
.map((s) => {
return (
<Link
href={`/discover/movies/studio/${s.id}`}
key={`studio-${s.id}`}
>
<a className="block">{s.name}</a>
</Link>
);
})}
{!showAllStudios && (
<button
type="button"
onClick={() => {
setShowMoreStudios(!showMoreStudios);
}}
>
<span className="flex items-center">
{intl.formatMessage(
!showMoreStudios
? messages.showmore
: messages.showless
)}
{!showMoreStudios ? (
<ChevronDoubleDownIcon className="w-4 h-4 ml-1" />
) : (
<ChevronDoubleUpIcon className="w-4 h-4 ml-1" />
)}
</span>
</button>
)}
</span>
</div>
)}