From 31fcdbb8b13c3a1c5ae5f8b84af2268634d8ce09 Mon Sep 17 00:00:00 2001
From: Marcus Noble <github@marcusnoble.co.uk>
Date: Tue, 28 Dec 2021 11:44:26 +0000
Subject: [PATCH] Addressed PR feedback

Signed-off-by: Marcus Noble <github@marcusnoble.co.uk>
---
 src/components/users.js | 55 ++++++++++++++++++++++++++---------------
 src/i18n/de.js          |  2 ++
 src/i18n/en.js          |  2 ++
 src/i18n/zh.js          |  2 ++
 4 files changed, 41 insertions(+), 20 deletions(-)

diff --git a/src/components/users.js b/src/components/users.js
index e056b0c..2894af5 100644
--- a/src/components/users.js
+++ b/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,
-                    imgURL: `${localStorage.getItem(
-                      "base_url"
-                    )}/_matrix/media/v1/thumbnail/${localStorage.getItem(
-                      "home_server"
-                    )}/${record.media_id}?width=50&height=50&method=crop`,
+                    title:
+                      record.media_type.startsWith("image") &&
+                      record.media_length
+                        ? record.upload_name || record.media_id
+                        : translate(
+                            "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 (
-                      <ImageField
-                        record={data}
-                        source="imgURL"
-                        onClick={() => window.open(data.downloadURL)}
-                      />
-                    );
-                  } else {
-                    return "Preview unavailable";
-                  }
+
+                  return (
+                    <Tooltip title={data["title"]}>
+                      <Avatar
+                        src={data["imgURL"]}
+                        onClick={() => window.open(data["downloadURL"])}
+                        variant="square"
+                      >
+                        <BrokenImageIcon />
+                      </Avatar>
+                    </Tooltip>
+                  );
                 }}
               />
               <DateField
diff --git a/src/i18n/de.js b/src/i18n/de.js
index 66a8a05..fe61abe 100644
--- a/src/i18n/de.js
+++ b/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",
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 51ba6ca..25c13be 100644
--- a/src/i18n/en.js
+++ b/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",
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
index 06666ba..6d9e4fb 100644
--- a/src/i18n/zh.js
+++ b/src/i18n/zh.js
@@ -231,6 +231,8 @@ const zh = {
         created_ts: "创建",
         last_access_ts: "上一次访问",
       },
+      image: "图片",
+      preview_unavailable: "预览不可用",
     },
     delete_media: {
       name: "媒体文件",