Addressed PR feedback

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>

src/components/users.js

@@ -50,7 +50,6 @@ import {
   DatagridHeaderCell,
   useListContext,
   FunctionField,
-  ImageField,
 } from "react-admin";
 import { Link } from "react-router-dom";
 import { ServerNoticeButton, ServerNoticeBulkButton } from "./ServerNotices";
@@ -61,8 +60,15 @@ import {
   DeleteMediaBulkButton,
 } from "./media";
 import { makeStyles } from "@material-ui/core/styles";
-import { TableHead, TableRow, TableCell, Checkbox } from "@material-ui/core";
+import {
+  TableHead,
+  TableRow,
+  TableCell,
+  Checkbox,
+  Tooltip,
+} from "@material-ui/core";
 import classnames from "classnames";
+import BrokenImageIcon from "@material-ui/icons/BrokenImage";
 
 const redirect = () => {
   return {
@@ -593,32 +599,41 @@ export const UserEdit = props => {
               header={<UserMediaDatagridHeader />}
             >
               <FunctionField
-                label="Image"
+                label="resources.users_media.image"
                 render={record => {
                   let data = {
-                    title: record.upload_name,
+                    title:
-                    imgURL: `${localStorage.getItem(
+                      record.media_type.startsWith("image") &&
-                      "base_url"
+                      record.media_length
-                    )}/_matrix/media/v1/thumbnail/${localStorage.getItem(
+                        ? record.upload_name || record.media_id
-                      "home_server"
+                        : translate(
-                    )}/${record.media_id}?width=50&height=50&method=crop`,
+                            "resources.users_media.preview_unavailable"
+                          ),
+                    imgURL: record.media_type.startsWith("image")
+                      ? `${localStorage.getItem(
+                          "base_url"
+                        )}/_matrix/media/v1/thumbnail/${localStorage.getItem(
+                          "home_server"
+                        )}/${record.media_id}?width=40&height=40&method=crop`
+                      : null,
                     downloadURL: `${localStorage.getItem(
                       "base_url"
                     )}/_matrix/media/r0/download/${localStorage.getItem(
                       "home_server"
                     )}/${record.media_id}`,
                   };
-                  if (record.media_type.startsWith("image")) {
+
-                    return (
+                  return (
-                      <ImageField
+                    <Tooltip title={data["title"]}>
-                        record={data}
+                      <Avatar
-                        source="imgURL"
+                        src={data["imgURL"]}
-                        onClick={() => window.open(data.downloadURL)}
+                        onClick={() => window.open(data["downloadURL"])}
-                      />
+                        variant="square"
-                    );
+                      >
-                  } else {
+                        <BrokenImageIcon />
-                    return "Preview unavailable";
+                      </Avatar>
-                  }
+                    </Tooltip>
+                  );
                 }}
               />
               <DateField

src/i18n/de.js

@@ -245,6 +245,8 @@ const de = {
         created_ts: "Erstellt",
         last_access_ts: "Letzter Zugriff",
       },
+      image: "Bild",
+      preview_unavailable: "Vorschau nicht verfügbar",
     },
     delete_media: {
       name: "Medien",

src/i18n/en.js

@@ -241,6 +241,8 @@ const en = {
         created_ts: "Created",
         last_access_ts: "Last access",
       },
+      image: "Image",
+      preview_unavailable: "Preview unavailable",
     },
     delete_media: {
       name: "Media",

src/i18n/zh.js

@@ -231,6 +231,8 @@ const zh = {
         created_ts: "创建",
         last_access_ts: "上一次访问",
       },
+      image: "图片",
+      preview_unavailable: "预览不可用",
     },
     delete_media: {
       name: "媒体文件",