From 422a924844fe74344e1a25234d255c2d086d4ade Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Wed, 28 Dec 2022 14:47:39 +0800
Subject: [PATCH] Make GIF autoplay on Mobile Safari

Only in carousel, and seems like `autoplay` with `muted` ain't working in (P)react.
---
 src/components/status.jsx | 46 ++++++++++++++++++---------------------
 1 file changed, 21 insertions(+), 25 deletions(-)

diff --git a/src/components/status.jsx b/src/components/status.jsx
index a0f4c3b8..c60db56e 100644
--- a/src/components/status.jsx
+++ b/src/components/status.jsx
@@ -759,19 +759,10 @@ function Media({ media, showOriginal, onClick = () => {} }) {
             rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
         }}
         onClick={(e) => {
-          if (isGIF) {
-            // Hmm, the videoRef might conflict here
-            if (showOriginal) {
-              try {
-                if (videoRef.current.paused) {
-                  videoRef.current.play();
-                } else {
-                  videoRef.current.pause();
-                }
-              } catch (e) {}
-            } else {
+          if (!showOriginal && isGIF) {
+            try {
               videoRef.current.pause();
-            }
+            } catch (e) {}
           }
           onClick(e);
         }}
@@ -791,19 +782,24 @@ function Media({ media, showOriginal, onClick = () => {} }) {
         }}
       >
         {showOriginal ? (
-          <video
-            ref={videoRef}
-            src={url}
-            poster={previewUrl}
-            width={width}
-            height={height}
-            preload="auto"
-            autoplay
-            muted={isGIF}
-            controls={!isGIF}
-            playsinline
-            loop={loopable}
-          ></video>
+          <div
+            dangerouslySetInnerHTML={{
+              __html: `
+                <video
+                  src="${url}"
+                  poster="${previewUrl}"
+                  width="${width}"
+                  height="${height}"
+                  preload="auto"
+                  autoplay
+                  muted="${isGIF}"
+                  ${isGIF ? '' : 'controls'}
+                  playsinline
+                  loop="${loopable}"
+                ></video>
+              `,
+            }}
+          />
         ) : isGIF ? (
           <video
             ref={videoRef}