Fix show/hide video and chat box for mobile and normal UI

Uses less javascript to update css style, rework buttons css for show/hide video and chat.
Fix show or hide video button on normal or mobile ui when windows is resized or when orientation change.

static/galene.css

@@ -434,8 +434,8 @@ textarea.form-reply {
     display: block;
 }
 
-.collapse-video {
-    display: none;
+.chat-btn {
+    display: block;
     /*on top of video peers*/
     z-index: 1002;
     font-size: 1.8em;
@@ -445,15 +445,16 @@ textarea.form-reply {
     cursor: pointer;
 }
 
-.collapse-video .open-chat {
+.chat-btn .icon-chat {
     color: #cac7c7;
     height: 50px;
     padding: 10px;
     text-shadow: 0px 0px 1px #b3adad;
 }
 
-.no-video {
-    display: none;
+.collapse-video {
+    left: inherit;
+    right: 30px;
 }
 
 .video-controls, .top-video-controls {
@@ -1000,7 +1001,6 @@ legend {
 
 .show-video {
     position: absolute;
-    display: none;
     right: 30px;
     bottom: 120px;
     color: white;
@@ -1188,7 +1188,13 @@ header .collapse {
 
 /* END Sidebar Left */
 
-@media only screen and (max-device-width: 1024px) {
+@media only screen and (min-width: 1025px) {
+    .coln-right .collapse-video, .coln-right .show-video {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: 1024px) {
     #presentbutton, #unpresentbutton {
         width: auto;
     }
@@ -1214,12 +1220,7 @@ header .collapse {
         height: calc(var(--vh, 1vh) * 100 - 56px);
     }
 
-    .collapse-video {
-        left: inherit;
-        right: 60px;
-    }
-
-    .close-chat {
+    .close-chat, .show-chat {
         display: none;
     }
 
@@ -1248,6 +1249,8 @@ header .collapse {
     .coln-left {
         flex: 100%;
         width: 100vw;
+        /* chat is always visible here */
+        display: block !important;
     }
 
     .coln-right {

static/galene.html

@@ -99,13 +99,16 @@
             </div>
             <div id="resizer"></div>
             <div class="coln-right" id="right">
-              <span class="show-video blink" id="switch-video">
+              <span class="show-video blink invisible" id="show-video">
                 <i class="fas fa-exchange-alt" aria-hidden="true"></i>
               </span>
-              <div class="collapse-video" id="collapse-video">
-                  <i class="far fa-comment-alt open-chat" title="Open chat"></i>
-                </div>
-              <div class="video-container no-video" id="video-container">
+              <div class="chat-btn show-chat invisible" id="show-chat">
+                <i class="far fa-comment-alt icon-chat" title="Show chat"></i>
+              </div>
+              <div class="chat-btn collapse-video invisible" id="collapse-video">
+                <i class="far fa-comment-alt icon-chat" title="Hide video and show chat"></i>
+              </div>
+              <div class="video-container invisible" id="video-container">
                 <div id="expand-video" class="expand-video">
                   <div id="peers"></div>
                 </div>

static/galene.js

@@ -259,12 +259,9 @@ function reflectSettings() {
         storeSettings(settings);
 }
 
-function showVideo() {
+function isMobileLayout() {
     let width = window.innerWidth;
-    let video_container = document.getElementById('video-container');
-    video_container.classList.remove('no-video');
-    if (width <= mobileViewportWidth)
-        document.getElementById('collapse-video').style.display = "block";
+    return width <= mobileViewportWidth;
 }
 
 /**
@@ -274,19 +271,16 @@ function hideVideo(force) {
     let mediadiv = document.getElementById('peers');
     if(mediadiv.childElementCount > 0 && !force)
         return;
-    let video_container = document.getElementById('video-container');
-    video_container.classList.add('no-video');
-    let left = document.getElementById("left");
-    if (left.style.display !== "none") {
-        // hide all video buttons used to switch video on mobile layout
-        closeVideoControls();
-    }
+    setVisibility('video-container', false);
 }
 
-function closeVideoControls() {
-    // hide all video buttons used to switch video on mobile layout
-    document.getElementById('switch-video').style.display = "";
-    document.getElementById('collapse-video').style.display = "";
+function showVideo() {
+    let hasmedia = document.getElementById('peers').childElementCount > 0;
+    if(isMobileLayout()) {
+        setVisibility('show-video', false);
+        setVisibility('collapse-video', hasmedia);
+    }
+    setVisibility('video-container', hasmedia);
 }
 
 function fillLogin() {
@@ -316,7 +310,6 @@ function setConnected(connected) {
         connectionbox.classList.remove('invisible');
         displayError('Disconnected', 'error');
         hideVideo();
-        closeVideoControls();
     }
 }
 
@@ -379,6 +372,7 @@ function setViewportHeight() {
     document.documentElement.style.setProperty(
         '--vh', `${window.innerHeight/100}px`,
     );
+    showVideo();
     // Ajust video component size
     resizePeers();
 }
@@ -441,6 +435,8 @@ function setButtonsVisibility() {
         !!HTMLVideoElement.prototype.captureStream ||
         /** @ts-ignore */
         !!HTMLVideoElement.prototype.mozCaptureStream;
+    let mediacount = document.getElementById('peers').childElementCount;
+    let mobilelayout = isMobileLayout();
 
     // don't allow multiple presentations
     setVisibility('presentbutton', canWebrtc && permissions.present && !local);
@@ -458,6 +454,8 @@ function setButtonsVisibility() {
     setVisibility('mediaoptions', permissions.present);
     setVisibility('sendform', permissions.present);
     setVisibility('fileform', canFile && permissions.present);
+
+    setVisibility('collapse-video', mediacount && mobilelayout);
 }
 
 /**
@@ -2664,37 +2662,30 @@ document.getElementById('clodeside').onclick = function(e) {
 
 document.getElementById('collapse-video').onclick = function(e) {
     e.preventDefault();
-    if(!(this instanceof HTMLElement))
-        throw new Error('Unexpected type for this');
-    let width = window.innerWidth;
-    let left = document.getElementById("left");
-    if (left.style.display === "" || left.style.display === "none") {
-      //left chat is hidden, we show the chat and hide collapse button
-      left.style.display = "block";
-      this.style.display = "";
-    }
-    if (width <= mobileViewportWidth) {
-      // fixed div for small screen
-      this.style.display = "";
-      hideVideo(true);
-      document.getElementById('switch-video').style.display = "block";
-    }
+    setVisibility('collapse-video', false);
+    setVisibility('show-video', true);
+    hideVideo(true);
 };
 
-document.getElementById('switch-video').onclick = function(e) {
+document.getElementById('show-video').onclick = function(e) {
     e.preventDefault();
-    if(!(this instanceof HTMLElement))
-        throw new Error('Unexpected type for this');
-    showVideo();
-    this.style.display = "";
-    document.getElementById('collapse-video').style.display = "block";
+    setVisibility('video-container', true);
+    setVisibility('collapse-video', true);
+    setVisibility('show-video', false);
 };
 
 document.getElementById('close-chat').onclick = function(e) {
-  e.preventDefault();
-  let left = document.getElementById("left");
-  left.style.display = "none";
-  document.getElementById('collapse-video').style.display = "block";
+    e.preventDefault();
+    setVisibility('left', false);
+    setVisibility('show-chat', true);
+    resizePeers();
+};
+
+document.getElementById('show-chat').onclick = function(e) {
+    e.preventDefault();
+    setVisibility('left', true);
+    setVisibility('show-chat', false);
+    resizePeers();
 };
 
 async function serverConnect() {