From 1fbf0c93120b287107e657c582abfeff04827af3 Mon Sep 17 00:00:00 2001 From: rmsitz Date: Mon, 24 Aug 2026 19:00:40 -0400 Subject: [PATCH] Fix video resize handle drifting off-screen The resize observer was persisting any rendered size change, including incidental reflow from the page's own responsive max-width clamping on window/viewport resize - not just deliberate corner-handle drags. This let the stored size drift into a badly non-16:9 box over repeated views on different window sizes, pushing the actual resize grip far below the fold. Now only persists while the user has mousedown on the video, and caps rendered height at 80vh as a backstop against already-drifted values. Co-Authored-By: Claude Sonnet 5 --- VERSION | 2 +- templates/lesson_view.html | 15 ++++++++++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/VERSION b/VERSION index 1a0c6a8..237fc0d 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -2026-08-24 21:41 UTC — cache category tree walk (fixes ~1s picker lag) +2026-08-24 23:00 UTC — fix video resize handle drifting off-screen diff --git a/templates/lesson_view.html b/templates/lesson_view.html index 62d977d..80fc9c9 100644 --- a/templates/lesson_view.html +++ b/templates/lesson_view.html @@ -156,6 +156,7 @@ background: #000; min-width: 320px; min-height: 200px; + max-height: 80vh; } .resize-hint { text-align: center; @@ -764,9 +765,21 @@ }) .catch(() => { applyingStoredSize = false; }); + // Only persist a size when the user is actually dragging the + // corner handle - a bare ResizeObserver fires on ANY rendered + // size change, including the page's own responsive + // max-width/max-height clamping on window/viewport resize, + // which isn't a user resize at all and would otherwise get + // saved right back as if it were. + let userResizing = false; + video.addEventListener('mousedown', () => { userResizing = true; }); + window.addEventListener('mouseup', () => { + setTimeout(() => { userResizing = false; }, 200); + }); + if (window.ResizeObserver) { const observer = new ResizeObserver(() => { - if (applyingStoredSize) return; + if (applyingStoredSize || !userResizing) return; clearTimeout(resizeSaveTimeout); resizeSaveTimeout = setTimeout(() => { const rect = video.getBoundingClientRect();