From d292d969e6b0a1ede15e15eac708dfd78dff95b4 Mon Sep 17 00:00:00 2001
From: Lucy Havok <lucy@naln1.ca>
Date: Mon, 7 Sep 2026 22:09:06 -0400
Subject: [PATCH 1/3] Add UI for setting stream resolution (in width)

---
 ui/src/SettingDialog.tsx | 11 ++++++++++-
 ui/src/settings.ts       |  3 +++
 ui/src/useRoom.ts        |  5 ++++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/src/SettingDialog.tsx b/ui/src/SettingDialog.tsx
index ab454fb6..df20ab42 100644
--- a/ui/src/SettingDialog.tsx
+++ b/ui/src/SettingDialog.tsx
@@ -45,7 +45,7 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
         setOpen(false);
     };
 
-    const {name, preferCodec, displayMode, framerate} = settingsInput;
+    const {name, preferCodec, displayMode, framerate, width} = settingsInput;
 
     return (
         <Dialog open={open} onClose={() => setOpen(false)} maxWidth={'xs'} fullWidth>
@@ -111,6 +111,15 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
                             fullWidth
                         />
                     </Box>
+                    <Box sx={{paddingTop: 1}}>
+                        <NumberField
+                            label="Width (px)"
+                            min={1}
+                            onChange={(width) => setSettingsInput((c) => ({...c, width}))}
+                            value={width}
+                            fullWidth
+                        />
+                    </Box>
                 </form>
             </DialogContent>
             <DialogActions>
diff --git a/ui/src/settings.ts b/ui/src/settings.ts
index 2ba8d1b4..3730ec8c 100644
--- a/ui/src/settings.ts
+++ b/ui/src/settings.ts
@@ -38,6 +38,7 @@ export interface Settings {
     displayMode: VideoDisplayMode;
     preferCodec?: PreferredCodec;
     framerate: number;
+    width: number;
 }
 export interface PreferredCodec {
     mimeType: string;
@@ -59,6 +60,7 @@ export const loadSettings = (): Settings => {
     const defaults: Settings = {
         displayMode: VideoDisplayMode.FitToWindow,
         framerate: 30,
+        width: 1920,
     };
 
     if (settings && typeof settings === 'object') {
@@ -69,6 +71,7 @@ export const loadSettings = (): Settings => {
                 Object.values(VideoDisplayMode).find((mode) => mode === settings.displayMode) ??
                 defaults.displayMode,
             preferCodec: settings.preferCodec ?? CodecDefault,
+            width: settings.width ?? defaults.width,
         };
     }
     return defaults;
diff --git a/ui/src/useRoom.ts b/ui/src/useRoom.ts
index bebbf291..cdf41db6 100644
--- a/ui/src/useRoom.ts
+++ b/ui/src/useRoom.ts
@@ -328,7 +328,10 @@ export const useRoom = (config: UIConfig): UseRoom => {
         }
         try {
             stream.current = await navigator.mediaDevices.getDisplayMedia({
-                video: {frameRate: loadSettings().framerate},
+                video: {
+                    frameRate: loadSettings().framerate,
+                    width: { ideal: loadSettings().width, max: loadSettings().width }
+                },
                 audio: {
                     echoCancellation: false,
                     autoGainControl: false,

From c7f188fdbfb19723c60b9b38c53729498babb2ec Mon Sep 17 00:00:00 2001
From: Lucy Havok <lucy@naln1.ca>
Date: Fri, 23 Oct 2026 17:53:45 -0400
Subject: [PATCH 2/3] Add height control; only set a resolution limit for
 either width or height if != 0 (default = 0)

---
 ui/src/SettingDialog.tsx | 13 ++++++++++---
 ui/src/settings.ts       |  5 ++++-
 ui/src/useRoom.ts        |  7 ++++++-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/ui/src/SettingDialog.tsx b/ui/src/SettingDialog.tsx
index df20ab42..d3b732ca 100644
--- a/ui/src/SettingDialog.tsx
+++ b/ui/src/SettingDialog.tsx
@@ -45,7 +45,7 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
         setOpen(false);
     };
 
-    const {name, preferCodec, displayMode, framerate, width} = settingsInput;
+    const {name, preferCodec, displayMode, framerate, width, height} = settingsInput;
 
     return (
         <Dialog open={open} onClose={() => setOpen(false)} maxWidth={'xs'} fullWidth>
@@ -111,14 +111,21 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
                             fullWidth
                         />
                     </Box>
-                    <Box sx={{paddingTop: 1}}>
+                    <Box sx={{paddingTop: 1, display: "flex"}}>
                         <NumberField
                             label="Width (px)"
-                            min={1}
+                            min={0}
                             onChange={(width) => setSettingsInput((c) => ({...c, width}))}
                             value={width}
                             fullWidth
                         />
+                        <NumberField
+                            label="Height (px)"
+                            min={0}
+                            onChange={(height) => setSettingsInput((c) => ({...c, height}))}
+                            value={height}
+                            fullWidth
+                        />
                     </Box>
                 </form>
             </DialogContent>
diff --git a/ui/src/settings.ts b/ui/src/settings.ts
index 3730ec8c..5ca32358 100644
--- a/ui/src/settings.ts
+++ b/ui/src/settings.ts
@@ -39,6 +39,7 @@ export interface Settings {
     preferCodec?: PreferredCodec;
     framerate: number;
     width: number;
+    height: number;
 }
 export interface PreferredCodec {
     mimeType: string;
@@ -60,7 +61,8 @@ export const loadSettings = (): Settings => {
     const defaults: Settings = {
         displayMode: VideoDisplayMode.FitToWindow,
         framerate: 30,
-        width: 1920,
+        width: 0, 
+        height: 0,
     };
 
     if (settings && typeof settings === 'object') {
@@ -72,6 +74,7 @@ export const loadSettings = (): Settings => {
                 defaults.displayMode,
             preferCodec: settings.preferCodec ?? CodecDefault,
             width: settings.width ?? defaults.width,
+            height: settings.height ?? defaults.height,
         };
     }
     return defaults;
diff --git a/ui/src/useRoom.ts b/ui/src/useRoom.ts
index cdf41db6..ccd8f656 100644
--- a/ui/src/useRoom.ts
+++ b/ui/src/useRoom.ts
@@ -330,7 +330,12 @@ export const useRoom = (config: UIConfig): UseRoom => {
             stream.current = await navigator.mediaDevices.getDisplayMedia({
                 video: {
                     frameRate: loadSettings().framerate,
-                    width: { ideal: loadSettings().width, max: loadSettings().width }
+                    ...(loadSettings().width != 0 && {
+                        width:  { ideal: loadSettings().width,  max: loadSettings().width },
+                    }),
+                    ...(loadSettings().height != 0 && {
+                        height: { ideal: loadSettings().height, max: loadSettings().height },
+                    }),
                 },
                 audio: {
                     echoCancellation: false,

From 7f9d87d2df82001322cf27a642845011a72f36ab Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Sun, 25 Oct 2026 19:26:51 +0100
Subject: [PATCH 3/3] fix: stuff

---
 ui/src/NumberField.tsx   |  3 ++-
 ui/src/SettingDialog.tsx |  8 +++++---
 ui/src/settings.ts       |  2 +-
 ui/src/useRoom.ts        | 11 ++++-------
 4 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/ui/src/NumberField.tsx b/ui/src/NumberField.tsx
index 72bb6617..4e03a7b3 100644
--- a/ui/src/NumberField.tsx
+++ b/ui/src/NumberField.tsx
@@ -11,6 +11,7 @@ export const NumberField = ({
     value,
     min,
     onChange,
+    helperText,
     ...props
 }: NumberFieldProps & Omit<TextFieldProps, 'value' | 'onChange'>) => {
     const [stringValue, setStringValue] = React.useState<string>(value.toString());
@@ -20,7 +21,7 @@ export const NumberField = ({
         <TextField
             value={stringValue}
             type="number"
-            helperText={error}
+            helperText={error || helperText}
             error={error !== ''}
             onChange={(event) => {
                 setStringValue(event.target.value);
diff --git a/ui/src/SettingDialog.tsx b/ui/src/SettingDialog.tsx
index d3b732ca..84082e16 100644
--- a/ui/src/SettingDialog.tsx
+++ b/ui/src/SettingDialog.tsx
@@ -111,16 +111,18 @@ export const SettingDialog = ({open, setOpen, updateName, saveSettings}: Setting
                             fullWidth
                         />
                     </Box>
-                    <Box sx={{paddingTop: 1, display: "flex"}}>
+                    <Box sx={{paddingTop: 1, display: 'flex', gap: 1}}>
                         <NumberField
-                            label="Width (px)"
+                            label="Max Width (px)"
+                            helperText="0 = unlimited"
                             min={0}
                             onChange={(width) => setSettingsInput((c) => ({...c, width}))}
                             value={width}
                             fullWidth
                         />
                         <NumberField
-                            label="Height (px)"
+                            label="Max Height (px)"
+                            helperText="0 = unlimited"
                             min={0}
                             onChange={(height) => setSettingsInput((c) => ({...c, height}))}
                             value={height}
diff --git a/ui/src/settings.ts b/ui/src/settings.ts
index 5ca32358..bb7d6011 100644
--- a/ui/src/settings.ts
+++ b/ui/src/settings.ts
@@ -61,7 +61,7 @@ export const loadSettings = (): Settings => {
     const defaults: Settings = {
         displayMode: VideoDisplayMode.FitToWindow,
         framerate: 30,
-        width: 0, 
+        width: 0,
         height: 0,
     };
 
diff --git a/ui/src/useRoom.ts b/ui/src/useRoom.ts
index ccd8f656..92c65798 100644
--- a/ui/src/useRoom.ts
+++ b/ui/src/useRoom.ts
@@ -327,15 +327,12 @@ export const useRoom = (config: UIConfig): UseRoom => {
             return;
         }
         try {
+            const {framerate, width, height} = loadSettings();
             stream.current = await navigator.mediaDevices.getDisplayMedia({
                 video: {
-                    frameRate: loadSettings().framerate,
-                    ...(loadSettings().width != 0 && {
-                        width:  { ideal: loadSettings().width,  max: loadSettings().width },
-                    }),
-                    ...(loadSettings().height != 0 && {
-                        height: { ideal: loadSettings().height, max: loadSettings().height },
-                    }),
+                    frameRate: framerate,
+                    ...(width > 0 && {width: {max: width}}),
+                    ...(height > 0 && {height: {max: height}}),
                 },
                 audio: {
                     echoCancellation: false,