Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 06:06:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

Attempt to rewrite this part

Browse source
This commit is contained in:
Lim Chee Aun 2024-05-31 16:56:13 +08:00
parent 1ffc1c257a
commit e08817d611
1 changed files with 39 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
src/components/media.jsx
View file

@ -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