fix: modified components to display deleted as a status

overseerr-api.yml

@@ -1053,7 +1053,7 @@ components:
         status:
           type: number
           example: 0
-          description: Availability of the media. 1 = `UNKNOWN`, 2 = `PENDING`, 3 = `PROCESSING`, 4 = `PARTIALLY_AVAILABLE`, 5 = `AVAILABLE`
+          description: Availability of the media. 1 = `UNKNOWN`, 2 = `PENDING`, 3 = `PROCESSING`, 4 = `PARTIALLY_AVAILABLE`, 5 = `AVAILABLE`, 6 = `DELETED`
         requests:
           type: array
           readOnly: true
@@ -4955,6 +4955,7 @@ paths:
                 processing,
                 unavailable,
                 failed,
+                deleted,
               ]
         - in: query
           name: sort
@@ -5694,7 +5695,16 @@ paths:
           schema:
             type: string
             nullable: true
-            enum: [all, available, partial, allavailable, processing, pending]
+            enum:
+              [
+                all,
+                available,
+                partial,
+                allavailable,
+                processing,
+                pending,
+                deleted,
+              ]
         - in: query
           name: sort
           schema:
@@ -5753,7 +5763,7 @@ paths:
           example: available
           schema:
             type: string
-            enum: [available, partial, processing, pending, unknown]
+            enum: [available, partial, processing, pending, unknown, deleted]
       requestBody:
         content:
           application/json:

server/routes/request.ts

@@ -55,12 +55,17 @@ requestRoutes.get<Record<string, unknown>, RequestResultsResponse>(
         case 'failed':
           statusFilter = [MediaRequestStatus.FAILED];
           break;
+        case 'completed':
+        case 'deleted':
+          statusFilter = [MediaRequestStatus.COMPLETED];
+          break;
         default:
           statusFilter = [
             MediaRequestStatus.PENDING,
             MediaRequestStatus.APPROVED,
             MediaRequestStatus.DECLINED,
             MediaRequestStatus.FAILED,
+            MediaRequestStatus.COMPLETED,
           ];
       }
 
@@ -79,6 +84,9 @@ requestRoutes.get<Record<string, unknown>, RequestResultsResponse>(
             MediaStatus.PARTIALLY_AVAILABLE,
           ];
           break;
+        case 'deleted':
+          mediaStatusFilter = [MediaStatus.DELETED];
+          break;
         default:
           mediaStatusFilter = [
             MediaStatus.UNKNOWN,
@@ -86,6 +94,7 @@ requestRoutes.get<Record<string, unknown>, RequestResultsResponse>(
             MediaStatus.PROCESSING,
             MediaStatus.PARTIALLY_AVAILABLE,
             MediaStatus.AVAILABLE,
+            MediaStatus.DELETED,
           ];
       }
 

src/components/Common/StatusBadgeMini/index.tsx

@@ -1,6 +1,11 @@
 import Spinner from '@app/assets/spinner.svg';
 import { CheckCircleIcon } from '@heroicons/react/20/solid';
-import { BellIcon, ClockIcon, MinusSmallIcon } from '@heroicons/react/24/solid';
+import {
+  BellIcon,
+  ClockIcon,
+  MinusSmallIcon,
+  TrashIcon,
+} from '@heroicons/react/24/solid';
 import { MediaStatus } from '@server/constants/media';
 
 interface StatusBadgeMiniProps {
@@ -50,6 +55,10 @@ const StatusBadgeMini = ({
       );
       indicatorIcon = <MinusSmallIcon />;
       break;
+    case MediaStatus.DELETED:
+      badgeStyle.push('bg-red-500 border-red-400 ring-red-400 text-red-100');
+      indicatorIcon = <TrashIcon />;
+      break;
   }
 
   if (inProgress) {

src/components/Discover/RecentRequestsSlider/index.tsx

@@ -21,6 +21,8 @@ const RecentRequestsSlider = () => {
     return null;
   }
 
+  console.log({ requests });
+
   return (
     <>
       <div className="slider-header">

src/components/RequestBlock/index.tsx

@@ -204,6 +204,11 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => {
                   {intl.formatMessage(globalMessages.failed)}
                 </Badge>
               )}
+              {request.status === MediaRequestStatus.COMPLETED && (
+                <Badge badgeType="success">
+                  {intl.formatMessage(globalMessages.completed)}
+                </Badge>
+              )}
             </div>
           </div>
           <div className="mt-2 flex items-center text-sm leading-5 sm:mt-0">

src/components/RequestButton/index.tsx

@@ -264,7 +264,9 @@ const RequestButton = ({
 
   // Standard request button
   if (
-    (!media || media.status === MediaStatus.UNKNOWN) &&
+    (!media ||
+      media.status === MediaStatus.UNKNOWN ||
+      media.status === MediaStatus.DELETED) &&
     hasPermission(
       [
         Permission.REQUEST,
@@ -307,7 +309,9 @@ const RequestButton = ({
 
   // 4K request button
   if (
-    (!media || media.status4k === MediaStatus.UNKNOWN) &&
+    (!media ||
+      media.status4k === MediaStatus.UNKNOWN ||
+      media.status4k === MediaStatus.DELETED) &&
     hasPermission(
       [
         Permission.REQUEST_4K,

src/components/RequestList/index.tsx

@@ -34,6 +34,7 @@ enum Filter {
   AVAILABLE = 'available',
   UNAVAILABLE = 'unavailable',
   FAILED = 'failed',
+  DELETED = 'deleted',
 }
 
 type Sort = 'added' | 'modified';
@@ -99,6 +100,10 @@ const RequestList = () => {
     );
   }, [currentFilter, currentSort, currentPageSize]);
 
+  console.log({ currentFilter });
+
+  console.log({ data });
+
   if (!data && !error) {
     return <LoadingSpinner />;
   }
@@ -177,6 +182,9 @@ const RequestList = () => {
               <option value="unavailable">
                 {intl.formatMessage(globalMessages.unavailable)}
               </option>
+              <option value="deleted">
+                {intl.formatMessage(globalMessages.deleted)}
+              </option>
             </select>
           </div>
           <div className="mb-2 flex flex-grow sm:mb-0 lg:flex-grow-0">

src/components/RequestModal/TvRequestModal.tsx

@@ -569,7 +569,9 @@ const TvRequestModal = ({
                         (sn) =>
                           sn.seasonNumber === season.seasonNumber &&
                           sn[is4k ? 'status4k' : 'status'] !==
-                            MediaStatus.UNKNOWN
+                            MediaStatus.UNKNOWN &&
+                          sn[is4k ? 'status4k' : 'status'] !==
+                            MediaStatus.DELETED
                       );
                       return (
                         <tr key={`season-${season.id}`}>

src/components/StatusBadge/index.tsx

@@ -299,6 +299,17 @@ const StatusBadge = ({
         </Tooltip>
       );
 
+    case MediaStatus.DELETED:
+      return (
+        <Tooltip content={mediaLinkDescription}>
+          <Badge badgeType="danger">
+            {intl.formatMessage(is4k ? messages.status4k : messages.status, {
+              status: intl.formatMessage(globalMessages.deleted),
+            })}
+          </Badge>
+        </Tooltip>
+      );
+
     default:
       return null;
   }

src/components/TvDetails/index.tsx

@@ -647,6 +647,18 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                               </div>
                             </>
                           )}
+                          {mSeason?.status === MediaStatus.DELETED && (
+                            <>
+                              <div className="hidden md:flex">
+                                <Badge badgeType="danger">
+                                  {intl.formatMessage(globalMessages.deleted)}
+                                </Badge>
+                              </div>
+                              <div className="flex md:hidden">
+                                <StatusBadgeMini status={MediaStatus.DELETED} />
+                              </div>
+                            </>
+                          )}
                           {((!mSeason4k &&
                             request4k?.status ===
                               MediaRequestStatus.APPROVED) ||
@@ -733,6 +745,26 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
                                 </div>
                               </>
                             )}
+                          {mSeason4k?.status4k === MediaStatus.DELETED &&
+                            show4k && (
+                              <>
+                                <div className="hidden md:flex">
+                                  <Badge badgeType="danger">
+                                    {intl.formatMessage(messages.status4k, {
+                                      status: intl.formatMessage(
+                                        globalMessages.deleted
+                                      ),
+                                    })}
+                                  </Badge>
+                                </div>
+                                <div className="flex md:hidden">
+                                  <StatusBadgeMini
+                                    status={MediaStatus.DELETED}
+                                    is4k={true}
+                                  />
+                                </div>
+                              </>
+                            )}
                           <ChevronDownIcon
                             className={`${
                               open ? 'rotate-180' : ''

src/i18n/globalMessages.ts

@@ -3,6 +3,7 @@ import { defineMessages } from 'react-intl';
 const globalMessages = defineMessages({
   available: 'Available',
   partiallyavailable: 'Partially Available',
+  deleted: 'Deleted',
   processing: 'Processing',
   unavailable: 'Unavailable',
   notrequested: 'Not Requested',
@@ -14,6 +15,7 @@ const globalMessages = defineMessages({
   pending: 'Pending',
   declined: 'Declined',
   approved: 'Approved',
+  completed: 'Completed',
   movie: 'Movie',
   movies: 'Movies',
   collection: 'Collection',