From 70d9e37bf3300fc26b745984c747945b1e17cba5 Mon Sep 17 00:00:00 2001
From: Marcus Hoffmann <bubu@bubu1.eu>
Date: Fri, 20 Aug 2021 15:07:33 +0300
Subject: [PATCH] Improve Telegram gif handling

Telegram (and basically all other modern chat apps) use video files instead of
actual .gif files for any features called "gifs", which makes sense because gif
files are huge. However, Matrix doesn't have such modern features, so users
will see a full video player instead of a nice looping gif. This change adds
support for simple custom flags that can be used to make the video player
behave similar to actual .gif files.

The flags are set by the Telegram bridge here: https://github.com/mautrix/telegram/blob/v0.10.1/mautrix_telegram/portal/telegram.py#L252-L260

Co-authored-by: Marcus Hoffmann <bubu@bubu1.eu>
Signed-off-by: Marcus Hoffmann <bubu@bubu1.eu>
Signed-off-by: Tulir Asokan <tulir@maunium.net>
---
 src/components/views/messages/MVideoBody.tsx | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/views/messages/MVideoBody.tsx b/src/components/views/messages/MVideoBody.tsx
index 77c7ebacdad..25b2d6ecbd1 100644
--- a/src/components/views/messages/MVideoBody.tsx
+++ b/src/components/views/messages/MVideoBody.tsx
@@ -236,6 +236,8 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
 
         const contentUrl = this.getContentUrl();
         const thumbUrl = this.getThumbUrl();
+        const loop = Boolean(content.info?.["fi.mau.loop"]);
+        const controls = !content.info?.["fi.mau.hide_controls"];
         let height = null;
         let width = null;
         let poster = null;
@@ -252,6 +254,15 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                 preload = "none";
             }
         }
+        let onMouseOver;
+        let onMouseOut;
+        if (!autoplay && !controls) {
+            onMouseOver = event => (event.target as HTMLVideoElement).play();
+            onMouseOut = event => {
+                (event.target as HTMLVideoElement).pause();
+                (event.target as HTMLVideoElement).currentTime = 0;
+            };
+        }
         return (
             <span className="mx_MVideoBody">
                 <video
@@ -259,13 +270,16 @@ export default class MVideoBody extends React.PureComponent<IBodyProps, IState>
                     ref={this.videoRef}
                     src={contentUrl}
                     title={content.body}
-                    controls
+                    controls={controls}
+                    loop={loop}
                     preload={preload}
                     muted={autoplay}
                     autoPlay={autoplay}
                     height={height}
                     width={width}
                     poster={poster}
+                    onMouseOver={onMouseOver}
+                    onMouseOut={onMouseOut}
                     onPlay={this.videoOnPlay}
                 />
                 { this.props.tileShape && <MFileBody {...this.props} showGenericPlaceholder={false} /> }