From c1125537661ae90f0b3403d100464fe2408d09e1 Mon Sep 17 00:00:00 2001
From: Extremesecrecy <10959169+extremesecrecy@users.noreply.github.com>
Date: Thu, 24 Jul 2025 10:40:42 -0700
Subject: [PATCH] Handling devices upon selection change and full screen on
 dialog to accommodate phone size.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added responsive logic using ResizeResponsiveComponent so the device configuration dialog can switch to full screen on displays narrower than 420 px or shorter than 700 px

When toggling “use same device,” the previous device choices are cleared and device information is refreshed to reset the dropdowns

Buffer and sample‑rate options now remain disabled until the appropriate number of devices has been selected
---
 vite/src/pipedal/JackServerSettingsDialog.tsx | 71 ++++++++++++-------
 1 file changed, 44 insertions(+), 27 deletions(-)

diff --git a/vite/src/pipedal/JackServerSettingsDialog.tsx b/vite/src/pipedal/JackServerSettingsDialog.tsx
index 36a6373..cd62a95 100644
--- a/vite/src/pipedal/JackServerSettingsDialog.tsx
+++ b/vite/src/pipedal/JackServerSettingsDialog.tsx
@@ -46,6 +46,7 @@ import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 import AlsaDeviceInfo from './AlsaDeviceInfo';
+import ResizeResponsiveComponent from './ResizeResponsiveComponent';
 
 function sortDevices(devices: AlsaDeviceInfo[]): AlsaDeviceInfo[] {
     function category(d: AlsaDeviceInfo): number {
@@ -79,6 +80,7 @@ interface JackServerSettingsDialogState {
     alsaDevices?: AlsaDeviceInfo[];
     okEnabled: boolean;
 	useSameDevice: boolean;
+    fullScreen: boolean;
 }
 
 const styles = (theme: Theme) =>
@@ -254,14 +256,14 @@ function isOkEnabled(jackServerSettings: JackServerSettings, alsaDevices?: AlsaD
 
 
 const JackServerSettingsDialog = withStyles(
-    class extends Component<JackServerSettingsDialogProps, JackServerSettingsDialogState> {
+    class extends ResizeResponsiveComponent<JackServerSettingsDialogProps, JackServerSettingsDialogState> {
 
         model: PiPedalModel;
 
         constructor(props: JackServerSettingsDialogProps) {
             super(props);
-            this.model = PiPedalModelFactory.getInstance();
-            
+            this.model = PiPedalModelFactory.getInstance();  
+
 
  const sameDevice = props.jackServerSettings.alsaInputDevice === props.jackServerSettings.alsaOutputDevice;
             this.state = {
@@ -269,11 +271,25 @@ const JackServerSettingsDialog = withStyles(
                 jackServerSettings: props.jackServerSettings.clone(), // invalid, but not nullish
                 alsaDevices: undefined,
                 okEnabled: false,
-                useSameDevice: sameDevice
+                useSameDevice: sameDevice,
+                fullScreen: this.getFullScreen()
             };
         }
         mounted: boolean = false;
 
+	getFullScreen() {
+            return document.documentElement.clientWidth < 420 ||
+                document.documentElement.clientHeight < 700;
+        }
+
+        onWindowSizeChanged(width: number, height: number): void {
+            super.onWindowSizeChanged(width, height);
+            const fullScreen = this.getFullScreen();
+            if (fullScreen !== this.state.fullScreen) {
+                this.setState({ fullScreen });
+            }
+        }
+
         requestAlsaInfo() {
             this.model.getAlsaDevices()
                 .then((devices) => {
@@ -367,6 +383,7 @@ const JackServerSettingsDialog = withStyles(
         }
 
         componentDidMount() {
+			super.componentDidMount();
             this.mounted = true;
             if (this.props.open) {
                 this.requestAlsaInfo();
@@ -389,6 +406,7 @@ const JackServerSettingsDialog = withStyles(
         }
 
         componentWillUnmount() {
+			super.componentWillUnmount();
             this.mounted = false;
 
         }
@@ -489,28 +507,20 @@ const JackServerSettingsDialog = withStyles(
 				handleUseSameDeviceChanged(e: any, checked: boolean) {
                         let s = this.state.jackServerSettings.clone();
                         const useSame = checked;
-                        if (useSame) {
-                               const inputDev = this.state.alsaDevices?.find(d => d.id === s.alsaInputDevice && d.supportsCapture);
-                            if (!inputDev || !inputDev.supportsPlayback) {
-                                const both = this.state.alsaDevices?.find(d => d.supportsCapture && d.supportsPlayback);
-                                if (both) {
-                                    s.alsaInputDevice = both.id;
-                                    s.alsaOutputDevice = both.id;
-                                } else {
-                                    s.alsaInputDevice = INVALID_DEVICE_ID;
-                                    s.alsaOutputDevice = INVALID_DEVICE_ID;
-                                    s.valid = false;
-                                }
-                            } else {
-                                s.alsaOutputDevice = s.alsaInputDevice;
-                            }
-                        }
+                        
+						// release previous selection
+                        s.alsaInputDevice = INVALID_DEVICE_ID;
+                        s.alsaOutputDevice = INVALID_DEVICE_ID;
+                        s.valid = false;
+						
                         let settings = this.applyAlsaDevices(s, this.state.alsaDevices, useSame);
                         this.setState({
                             useSameDevice: useSame,
                             jackServerSettings: settings,
                             latencyText: getLatencyText(settings),
                             okEnabled: isOkEnabled(settings, this.state.alsaDevices)
+						 }, () => {
+                            this.requestAlsaInfo();	
                         });
                 }
         render() {
@@ -530,20 +540,27 @@ const JackServerSettingsDialog = withStyles(
                 selectedOutputDevice = selectedInputDevice;
             }
 			
-            let bufferSizes: number[] = getValidBufferSizesMultiple(selectedInputDevice, selectedOutputDevice);
-            let bufferCounts = getValidBufferCountsMultiple(this.state.jackServerSettings.bufferSize, selectedInputDevice, selectedOutputDevice);
-            let bufferSizeDisabled = !(selectedInputDevice || selectedOutputDevice);
-            let bufferCountDisabled = !(selectedInputDevice || selectedOutputDevice);
-            let sampleRates = selectedInputDevice && selectedOutputDevice ?
+            const devicesSelected = this.state.useSameDevice ?
+                    !!selectedInputDevice :
+                    (selectedInputDevice && selectedOutputDevice);
+
+            let bufferSizes: number[] = devicesSelected ?
+                    getValidBufferSizesMultiple(selectedInputDevice, selectedOutputDevice) : [];
+            let bufferCounts = devicesSelected ?
+                    getValidBufferCountsMultiple(this.state.jackServerSettings.bufferSize, selectedInputDevice, selectedOutputDevice) : [];
+            let bufferSizeDisabled = !devicesSelected;
+            let bufferCountDisabled = !devicesSelected;
+            let sampleRates = devicesSelected && selectedInputDevice && selectedOutputDevice ?
                     intersectArrays(selectedInputDevice.sampleRates, selectedOutputDevice.sampleRates)
-                    : (selectedInputDevice ? selectedInputDevice.sampleRates : (selectedOutputDevice ? selectedOutputDevice.sampleRates : []));
-			let sampleRateOptions = sampleRates.length === 0 && this.state.jackServerSettings.sampleRate ? [this.state.jackServerSettings.sampleRate] : sampleRates;
+                     : (this.state.useSameDevice && selectedInputDevice ? selectedInputDevice.sampleRates : []);
+            let sampleRateOptions = sampleRates.length === 0 && this.state.jackServerSettings.sampleRate ? [this.state.jackServerSettings.sampleRate] : sampleRates;
  
             return (
                 <DialogEx tag="jack" onClose={handleClose} aria-labelledby="select-channels-title" open={open}
                     onEnterKey={() => {
                         this.handleApply();
                     }}
+					fullScreen={this.state.fullScreen}
 
                 >
                     <DialogContent>