feat: media delete option in manage media slideover

src/components/Common/Button/index.tsx

@@ -21,7 +21,7 @@ const Button: React.FC<ButtonProps> = ({
   ...props
 }) => {
   const buttonStyle = [
-    'inline-flex items-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150',
+    'inline-flex items-center justify-center border border-transparent leading-5 font-medium rounded-md focus:outline-none transition ease-in-out duration-150',
   ];
   switch (buttonType) {
     case 'primary':
@@ -73,7 +73,7 @@ const Button: React.FC<ButtonProps> = ({
   }
   return (
     <button className={buttonStyle.join(' ')} {...props}>
-      {children}
+      <span className="flex items-center">{children}</span>
     </button>
   );
 };

src/components/MovieDetails/index.tsx

@@ -113,6 +113,13 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
     }
   };
 
+  const deleteMedia = async () => {
+    if (data?.mediaInfo?.id) {
+      await axios.delete(`/api/v1/media/${data?.mediaInfo?.id}`);
+      revalidate();
+    }
+  };
+
   return (
     <div
       className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
@@ -155,6 +162,22 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
             )}
           </ul>
         </div>
+        {data?.mediaInfo && (
+          <div className="mt-8">
+            <Button
+              buttonType="danger"
+              className="w-full text-center"
+              onClick={() => deleteMedia()}
+            >
+              Clear All Media Data
+            </Button>
+            <div className="text-sm text-cool-gray-400 mt-2">
+              This will remove all media data including all requests for this
+              item. This action is irreversible. If this item exists in your
+              Plex library, the media information will be recreated next sync.
+            </div>
+          </div>
+        )}
       </SlideOver>
       <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
         <div className="mr-4 flex-shrink-0">

src/components/TvDetails/index.tsx

@@ -116,6 +116,13 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
     revalidate();
   };
 
+  const deleteMedia = async () => {
+    if (data?.mediaInfo?.id) {
+      await axios.delete(`/api/v1/media/${data?.mediaInfo?.id}`);
+      revalidate();
+    }
+  };
+
   return (
     <div
       className="bg-cover bg-center -mx-4 -mt-2 px-4 sm:px-8 pt-4 "
@@ -158,6 +165,22 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
             )}
           </ul>
         </div>
+        {data?.mediaInfo && (
+          <div className="mt-8">
+            <Button
+              buttonType="danger"
+              className="w-full text-center"
+              onClick={() => deleteMedia()}
+            >
+              Clear All Media Data
+            </Button>
+            <div className="text-sm text-cool-gray-400 mt-2">
+              This will remove all media data including all requests for this
+              item. This action is irreversible. If this item exists in your
+              Plex library, the media information will be recreated next sync.
+            </div>
+          </div>
+        )}
       </SlideOver>
       <div className="flex flex-col items-center md:flex-row md:items-end pt-4">
         <div className="mr-4 flex-shrink-0">