Merge pull request AOSSIE-Org#174 from asmit27rai/side_button

Fix Navigation and Boundary Issues in MediaView Component
Jibesh10101011 · Dec 30, 2024 · 118bbec · 118bbec
2 parents 491eee7 + d9b1457
commit 118bbec
Showing 1 changed file with 19 additions and 22 deletions.
diff --git a/frontend/src/components/Media/MediaView.tsx b/frontend/src/components/Media/MediaView.tsx
@@ -1,6 +1,7 @@
 import { MediaViewProps } from '@/types/Media';
 import React, { useEffect, useState } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+
 const MediaView: React.FC<MediaViewProps> = ({
   initialIndex,
   onClose,
@@ -82,20 +83,17 @@ const MediaView: React.FC<MediaViewProps> = ({
   function handlePrevItem() {
     if (globalIndex > 0) {
       setGlobalIndex(globalIndex - 1);
-    } else {
-      setGlobalIndex(allMedia.length - 1);
     }
     resetZoom();
   }
 
   function handleNextItem() {
     if (globalIndex < allMedia.length - 1) {
       setGlobalIndex(globalIndex + 1);
-    } else {
-      setGlobalIndex(0);
     }
     resetZoom();
   }
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div className="absolute inset-0 bg-black bg-opacity-90" />
@@ -118,11 +116,6 @@ const MediaView: React.FC<MediaViewProps> = ({
         {type === 'image' ? (
           <div
             id="zoomable-image"
-            onClick={(e) => {
-              if (e.target === e.currentTarget) {
-                onClose();
-              }
-            }}
             onMouseDown={handleMouseDown}
             onMouseMove={handleMouseMove}
             onMouseUp={handleMouseUp}
@@ -170,21 +163,25 @@ const MediaView: React.FC<MediaViewProps> = ({
           />
         )}
 
-        <button
-          onClick={handlePrevItem}
-          className="absolute left-4 top-1/2 z-50 flex items-center rounded-[50%] border border-black bg-white p-2 text-black transition duration-100 hover:bg-slate-800 hover:text-white"
-        >
-          <ChevronLeft className="h-6 w-6" />
-        </button>
-        <button
-          onClick={handleNextItem}
-          className="absolute right-4 top-1/2 z-50 flex items-center rounded-[50%] border border-black bg-white p-2 text-black transition duration-100 hover:bg-slate-800 hover:text-white"
-        >
-          <ChevronRight className="h-6 w-6" />
-        </button>
+        {globalIndex > 0 && (
+          <button
+            onClick={handlePrevItem}
+            className="absolute left-4 top-1/2 z-50 flex items-center rounded-[50%] border border-black bg-white p-2 text-black transition duration-100 hover:bg-slate-800 hover:text-white"
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+        )}
+        {globalIndex < allMedia.length - 1 && (
+          <button
+            onClick={handleNextItem}
+            className="absolute right-4 top-1/2 z-50 flex items-center rounded-[50%] border border-black bg-white p-2 text-black transition duration-100 hover:bg-slate-800 hover:text-white"
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
+        )}
       </div>
     </div>
   );
 };
 
-export default MediaView;
+export default MediaView;