Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-23 14:13:21 +01:00
Code Issues Projects Releases Packages Wiki Activity

Experiment show play progress for longer GIFs

Browse source
This commit is contained in:
Lim Chee Aun 2023-11-23 22:59:27 +08:00
parent 4b617b7b9a
commit 7967194b89
2 changed files with 44 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/media.jsx
View file

@ -328,6 +328,7 @@ function Media({
const formattedDuration = formatDuration(original.duration); const formattedDuration = formatDuration(original.duration);
const hoverAnimate = !showOriginal && !autoAnimate && isGIF; const hoverAnimate = !showOriginal && !autoAnimate && isGIF;
const autoGIFAnimate = !showOriginal && autoAnimate && isGIF; const autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
const showProgress = original.duration > 5;
const videoHTML = ` const videoHTML = `
<video <video
@ -343,6 +344,11 @@ function Media({
playsinline playsinline
loop="${loopable}" loop="${loopable}"
${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''} ${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> ></video>
`; `;
@ -431,6 +437,22 @@ function Media({
playsinline playsinline
loop loop
muted muted
onTimeUpdate={
showProgress
? (e) => {
const { target } = e;
const container = target?.closest('.media-gif');
if (container) {
const percentage =
(target.currentTime / target.duration) * 100;
container.style.setProperty(
'--progress',
`${percentage}%`,
);
}
}
: undefined
}
/> />
) : ( ) : (
<> <>

22
src/components/status.css
View file

@ -940,6 +940,28 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 4px; border-radius: 4px;
padding: 0 4px; padding: 0 4px;
} }
.media-gif {
position: relative;
&:before {
content: '';
position: absolute;
top: auto !important;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background-color: var(--media-outline-color);
transform: translateX(calc(var(--progress, 0%) - 100%));
border-radius: 0 !important;
border: 0 !important;
border-right: 1px solid var(--media-fg-color) !important;
transition: transform 0.15s linear;
}
&:before {
height: 3px;
}
}
.status .media-gif video { .status .media-gif video {
object-fit: cover; object-fit: cover;
pointer-events: none; pointer-events: none;