Experiment show play progress for longer GIFs

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

View file

@ -328,6 +328,7 @@ function Media({
const formattedDuration = formatDuration(original.duration);
const hoverAnimate = !showOriginal && !autoAnimate && isGIF;
const autoGIFAnimate = !showOriginal && autoAnimate && isGIF;
const showProgress = original.duration > 5;
const videoHTML = `
<video
@ -343,6 +344,11 @@ function Media({
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>
`;
@ -431,6 +437,22 @@ function Media({
playsinline
loop
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
}
/>
) : (
<>

View file

@ -940,6 +940,28 @@ body:has(#modal-container .carousel) .status .media img:hover {
border-radius: 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 {
object-fit: cover;
pointer-events: none;