fix(frontend): various fixes (#2524)

* fix(frontend): various fixes * fix: service URL does not require media type
2025-09-17 17:24:35 +02:00 · 2022-03-13 13:06:04 -04:00
parent 85bb30e252
commit c3dbd0d691
3 changed files with 86 additions and 17 deletions
--- 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<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',
                }
--- 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<StatusBadgeProps> = ({
 }) => {
  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 (
-        <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),
          })}
--- 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<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], {
-                type: 'or',
-              }) && (
+              hasPermission(
+                [
+                  Permission.MANAGE_REQUESTS,
+                  Permission.REQUEST_4K,
+                  Permission.REQUEST_4K_TV,
+                ],
+                {
+                  type: 'or',
+                }
+              ) && (
                <StatusBadge
                  status={data.mediaInfo?.status4k}
                  is4k