Merge remote-tracking branch 'origin/develop' into develop

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;
+}

res/themes/dark/css/_dark.scss

@@ -144,6 +144,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;
 

res/themes/light/css/_base.scss

@@ -149,6 +149,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;
 

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) {
@@ -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() }