Fix autoplay in scrollPanel

src/components/structures/ScrollPanel.js

@@ -202,6 +202,7 @@ export default createReactClass({
         this.updatePreventShrinking();
         this.props.onScroll(ev);
         this.checkFillState();
+        this.autoplayGifsAndVideos();
     },
 
     onResize: function() {
@@ -365,6 +366,39 @@ export default createReactClass({
         }
     },
 
+    // This method checks whether the element is currently visible to the user or not.
+    isElementInClientViewPort: function(element, startY, endY) {
+        const offset = element.offsetTop;
+        return offset >= startY && offset <= endY;
+    },
+
+    // This method autoplays videos when autoplay is enabled and the videos are in viewport.
+    autoplayGifsAndVideos: function() {
+        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
+        if (!autoplay) {
+            return;
+        }
+
+        const itemlist = this._itemlist.current.children;
+        const {clientHeight, scrollHeight, scrollTop} = this._getScrollNode();
+        const startY = scrollTop;
+        const endY = scrollTop + clientHeight;
+        const events = this.props.children[1];
+        const eventKeys = events.map((c) => c.key);
+        for (let i = 0; i < itemlist.length; i++) {
+            const element = itemlist[i];
+            const scrollToken = element.dataset["scrollTokens"] || undefined;
+            if (this.isElementInClientViewPort(element, startY, endY) &&
+                scrollToken !== undefined &&
+                eventKeys.includes(scrollToken)
+               ) {
+                try {
+                    element.children[0].children[1].childNodes[2].firstChild.play();
+                } catch {}
+            }
+        }
+    },
+
     // check if unfilling is possible and send an unfill request if necessary
     _checkUnfillState: function(backwards) {
         let excessHeight = this._getExcessHeight(backwards);

src/components/views/messages/MImageBody.js

@@ -67,7 +67,7 @@ export default class MImageBody extends React.Component {
         this._image = createRef();
     }
 
-    // FIXME: factor this out and aplpy it to MVideoBody and MAudioBody too!
+    // FIXME: factor this out and apply it to MVideoBody and MAudioBody too!
     onClientSync(syncState, prevState) {
         if (this.unmounted) return;
         // Consider the client reconnected if there is no error with syncing.

src/components/views/messages/MVideoBody.js

@@ -175,7 +175,7 @@ export default createReactClass({
         return (
             <span className="mx_MVideoBody">
                 <video className="mx_MVideoBody" src={contentUrl} alt={content.body}
-                    controls preload={preload} muted={autoplay} autoPlay={autoplay}
+                    controls preload={preload} muted={autoplay}
                     height={height} width={width} poster={poster}>
                 </video>
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />