Skip to content

Fix: Run ResizeObserver for Go2RTC on Montage page #4376

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jul 22, 2025
Merged

Fix: Run ResizeObserver for Go2RTC on Montage page #4376

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
afeeb5d
When using go2rtc, perform an Observe on the newly created <video-str…
IgorA100 Jul 22, 2025
0a820a9
Moved "observer" to global scope and renamed to "observerMontage" (mo…
IgorA100 Jul 22, 2025
ea11065
Merge branch 'ZoneMinder:master' into patch-771054
IgorA100 Jul 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/js/MonitorStream.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,7 @@ function MonitorStream(monitorData) {
this.streamListenerBind();

$j('#volumeControls').show();
if (typeof observerMontage !== 'undefined') observerMontage.observe(stream);
return;
} else {
alert("ZM_GO2RTC_PATH is empty. Go to Options->System and set ZM_GO2RTC_PATH accordingly.");
Expand Down
40 changes: 20 additions & 20 deletions web/skins/classic/views/js/montage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -811,28 +811,9 @@ function initPage() {
changeMonitorStatusPosition();
zmPanZoom.init();

// Creating a ResizeObserver Instance
const observer = new ResizeObserver((objResizes) => {
const blockContent = document.getElementById('content');
const currentScrollBbarExists = blockContent.scrollHeight > blockContent.clientHeight;
if (scrollBbarExists === null) {
scrollBbarExists = currentScrollBbarExists;
}
if (currentScrollBbarExists != scrollBbarExists) {
scrollBbarExists = currentScrollBbarExists;
return;
}
objResizes.forEach((obj) => {
const id = stringToNumber(obj.target.id);
if (mode != EDITING && !changedMonitors.includes(id)) {
changedMonitors.push(id);
}
});
});

// Registering an observer on an element
$j('[id ^= "liveStream"]').each(function() {
observer.observe(this);
observerMontage.observe(this);
});

//You can immediately call startMonitors() here, but in this case the height of the monitor will initially be minimal, and then become normal, but this is not pretty.
Expand Down Expand Up @@ -1200,6 +1181,25 @@ function changeMonitorStatusPosition() {
setCookie('zmMonitorStatusPositionSelected', monitorStatusPosition);
}

// Creating a ResizeObserver Instance
const observerMontage = new ResizeObserver((objResizes) => {
const blockContent = document.getElementById('content');
const currentScrollBbarExists = blockContent.scrollHeight > blockContent.clientHeight;
if (scrollBbarExists === null) {
scrollBbarExists = currentScrollBbarExists;
}
if (currentScrollBbarExists != scrollBbarExists) {
scrollBbarExists = currentScrollBbarExists;
return;
}
objResizes.forEach((obj) => {
const id = stringToNumber(obj.target.id);
if (mode != EDITING && !changedMonitors.includes(id)) {
changedMonitors.push(id);
}
});
});

// Kick everything off
$j(window).on('load', () => initPage());

Expand Down