From 59a92bdf97c2837e134735d1483b00da6c375d96 Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@element.io>
Date: Wed, 18 Nov 2020 20:10:05 +0100
Subject: [PATCH] vm changes for improved image view

---
 .../session/room/timeline/tiles/ImageTile.js  | 42 ++++++++-----------
 1 file changed, 17 insertions(+), 25 deletions(-)

diff --git a/src/domain/session/room/timeline/tiles/ImageTile.js b/src/domain/session/room/timeline/tiles/ImageTile.js
index c2704d06..fc70551d 100644
--- a/src/domain/session/room/timeline/tiles/ImageTile.js
+++ b/src/domain/session/room/timeline/tiles/ImageTile.js
@@ -26,7 +26,9 @@ export class ImageTile extends MessageTile {
         this._decryptedThumbail = null;
         this._decryptedImage = null;
         this._error = null;
-        this.load();
+        if (!this.isPending) {
+            this.tryLoadEncryptedThumbnail();
+        }
         this._lightboxUrl = this.urlCreator.urlForSegments([
             // ensure the right room is active if in grid view
             this.navigation.segment("room", this._room.id),
@@ -43,7 +45,7 @@ export class ImageTile extends MessageTile {
         return this.track(blob);
     }
 
-    async load() {
+    async tryLoadEncryptedThumbnail() {
         try {
             const thumbnailFile = this._getContent().info?.thumbnail_file;
             const file = this._getContent().file;
@@ -61,33 +63,33 @@ export class ImageTile extends MessageTile {
     }
 
     get lightboxUrl() {
-        if (!this.isUploading) {
+        if (!this.isPending) {
             return this._lightboxUrl;
         }
         return "";
     }
 
     get isUploading() {
-        return this._entry.isPending;
+        return this.isPending && this._entry.pendingEvent.status === SendStatus.UploadingAttachments;
     }
 
-    get uploadStatus() {
+    get uploadPercentage() {
+        const {pendingEvent} = this._entry;
+        return pendingEvent && Math.round((pendingEvent.attachmentsSentBytes / pendingEvent.attachmentsTotalBytes) * 100);
+    }
+
+    get sendStatus() {
         const {pendingEvent} = this._entry;
         switch (pendingEvent?.status) {
             case SendStatus.Waiting:
-                return this.i18n`Waiting`;
+                return this.i18n`Waiting…`;
             case SendStatus.EncryptingAttachments:
-                return this.i18n`Encrypting image`;
-            case SendStatus.UploadingAttachments: {
-                const percent = Math.round((pendingEvent.attachmentsSentBytes / pendingEvent.attachmentsTotalBytes) * 100);
-                return this.i18n`Uploading image (${percent}%)`;
-            }
             case SendStatus.Encrypting:
-                return this.i18n`Encrypting message`;
+                return this.i18n`Encrypting…`;
+            case SendStatus.UploadingAttachments:
+                return this.i18n`Uploading…`;
             case SendStatus.Sending:
-                return this.i18n`Sending message`;
-            case SendStatus.Sent:
-                return this.i18n`Message sent`;
+                return this.i18n`Sending…`;
             case SendStatus.Error:
                 return this.i18n`Error: ${pendingEvent.error.message}`;
             default:
@@ -112,16 +114,6 @@ export class ImageTile extends MessageTile {
         return "";
     }
 
-    async loadImageUrl() {
-        if (!this._decryptedImage) {
-            const file = this._getContent().file;
-            if (file) {
-                this._decryptedImage = await this._loadEncryptedFile(file);
-            }
-        }
-        return this._decryptedImage?.url || "";
-    }
-
     _scaleFactor() {
         const info = this._getContent()?.info;
         const scaleHeightFactor = MAX_HEIGHT / info?.h;