Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-23 06:09:21 +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 autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
const showProgress = original.duration > 5; const showProgress = original.duration > 5;
const videoHTML = ` // This string is only for autoplay + muted to work on Mobile Safari
<video const gifHTML = `
src="${url}" <video
poster="${previewUrl}" src="${url}"
width="${width}" poster="${previewUrl}"
height="${height}" width="${width}"
data-orientation="${orientation}" height="${height}"
preload="auto" data-orientation="${orientation}"
autoplay preload="auto"
${isGIF ? 'muted' : ''} autoplay
${isGIF ? '' : 'controls'} muted
playsinline playsinline
loop="${loopable}" loop="${loopable}"
${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''} ondblclick="this.paused ? this.play() : this.pause()"
${ ${
isGIF && showProgress showProgress
? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\"" ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\""
: '' : ''
} }
></video> ></video>
`; `;
return ( return (
@ -461,17 +461,33 @@ function Media({
<div <div
ref={mediaRef} ref={mediaRef}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: videoHTML, __html: gifHTML,
}} }}
/> />
</QuickPinchZoom> </QuickPinchZoom>
) : ( ) : isGIF ? (
<div <div
class="video-container" class="video-container"
dangerouslySetInnerHTML={{ 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 ? ( ) : isGIF ? (
<video <video