mirror/zoneminder
1
0
Fork 0
mirror of https://github.com/ZoneMinder/zoneminder.git synced 2026-05-18 03:25:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix: use ResizeObserver for zone point positioning on initial load

Browse Source 
Replace img load event listener with ResizeObserver on imageFeed
container. The old approach listened for load events on #imageFrame img
elements, which never fires for video-based streams (Go2RTC MSE) since
they use <video> not <img>. ResizeObserver fires whenever the container
dimensions change regardless of content type, fixing incorrect zone
point positions on initial load.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Isaac Connor
2026-02-27 17:04:21 -05:00
parent b5511e3f02
commit 10f1608f1d
1 changed files with 2 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/skins/classic/views/js/zone.js
View File

@@ -716,11 +716,9 @@ function initPage() {
imageFeed.appendChild(zoneSVG);
}
document.querySelectorAll('#imageFrame img').forEach(function(el) {
el.addEventListener("load", imageLoadEvent, {passive: true});
});
var ro = new ResizeObserver(drawZonePoints);
ro.observe(imageFeed);
window.addEventListener("resize", drawZonePoints, {passive: true});
// if the image link is broken for some reason we won't draw the points, so do it manually
drawZonePoints();
// Manage the BACK button
@@ -747,14 +745,6 @@ function panZoomOut(el) {
zmPanZoom.zoomOut(el);
}
function imageLoadEvent() {
// We only need this event on the first image load to set dimensions.
// Turn it off after it has been called.
document.querySelectorAll('#imageFrame img').forEach(function(el) {
el.removeEventListener("load", imageLoadEvent, {passive: true});
});
drawZonePoints();
}
function Polygon_calcArea(coords) {
var n_coords = coords.length;