Update static/js/editor.js

static/js/editor.js

@@ -210,77 +210,105 @@ function highlightWord(sIdx, wIdx, showToolbar) {
 // ============================================
 
 function initTrimmerUI(startT, endT, minLimit, maxLimit) {
-    // تنظیم محدودیت‌های سراسری بر اساس کلمات قبل و بعد
+    // تنظیم محدودیت‌های سراسری
     trimMinLimit = minLimit;
     trimMaxLimit = maxLimit;
     trimViewDuration = trimMaxLimit - trimMinLimit;
     
-    // اگر فاصله خیلی کم بود، حداقل یک مقدار ناچیز برای جلوگیری از تقسیم بر صفر
-    if(trimViewDuration <= 0.01) trimViewDuration = 0.01;
+    // جلوگیری از خطای تقسیم بر صفر
+    if(trimViewDuration <= 0.001) trimViewDuration = 1;
 
     // اعمال مقادیر اولیه به UI
     updateTrimmerVisuals();
     
-    // ستاپ ایونت لیسنرها برای درگ کردن
+    // هندلرهای درگ با پشتیبانی بهتر از موبایل
     const handleL = document.getElementById('handleLeft');
     const handleR = document.getElementById('handleRight');
     
-    const setupDrag = (elem, type) => {
-        const startDrag = (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            activeDragHandle = type;
-            document.addEventListener('mousemove', onDrag);
-            document.addEventListener('mouseup', endDrag);
-            document.addEventListener('touchmove', onDrag, {passive: false});
-            document.addEventListener('touchend', endDrag);
-        };
-        elem.onmousedown = startDrag;
-        elem.ontouchstart = startDrag;
+    // تابع کمکی برای شروع درگ
+    const startDrag = (e, type) => {
+        // جلوگیری از اسکرول صفحه هنگام لمس هندل
+        if(e.cancelable) e.preventDefault();
+        e.stopPropagation();
+        
+        activeDragHandle = type;
+        
+        // اضافه کردن لیسنرها به کل داکیومنت برای اینکه اگر انگشت از روی هندل رد شد، درگ قطع نشود
+        document.addEventListener('mousemove', onDrag);
+        document.addEventListener('mouseup', endDrag);
+        document.addEventListener('touchmove', onDrag, {passive: false});
+        document.addEventListener('touchend', endDrag);
     };
 
-    if(handleL) setupDrag(handleL, 'left');
-    if(handleR) setupDrag(handleR, 'right');
+    // اتصال رویدادها
+    if(handleL) {
+        handleL.onmousedown = (e) => startDrag(e, 'left');
+        handleL.ontouchstart = (e) => startDrag(e, 'left');
+    }
+    if(handleR) {
+        handleR.onmousedown = (e) => startDrag(e, 'right');
+        handleR.ontouchstart = (e) => startDrag(e, 'right');
+    }
 }
 
 function onDrag(e) {
     if (!activeDragHandle) return;
-    e.preventDefault();
+    
+    // جلوگیری از رفتارهای پیش‌فرض مرورگر (مثل رفرش یا اسکرول)
+    if(e.cancelable) e.preventDefault();
     e.stopPropagation();
     
     const strip = document.getElementById('timelineStrip');
     if (!strip) return;
     
     const rect = strip.getBoundingClientRect();
-    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
     
-    // محاسبه درصد مکان انگشت/ماوس روی نوار
-    // 0% = trimMinLimit, 100% = trimMaxLimit
+    // دریافت موقعیت X چه با موس چه با تاچ
+    let clientX;
+    if (e.touches && e.touches.length > 0) {
+        clientX = e.touches[0].clientX;
+    } else {
+        clientX = e.clientX;
+    }
+    
+    // محاسبه درصد دقیق مکان انگشت روی نوار
     let percent = (clientX - rect.left) / rect.width;
+    
+    // محدود کردن درصد بین 0 و 1 (که از کادر بیرون نزند)
     percent = Math.max(0, Math.min(1, percent));
     
     // تبدیل درصد به زمان واقعی
     let newTime = trimMinLimit + (percent * trimViewDuration);
     
+    // گرد کردن برای دقت 2 رقم اعشار
+    newTime = Math.round(newTime * 100) / 100;
+    
     if (activeDragHandle === 'left') {
-        // تغییر زمان شروع (Left Handle)
-        // نباید کمتر از حد مجاز (trimMinLimit) باشد (که با Math.max(0...) کنترل شد)
-        // نباید بیشتر از زمان پایان فعلی باشد (با یک فاصله ایمن کوچک)
+        // محدودیت هندل چپ:
+        // 1. نباید از پایان جلو بزند (حداقل فاصله 0.05)
+        // 2. نباید از حد مجاز (کلمه قبل) کمتر شود
         if (newTime >= tempEndTime - 0.05) newTime = tempEndTime - 0.05;
+        if (newTime < trimMinLimit) newTime = trimMinLimit;
         
-        tempStartTime = parseFloat(newTime.toFixed(2));
+        tempStartTime = newTime;
     } else {
-        // تغییر زمان پایان (Right Handle)
-        // نباید کمتر از زمان شروع فعلی باشد
+        // مح��ودیت هندل راست:
+        // 1. نباید از شروع عقب بیاید
+        // 2. نباید از حد مجاز (کلمه بعد) بیشتر شود
         if (newTime <= tempStartTime + 0.05) newTime = tempStartTime + 0.05;
+        if (newTime > trimMaxLimit) newTime = trimMaxLimit;
         
-        tempEndTime = parseFloat(newTime.toFixed(2));
+        tempEndTime = newTime;
     }
     
+    // بروزرسانی آنی گرافیک
     updateTrimmerVisuals();
 }
 
-function endDrag() {
+function endDrag(e) {
+    if(!activeDragHandle) return;
+    if(e && e.cancelable) e.preventDefault();
+    
     activeDragHandle = null;
     document.removeEventListener('mousemove', onDrag);
     document.removeEventListener('mouseup', endDrag);
@@ -290,23 +318,29 @@ function endDrag() {
 
 function updateTrimmerVisuals() {
     // نمایش متنی زمان
-    document.getElementById('trimStartDisp').innerText = formatTimeMs(tempStartTime);
-    document.getElementById('trimEndDisp').innerText = formatTimeMs(tempEndTime);
+    const tStartDisp = document.getElementById('trimStartDisp');
+    const tEndDisp = document.getElementById('trimEndDisp');
+    
+    if(tStartDisp) tStartDisp.innerText = formatTimeMs(tempStartTime);
+    if(tEndDisp) tEndDisp.innerText = formatTimeMs(tempEndTime);
     
-    // محاسبه موقعیت هندل‌ها (درصد نسبت به طول کل بازه مجاز)
-    const leftP = ((tempStartTime - trimMinLimit) / trimViewDuration) * 100;
-    const rightP = ((tempEndTime - trimMinLimit) / trimViewDuration) * 100;
+    // محاسبه درصدها برای CSS
+    let leftP = ((tempStartTime - trimMinLimit) / trimViewDuration) * 100;
+    let rightP = ((tempEndTime - trimMinLimit) / trimViewDuration) * 100;
+    
+    // اطمینان از اینکه درصدها بین 0 تا 100 هستند
+    leftP = Math.max(0, Math.min(100, leftP));
+    rightP = Math.max(0, Math.min(100, rightP));
     
     const handleL = document.getElementById('handleLeft');
     const handleR = document.getElementById('handleRight');
     const track = document.getElementById('trackActive');
     
-    if(handleL && handleR && track) {
-        handleL.style.left = `${leftP}%`;
-        // هندل راست را هم با left پوزیشن می‌دهیم چون در کانتینر ابسولوت است
-        handleR.style.left = `${rightP}%`; 
-        
-        // نوار رنگی وسط از موقعیت چپ شروع میشه و عرضش تفاضل دو درصد است
+    // اعمال استایل‌ها
+    if(handleL) handleL.style.left = `${leftP}%`;
+    if(handleR) handleR.style.left = `${rightP}%`;
+    
+    if(track) {
         track.style.left = `${leftP}%`;
         track.style.width = `${rightP - leftP}%`;
     }
@@ -321,13 +355,12 @@ function formatTimeMs(t) {
 
 // تابع پخش دقیق بازه انتخاب شده
 function playPreviewWord() {
-    if (!activeWordId && (tempStartTime === undefined)) return;
+    if ((tempStartTime === undefined) || (tempEndTime === undefined)) return;
     
-    // توقف پخش قبلی
     if(previewInterval) clearInterval(previewInterval);
     v.pause();
     
-    // شروع دقیقا از زمان تنظیم شده (نه زمان ذخیره شده قبلی)
+    // پرش به لحظه شروع تنظیم شده
     v.currentTime = tempStartTime;
     
     const icon1 = document.getElementById('btnPreviewPlay')?.querySelector('i');
@@ -338,7 +371,7 @@ function playPreviewWord() {
     
     v.play().then(() => {
         previewInterval = setInterval(() => {
-            // اگر به زمان پایان تنظیم شده رسید، متوقف شو
+            // اگر زمان فعلی از زمان پایان رد شد، متوقف کن
             if(v.currentTime >= tempEndTime) {
                 v.pause();
                 clearInterval(previewInterval);
@@ -346,8 +379,8 @@ function playPreviewWord() {
                 if(icon1) icon1.className = "fa-solid fa-play";
                 if(icon2) icon2.className = "fa-solid fa-play";
                 
-                // برگرداندن هد به زمان پایان برای نمایش فریم آخر
-                v.currentTime = tempEndTime - 0.01; 
+                // برگرداندن به زمان پایان برای نمایش فریم آخر
+                v.currentTime = tempEndTime; 
             }
         }, 15);
     }).catch(e => console.log("Play interrupted", e));
@@ -386,11 +419,10 @@ function confirmTimeChanges() {
     const [sIdx, wIdx] = activeWordId.split('-').map(Number);
     const seg = state.segs[sIdx];
     
-    // اعمال زمان‌های جدید
+    // اعمال تغییرات
     seg.words[wIdx].start = tempStartTime;
     seg.words[wIdx].end = tempEndTime;
     
-    // اصلاح مرزهای سگمنت والد
     if (wIdx === 0 && tempStartTime < seg.start) seg.start = tempStartTime;
     if (wIdx === seg.words.length - 1 && tempEndTime > seg.end) seg.end = tempEndTime;