feat: issues (#2180)

src/components/MovieDetails/index.tsx

@@ -2,18 +2,15 @@ import {
   ArrowCircleRightIcon,
   CloudIcon,
   CogIcon,
+  ExclamationIcon,
   FilmIcon,
   PlayIcon,
   TicketIcon,
 } from '@heroicons/react/outline';
 import {
-  CheckCircleIcon,
   ChevronDoubleDownIcon,
   ChevronDoubleUpIcon,
-  DocumentRemoveIcon,
-  ExternalLinkIcon,
 } from '@heroicons/react/solid';
-import axios from 'axios';
 import { uniqBy } from 'lodash';
 import Link from 'next/link';
 import { useRouter } from 'next/router';
@@ -21,6 +18,7 @@ import React, { useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { RTRating } from '../../../server/api/rottentomatoes';
+import { IssueStatus } from '../../../server/constants/issue';
 import { MediaStatus } from '../../../server/constants/media';
 import type { MovieDetails as MovieDetailsType } from '../../../server/models/Movie';
 import RTAudFresh from '../../assets/rt_aud_fresh.svg';
@@ -36,16 +34,14 @@ import Error from '../../pages/_error';
 import { sortCrewPriority } from '../../utils/creditHelpers';
 import Button from '../Common/Button';
 import CachedImage from '../Common/CachedImage';
-import ConfirmButton from '../Common/ConfirmButton';
 import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
 import PlayButton, { PlayButtonLink } from '../Common/PlayButton';
-import SlideOver from '../Common/SlideOver';
-import DownloadBlock from '../DownloadBlock';
 import ExternalLinkBlock from '../ExternalLinkBlock';
+import IssueModal from '../IssueModal';
+import ManageSlideOver from '../ManageSlideOver';
 import MediaSlider from '../MediaSlider';
 import PersonCard from '../PersonCard';
-import RequestBlock from '../RequestBlock';
 import RequestButton from '../RequestButton';
 import Slider from '../Slider';
 import StatusBadge from '../StatusBadge';
@@ -64,17 +60,8 @@ const messages = defineMessages({
   recommendations: 'Recommendations',
   similar: 'Similar Titles',
   overviewunavailable: 'Overview unavailable.',
-  manageModalTitle: 'Manage Movie',
-  manageModalRequests: 'Requests',
-  manageModalNoRequests: 'No requests.',
-  manageModalClearMedia: 'Clear Media Data',
-  manageModalClearMediaWarning:
-    '* This will irreversibly remove all data for this movie, including any requests. If this item exists in your Plex library, the media information will be recreated during the next scan.',
   studio: '{studioCount, plural, one {Studio} other {Studios}}',
   viewfullcrew: 'View Full Crew',
-  openradarr: 'Open Movie in Radarr',
-  openradarr4k: 'Open Movie in 4K Radarr',
-  downloadstatus: 'Download Status',
   playonplex: 'Play on Plex',
   play4konplex: 'Play in 4K on Plex',
   markavailable: 'Mark as Available',
@@ -97,6 +84,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
   const [showManager, setShowManager] = useState(false);
   const minStudios = 3;
   const [showMoreStudios, setShowMoreStudios] = useState(false);
+  const [showIssueModal, setShowIssueModal] = useState(false);
 
   const { data, error, revalidate } = useSWR<MovieDetailsType>(
     `/api/v1/movie/${router.query.movieId}`,
@@ -164,20 +152,6 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     });
   }
 
-  const deleteMedia = async () => {
-    if (data?.mediaInfo?.id) {
-      await axios.delete(`/api/v1/media/${data?.mediaInfo?.id}`);
-      revalidate();
-    }
-  };
-
-  const markAvailable = async (is4k = false) => {
-    await axios.post(`/api/v1/media/${data?.mediaInfo?.id}/available`, {
-      is4k,
-    });
-    revalidate();
-  };
-
   const region = user?.settings?.region
     ? user.settings.region
     : settings.currentSettings.region
@@ -264,141 +238,19 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         </div>
       )}
       <PageTitle title={data.title} />
-      <SlideOver
-        show={showManager}
-        title={intl.formatMessage(messages.manageModalTitle)}
+      <IssueModal
+        onCancel={() => setShowIssueModal(false)}
+        show={showIssueModal}
+        mediaType="movie"
+        tmdbId={data.id}
+      />
+      <ManageSlideOver
+        data={data}
+        mediaType="movie"
         onClose={() => setShowManager(false)}
-        subText={data.title}
-      >
-        {((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
-          (data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
-          <>
-            <h3 className="mb-2 text-xl font-bold">
-              {intl.formatMessage(messages.downloadstatus)}
-            </h3>
-            <div className="mb-6 overflow-hidden bg-gray-600 rounded-md shadow">
-              <ul>
-                {data.mediaInfo?.downloadStatus?.map((status, index) => (
-                  <li
-                    key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
-                  >
-                    <DownloadBlock downloadItem={status} />
-                  </li>
-                ))}
-                {data.mediaInfo?.downloadStatus4k?.map((status, index) => (
-                  <li
-                    key={`dl-status-${status.externalId}-${index}`}
-                    className="border-b border-gray-700 last:border-b-0"
-                  >
-                    <DownloadBlock downloadItem={status} is4k />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          </>
-        )}
-        {data?.mediaInfo &&
-          (data.mediaInfo.status !== MediaStatus.AVAILABLE ||
-            (data.mediaInfo.status4k !== MediaStatus.AVAILABLE &&
-              settings.currentSettings.movie4kEnabled)) && (
-            <div className="mb-6">
-              {data?.mediaInfo &&
-                data?.mediaInfo.status !== MediaStatus.AVAILABLE && (
-                  <div className="flex flex-col mb-2 sm:flex-row flex-nowrap">
-                    <Button
-                      onClick={() => markAvailable()}
-                      className="w-full sm:mb-0"
-                      buttonType="success"
-                    >
-                      <CheckCircleIcon />
-                      <span>{intl.formatMessage(messages.markavailable)}</span>
-                    </Button>
-                  </div>
-                )}
-              {data?.mediaInfo &&
-                data?.mediaInfo.status4k !== MediaStatus.AVAILABLE &&
-                settings.currentSettings.movie4kEnabled && (
-                  <div className="flex flex-col mb-2 sm:flex-row flex-nowrap">
-                    <Button
-                      onClick={() => markAvailable(true)}
-                      className="w-full sm:mb-0"
-                      buttonType="success"
-                    >
-                      <CheckCircleIcon />
-                      <span>
-                        {intl.formatMessage(messages.mark4kavailable)}
-                      </span>
-                    </Button>
-                  </div>
-                )}
-            </div>
-          )}
-        <h3 className="mb-2 text-xl font-bold">
-          {intl.formatMessage(messages.manageModalRequests)}
-        </h3>
-        <div className="overflow-hidden bg-gray-600 rounded-md shadow">
-          <ul>
-            {data.mediaInfo?.requests?.map((request) => (
-              <li
-                key={`manage-request-${request.id}`}
-                className="border-b border-gray-700 last:border-b-0"
-              >
-                <RequestBlock request={request} onUpdate={() => revalidate()} />
-              </li>
-            ))}
-            {(data.mediaInfo?.requests ?? []).length === 0 && (
-              <li className="py-4 text-center text-gray-400">
-                {intl.formatMessage(messages.manageModalNoRequests)}
-              </li>
-            )}
-          </ul>
-        </div>
-        {(data?.mediaInfo?.serviceUrl || data?.mediaInfo?.serviceUrl4k) && (
-          <div className="mt-8">
-            {data?.mediaInfo?.serviceUrl && (
-              <a
-                href={data?.mediaInfo?.serviceUrl}
-                target="_blank"
-                rel="noreferrer"
-                className="block mb-2 last:mb-0"
-              >
-                <Button buttonType="ghost" className="w-full">
-                  <ExternalLinkIcon />
-                  <span>{intl.formatMessage(messages.openradarr)}</span>
-                </Button>
-              </a>
-            )}
-            {data?.mediaInfo?.serviceUrl4k && (
-              <a
-                href={data?.mediaInfo?.serviceUrl4k}
-                target="_blank"
-                rel="noreferrer"
-              >
-                <Button buttonType="ghost" className="w-full">
-                  <ExternalLinkIcon />
-                  <span>{intl.formatMessage(messages.openradarr4k)}</span>
-                </Button>
-              </a>
-            )}
-          </div>
-        )}
-        {data?.mediaInfo && (
-          <div className="mt-8">
-            <ConfirmButton
-              onClick={() => deleteMedia()}
-              confirmText={intl.formatMessage(globalMessages.areyousure)}
-              className="w-full"
-            >
-              <DocumentRemoveIcon />
-              <span>{intl.formatMessage(messages.manageModalClearMedia)}</span>
-            </ConfirmButton>
-            <div className="mt-3 text-xs text-gray-400">
-              {intl.formatMessage(messages.manageModalClearMediaWarning)}
-            </div>
-          </div>
-        )}
-      </SlideOver>
+        revalidate={() => revalidate()}
+        show={showManager}
+      />
       <div className="media-header">
         <div className="media-poster">
           <CachedImage
@@ -462,7 +314,9 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
                 .map((t, k) => <span key={k}>{t}</span>)
                 .reduce((prev, curr) => (
                   <>
-                    {prev} | {curr}
+                    {prev}
+                    <span>|</span>
+                    {curr}
                   </>
                 ))}
           </span>
@@ -475,13 +329,39 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             tmdbId={data.id}
             onUpdate={() => revalidate()}
           />
+          {(data.mediaInfo?.status === MediaStatus.AVAILABLE ||
+            data.mediaInfo?.status4k === MediaStatus.AVAILABLE) &&
+            hasPermission(
+              [Permission.CREATE_ISSUES, Permission.MANAGE_ISSUES],
+              {
+                type: 'or',
+              }
+            ) && (
+              <Button
+                buttonType="danger"
+                className="ml-2 first:ml-0"
+                onClick={() => setShowIssueModal(true)}
+              >
+                <ExclamationIcon />
+              </Button>
+            )}
           {hasPermission(Permission.MANAGE_REQUESTS) && (
             <Button
               buttonType="default"
               className="ml-2 first:ml-0"
               onClick={() => setShowManager(true)}
             >
-              <CogIcon />
+              <CogIcon className="!mr-0" />
+              {(
+                data.mediaInfo?.issues.filter(
+                  (issue) => issue.status === IssueStatus.OPEN
+                ) ?? []
+              ).length > 0 && (
+                <>
+                  <div className="absolute w-3 h-3 bg-red-600 rounded-full -right-1 -top-1" />
+                  <div className="absolute w-3 h-3 bg-red-600 rounded-full -right-1 -top-1 animate-ping" />
+                </>
+              )}
             </Button>
           )}
         </div>