diff --git a/src/main/node/app.js b/src/main/node/app.js index 5aca1c4..725bd1b 100644 --- a/src/main/node/app.js +++ b/src/main/node/app.js @@ -2,6 +2,36 @@ const { app, BrowserWindow } = require("electron"); const path = require("path"); let broadcastRect = { width: 0, height: 0 }; +async function autoResizeWindow(window, lastSize) { + if (window.isDestroyed()) { + return lastSize; + } + const newSize = await window.webContents.executeJavaScript(`(() => { + const canvas = document.getElementById('broadcast-canvas'); + if (!canvas) { + return null; + } + const rect = canvas.getBoundingClientRect(); + return { + width: Math.round(rect.width), + height: Math.round(rect.height), + }; + })();`); + + if (!newSize?.width || !newSize?.height) { + return lastSize; + } + if (lastSize.width === newSize.width && lastSize.height === newSize.height) { + return lastSize; + } + console.log( + `Window size did not match canvas old: ${lastSize.width}x${lastSize.height} new: ${newSize.width}x${newSize.height}. Resizing.`, + ); + window.setContentSize(newSize.width, newSize.height, false); + window.setResizable(false); + return newSize; +} + function createWindow() { const url = process.env["IMGFLOAT_CHANNELS_URL"] || "https://imgfloat.kruhlmann.dev/channels"; const initialWindowWidthPx = 960; @@ -26,34 +56,6 @@ function createWindow() { } }; - const lockWindowToCanvas = async () => { - if (applicationWindow.isDestroyed()) { - return; - } - const size = await applicationWindow.webContents.executeJavaScript(`(() => { - const canvas = document.getElementById('broadcast-canvas'); - if (!canvas) { - return null; - } - const rect = canvas.getBoundingClientRect(); - return { - width: Math.round(rect.width), - height: Math.round(rect.height), - }; - })();`); - - if (size?.width && size?.height) { - if (broadcastRect.width !== size.width || broadcastRect.height !== size.height) { - console.log( - `Window size did not match canvas old: ${broadcastRect.width}x${broadcastRect.height} new: ${size.width}x${size.height}. Resizing.`, - ); - applicationWindow.setContentSize(size.width, size.height, false); - applicationWindow.setResizable(false); - broadcastRect = { ...size }; - } - } - }; - const handleNavigation = (navigationUrl) => { try { const { pathname } = new URL(navigationUrl); @@ -61,8 +63,14 @@ function createWindow() { if (isBroadcast) { clearCanvasSizeInterval(); - canvasSizeInterval = setInterval(lockWindowToCanvas, 750); - lockWindowToCanvas(); + canvasSizeInterval = setInterval(() => { + autoResizeWindow(applicationWindow, broadcastRect).then((newSize) => { + broadcastRect = newSize; + }); + }, 750); + autoResizeWindow(applicationWindow, broadcastRect).then((newSize) => { + broadcastRect = newSize; + }); } else { clearCanvasSizeInterval(); applicationWindow.setSize(initialWindowWidthPx, initialWindowHeightPx, false); diff --git a/src/main/resources/static/js/broadcast.js b/src/main/resources/static/js/broadcast.js index 17bc30f..77556b6 100644 --- a/src/main/resources/static/js/broadcast.js +++ b/src/main/resources/static/js/broadcast.js @@ -270,8 +270,8 @@ function applyPatch(assetId, patch) { const targetLayer = Number.isFinite(patch.layer) ? patch.layer : Number.isFinite(patch.zIndex) - ? patch.zIndex - : null; + ? patch.zIndex + : null; if (!isAudio && Number.isFinite(targetLayer)) { const currentOrder = getLayerOrder().filter((id) => id !== assetId); const insertIndex = Math.max(0, currentOrder.length - Math.round(targetLayer)); @@ -764,7 +764,7 @@ function setVideoSource(element, asset) { } applyVideoSource(element, next.objectUrl, asset); }) - .catch(() => { }); + .catch(() => {}); } function applyVideoSource(element, objectUrl, asset) {