+22

src/components/media.jsx

reviewed

··· 328 328 const formattedDuration = formatDuration(original.duration); 329 329 const hoverAnimate = !showOriginal && !autoAnimate && isGIF; 330 330 const autoGIFAnimate = !showOriginal && autoAnimate && isGIF; 331 331 + const showProgress = original.duration > 5; 331 332 332 333 const videoHTML = ` 333 334 <video ··· 343 344 playsinline 344 345 loop="${loopable}" 345 346 ${isGIF ? 'ondblclick="this.paused ? this.play() : this.pause()"' : ''} 347 347 + ${ 348 348 + isGIF && showProgress 349 349 + ? "ontimeupdate=\"this.closest('.media-gif') && this.closest('.media-gif').style.setProperty('--progress', `${~~((this.currentTime / this.duration) * 100)}%`)\"" 350 350 + : '' 351 351 + } 346 352 ></video> 347 353 `; 348 354 ··· 431 437 playsinline 432 438 loop 433 439 muted 440 440 + onTimeUpdate={ 441 441 + showProgress 442 442 + ? (e) => { 443 443 + const { target } = e; 444 444 + const container = target?.closest('.media-gif'); 445 445 + if (container) { 446 446 + const percentage = 447 447 + (target.currentTime / target.duration) * 100; 448 448 + container.style.setProperty( 449 449 + '--progress', 450 450 + `${percentage}%`, 451 451 + ); 452 452 + } 453 453 + } 454 454 + : undefined 455 455 + } 434 456 /> 435 457 ) : ( 436 458 <>

+22

src/components/status.css

reviewed

··· 940 940 border-radius: 4px; 941 941 padding: 0 4px; 942 942 } 943 943 + .media-gif { 944 944 + position: relative; 945 945 + 946 946 + &:before { 947 947 + content: ''; 948 948 + position: absolute; 949 949 + top: auto !important; 950 950 + bottom: 0; 951 951 + left: 0; 952 952 + right: 0; 953 953 + height: 2px; 954 954 + background-color: var(--media-outline-color); 955 955 + transform: translateX(calc(var(--progress, 0%) - 100%)); 956 956 + border-radius: 0 !important; 957 957 + border: 0 !important; 958 958 + border-right: 1px solid var(--media-fg-color) !important; 959 959 + transition: transform 0.15s linear; 960 960 + } 961 961 + &:before { 962 962 + height: 3px; 963 963 + } 964 964 + } 943 965 .status .media-gif video { 944 966 object-fit: cover; 945 967 pointer-events: none;