From 862a0ba56bfd720cf9a667cb569250d1afe034d0 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Thu, 29 Oct 2020 10:29:08 +0100
Subject: [PATCH] show image decryption error

---
 src/domain/session/room/timeline/tiles/ImageTile.js    | 8 ++++++--
 src/platform/web/ui/css/themes/element/theme.css       | 2 +-
 src/platform/web/ui/session/room/timeline/ImageView.js | 5 ++++-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/ImageTile.js b/src/domain/session/room/timeline/tiles/ImageTile.js
index 6c67d3d8..04cff3c9 100644
--- a/src/domain/session/room/timeline/tiles/ImageTile.js
+++ b/src/domain/session/room/timeline/tiles/ImageTile.js
@@ -50,7 +50,7 @@ export class ImageTile extends MessageTile {
             }
         } catch (err) {
             this._error = err;
-            this.emitChange("label");
+            this.emitChange("error");
         }
     }
 
@@ -97,10 +97,14 @@ export class ImageTile extends MessageTile {
     }
 
     get label() {
+        return this._getContent().body;
+    }
+
+    get error() {
         if (this._error) {
             return `Could not decrypt image: ${this._error.message}`;
         }
-        return this._getContent().body;
+        return null;
     }
 
     get shape() {
diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css
index d35e318f..9473b307 100644
--- a/src/platform/web/ui/css/themes/element/theme.css
+++ b/src/platform/web/ui/css/themes/element/theme.css
@@ -613,7 +613,7 @@ ul.Timeline > li.messageStatus .message-container > p {
     flex: 0 0 200px;
 }
 
-.Settings .error {
+.error {
     color: red;
     font-weight: 600;
 }
diff --git a/src/platform/web/ui/session/room/timeline/ImageView.js b/src/platform/web/ui/session/room/timeline/ImageView.js
index fb540f4b..113fb1e4 100644
--- a/src/platform/web/ui/session/room/timeline/ImageView.js
+++ b/src/platform/web/ui/session/room/timeline/ImageView.js
@@ -32,7 +32,10 @@ export class ImageView extends TemplateView {
         });
         const linkContainer = t.a({
             style: `padding-top: ${heightRatioPercent}%; width: ${vm.thumbnailWidth}px;`
-        }, image);
+        }, [
+            image,
+            t.if(vm => vm.error, t.createTemplate((t, vm) => t.p({className: "error"}, vm.error)))
+        ]);
 
         return renderMessage(t, vm,
             [t.div(linkContainer), t.p(t.time(vm.date + " " + vm.time))]