feat: hacky calculation of video sizes

index.html

@@ -22,9 +22,12 @@
         }
         video {
             display: block;
-            margin: 0 auto;
+            margin: 3px;
             border: 1px dotted grey;
         }
+        .video-row {
+            width: 100%;
+        }
         .volume-slider {
             text-align: center;
         }
@@ -60,8 +63,6 @@
         <input type="text" id="room-name" placeholder="Room name"/><br />
         <input type="text" id="room-password" placeholder="Room Password" /><br />
         <input type="checkbox" id="use-local-video" /> Use local Video<br />
-        <input type="text" id="width" value="624" /> Width of video elements<br />
-        <input type="text" id="height" value="351" /> Height of video elements<br />
         <input type="text" id="cols" value="3" /> Column count<br />
         <input type="text" id="rows" value="3" /> Row count<br />
         <button disabled id="room-name-button">Connect</button>
@@ -70,6 +71,8 @@
 <div style="display: none" id="room">
     <div class="container-fluid" id="video-container">
     </div>
+    <button onclick="toggleMute()">Toggle all mute</button>
+    Currently: <span id="muted-status">Unmuted</span>
 </div>
 
 
@@ -77,8 +80,6 @@
         Change audio output device
         <select id="audioOutputSelect" onchange="changeAudioOutput(this)"></select>
     </div>
-
-
     <video autoplay='autoplay' id="localVideo"></video>
 </body>
 </html>

script.js

@@ -20,6 +20,7 @@ const videoSize = {
 
 let connection = null;
 let room = null;
+let muted = false;
 
 // zu mappende namen.
 let remoteMappingName = new Array(9);
@@ -33,17 +34,40 @@ let isJoined = false;
  *              a bit hacky.. but hey, i needed it fast.
  */
 function initHtml(rows, cols) {
+    // calculate video element sizes
+    let windowHeight = document.body.clientHeight;
+    let windowWidth = document.body.clientWidth;
+    console.log(windowHeight);
+    let margin = 8; // 3px margin on each side, 1px border on each side
+
+    let maxWidth = windowWidth / cols - margin
+    let maxHeight = windowHeight / rows - margin - 0 - 28; // 32 -> size added for nametag; 28px per row for control elements
+
+    if(maxWidth/16*9 < maxHeight) {
+        videoSize.width = maxWidth;
+        videoSize.height = maxWidth/16*9;
+    } else {
+        videoSize.width = maxHeight*16/9;
+        videoSize.height = maxHeight;
+    }
+
+    // clear video container
     let rootElem = $('#video-container')
     rootElem.empty();
-    let elemCounter = 0
+    let elemCounter = 0 // for the element container id's
+
+    // populate video elements
     for(let i = 0; i < rows; i++) {
-        let rowElem = $(document.createElement("div"))
-        rowElem.addClass("row");
+        let rowElem = $(document.createElement("div"));
+        rowElem.addClass("video-row");
         for(let j = 0; j < cols; j++) {
-            let colElem = $(document.createElement("div"))
-            colElem.addClass(`col-md-${Math.floor(12/cols)} video video-${elemCounter++}`);
+            let colElem = $(document.createElement("div"));
+            colElem.addClass(`video video-${elemCounter++}`);
+            colElem.width(videoSize.width + 2*margin);
+            colElem.height(videoSize.height + 2*margin + 24);
+            colElem.css("display", "inline-block");
             colElem.append(`
-                <video autoplay='autoplay'></video>
+                <video autoplay='autoplay' width="${videoSize.width}" height="${videoSize.height}"></video>
                 <audio autoplay='autoplay'></audio>
                 <span class="name"></span>
             `)
@@ -51,6 +75,7 @@ function initHtml(rows, cols) {
         }
         rootElem.append(rowElem)
     }
+    // populate audio controls
     elemCounter = 0;
     for(let i = 0; i < rows; i++) {
         let rowElem = $(document.createElement("div"))
@@ -422,6 +447,17 @@ function leave() {
     }
 }
 
+function toggleMute() {
+    let audioElems = $("audio");
+    muted = !muted;
+    audioElems.prop("muted", muted)
+    if(muted) {
+        $('#muted-status').text("Muted")
+    } else {
+        $('#muted-status').text("Unmuted")
+    }
+}
+
 function updateParticipantList() {
     $('.available-users').text(room.getParticipants().map(p => p.getDisplayName() || 'Fellow Jitster').join(', '));
 }