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 <[email protected]>
Signed-off-by: Marcus Hoffmann <[email protected]>
Signed-off-by: Tulir Asokan <[email protected]>

Author: Bubu

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,20 +254,32 @@ 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
                     className="mx_MVideoBody"
                     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} /> }