diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 3e92f46fe..8dd00159c 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -16,7 +16,7 @@ import 'country-flag-icons/3x2/flags.css'; import { uniqBy } from 'lodash'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import React, { useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import useSWR from 'swr'; import type { RTRating } from '../../../server/api/rottentomatoes'; @@ -109,6 +109,10 @@ const MovieDetails: React.FC = ({ movie }) => { [data] ); + useEffect(() => { + setShowManager(router.query.manage == '1' ? true : false); + }, [router.query.manage]); + if (!data && !error) { return ; } @@ -134,6 +138,7 @@ const MovieDetails: React.FC = ({ movie }) => { } if ( + settings.currentSettings.movie4kEnabled && data.mediaInfo?.plexUrl4k && hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE], { type: 'or', @@ -254,7 +259,13 @@ const MovieDetails: React.FC = ({ movie }) => { setShowManager(false)} + onClose={() => { + setShowManager(false); + router.push({ + pathname: router.pathname, + query: { movieId: router.query.movieId }, + }); + }} revalidate={() => revalidate()} show={showManager} /> @@ -284,7 +295,11 @@ const MovieDetails: React.FC = ({ movie }) => { /> {settings.currentSettings.movie4kEnabled && hasPermission( - [Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE], + [ + Permission.MANAGE_REQUESTS, + Permission.REQUEST_4K, + Permission.REQUEST_4K_MOVIE, + ], { type: 'or', } diff --git a/src/components/StatusBadge/index.tsx b/src/components/StatusBadge/index.tsx index b6e64b61b..196b3a5de 100644 --- a/src/components/StatusBadge/index.tsx +++ b/src/components/StatusBadge/index.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { defineMessages, useIntl } from 'react-intl'; import { MediaStatus } from '../../../server/constants/media'; import Spinner from '../../assets/spinner.svg'; +import useSettings from '../../hooks/useSettings'; import { Permission, useUser } from '../../hooks/useUser'; import globalMessages from '../../i18n/globalMessages'; import Badge from '../Common/Badge'; @@ -32,16 +33,46 @@ const StatusBadge: React.FC = ({ }) => { const intl = useIntl(); const { hasPermission } = useUser(); + const settings = useSettings(); - const manageLink = - tmdbId && mediaType && hasPermission(Permission.MANAGE_REQUESTS) - ? `/${mediaType}/${tmdbId}?manage=1` - : undefined; + let mediaLink: string | undefined; + + if ( + mediaType && + plexUrl && + hasPermission( + is4k + ? [ + Permission.REQUEST_4K, + mediaType === 'movie' + ? Permission.REQUEST_4K_MOVIE + : Permission.REQUEST_4K_TV, + ] + : [ + Permission.REQUEST, + mediaType === 'movie' + ? Permission.REQUEST_MOVIE + : Permission.REQUEST_TV, + ], + { + type: 'or', + } + ) && + (!is4k || + (mediaType === 'movie' + ? settings.currentSettings.movie4kEnabled + : settings.currentSettings.series4kEnabled)) + ) { + mediaLink = plexUrl; + } else if (hasPermission(Permission.MANAGE_REQUESTS)) { + mediaLink = + mediaType && tmdbId ? `/${mediaType}/${tmdbId}?manage=1` : serviceUrl; + } switch (status) { case MediaStatus.AVAILABLE: return ( - +
{intl.formatMessage(is4k ? messages.status4k : messages.status, { @@ -55,7 +86,7 @@ const StatusBadge: React.FC = ({ case MediaStatus.PARTIALLY_AVAILABLE: return ( - +
{intl.formatMessage(is4k ? messages.status4k : messages.status, { @@ -69,7 +100,7 @@ const StatusBadge: React.FC = ({ case MediaStatus.PROCESSING: return ( - +
{intl.formatMessage(is4k ? messages.status4k : messages.status, { @@ -85,7 +116,7 @@ const StatusBadge: React.FC = ({ case MediaStatus.PENDING: return ( - + {intl.formatMessage(is4k ? messages.status4k : messages.status, { status: intl.formatMessage(globalMessages.pending), })} diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index 0df7dab6b..64327648b 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -9,7 +9,7 @@ import { hasFlag } from 'country-flag-icons'; import 'country-flag-icons/3x2/flags.css'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import React, { useMemo, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; import useSWR from 'swr'; import type { RTRating } from '../../../server/api/rottentomatoes'; @@ -102,6 +102,10 @@ const TvDetails: React.FC = ({ tv }) => { [data] ); + useEffect(() => { + setShowManager(router.query.manage == '1' ? true : false); + }, [router.query.manage]); + if (!data && !error) { return ; } @@ -112,7 +116,12 @@ const TvDetails: React.FC = ({ tv }) => { const mediaLinks: PlayButtonLink[] = []; - if (data.mediaInfo?.plexUrl) { + if ( + data.mediaInfo?.plexUrl && + hasPermission([Permission.REQUEST, Permission.REQUEST_TV], { + type: 'or', + }) + ) { mediaLinks.push({ text: intl.formatMessage(messages.playonplex), url: data.mediaInfo?.plexUrl, @@ -121,6 +130,7 @@ const TvDetails: React.FC = ({ tv }) => { } if ( + settings.currentSettings.series4kEnabled && data.mediaInfo?.plexUrl4k && hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], { type: 'or', @@ -256,7 +266,13 @@ const TvDetails: React.FC = ({ tv }) => { setShowManager(false)} + onClose={() => { + setShowManager(false); + router.push({ + pathname: router.pathname, + query: { tvId: router.query.tvId }, + }); + }} revalidate={() => revalidate()} show={showManager} /> @@ -285,9 +301,16 @@ const TvDetails: React.FC = ({ tv }) => { plexUrl={data.mediaInfo?.plexUrl} /> {settings.currentSettings.series4kEnabled && - hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], { - type: 'or', - }) && ( + hasPermission( + [ + Permission.MANAGE_REQUESTS, + Permission.REQUEST_4K, + Permission.REQUEST_4K_TV, + ], + { + type: 'or', + } + ) && (