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] 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,