Fix trim bar handles invisible: ResizeObserver + rAF

Root cause found via puppeteer inspection:
- trimBarWidth was 4px when renderTrim() ran
- That made calc(32.64% - 12px) = ~-10px, putting handles offscreen left

Modal element gets actual width AFTER appendChild + browser layout pass.
Original code called renderTrim() synchronously right after appendChild,
before the modal had real dimensions.

Fix:
1. Use ResizeObserver on trim-bar to re-render whenever it gets actual width
2. Also use double requestAnimationFrame as fallback (waits for layout)

Verified via puppeteer:
  Before: leftStyle='calc(32.6443% - 12px)' but trimBarWidth=4
  After: handles correctly positioned within visible bar
This commit is contained in:
Sebastjan Artič 2026-04-30 11:38:20 +00:00
parent 47d313f39c
commit 4f7d8df659

View File

@ -1218,14 +1218,27 @@
if (which === "start") video.play();
};
// Initial render
// Initial render — počakaj da DOM ima dimenzije (modal je bil pravkar dodan)
console.log("[EditModal] init", { startInit, endInit, videoDuration, trimStart, trimEnd });
renderTrim();
renderPlayhead();
console.log("[EditModal] after renderTrim", {
leftStyle: handleL.style.left,
rightStyle: handleR.style.left,
trimBarWidth: trimBar.getBoundingClientRect().width
// ResizeObserver: ko se trim-bar dobi pravilno širino, re-render
const ro = new ResizeObserver(() => {
renderTrim();
renderPlayhead();
});
ro.observe(trimBar);
// Tudi takoj renderiraj (za primer, da se ResizeObserver ne sproži)
requestAnimationFrame(() => {
requestAnimationFrame(() => {
renderTrim();
renderPlayhead();
console.log("[EditModal] after renderTrim", {
leftStyle: handleL.style.left,
rightStyle: handleR.style.left,
trimBarWidth: trimBar.getBoundingClientRect().width
});
});
});
// Save button