Disconnect toast added with colour green(white text)

Author: PayalLakra

app.py

@@ -63,9 +63,8 @@ async def scan_ble_devices():
 
 @app.route('/check_stream')
 def check_stream():
-    if connection_manager and connection_manager.stream_active:
-        return jsonify({'connected': True})
-    return jsonify({'connected': False})
+    is_connected = connection_manager.stream_active if hasattr(connection_manager, 'stream_active') else False
+    return jsonify({'connected': is_connected})
 
 @app.route('/check_connection')
 def check_connection():

connection.py

@@ -237,6 +237,7 @@ def cleanup(self):
 
         if self.lsl_connection:
             self.lsl_connection = None
+            self.stream_active = False
             print("LSL stream stopped")
 
         if self.usb_connection:

static/script.js

@@ -608,7 +608,7 @@ function handleConnectionSuccess() {
         btn.disabled = true;
     });
 
-    showStatus(`Connected via ${selectedProtocol.toUpperCase()}`, 'fa-check-circle', 'text-green-500');
+    showStatus(`Connected via ${selectedProtocol.toUpperCase()}`, 'fa-check-circle');
 
     // Start console updates
     startConsoleUpdates();
@@ -793,7 +793,7 @@ initializeFilename(); // Set default filename with timestamp
 function showStatus(text, icon, colorClass) {
     const statusDiv = document.getElementById('connection-status');
     statusText.textContent = text;
-    statusIcon.innerHTML = `<i class="fas ${icon} ${colorClass}"></i>`;
+    statusIcon.innerHTML = `<i class="fas ${icon} text-white"></i>`; 
     statusDiv.classList.remove('hidden');
     setTimeout(() => {
         statusDiv.classList.add('hidden');
@@ -811,6 +811,7 @@ function checkStreamStatus() {
             if (data.connected) {
                 // If connected, update the frontend
                 if (!isConnected) {
+                    handleConnectionSuccess();
                     isConnected = true;
                     connectBtn.classList.add('hidden');
                     connectingBtn.classList.add('hidden');
@@ -822,6 +823,7 @@ function checkStreamStatus() {
             } else {
                 // If not connected, update the frontend
                 if (isConnected) {
+                    handleDisconnection();
                     isConnected = false;
                     disconnectBtn.classList.add('hidden');
                     disconnectingBtn.classList.add('hidden');
@@ -860,6 +862,38 @@ function checkStreamStatus() {
         });
 }
 
+function handleDisconnection() {
+    isConnected = false;
+    disconnectBtn.classList.add('hidden');
+    disconnectingBtn.classList.add('hidden');
+    connectingBtn.classList.add('hidden');
+    connectBtn.classList.remove('hidden');
+    showStatus('Stream disconnected!', 'fa-times-circle', 'text-red-500');
+    
+    // Reset protocol buttons
+    connectionBtns.forEach(btn => {
+        btn.disabled = false;
+        btn.classList.remove('bg-cyan-600', 'dark:bg-cyan-700', 'cursor-default');
+        btn.classList.add('hover:bg-cyan-500', 'hover:text-white');
+    });
+    
+    // Handle recording state
+    if (isRecording) {
+        isRecording = false;
+        recordBtn.innerHTML = 'Start Recording';
+        recordBtn.classList.remove('bg-gray-500');
+        recordBtn.classList.add('bg-red-500', 'hover:bg-red-600');
+        recordingStatus.classList.add('hidden');
+        filenameInput.disabled = false;
+        showStatus('Recording stopped (stream lost)', 'fa-stop-circle', 'text-red-500');
+    }
+    
+    if (eventSource) {
+        eventSource.close();
+        eventSource = null;
+    }
+}
+
 // Call the checkStreamStatus function every 1 second
 setInterval(checkStreamStatus, 1000);
 

templates/index.html

@@ -74,9 +74,9 @@
             <div id="recording-status" class="flex items-center hidden">
             </div>
         </div>
-        <div id="connection-status" class="fixed bottom-[3rem] right-1 bg-white dark:bg-gray-800 shadow-lg rounded-lg p-3 text-sm hidden z-50 border border-gray-200 dark:border-gray-700 min-w-[200px] flex items-center">
+        <div id="connection-status" class="fixed bottom-[3rem] right-1 bg-[#001F0E] shadow-lg rounded-lg p-3 text-sm hidden z-50 border border-gray-200 dark:border-gray-700 min-w-[200px] flex items-center text-white">
             <span id="status-icon" class="mr-2"></span>
-            <span id="status-text" class="text-gray-700 dark:text-gray-300">Connecting...</span>
+            <span id="status-text" class="text-white">Connecting...</span>
         </div>
     </section>