From e08817d611930debbf851349227dd5ecae003fba Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Fri, 31 May 2024 16:56:13 +0800
Subject: [PATCH] Attempt to rewrite this part

---
 src/components/media.jsx | 62 +++++++++++++++++++++++++---------------
 1 file changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/media.jsx b/src/components/media.jsx
index 727bcb06..e094b824 100644
--- a/src/components/media.jsx
+++ b/src/components/media.jsx
@@ -379,26 +379,26 @@ function Media({
     const autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
     const showProgress = original.duration > 5;
 
-    const videoHTML = `
-    <video
-      src="${url}"
-      poster="${previewUrl}"
-      width="${width}"
-      height="${height}"
-      data-orientation="${orientation}"
-      preload="auto"
-      autoplay
-      ${isGIF ? 'muted' : ''}
-      ${isGIF ? '' : 'controls'}
-      playsinline
-      loop="${loopable}"
-      ${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''}
-      ${
-        isGIF && showProgress
-          ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\""
-          : ''
-      }
-    ></video>
+    // This string is only for autoplay + muted to work on Mobile Safari
+    const gifHTML = `
+      <video
+        src="${url}"
+        poster="${previewUrl}"
+        width="${width}"
+        height="${height}"
+        data-orientation="${orientation}"
+        preload="auto"
+        autoplay
+        muted
+        playsinline
+        loop="${loopable}"
+        ondblclick="this.paused ? this.play() : this.pause()"
+        ${
+          showProgress
+            ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\""
+            : ''
+        }
+      ></video>
   `;
 
     return (
@@ -461,17 +461,33 @@ function Media({
                 <div
                   ref={mediaRef}
                   dangerouslySetInnerHTML={{
-                    __html: videoHTML,
+                    __html: gifHTML,
                   }}
                 />
               </QuickPinchZoom>
-            ) : (
+            ) : isGIF ? (
               <div
                 class="video-container"
                 dangerouslySetInnerHTML={{
-                  __html: videoHTML,
+                  __html: gifHTML,
                 }}
               />
+            ) : (
+              <div class="video-container">
+                <video
+                  slot="media"
+                  src={url}
+                  poster={previewUrl}
+                  width={width}
+                  height={height}
+                  data-orientation={orientation}
+                  preload="auto"
+                  autoplay
+                  playsinline
+                  loop={loopable}
+                  controls
+                ></video>
+              </div>
             )
           ) : isGIF ? (
             <video