fix: video progress bar on iOS would fail

This commit is contained in:
arabcoders 2026-06-09 18:54:13 +03:00
parent 4b7230843e
commit 3e663bd483

View file

@ -99,10 +99,10 @@
</video> </video>
<button <button
v-if="active && isTouchDevice" v-if="active && isTouchDevice && !controlsVisible"
type="button" type="button"
class="absolute inset-0 z-10" class="absolute inset-0 z-10"
:aria-label="controlsVisible ? 'Hide controls' : 'Show controls'" aria-label="Show controls"
@click="toggleControls" @click="toggleControls"
/> />
@ -146,9 +146,11 @@
min="0" min="0"
max="1000" max="1000"
step="1" step="1"
class="h-1.5 w-full accent-white opacity-55 transition-opacity hover:opacity-100" class="h-1.5 w-full accent-white opacity-55 transition-opacity hover:opacity-100 seek-bar"
aria-label="Seek video" aria-label="Seek video"
@input="handleSeekInput" @input="handleSeekInput"
@touchstart.prevent="handleSeekTouch"
@touchmove.prevent="handleSeekTouch"
/> />
</div> </div>
<div class="order-3 flex items-center justify-end sm:order-3 sm:shrink-0"> <div class="order-3 flex items-center justify-end sm:order-3 sm:shrink-0">
@ -740,6 +742,18 @@ function handleSeekInput(event: Event) {
showControls(); showControls();
} }
function handleSeekTouch(event: TouchEvent) {
const target = event.currentTarget as HTMLInputElement | null;
const touch = event.touches[0];
if (!target || !touch || !videoElement.value || !duration.value) return;
const rect = target.getBoundingClientRect();
const fraction = Math.max(0, Math.min(1, (touch.clientX - rect.left) / rect.width));
videoElement.value.currentTime = fraction * duration.value;
syncVideoState();
showControls();
}
function handleVolumeInput(event: Event) { function handleVolumeInput(event: Event) {
const target = event.target as HTMLInputElement | null; const target = event.target as HTMLInputElement | null;
if (!target || !videoElement.value) return; if (!target || !videoElement.value) return;
@ -887,6 +901,9 @@ function syncFullscreenState() {
isFullscreen.value = Boolean( isFullscreen.value = Boolean(
fullscreenElement && playerContainer.value && fullscreenElement === playerContainer.value, fullscreenElement && playerContainer.value && fullscreenElement === playerContainer.value,
); );
if (!isFullscreen.value && isTouchDevice.value) {
showControls();
}
scheduleAssLayoutRefresh(); scheduleAssLayoutRefresh();
} }
@ -1284,4 +1301,8 @@ onBeforeUnmount(() => {
.share-video-element::-webkit-media-controls-fullscreen-button { .share-video-element::-webkit-media-controls-fullscreen-button {
display: none; display: none;
} }
.seek-bar {
touch-action: none;
}
</style> </style>