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