From 9062a6afb1e6f76a1f398cba0928d5431249d383 Mon Sep 17 00:00:00 2001
From: Borislav Pantaleev <beastafk@gmail.com>
Date: Thu, 3 Oct 2024 00:52:07 +0300
Subject: [PATCH] Remove Dialog window for image preview, open all media in new
 tab

---
 src/components/media.tsx | 73 ++++++----------------------------------
 1 file changed, 10 insertions(+), 63 deletions(-)

diff --git a/src/components/media.tsx b/src/components/media.tsx
index afbc1c6..9fc8eed 100644
--- a/src/components/media.tsx
+++ b/src/components/media.tsx
@@ -314,42 +314,24 @@ export const QuarantineMediaButton = (props: ButtonProps) => {
   );
 };
 
-export const ViewMediaButton = ({ mxcURL, uploadName, label }) => {
+export const ViewMediaButton = ({ mxcURL, label }) => {
   const translate = useTranslate();
 
-  const [open, setOpen] = useState(false);
-  const [blobURL, setBlobURL] = useState("");
-
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => {
-    setOpen(false);
-    if (blobURL) {
-      URL.revokeObjectURL(blobURL);
-    }
-  };
-
-  const forceDownload = (url: string, filename: string) => {
+  const openFileInNewTab = (blobURL: string) => {
     const anchorElement = document.createElement("a");
-    anchorElement.href = url;
-    anchorElement.download = filename;
+    anchorElement.href = blobURL;
+    anchorElement.target = "_blank";
     document.body.appendChild(anchorElement);
     anchorElement.click();
     document.body.removeChild(anchorElement);
-    URL.revokeObjectURL(blobURL);
+    setTimeout(() => URL.revokeObjectURL(blobURL), 10);
   };
 
-  const handleFile = async () => {
+  const previewFile = async () => {
     const response = await fetchAuthenticatedMedia(mxcURL, "original");
     const blob = await response.blob();
     const blobURL = URL.createObjectURL(blob);
-    setBlobURL(blobURL);
-
-    const mimeType = blob.type;
-    if (!mimeType.startsWith("image/")) {
-      forceDownload(blobURL, uploadName);
-    } else {
-      handleOpen();
-    }
+    openFileInNewTab(blobURL);
   };
 
   return (
@@ -358,7 +340,7 @@ export const ViewMediaButton = ({ mxcURL, uploadName, label }) => {
         <Tooltip title={translate("resources.users_media.action.open")}>
           <span>
           <Button
-              onClick={() => handleFile()}
+              onClick={() => previewFile()}
               style={{ minWidth: 0, paddingLeft: 0, paddingRight: 0 }}
             >
               <FileOpenIcon />
@@ -367,38 +349,6 @@ export const ViewMediaButton = ({ mxcURL, uploadName, label }) => {
         </Tooltip>
         {label}
       </Box>
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="image-modal-title"
-        aria-describedby="image-modal-description"
-        style={{ maxWidth: "100%", maxHeight: "100%" }}
-      >
-        <DialogTitle id="image-modal-title">
-          <Typography>{uploadName}</Typography>
-          <IconButton
-            aria-label="close"
-            onClick={handleClose}
-            sx={(theme) => ({
-              position: 'absolute',
-              right: 8,
-              top: 8,
-              color: theme.palette.grey[500],
-            })}
-          >
-            <CloseIcon />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent>
-          <Link href={blobURL} target="_blank">
-            <img src={blobURL} alt={uploadName}
-              style={{ maxWidth: "100%", maxHeight: "/calc(100vh - 64px)", objectFit: "contain" }}
-            />
-            <br />
-            <ZoomInIcon />
-          </Link>
-        </DialogContent>
-      </Dialog>
     </>
   );
 };
@@ -416,9 +366,8 @@ export const MediaIDField = ({ source }) => {
   }
 
   const mxcURL = `mxc://${homeserver}/${mediaID}`;
-  const uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
 
-  return <ViewMediaButton mxcURL={mxcURL} uploadName={uploadName} label={mediaID} />;
+  return <ViewMediaButton mxcURL={mxcURL} label={mediaID} />;
 };
 
 export const ReportMediaContent = ({ source }) => {
@@ -432,7 +381,5 @@ export const ReportMediaContent = ({ source }) => {
     return null;
   }
 
-  const uploadName = decodeURIComponent(record.event_json.content.body);
-
-  return <ViewMediaButton mxcURL={mxcURL} uploadName={uploadName} label={mxcURL} />;
+  return <ViewMediaButton mxcURL={mxcURL} label={mxcURL} />;
 };