Merge pull request #243 from thecodingmachine/zoom_on_video

Clicking on a video puts it in presentation mode

front/dist/resources/style/style.css

@@ -256,6 +256,10 @@ body {
     .sidebar > div {
         max-height: 21%;
     }
+
+    .sidebar > div:hover {
+        max-height: 25%;
+    }
 }
 @media (max-aspect-ratio: 1/1) {
     .main-container {
@@ -274,6 +278,10 @@ body {
     .sidebar > div {
         max-width: 21%;
     }
+
+    .sidebar > div:hover {
+        max-width: 25%;
+    }
 }
 
 .game {
@@ -324,9 +332,16 @@ body {
 .main-section > div {
     margin: 2%;
     flex-basis: 96%;
+    transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s;
+    cursor: pointer;
     /*flex-shrink: 2;*/
 }
 
+.main-section > div:hover {
+    margin: 0%;
+    flex-basis: 100%;
+}
+
 .sidebar {
     flex: 0 0 25%;
     display: flex;
@@ -334,6 +349,12 @@ body {
 
 .sidebar > div {
     margin: 2%;
+    transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
+    cursor: pointer;
+}
+
+.sidebar > div:hover {
+    margin: 0%;
 }
 
 /* Let's make sure videos are vertically centered if they need to be cropped */
@@ -354,11 +375,16 @@ body {
     padding: 1%;
 }
 
-.chat-mode div {
+.chat-mode > div {
     margin: 1%;
     max-height: 96%;
+    transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s;
+    cursor: pointer;
 }
 
+.chat-mode > div:hover {
+    margin: 0%;
+}
 .chat-mode.one-col > div {
     flex-basis: 98%;
 }

front/src/WebRtc/LayoutManager.ts

@@ -42,6 +42,14 @@ class LayoutManager {
         div.innerHTML = html;
         div.id = "user-"+userId;
         div.className = "media-container"
+        div.onclick = () => {
+            const parentId = div.parentElement?.id;
+            if (parentId === 'sidebar' || parentId === 'chat-mode') {
+                this.focusOn(userId);
+            } else {
+                this.removeFocusOn(userId);
+            }
+        }
 
         if (importance === DivImportance.Important) {
             this.importantDivs.set(userId, div);
@@ -76,6 +84,48 @@ class LayoutManager {
         }
     }
 
+    /**
+     * Put the screen in presentation mode and move elem in presentation mode (and all other videos in normal mode)
+     */
+    private focusOn(userId: string): void {
+        const focusedDiv = this.getDivByUserId(userId);
+        for (const [importantUserId, importantDiv] of this.importantDivs.entries()) {
+            //this.positionDiv(importantDiv, DivImportance.Normal);
+            this.importantDivs.delete(importantUserId);
+            this.normalDivs.set(importantUserId, importantDiv);
+        }
+        this.normalDivs.delete(userId);
+        this.importantDivs.set(userId, focusedDiv);
+        //this.positionDiv(focusedDiv, DivImportance.Important);
+        this.switchLayoutMode(LayoutMode.Presentation);
+    }
+
+    /**
+     * Removes userId from presentation mode
+     */
+    private removeFocusOn(userId: string): void {
+        const importantDiv = this.importantDivs.get(userId);
+        if (importantDiv === undefined) {
+            throw new Error('Div with user id "'+userId+'" is not in important mode');
+        }
+        this.normalDivs.set(userId, importantDiv);
+        this.importantDivs.delete(userId);
+
+        this.positionDiv(importantDiv, DivImportance.Normal);
+    }
+
+    private getDivByUserId(userId: string): HTMLDivElement {
+        let div = this.importantDivs.get(userId);
+        if (div !== undefined) {
+            return div;
+        }
+        div = this.normalDivs.get(userId);
+        if (div !== undefined) {
+            return div;
+        }
+        throw new Error('Could not find media with user id '+userId);
+    }
+
     /**
      * Removes the DIV matching userId.
      */