feat: Radarr & Sonarr Sync (#734)

src/components/TvDetails/index.tsx

@@ -35,6 +35,8 @@ import { Crew } from '../../../server/models/common';
 import StatusBadge from '../StatusBadge';
 import RequestButton from '../RequestButton';
 import MediaSlider from '../MediaSlider';
+import ConfirmButton from '../Common/ConfirmButton';
+import DownloadBlock from '../DownloadBlock';
 
 const messages = defineMessages({
   firstAirDate: 'First Air Date',
@@ -63,6 +65,10 @@ const messages = defineMessages({
   anime: 'Anime',
   network: 'Network',
   viewfullcrew: 'View Full Crew',
+  areyousure: 'Are you sure?',
+  opensonarr: 'Open Series in Sonarr',
+  opensonarr4k: 'Open Series in 4K Sonarr',
+  downloadstatus: 'Download Status',
 });
 
 interface TvDetailsProps {
@@ -154,6 +160,26 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
         onClose={() => setShowManager(false)}
         subText={data.name}
       >
+        {((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>
@@ -174,15 +200,60 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             )}
           </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.opensonarr)}</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.opensonarr4k)}</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>
@@ -205,11 +276,18 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
           <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?.downloadStatus ?? []).length > 0}
+              />
             </span>
           </div>
           <h1 className="text-2xl lg:text-4xl">