From 3e663bd483e6ad3a8f9d1bc3cf8610c1921fa198 Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Tue, 9 Jun 2026 18:54:13 +0300
Subject: [PATCH] fix: video progress bar on iOS would fail

---
 ui/app/components/VideoPlayer.vue | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/ui/app/components/VideoPlayer.vue b/ui/app/components/VideoPlayer.vue
index d30e6f0a..4ae7a26b 100644
--- a/ui/app/components/VideoPlayer.vue
+++ b/ui/app/components/VideoPlayer.vue
@@ -99,10 +99,10 @@
       </video>
 
       <button
-        v-if="active && isTouchDevice"
+        v-if="active && isTouchDevice && !controlsVisible"
         type="button"
         class="absolute inset-0 z-10"
-        :aria-label="controlsVisible ? 'Hide controls' : 'Show controls'"
+        aria-label="Show controls"
         @click="toggleControls"
       />
 
@@ -146,9 +146,11 @@
                 min="0"
                 max="1000"
                 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"
                 @input="handleSeekInput"
+                @touchstart.prevent="handleSeekTouch"
+                @touchmove.prevent="handleSeekTouch"
               />
             </div>
             <div class="order-3 flex items-center justify-end sm:order-3 sm:shrink-0">
@@ -740,6 +742,18 @@ function handleSeekInput(event: Event) {
   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) {
   const target = event.target as HTMLInputElement | null;
   if (!target || !videoElement.value) return;
@@ -887,6 +901,9 @@ function syncFullscreenState() {
   isFullscreen.value = Boolean(
     fullscreenElement && playerContainer.value && fullscreenElement === playerContainer.value,
   );
+  if (!isFullscreen.value && isTouchDevice.value) {
+    showControls();
+  }
   scheduleAssLayoutRefresh();
 }
 
@@ -1284,4 +1301,8 @@ onBeforeUnmount(() => {
 .share-video-element::-webkit-media-controls-fullscreen-button {
   display: none;
 }
+
+.seek-bar {
+  touch-action: none;
+}
 </style>