Authenticated Media Support (#51)

* Fix AvatarField to work with authenticated media

* Fix ViewMediaButton to work for user's media tab and reported events

* remove console.log

* cleanup AvatarField

* use correct thumbnail size

* fix AvatarField.test

* ignore postgres data for watchman

* fix new avatar preview

* watchman should ignore testdata completely, instead of specific subdirs

* update README

* change user's media icon in sidebar - use the same icon as the media tab

* Add preview for user media files if mimeType is image/*

* Add new line in user media Dialog

src/components/AvatarField.test.tsx

@@ -1,18 +1,43 @@
-import { render, screen } from "@testing-library/react";
+import { render, screen, waitFor } from "@testing-library/react";
 import { RecordContextProvider } from "react-admin";
-
+import { act } from "react";
 import AvatarField from "./AvatarField";
 
 describe("AvatarField", () => {
-  it("shows image", () => {
+  beforeEach(() => {
+    // Mock fetch
+    global.fetch = jest.fn(() =>
+      Promise.resolve({
+        blob: () => Promise.resolve(new Blob(["mock image data"], { type: 'image/jpeg' })),
+      })
+    ) as jest.Mock;
+
+    // Mock URL.createObjectURL
+    global.URL.createObjectURL = jest.fn(() => "mock-object-url");
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it.only("shows image", async () => {
     const value = {
-      avatar: "foo",
+      avatar: "mxc://serverName/mediaId",
     };
-    render(
-      <RecordContextProvider value={value}>
-        <AvatarField source="avatar" />
-      </RecordContextProvider>
-    );
-    expect(screen.getByRole("img").getAttribute("src")).toBe("foo");
+
+    await act(async () => {
+      render(
+        <RecordContextProvider value={value}>
+          <AvatarField source="avatar" />
+        </RecordContextProvider>
+      );
+    });
+
+    await waitFor(() => {
+      const img = screen.getByRole("img");
+      expect(img.getAttribute("src")).toBe("mock-object-url");
+    });
+
+    expect(global.fetch).toHaveBeenCalled();
   });
 });

src/components/AvatarField.tsx

@@ -1,12 +1,37 @@
 import { get } from "lodash";
-
-import { Avatar } from "@mui/material";
+import { Avatar, AvatarProps } from "@mui/material";
 import { useRecordContext } from "react-admin";
+import { useState, useEffect, useCallback } from "react";
+import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 
-const AvatarField = ({ source, ...rest }) => {
-  const record = useRecordContext(rest);
-  const src = get(record, source)?.toString();
+const AvatarField = ({ source, ...rest }: AvatarProps & { source: string, label?: string }) => {
   const { alt, classes, sizes, sx, variant } = rest;
+
+  const record = useRecordContext(rest);
+  const mxcURL = get(record, source)?.toString();
+
+  const [src, setSrc] = useState<string>("");
+
+  const fetchAvatar = useCallback(async (mxcURL: string) => {
+    const response = await fetchAuthenticatedMedia(mxcURL, "thumbnail");
+    const blob = await response.blob();
+    const blobURL = URL.createObjectURL(blob);
+    setSrc(blobURL);
+  }, []);
+
+  useEffect(() => {
+    if (mxcURL) {
+      fetchAvatar(mxcURL);
+    }
+
+    // Cleanup function to revoke the object URL
+    return () => {
+      if (src) {
+        URL.revokeObjectURL(src);
+      }
+    };
+  }, [mxcURL, fetchAvatar]);
+
   return <Avatar alt={alt} classes={classes} sizes={sizes} src={src} sx={sx} variant={variant} />;
 };
 

src/components/media.tsx

@@ -1,6 +1,7 @@
 import { get } from "lodash";
 import { useState } from "react";
 
+import Typography from "@mui/material/Typography";
 import BlockIcon from "@mui/icons-material/Block";
 import IconCancel from "@mui/icons-material/Cancel";
 import ClearIcon from "@mui/icons-material/Clear";
@@ -8,7 +9,10 @@ import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
 import FileOpenIcon from "@mui/icons-material/FileOpen";
 import LockIcon from "@mui/icons-material/Lock";
 import LockOpenIcon from "@mui/icons-material/LockOpen";
-import { Box, Dialog, DialogContent, DialogContentText, DialogTitle, Tooltip } from "@mui/material";
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import ZoomInIcon from '@mui/icons-material/ZoomIn';
+import { Box, Dialog, DialogContent, DialogContentText, DialogTitle, Tooltip, Link } from "@mui/material";
 import { alpha, useTheme } from "@mui/material/styles";
 import {
   BooleanInput,
@@ -29,12 +33,11 @@ import {
   useTranslate,
 } from "react-admin";
 import { useMutation } from "@tanstack/react-query";
-import { Link } from "react-router-dom";
 
 import { dateParser } from "./date";
 import { DeleteMediaParams, SynapseDataProvider } from "../synapse/dataProvider";
-import { getMediaUrl } from "../synapse/synapse";
 import storage from "../storage";
+import { fetchAuthenticatedMedia } from "../utils/fetchMedia";
 
 const DeleteMediaDialog = ({ open, onClose, onSubmit }) => {
   const translate = useTranslate();
@@ -311,48 +314,125 @@ export const QuarantineMediaButton = (props: ButtonProps) => {
   );
 };
 
-export const ViewMediaButton = ({ media_id, label }) => {
+export const ViewMediaButton = ({ mxcURL, uploadName, label }) => {
   const translate = useTranslate();
-  const url = getMediaUrl(media_id);
+
+  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 anchorElement = document.createElement("a");
+    anchorElement.href = url;
+    anchorElement.download = filename;
+    document.body.appendChild(anchorElement);
+    anchorElement.click();
+    document.body.removeChild(anchorElement);
+    URL.revokeObjectURL(blobURL);
+  };
+
+  const handleFile = 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();
+    }
+  };
+
   return (
-    <Box style={{ whiteSpace: "pre" }}>
-      <Tooltip title={translate("resources.users_media.action.open")}>
-        <span>
+    <>
+      <Box style={{ whiteSpace: "pre" }}>
+        <Tooltip title={translate("resources.users_media.action.open")}>
+          <span>
           <Button
-            component={Link}
-            to={url}
-            target="_blank"
-            rel="noopener"
-            style={{ minWidth: 0, paddingLeft: 0, paddingRight: 0 }}
+              onClick={() => handleFile()}
+              style={{ minWidth: 0, paddingLeft: 0, paddingRight: 0 }}
+            >
+              <FileOpenIcon />
+            </Button>
+          </span>
+        </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],
+            })}
           >
-            <FileOpenIcon />
-          </Button>
-        </span>
-      </Tooltip>
-      {label}
-    </Box>
+            <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>
+    </>
   );
 };
 
 export const MediaIDField = ({ source }) => {
+  const record = useRecordContext();
+  if (!record) {
+    return null;
+  }
   const homeserver = storage.getItem("home_server");
-  const record = useRecordContext();
-  if (!record) return null;
 
-  const src = get(record, source)?.toString();
-  if (!src) return null;
+  const mediaID = get(record, source)?.toString();
+  if (!mediaID) {
+    return null;
+  }
 
-  return <ViewMediaButton media_id={`${homeserver}/${src}`} label={src} />;
+  const mxcURL = `mxc://${homeserver}/${mediaID}`;
+  const uploadName = decodeURIComponent(get(record, "upload_name")?.toString());
+
+  return <ViewMediaButton mxcURL={mxcURL} uploadName={uploadName} label={mediaID} />;
 };
 
-export const MXCField = ({ source }) => {
+export const ReportMediaContent = ({ source }) => {
   const record = useRecordContext();
-  if (!record) return null;
+  if (!record) {
+    return null;
+  }
 
-  const src = get(record, source)?.toString();
-  if (!src) return null;
+  const mxcURL = get(record, source)?.toString();
+  if (!mxcURL) {
+    return null;
+  }
 
-  const media_id = src.replace("mxc://", "");
+  const uploadName = decodeURIComponent(record.event_json.content.body);
 
-  return <ViewMediaButton media_id={media_id} label={src} />;
+  return <ViewMediaButton mxcURL={mxcURL} uploadName={uploadName} label={mxcURL} />;
 };