mirror of
https://github.com/ZoneMinder/zoneminder.git
synced 2026-11-03 11:14:26 -05:00
Isaac ConnorandClaude Opus 5.5
53662582f0
Gapless playback loads a new event page for each event, and each load moved the video three times and ended in a page-wide wipe: - video.js sets the player up on DOMContentLoaded without a size, while the first changeScale() ran from initPage() on window load. The browser could paint a collapsed video with the controls drawn up under it, and changeScale() measured that collapsed layout (an empty inline-block still leaves a line box), which made the video too small by about 17px. - skin.js's ResizeObserver on the navbar statistics called endOfResize() for the size it reports when it starts observing, and for every width change of the figures, so changeScale() ran again 250ms later and corrected the size. - With the stats panel turned off, initPage() hid it and widened the video's column only after load. - The page-leave roll-up in skin.js animated the content to nothing on every reload, a wipe from the bottom up between events. Size the video on DOMContentLoaded, after video.js has the player, and remember the size per monitor (zmEventVideoSize<Id>) so event.php opens the next page at it; changeScale() still corrects it if the window or layout changed. Render the stats panel and the video's column width from the zmEventStats cookie in event.php. Rescale for the navbar only when its height changes. Move between events through goToEvent(), which sets skipPageLeaveAnimation so the roll-up is skipped for that reload. Measured in Chrome at 1920x915 on a 1280x720 event, each frame's video size and controls position: before, every page went 1x0, 1144x644, 1174x660 with the controls starting near the top of the video, and the content shrank from 851px to 363px before the reload. After, the page reached by gapless playback paints at 1174x660 with the controls in place and does not move, and there is no roll-up. The first event of a session still sizes once, as no size has been remembered yet. Window resize and the stats button still rescale, for both video.js and zms events. tests/js/event-gapless-layout.test.js covers goToEvent() and the DOMContentLoaded sizing; two of its three tests fail without this change. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>