From 54f9231582bd4581fd739ef8afd19dd169eb9ab5 Mon Sep 17 00:00:00 2001
From: Maxwell Kepler <starboundshep@gmail.com>
Date: Mon, 22 Oct 2018 20:57:58 +0100
Subject: [PATCH] Added badge to GIFs
 (https://github.com/vector-im/riot-web/issues/7344)

---
 res/css/views/messages/_MImageBody.scss     | 11 +++++++++++
 res/themes/dark/css/_dark.scss              |  3 +++
 res/themes/light/css/_base.scss             |  3 +++
 src/components/views/messages/MImageBody.js |  9 +++++++--
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/res/css/views/messages/_MImageBody.scss b/res/css/views/messages/_MImageBody.scss
index 4c763c5991..8752da117d 100644
--- a/res/css/views/messages/_MImageBody.scss
+++ b/res/css/views/messages/_MImageBody.scss
@@ -46,3 +46,14 @@ limitations under the License.
 .mx_MImageBody_thumbnail_spinner > * {
     transform: translate(-50%, -50%);
 }
+
+.mx_MImageBody_GIFlabel {
+    position: absolute;
+    display: block;
+    top: 0px;
+    left: 14px;
+    padding: 5px;
+    border-radius: 5px;
+    background: $imagebody-giflabel;
+    border: 2px solid $imagebody-giflabel-border;
+}
diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss
index 8ab338790e..ce334e3710 100644
--- a/res/themes/dark/css/_dark.scss
+++ b/res/themes/dark/css/_dark.scss
@@ -143,6 +143,9 @@ $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
 
+$imagebody-giflabel: rgba(1, 1, 1, 0.7);
+$imagebody-giflabel-border: rgba(1, 1, 1, 0.2);
+
 // unused?
 $progressbar-color: #000;
 
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index c7fd38259c..65cdcce209 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -148,6 +148,9 @@ $lightbox-bg-color: #454545;
 $lightbox-fg-color: #ffffff;
 $lightbox-border-color: #ffffff;
 
+$imagebody-giflabel: rgba(0, 0, 0, 0.7);
+$imagebody-giflabel-border: rgba(0, 0, 0, 0.2);
+
 // unused?
 $progressbar-color: #000;
 
diff --git a/src/components/views/messages/MImageBody.js b/src/components/views/messages/MImageBody.js
index 787285d932..69cff6691c 100644
--- a/src/components/views/messages/MImageBody.js
+++ b/src/components/views/messages/MImageBody.js
@@ -278,6 +278,7 @@ export default class MImageBody extends React.Component {
 
         let img = null;
         let placeholder = null;
+        let giflabel = null;
 
         // e2e image hasn't been decrypted yet
         if (content.file !== undefined && this.state.decryptedUrl === null) {
@@ -292,7 +293,7 @@ export default class MImageBody extends React.Component {
         if (thumbUrl && !this.state.imgError) {
             // Restrict the width of the thumbnail here, otherwise it will fill the container
             // which has the same width as the timeline
-            // mx_MImageBody_thumbnail resizes img to exactly container size
+            // mx_MImageBody_ resizes img to exactly container size
             img = <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                 style={{ maxWidth: maxWidth + "px" }}
                 alt={content.body}
@@ -302,11 +303,14 @@ export default class MImageBody extends React.Component {
                 onMouseLeave={this.onImageLeave} />;
         }
 
+        if (this._isGif() && !SettingsStore.getValue("autoplayGifsAndVideos") && !this.state.hover) {
+            giflabel = <p className="mx_MImageBody_GIFlabel">GIF</p>;
+        }
+
         const thumbnail = (
             <div className="mx_MImageBody_thumbnail_container" style={{ maxHeight: maxHeight + "px" }} >
                 { /* Calculate aspect ratio, using %padding will size _container correctly */ }
                 <div style={{ paddingBottom: (100 * infoHeight / infoWidth) + '%' }} />
-
                 { showPlaceholder &&
                     <div className="mx_MImageBody_thumbnail" style={{
                         // Constrain width here so that spinner appears central to the loaded thumbnail
@@ -320,6 +324,7 @@ export default class MImageBody extends React.Component {
 
                 <div style={{display: !showPlaceholder ? undefined : 'none'}}>
                     { img }
+                    { giflabel }
                 </div>
 
                 { this.state.hover && this.getTooltip() }