Merge pull request #26 from asepindrak/dev

Dev

Author: asepindrak

frontend/package-lock.json

@@ -0,0 +1,63 @@
+import React from "react";
+import { X, Download } from "lucide-react";
+
+interface MediaModalProps {
+  isOpen: boolean;
+  url: string;
+  type: "image" | "video";
+  onClose: () => void;
+}
+
+export default function MediaModal({
+  isOpen,
+  url,
+  type,
+  onClose,
+}: MediaModalProps) {
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <button
+        onClick={onClose}
+        className="absolute top-4 right-4 z-[101] p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors"
+        aria-label="Close media viewer"
+      >
+        <X size={24} />
+      </button>
+
+      <div
+        className="relative max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {type === "image" ? (
+          <img
+            src={url}
+            alt="Full size preview"
+            className="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
+          />
+        ) : (
+          <video
+            src={url}
+            controls
+            autoPlay
+            className="max-w-full max-h-full rounded-lg shadow-2xl"
+          />
+        )}
+      </div>
+
+      {/* <a
+        href={url}
+        download
+        className="absolute bottom-4 right-4 z-[101] flex items-center gap-2 px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-colors"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Download size={18} />
+        <span>Download</span>
+      </a> */}
+    </div>
+  );
+}

frontend/src/components/MediaModal.tsx

@@ -14,6 +14,7 @@ import {
   Send,
   Trash,
   X,
+  Download,
 } from "lucide-react";
 import Swal from "sweetalert2";
 import type { Task, Attachment, TeamMember } from "../types";
@@ -22,6 +23,7 @@ import { PrioritySelect } from "./PrioritySelect";
 import { AssigneeSelect } from "./AssigneeSelect";
 import { handleWhatsapp, handleWhatsappTask } from "../utils/sendWhatsapp";
 import WhatsappIcon from "./WhatsappIcon";
+import MediaModal from "./MediaModal";
 import { useAuthStore } from "../utils/store";
 import { FaComment } from "react-icons/fa";
 
@@ -57,6 +59,11 @@ export default function TaskModal({
   const [files, setFiles] = useState<File[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
+  const [mediaViewerOpen, setMediaViewerOpen] = useState(false);
+  const [mediaViewerUrl, setMediaViewerUrl] = useState<string>("");
+  const [mediaViewerType, setMediaViewerType] = useState<"image" | "video">(
+    "image"
+  );
   const fileInputRef = useRef<HTMLInputElement | null>(null);
   const currentAssignee = team.find((t) => t.id === task.assigneeId);
   const assigneePhone = currentAssignee?.phone || "";
@@ -383,6 +390,17 @@ export default function TaskModal({
     return s.length === 0;
   }
 
+  const openMediaViewer = (url: string, type: "image" | "video") => {
+    setMediaViewerUrl(url);
+    setMediaViewerType(type);
+    setMediaViewerOpen(true);
+  };
+
+  const closeMediaViewer = () => {
+    setMediaViewerOpen(false);
+    setMediaViewerUrl("");
+  };
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center p-6">
       {/* Backdrop */}
@@ -603,16 +621,33 @@ export default function TaskModal({
                                         <img
                                           src={a.url}
                                           alt={a.name}
-                                          className="max-h-60 rounded-lg object-cover"
+                                          onClick={() =>
+                                            openMediaViewer(a.url, "image")
+                                          }
+                                          className="max-h-60 rounded-lg object-cover cursor-pointer hover:opacity-80 transition-opacity"
+                                          title="Click to view full size"
                                         />
                                       )}
 
                                       {isVideo && (
-                                        <video
-                                          src={a.url}
-                                          controls
-                                          className="max-h-60 rounded-lg"
-                                        />
+                                        <div className="relative">
+                                          <video
+                                            src={a.url}
+                                            className="max-h-60 rounded-lg cursor-pointer"
+                                            onClick={() =>
+                                              openMediaViewer(a.url, "video")
+                                            }
+                                            title="Click to view in modal"
+                                          />
+                                          <div
+                                            className="absolute inset-0 flex items-center justify-center pointer-events-none"
+                                            aria-hidden="true"
+                                          >
+                                            <div className="w-16 h-16 rounded-full bg-black/50 flex items-center justify-center">
+                                              <div className="w-0 h-0 border-t-8 border-t-transparent border-l-12 border-l-white border-b-8 border-b-transparent ml-1"></div>
+                                            </div>
+                                          </div>
+                                        </div>
                                       )}
                                     </>
                                   )}
@@ -625,23 +660,6 @@ export default function TaskModal({
                                         ({Math.round((a.size || 0) / 1024)} KB)
                                       </span>
                                     </div>
-
-                                    <div>
-                                      {a.url ? (
-                                        <a
-                                          href={a.url}
-                                          target="_blank"
-                                          rel="noreferrer"
-                                          className="text-sm underline"
-                                        >
-                                          Open
-                                        </a>
-                                      ) : (
-                                        <span className="text-xs text-gray-400">
-                                          (no url)
-                                        </span>
-                                      )}
-                                    </div>
                                   </div>
                                 </div>
                               );
@@ -748,6 +766,14 @@ export default function TaskModal({
           </div>
         </div>
       </div>
+
+      {/* Media Viewer Modal */}
+      <MediaModal
+        isOpen={mediaViewerOpen}
+        url={mediaViewerUrl}
+        type={mediaViewerType}
+        onClose={closeMediaViewer}
+      />
     </div>
   );
 }