feat: Radarr & Sonarr Sync (#734)

src/components/MovieDetails/index.tsx

@@ -33,6 +33,8 @@ import { sortCrewPriority } from '../../utils/creditHelpers';
 import StatusBadge from '../StatusBadge';
 import RequestButton from '../RequestButton';
 import MediaSlider from '../MediaSlider';
+import ConfirmButton from '../Common/ConfirmButton';
+import DownloadBlock from '../DownloadBlock';
 
 const messages = defineMessages({
   releasedate: 'Release Date',
@@ -63,6 +65,10 @@ const messages = defineMessages({
   studio: 'Studio',
   viewfullcrew: 'View Full Crew',
   view: 'View',
+  areyousure: 'Are you sure?',
+  openradarr: 'Open Movie in Radarr',
+  openradarr4k: 'Open Movie in 4K Radarr',
+  downloadstatus: 'Download Status',
 });
 
 interface MovieDetailsProps {
@@ -127,6 +133,26 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
         onClose={() => setShowManager(false)}
         subText={data.title}
       >
+        {((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
+          (data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
+          <>
+            <h3 className="mb-2 text-xl">
+              {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>
+                ))}
+              </ul>
+            </div>
+          </>
+        )}
         <h3 className="mb-2 text-xl">
           {intl.formatMessage(messages.manageModalRequests)}
         </h3>
@@ -147,15 +173,60 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             )}
           </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">
+                  <svg
+                    className="w-5 h-5 mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                    <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                  </svg>
+                  <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">
+                  <svg
+                    className="w-5 h-5 mr-1"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" />
+                    <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" />
+                  </svg>
+                  <span>{intl.formatMessage(messages.openradarr4k)}</span>
+                </Button>
+              </a>
+            )}
+          </div>
+        )}
         {data?.mediaInfo && (
           <div className="mt-8">
-            <Button
-              buttonType="danger"
-              className="w-full text-center"
+            <ConfirmButton
               onClick={() => deleteMedia()}
+              confirmText={intl.formatMessage(messages.areyousure)}
+              className="w-full"
             >
               {intl.formatMessage(messages.manageModalClearMedia)}
-            </Button>
+            </ConfirmButton>
             <div className="mt-2 text-sm text-gray-400">
               {intl.formatMessage(messages.manageModalClearMediaWarning)}
             </div>
@@ -178,11 +249,18 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
           <div className="mb-2">
             {data.mediaInfo && data.mediaInfo.status !== MediaStatus.UNKNOWN && (
               <span className="mr-2">
-                <StatusBadge status={data.mediaInfo?.status} />
+                <StatusBadge
+                  status={data.mediaInfo?.status}
+                  inProgress={(data.mediaInfo.downloadStatus ?? []).length > 0}
+                />
               </span>
             )}
             <span>
-              <StatusBadge status={data.mediaInfo?.status4k} is4k />
+              <StatusBadge
+                status={data.mediaInfo?.status4k}
+                is4k
+                inProgress={(data.mediaInfo?.downloadStatus4k ?? []).length > 0}
+              />
             </span>
           </div>
           <h1 className="text-2xl lg:text-4xl">