Merge pull request #7 from nathan-fiscaletti/add-default-region-size-…

…setting

Add default screen capture setting

public/electron.js

@@ -1,14 +1,15 @@
+const settings = require('./js/settings');
+// Initialize the application settings by loading them from disk.
+settings.initialize();
+
 const { PostHog } = require('posthog-node');
 
 // Module to control the application lifecycle and the native browser window.
 const { app, BrowserWindow, ipcMain, screen, protocol } = require("electron");
 
 const windows = require('./js/windows');
-const settings = require('./js/settings');
 const ipcHandlers = require('./js/ipc-handlers');
 
-// Initialize the application settings by loading them from disk.
-settings.initialize();
 
 // Initialize the IPC handlers used to control the main process from
 // the renderer process.

public/js/ipc-handlers.js

@@ -42,15 +42,28 @@ module.exports = {
             windows.closeSettingsWindow();
         });
 
-        ipcMain.on("updateSettings", (event, newSettings) => {
-            settings.set(newSettings);
+        ipcMain.on("updateSettings", (event, newSettings) => {        
+            const oldSettings = settings.get()
+            // If default region changed, update current region to match
+            if (oldSettings.defaultScreenCaptureWidth !== newSettings.defaultScreenCaptureWidth || 
+                oldSettings.defaultScreenCaptureHeight !== newSettings.defaultScreenCaptureHeight) {
+                const streamRegion = stream.getStreamRegion()
+                streamRegion.width = newSettings.defaultScreenCaptureWidth
+                streamRegion.height = newSettings.defaultScreenCaptureHeight
+                stream.setStreamRegion(streamRegion)
+            }
 
+            settings.set(newSettings);
             if (stream.isStreaming()) {
                 stream.stopStream();
                 stream.startStream({ app });
             }
         });
 
+        ipcMain.on('selectRegionOpened', (event, { maxWidth, maxHeight }) => {
+            windows.restrictRegionSelectionWindowSize(maxWidth, maxHeight);
+        });
+
         ipcMain.on("selectRegion", (event) => {
             windows.createRegionSelectionWindow({ app });
         });

public/js/settings.js

@@ -17,6 +17,8 @@ const settings = {
     enableAnalytics: true,
     systemInformationReportedAt: null,
     clientId: uuid(),
+    defaultScreenCaptureWidth: 500,
+    defaultScreenCaptureHeight: 500
 };
 
 function initialize() {

public/js/stream.js

@@ -6,7 +6,12 @@ const { startVideoStreamProcess } = require('./video-stream/stream-video');
 const settings = require('./settings');
 
 let streamScreen;
-let streamRegion = { x: 0, y: 0, width: 500, height: 500 };
+let streamRegion = { 
+    x: 0, 
+    y: 0, 
+    width: settings.get().defaultScreenCaptureWidth, 
+    height: settings.get().defaultScreenCaptureHeight 
+};
 let streamProcess;
 let socketRelay;
 
@@ -28,8 +33,8 @@ async function startStream({ app }) {
         streamSecret,
         offsetX: streamRegion.x,
         offsetY: streamRegion.y,
-        width: streamRegion.width,
-        height: streamRegion.height,
+        width: Math.min(streamRegion.width, 4095), // Max resolution ffmpeg can handel
+        height: Math.min(streamRegion.height, 4095), // Max resolution ffmpeg can handel
         screenId: streamScreen.id,
         scaleFactor: streamScreen.scaleFactor
     });

public/js/windows.js

@@ -225,6 +225,12 @@ function closeRegionSelectionWindow() {
     }
 }
 
+function restrictRegionSelectionWindowSize(maxWidth, maxHeight) {
+    if (regionSelectionWindow) {
+        regionSelectionWindow.setMaximumSize(maxWidth, maxHeight);
+    }
+}
+
 function closeSettingsWindow() {
     if (settingsWindow) {
         settingsWindow.close();
@@ -240,6 +246,7 @@ module.exports = {
     createRegionSelectionWindow,
     getRegionSelectionWindow,
     closeRegionSelectionWindow,
+    restrictRegionSelectionWindowSize,
 
     createSettingsWindow,
     getSettingsWindow,

src/Selector.js

@@ -8,6 +8,11 @@ import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 const { ipcRenderer } = window.require('electron');
 
 export default function Selector() {
+    React.useEffect(() => {
+        // Send an IPC message to restrict window size when the Selector is mounted
+        ipcRenderer.send('selectRegionOpened', { maxWidth: 4095, maxHeight: 4095 });
+    }, []);
+
     return (
         <Box 
             sx={{ 

src/Settings.js

@@ -1,25 +1,26 @@
 import React from 'react';
 
-import { styled } from '@mui/material/styles';
+import { LoadingButton } from '@mui/lab';
 import {
-    AppBar, Checkbox, Box, Button, Divider, TextField,
-    Typography, Tabs, Tab, Tooltip, Snackbar, Alert,
-    AlertTitle, Paper, Collapse, Slider, InputAdornment,
-    Link, Select, MenuItem, FormControl, InputLabel,
-    Slide, Dialog, DialogTitle, DialogContent,
-    DialogActions, DialogContentText, Switch
+    Alert, AlertTitle, AppBar, Box, Button,
+    Checkbox, Collapse, Dialog, DialogActions,
+    DialogContent, DialogContentText, DialogTitle, Divider,
+    FormControl, InputAdornment, InputLabel, Link,
+    MenuItem, Paper, Select, Slide,
+    Slider, Snackbar, Switch, Tab,
+    Tabs, TextField, Tooltip, Typography
 } from '@mui/material';
-import { LoadingButton } from '@mui/lab';
+import { styled } from '@mui/material/styles';
 
 import AnalyticsOutlinedIcon from '@mui/icons-material/AnalyticsOutlined';
 import AttributionIcon from '@mui/icons-material/Attribution';
-import SettingsIcon from '@mui/icons-material/Settings';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
-import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
 import GavelOutlinedIcon from '@mui/icons-material/GavelOutlined';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
 import PersonOutlinedIcon from '@mui/icons-material/PersonOutlined';
+import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
+import SettingsIcon from '@mui/icons-material/Settings';
 
 const { ipcRenderer, shell } = window.require('electron');
 
@@ -73,6 +74,8 @@ export default function Settings() {
 
     const [streamPort, setStreamPort] = React.useState(0);
     const [webSocketPort, setWebSocketPort] = React.useState(0);
+    const [defaultScreenCaptureWidth, setDefaultScreenCaptureWidth] = React.useState(0)
+    const [defaultScreenCaptureHeight, setDefaultScreenCaptureHeight] = React.useState(0)
     const [previewVisible, setPreviewVisible] = React.useState(false);
     const [enableAnalytics, setEnableAnalytics] = React.useState(false);
     const [showRegion, setShowRegion] = React.useState(false);
@@ -106,6 +109,8 @@ export default function Settings() {
             setFrameRate(settings.frameRate);
             setBitRate(settings.bitRate);
             setStreamPort(settings.streamPort);
+            setDefaultScreenCaptureWidth(settings.defaultScreenCaptureWidth)
+            setDefaultScreenCaptureHeight(settings.defaultScreenCaptureHeight)
             setWebSocketPort(settings.webSocketPort);
             setPreviewVisible(settings.previewVisible);
             setEnableAnalytics(settings.enableAnalytics);
@@ -163,8 +168,10 @@ export default function Settings() {
                 bitRate,
                 previewVisible,
                 enableAnalytics,
+                defaultScreenCaptureWidth,
+                defaultScreenCaptureHeight
             }
-
+            
             ipcRenderer.send("updateSettings", settings);
             setError(null);
             setSaveFinished(true);
@@ -270,6 +277,11 @@ export default function Settings() {
                     <Typography variant="body2" color="gray" sx={{ marginTop: 1 }}>
                         These settings are used to adjust the invocation of the screen capture process. The default values should work for most users.
                     </Typography>
+                    <Box display="flex" flexDirection="column" justifyContent="center" gap={2} marginTop={2}>
+                        <TextField required size="small" label="Default Screen Capture Width" type="number" variant="outlined" value={defaultScreenCaptureWidth} onChange={e => setDefaultScreenCaptureWidth(parseInt(e.target.value))} InputProps={{ min: 100, max: 4095 }} />
+                        <TextField required size="small" label="Default Screen Capture Height" type="number" variant="outlined" value={defaultScreenCaptureHeight} onChange={e => setDefaultScreenCaptureHeight(parseInt(e.target.value))} InputProps={{ min: 100, max: 4095 }} />
+                    </Box>
+
                     <Box display="flex" flexDirection="column" justifyContent="center" marginTop={2}>
                         <FormControl fullWidth sx={{ mt: 1 }}>
                             <InputLabel id="screen-capture-backend-label">Screen Capture Backend</InputLabel>