audio listener retry

Author: AnkushMalaker

app/app.json

@@ -30,7 +30,27 @@
         "android.permission.BLUETOOTH_ADMIN",
         "android.permission.BLUETOOTH_CONNECT",
         "android.permission.ACCESS_NETWORK_STATE"
-      ]
+      ],
+      "usesCleartextTraffic": true,
+      "networkSecurityConfig": {
+        "domainConfig": {
+          "cleartextTrafficPermitted": true,
+          "domain": [
+            {
+              "includeSubdomains": true,
+              "name": "localhost"
+            },
+            {
+              "includeSubdomains": true,
+              "name": "192.168.0.0/16"
+            },
+            {
+              "includeSubdomains": true,
+              "name": "100.64.0.0/10"
+            }
+          ]
+        }
+      }
     },
     "newArchEnabled": true,
     "plugins": [
@@ -44,6 +64,11 @@
           "bluetoothAlwaysPermission": "This app uses Bluetooth to connect to and interact with nearby BLE devices."
         }
       ]
-    ]
+    ],
+    "extra": {
+      "eas": {
+        "projectId": "05d8598e-6fe7-4373-81e4-1654f3d8e181"
+      }
+    }
   }
 }

app/app/components/AuthSection.tsx

@@ -213,6 +213,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     width: '100%',
     marginBottom: 10,
+    color: '#333',
   },
   button: {
     backgroundColor: '#007AFF',

app/app/components/BackendStatus.tsx

@@ -169,7 +169,7 @@ export const BackendStatus: React.FC<BackendStatusProps> = ({
         style={styles.textInput}
         value={backendUrl}
         onChangeText={onBackendUrlChange}
-        placeholder="ws://localhost:8000/ws"
+        placeholder="ws://localhost:8000/ws (simple) or ws://localhost:8080/v1/listen (advanced)"
         autoCapitalize="none"
         keyboardType="url"
         returnKeyType="done"
@@ -208,8 +208,8 @@ export const BackendStatus: React.FC<BackendStatusProps> = ({
       </TouchableOpacity>
 
       <Text style={styles.helpText}>
-        Enter the HTTP URL of your backend server (e.g., http://localhost:8000 or http://100.99.62.5:8000). 
-        The connection status will be automatically checked.
+        Enter the WebSocket URL of your backend server. Simple backend: ws://localhost:8000/ws (no auth). 
+        Advanced backend: ws://localhost:8080/v1/listen (requires login). Status is automatically checked.
       </Text>
     </View>
   );
@@ -248,6 +248,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     width: '100%',
     marginBottom: 15,
+    color: '#333',
   },
   statusContainer: {
     marginBottom: 15,

app/app/components/DeviceDetails.tsx

@@ -28,6 +28,10 @@ interface DeviceDetailsProps {
   // User ID Management  
   userId: string;
   onSetUserId: (userId: string) => void;
+
+  // Audio Listener Retry State
+  isAudioListenerRetrying?: boolean;
+  audioListenerRetryAttempts?: number;
 }
 
 export const DeviceDetails: React.FC<DeviceDetailsProps> = ({
@@ -46,7 +50,9 @@ export const DeviceDetails: React.FC<DeviceDetailsProps> = ({
   isConnectingAudioStreamer,
   audioStreamerError,
   userId,
-  onSetUserId
+  onSetUserId,
+  isAudioListenerRetrying,
+  audioListenerRetryAttempts
 }) => {
   if (!connectedDeviceId) return null;
 
@@ -107,13 +113,27 @@ export const DeviceDetails: React.FC<DeviceDetailsProps> = ({
       {/* Audio Controls */}
       <View style={styles.subSection}>
         <TouchableOpacity
-          style={[styles.button, isListeningAudio ? styles.buttonWarning : null, { marginTop: 15 } ]}
-          onPress={isListeningAudio ? onStopAudioListener : onStartAudioListener}
+          style={[
+            styles.button, 
+            isListeningAudio || isAudioListenerRetrying ? styles.buttonWarning : null, 
+            { marginTop: 15 }
+          ]}
+          onPress={isListeningAudio || isAudioListenerRetrying ? onStopAudioListener : onStartAudioListener}
         >
           <Text style={styles.buttonText}>
-            {isListeningAudio ? "Stop Audio Listener" : "Start Audio Listener"}
+            {isListeningAudio ? "Stop Audio Listener" : 
+             isAudioListenerRetrying ? "Stop Retry" : "Start Audio Listener"}
           </Text>
         </TouchableOpacity>
+        
+        {isAudioListenerRetrying && (
+          <View style={styles.retryContainer}>
+            <Text style={styles.retryText}>
+              🔄 Retrying audio listener... (Attempt {audioListenerRetryAttempts || 0}/10)
+            </Text>
+          </View>
+        )}
+        
         {isListeningAudio && (
           <View style={styles.infoContainerSM}>
             <Text style={styles.infoTitle}>Audio Packets Received:</Text>
@@ -289,6 +309,7 @@ const styles = StyleSheet.create({
     fontSize: 14,
     width: '100%', // Ensure input takes full width of its container
     marginBottom: 10,
+    color: '#333',
   },
   statusText: { // New style for status messages
     marginTop: 8,
@@ -303,6 +324,20 @@ const styles = StyleSheet.create({
     color: 'red',
     fontWeight: 'bold',
   },
+  retryContainer: {
+    marginTop: 10,
+    padding: 12,
+    backgroundColor: '#FFF3CD',
+    borderRadius: 8,
+    borderLeftWidth: 4,
+    borderLeftColor: '#FF9500',
+  },
+  retryText: {
+    fontSize: 14,
+    color: '#856404',
+    fontWeight: '500',
+    textAlign: 'center',
+  },
 });
 
 export default DeviceDetails;