From b51882a5d86638862fc41d9082d4441d6f11e47e Mon Sep 17 00:00:00 2001
From: NepNep21 <43792621+NepNep21@users.noreply.github.com>
Date: Sat, 27 Aug 2022 13:57:28 -0300
Subject: [PATCH] First pass

---
 src/components/users.js     |  7 ++++++-
 src/synapse/dataProvider.js | 29 ++++++++++++++++++++++++-----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/users.js b/src/components/users.js
index b6d47dc..b452349 100644
--- a/src/components/users.js
+++ b/src/components/users.js
@@ -46,6 +46,7 @@ import {
   TopToolbar,
   sanitizeListRestProps,
   NumberField,
+  ImageField
 } from "react-admin";
 import { Link } from "react-router-dom";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
@@ -315,6 +316,7 @@ const UserTitle = ({ record }) => {
     </span>
   );
 };
+
 export const UserEdit = props => {
   const classes = useStyles();
   const translate = useTranslate();
@@ -449,7 +451,10 @@ export const UserEdit = props => {
             perPage={50}
             sort={{ field: "created_ts", order: "DESC" }}
           >
-            <Datagrid style={{ width: "100%" }}>
+            <Datagrid style={{ width: "100%" }} 
+              expand={ <ImageField source="url" /> }
+              isRowExpandable={row => row.is_image }
+            >
               <DateField source="created_ts" showTime options={date_format} />
               <DateField
                 source="last_access_ts"
diff --git a/src/synapse/dataProvider.js b/src/synapse/dataProvider.js
index b80b075..5bc7ce5 100644
--- a/src/synapse/dataProvider.js
+++ b/src/synapse/dataProvider.js
@@ -25,6 +25,16 @@ const mxcUrlToHttp = mxcUrl => {
   return `${homeserver}/_matrix/media/r0/thumbnail/${serverName}/${mediaId}?width=24&height=24&method=scale`;
 };
 
+async function isImage(url) {
+  const resp = await fetch(url, {
+    method: "HEAD"
+  });
+
+  const type = resp.headers.get("Content-Type");
+
+  return type === "image/png" || type === "image/jpeg";
+}
+
 const resourceMap = {
   users: {
     path: "/_synapse/admin/v2/users",
@@ -157,9 +167,11 @@ const resourceMap = {
     },
   },
   users_media: {
-    map: um => ({
+    map: async um => ({
       ...um,
       id: um.media_id,
+      url: `${localStorage.getItem("base_url")}/_matrix/media/v3/download/${localStorage.getItem("home_server")}/${um.media_id}`,
+      is_image: await isImage(`${localStorage.getItem("base_url")}/_matrix/media/v3/download/${localStorage.getItem("home_server")}/${um.media_id}`)
     }),
     reference: id => ({
       endpoint: `/_synapse/admin/v1/users/${id}/media`,
@@ -395,10 +407,17 @@ const dataProvider = {
     const ref = res["reference"](params.id);
     const endpoint_url = `${homeserver}${ref.endpoint}?${stringify(query)}`;
 
-    return jsonClient(endpoint_url).then(({ headers, json }) => ({
-      data: json[res.data].map(res.map),
-      total: res.total(json, from, perPage),
-    }));
+    return jsonClient(endpoint_url).then(async ({ headers, json }) => {
+      const data = [];
+      const arr = json[res.data];
+      for (const obj of arr) {
+        data.push(await res.map(obj));
+      }
+      return {
+        data: data,
+        total: res.total(json, from, perPage),
+      }
+    });
   },
 
   update: (resource, params) => {