diff --git a/src/components/Common/Badge/index.tsx b/src/components/Common/Badge/index.tsx index c897d86f3..33e55ab72 100644 --- a/src/components/Common/Badge/index.tsx +++ b/src/components/Common/Badge/index.tsx @@ -1,22 +1,23 @@ +import Link from 'next/link'; import React from 'react'; interface BadgeProps { badgeType?: 'default' | 'primary' | 'danger' | 'warning' | 'success'; className?: string; - url?: string; + href?: string; } const Badge: React.FC = ({ badgeType = 'default', className, - url, + href, children, }) => { const badgeStyle = [ 'px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap', ]; - if (url) { + if (href) { badgeStyle.push('transition cursor-pointer !no-underline'); } else { badgeStyle.push('cursor-default'); @@ -25,25 +26,25 @@ const Badge: React.FC = ({ switch (badgeType) { case 'danger': badgeStyle.push('bg-red-600 !text-red-100'); - if (url) { + if (href) { badgeStyle.push('hover:bg-red-500'); } break; case 'warning': badgeStyle.push('bg-yellow-500 !text-yellow-100'); - if (url) { + if (href) { badgeStyle.push('hover:bg-yellow-400'); } break; case 'success': badgeStyle.push('bg-green-500 !text-green-100'); - if (url) { + if (href) { badgeStyle.push('hover:bg-green-400'); } break; default: badgeStyle.push('bg-indigo-500 !text-indigo-100'); - if (url) { + if (href) { badgeStyle.push('hover:bg-indigo-400'); } } @@ -52,10 +53,10 @@ const Badge: React.FC = ({ badgeStyle.push(className); } - if (url) { + if (href?.includes('://')) { return ( = ({ {children} ); + } else if (href) { + return ( + + {children} + + ); } else { return {children}; } diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx index 267941fc2..52edd29b3 100644 --- a/src/components/IssueList/IssueItem/index.tsx +++ b/src/components/IssueList/IssueItem/index.tsx @@ -183,11 +183,11 @@ const IssueItem: React.FC = ({ issue }) => { {intl.formatMessage(messages.issuestatus)} {issue.status === IssueStatus.OPEN ? ( - + {intl.formatMessage(globalMessages.open)} ) : ( - + {intl.formatMessage(globalMessages.resolved)} )} diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 46a6862d8..980531666 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -85,7 +85,9 @@ const MovieDetails: React.FC = ({ movie }) => { const router = useRouter(); const intl = useIntl(); const { locale } = useLocale(); - const [showManager, setShowManager] = useState(false); + const [showManager, setShowManager] = useState( + router.query.manage == '1' ? true : false + ); const minStudios = 3; const [showMoreStudios, setShowMoreStudios] = useState(false); const [showIssueModal, setShowIssueModal] = useState(false); @@ -276,12 +278,9 @@ const MovieDetails: React.FC = ({ movie }) => { 0} + tmdbId={data.mediaInfo?.tmdbId} + mediaType="movie" plexUrl={data.mediaInfo?.plexUrl} - serviceUrl={ - hasPermission(Permission.ADMIN) - ? data.mediaInfo?.serviceUrl - : undefined - } /> {settings.currentSettings.movie4kEnabled && hasPermission( @@ -296,12 +295,9 @@ const MovieDetails: React.FC = ({ movie }) => { inProgress={ (data.mediaInfo?.downloadStatus4k ?? []).length > 0 } + tmdbId={data.mediaInfo?.tmdbId} + mediaType="movie" plexUrl={data.mediaInfo?.plexUrl4k} - serviceUrl={ - hasPermission(Permission.ADMIN) - ? data.mediaInfo?.serviceUrl4k - : undefined - } /> )} diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx index f2a866669..20fbac0ba 100644 --- a/src/components/RequestCard/index.tsx +++ b/src/components/RequestCard/index.tsx @@ -271,13 +271,17 @@ const RequestCard: React.FC = ({ request, onTitleData }) => { {intl.formatMessage(globalMessages.status)} - {requestData.media[requestData.is4k ? 'status4k' : 'status'] === - MediaStatus.UNKNOWN || - requestData.status === MediaRequestStatus.DECLINED ? ( + {requestData.status === MediaRequestStatus.DECLINED ? ( - {requestData.status === MediaRequestStatus.DECLINED - ? intl.formatMessage(globalMessages.declined) - : intl.formatMessage(globalMessages.failed)} + {intl.formatMessage(globalMessages.declined)} + + ) : requestData.media[requestData.is4k ? 'status4k' : 'status'] === + MediaStatus.UNKNOWN ? ( + + {intl.formatMessage(globalMessages.failed)} ) : ( = ({ request, onTitleData }) => { ).length > 0 } is4k={requestData.is4k} + tmdbId={requestData.media.tmdbId} + mediaType={requestData.type} plexUrl={ - requestData.is4k - ? requestData.media.plexUrl4k - : requestData.media.plexUrl - } - serviceUrl={ - hasPermission(Permission.ADMIN) - ? requestData.is4k - ? requestData.media.serviceUrl4k - : requestData.media.serviceUrl - : undefined + requestData.media[requestData.is4k ? 'plexUrl4k' : 'plexUrl'] } /> )} diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx index f3d9fb007..7a0619f21 100644 --- a/src/components/RequestList/RequestItem/index.tsx +++ b/src/components/RequestList/RequestItem/index.tsx @@ -272,13 +272,18 @@ const RequestItem: React.FC = ({ {intl.formatMessage(globalMessages.status)} - {requestData.media[requestData.is4k ? 'status4k' : 'status'] === - MediaStatus.UNKNOWN || - requestData.status === MediaRequestStatus.DECLINED ? ( + {requestData.status === MediaRequestStatus.DECLINED ? ( - {requestData.status === MediaRequestStatus.DECLINED - ? intl.formatMessage(globalMessages.declined) - : intl.formatMessage(globalMessages.failed)} + {intl.formatMessage(globalMessages.declined)} + + ) : requestData.media[ + requestData.is4k ? 'status4k' : 'status' + ] === MediaStatus.UNKNOWN ? ( + + {intl.formatMessage(globalMessages.failed)} ) : ( = ({ ).length > 0 } is4k={requestData.is4k} + tmdbId={requestData.media.tmdbId} + mediaType={requestData.type} plexUrl={ - requestData.is4k - ? requestData.media.plexUrl4k - : requestData.media.plexUrl - } - serviceUrl={ - hasPermission(Permission.ADMIN) - ? requestData.is4k - ? requestData.media.serviceUrl4k - : requestData.media.serviceUrl - : undefined + requestData.media[ + requestData.is4k ? 'plexUrl4k' : 'plexUrl' + ] } /> )} diff --git a/src/components/StatusBadge/index.tsx b/src/components/StatusBadge/index.tsx index 86c935bcc..cf02db003 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 { Permission, useUser } from '../../hooks/useUser'; import globalMessages from '../../i18n/globalMessages'; import Badge from '../Common/Badge'; @@ -16,6 +17,8 @@ interface StatusBadgeProps { inProgress?: boolean; plexUrl?: string; serviceUrl?: string; + tmdbId?: number; + mediaType?: 'movie' | 'tv'; } const StatusBadge: React.FC = ({ @@ -24,13 +27,21 @@ const StatusBadge: React.FC = ({ inProgress = false, plexUrl, serviceUrl, + tmdbId, + mediaType, }) => { const intl = useIntl(); + const { hasPermission } = useUser(); + + const manageLink = + tmdbId && mediaType && hasPermission(Permission.MANAGE_REQUESTS) + ? `/${mediaType}/${tmdbId}?manage=1` + : undefined; switch (status) { case MediaStatus.AVAILABLE: return ( - +
{intl.formatMessage(is4k ? messages.status4k : messages.status, { @@ -44,7 +55,7 @@ const StatusBadge: React.FC = ({ case MediaStatus.PARTIALLY_AVAILABLE: return ( - +
{intl.formatMessage(is4k ? messages.status4k : messages.status, { @@ -58,7 +69,7 @@ const StatusBadge: React.FC = ({ case MediaStatus.PROCESSING: return ( - +
{intl.formatMessage(is4k ? messages.status4k : messages.status, { @@ -74,7 +85,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 99f4345b9..a1371c359 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -80,7 +80,9 @@ const TvDetails: React.FC = ({ tv }) => { const intl = useIntl(); const { locale } = useLocale(); const [showRequestModal, setShowRequestModal] = useState(false); - const [showManager, setShowManager] = useState(false); + const [showManager, setShowManager] = useState( + router.query.manage == '1' ? true : false + ); const [showIssueModal, setShowIssueModal] = useState(false); const { @@ -278,12 +280,9 @@ const TvDetails: React.FC = ({ tv }) => { 0} + tmdbId={data.mediaInfo?.tmdbId} + mediaType="tv" plexUrl={data.mediaInfo?.plexUrl} - serviceUrl={ - hasPermission(Permission.ADMIN) - ? data.mediaInfo?.serviceUrl - : undefined - } /> {settings.currentSettings.series4kEnabled && hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], { @@ -295,12 +294,9 @@ const TvDetails: React.FC = ({ tv }) => { inProgress={ (data.mediaInfo?.downloadStatus4k ?? []).length > 0 } + tmdbId={data.mediaInfo?.tmdbId} + mediaType="tv" plexUrl={data.mediaInfo?.plexUrl4k} - serviceUrl={ - hasPermission(Permission.ADMIN) - ? data.mediaInfo?.serviceUrl4k - : undefined - } /> )}