update collab participant to auto enable mic and webcam, update rendering for mobile users

Author: thelamer

server/app/static/collaboration/room.css

@@ -177,6 +177,73 @@ body {
   flex-shrink: 0;
 }
 
+@media (max-width: 768px), (max-height: 500px) {
+  #video-grid {
+    height: 20vh;
+    min-height: 80px;
+    max-height: 160px;
+    padding: 5px;
+    align-items: stretch;
+  }
+  
+  #video-grid-content {
+    height: 100%;
+    align-items: center;
+  }
+
+  .video-container {
+    height: 100%;
+    width: auto;
+    min-width: 0;
+    aspect-ratio: 4/3;
+    font-size: 0.75rem;
+  }
+
+  #start-menu-btn {
+    width: auto;
+    min-width: 0;
+    aspect-ratio: 1/1;
+  }
+
+  .start-btn-inner i {
+    font-size: 1.5em;
+  }
+
+  .start-btn-inner span {
+    display: none;
+  }
+
+  #gamepad-source-box {
+    aspect-ratio: 1/1;
+    width: auto;
+    min-width: 0;
+    gap: 2px;
+    padding: 2px;
+  }
+
+  .gamepad-icon {
+    font-size: 0.8rem;
+    border-width: 1px;
+  }
+
+  .gamepad-icon .gamepad-number {
+    font-size: 0.6em;
+    bottom: 1px;
+    right: 2px;
+  }
+
+  .video-overlay {
+    padding: 2px;
+    font-size: 0.7em;
+  }
+
+  .remote-control-btn {
+    width: 20px;
+    height: 20px;
+    font-size: 0.7em;
+  }
+}
+
 .video-container.reorderable {
   cursor: grab;
 }

server/app/static/collaboration/room.js

@@ -46,7 +46,6 @@ if (typeof MediaStreamTrackProcessor === 'undefined') {
                 this.readable = new ReadableStream({
                     async start(controller) {
                         const ctx = new AudioContext();
-                        // Worklet to pass raw audio data to main thread
                         const workletCode = `registerProcessor("mstp-shim",class extends AudioWorkletProcessor{process(i){if(i[0].length>0)this.port.postMessage(i[0]);return true}})`
                         await ctx.audioWorklet.addModule(`data:text/javascript,${workletCode}`).catch(e => console.error(e));
 
@@ -57,7 +56,6 @@ if (typeof MediaStreamTrackProcessor === 'undefined') {
                         node.port.onmessage = ({data: channels}) => {
                              if (!channels || channels.length === 0) return;
 
-                             // Flatten planar data (array of Float32Arrays) to interleaved Float32Array
                              const length = channels[0].length;
                              const numChannels = channels.length;
                              const flattened = new Float32Array(length * numChannels);
@@ -1427,7 +1425,7 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     };
 
-    const handleUsernameSubmit = (e) => {
+    const handleUsernameSubmit = async (e) => {
         e.preventDefault();
         const input = document.getElementById('username-input');
         const newUsername = input.value.trim();
@@ -1438,6 +1436,27 @@ document.addEventListener('DOMContentLoaded', () => {
             sessionStorage.setItem('collab_hasJoined_' + COLLAB_DATA.sessionId, 'true');
             ws.send(JSON.stringify({ action: 'set_username', username: username }));
             renderSidebar();
+
+            if (!mediaInitialized) {
+                await startMedia();
+            }
+            
+            isMicOn = true;
+            if (localStream) localStream.getAudioTracks().forEach(t => t.enabled = true);
+            sendControlMessage('audio_state', true);
+            updateMediaButtonUI();
+
+            await new Promise(r => setTimeout(r, 1000));
+
+            isWebcamOn = true;
+            if (localStream && localStream.getVideoTracks().length > 0) {
+                localStream.getVideoTracks().forEach(t => t.enabled = true);
+                localContainer.style.display = 'flex';
+                sendControlMessage('video_state', true);
+            }
+            updateMediaButtonUI();
+
+            toggleSidebar();
         }
     };