fix(frontend): various fixes (#2524)

* fix(frontend): various fixes

* fix: service URL does not require media type

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<MovieDetailsProps> = ({ movie }) => {
     [data]
   );
 
+  useEffect(() => {
+    setShowManager(router.query.manage == '1' ? true : false);
+  }, [router.query.manage]);
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -134,6 +138,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ 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<MovieDetailsProps> = ({ movie }) => {
       <ManageSlideOver
         data={data}
         mediaType="movie"
-        onClose={() => 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<MovieDetailsProps> = ({ movie }) => {
             />
             {settings.currentSettings.movie4kEnabled &&
               hasPermission(
-                [Permission.REQUEST_4K, Permission.REQUEST_4K_MOVIE],
+                [
+                  Permission.MANAGE_REQUESTS,
+                  Permission.REQUEST_4K,
+                  Permission.REQUEST_4K_MOVIE,
+                ],
                 {
                   type: 'or',
                 }

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<StatusBadgeProps> = ({
 }) => {
   const intl = useIntl();
   const { hasPermission } = useUser();
+  const settings = useSettings();
 
-  const manageLink =
+  let mediaLink: string | undefined;
-    tmdbId && mediaType && hasPermission(Permission.MANAGE_REQUESTS)
+
-      ? `/${mediaType}/${tmdbId}?manage=1`
+  if (
-      : undefined;
+    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 (
-        <Badge badgeType="success" href={plexUrl}>
+        <Badge badgeType="success" href={mediaLink}>
           <div className="flex items-center">
             <span>
               {intl.formatMessage(is4k ? messages.status4k : messages.status, {
@@ -55,7 +86,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
 
     case MediaStatus.PARTIALLY_AVAILABLE:
       return (
-        <Badge badgeType="success" href={plexUrl}>
+        <Badge badgeType="success" href={mediaLink}>
           <div className="flex items-center">
             <span>
               {intl.formatMessage(is4k ? messages.status4k : messages.status, {
@@ -69,7 +100,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
 
     case MediaStatus.PROCESSING:
       return (
-        <Badge badgeType="primary" href={manageLink ?? serviceUrl}>
+        <Badge badgeType="primary" href={mediaLink}>
           <div className="flex items-center">
             <span>
               {intl.formatMessage(is4k ? messages.status4k : messages.status, {
@@ -85,7 +116,7 @@ const StatusBadge: React.FC<StatusBadgeProps> = ({
 
     case MediaStatus.PENDING:
       return (
-        <Badge badgeType="warning" href={manageLink}>
+        <Badge badgeType="warning" href={mediaLink}>
           {intl.formatMessage(is4k ? messages.status4k : messages.status, {
             status: intl.formatMessage(globalMessages.pending),
           })}

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<TvDetailsProps> = ({ tv }) => {
     [data]
   );
 
+  useEffect(() => {
+    setShowManager(router.query.manage == '1' ? true : false);
+  }, [router.query.manage]);
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -112,7 +116,12 @@ const TvDetails: React.FC<TvDetailsProps> = ({ 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<TvDetailsProps> = ({ 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<TvDetailsProps> = ({ tv }) => {
       <ManageSlideOver
         data={data}
         mediaType="tv"
-        onClose={() => 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<TvDetailsProps> = ({ tv }) => {
               plexUrl={data.mediaInfo?.plexUrl}
             />
             {settings.currentSettings.series4kEnabled &&
-              hasPermission([Permission.REQUEST_4K, Permission.REQUEST_4K_TV], {
+              hasPermission(
-                type: 'or',
+                [
-              }) && (
+                  Permission.MANAGE_REQUESTS,
+                  Permission.REQUEST_4K,
+                  Permission.REQUEST_4K_TV,
+                ],
+                {
+                  type: 'or',
+                }
+              ) && (
                 <StatusBadge
                   status={data.mediaInfo?.status4k}
                   is4k