Add initial push to talk version

static/galene.css

@@ -12,7 +12,7 @@
 
 .topnav {
   padding-left: 0;
-    height: 3.5rem;
+  height: 2.5rem;
   z-index: 1039;
 }
 
@@ -153,6 +153,19 @@
   transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
 }
 
+.btn-big, .btn-big:focus {
+  font-size: 2.5em;
+  padding: 1rem 2rem;
+  border-radius: 3rem;
+  user-select: none;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
+}
+
+.btn-big:active {
+  transition-duration: 0.8s;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+}
+
 .btn {
   transition-duration: 0.4s;
 }
@@ -222,6 +235,12 @@
   border-color: #ffc107;
 }
 
+.btn-big:active {
+  border-color: #2d773e;
+  background-color: #dc3545;
+  border-color: #dc3545;
+}
+
 .btn-large {
   font-size: 110%;
 }
@@ -241,7 +260,7 @@
 }
 
 .coln-left-hide {
-  flex: 0;
+flex: 0;
 }
 
 .coln-right {
@@ -260,7 +279,7 @@
 
 .full-width {
   width: calc(100vw - 200px);
-    height: calc(var(--vh, 1vh) * 100 - 56px);
+  height: calc(var(--vh, 1vh) * 100 - 40px);
 }
 
 .full-width-active {
@@ -272,8 +291,8 @@
 }
 
 .users-header {
-    height: 3.5rem;
-    padding: 10px;
+  height: 2.5rem;
+  padding: 5px;
   background: #610a86;
   font-size: .95rem;
   font-weight: 500;
@@ -330,7 +349,7 @@ textarea.form-reply {
 }
 
 .form-reply::placeholder {
-  opacity: .7;
+opacity: .7;
 }
 
 .select {
@@ -453,8 +472,8 @@ textarea.form-reply {
 }
 
 .collapse-video {
-    left: inherit;
-    right: 30px;
+  bottom: 72px;
+  top: inherit;
 }
 
 .video-controls, .top-video-controls {
@@ -500,6 +519,10 @@ textarea.form-reply {
   text-align: right;
 }
 
+.video-off {
+  color: #e83a4a;
+}
+
 .vc-overlay {
   background: linear-gradient(180deg, rgb(0 0 0 / 20%) 0%, rgb(0 0 0 / 50%) 0%, rgb(0 0 0 / 70%) 100%);
 }
@@ -511,7 +534,7 @@ textarea.form-reply {
 .video-controls span, .top-video-controls span {
   margin-right: 20px;
   transition: opacity .7s ease-out;
-    opacity: 1;
+  opacity: .7;
   cursor: pointer;
 }
 
@@ -533,6 +556,7 @@ textarea.form-reply {
   justify-content: center;
   align-items: center;
   color: #eaeaea;
+  display: none;
 }
 
 .video-controls .volume {
@@ -720,7 +744,7 @@ h1 {
 }
 
 .invisible {
-    display: none;
+  display: none !important;
 }
 
 .error {
@@ -742,7 +766,7 @@ h1 {
 }
 
 #optionsdiv input[type="checkbox"] {
-  vertical-align: middle;
+vertical-align: middle;
 }
 
 #presentbutton, #unpresentbutton {
@@ -754,6 +778,13 @@ h1 {
   width: 5.8em;
 }
 
+#pushtalk {
+position: fixed;
+bottom: 70px;
+right: 30px;
+z-index: 1002;
+}
+
 #videoselect {
   text-align-last: center;
   margin-right: 0.4em;
@@ -872,7 +903,7 @@ h1 {
   cursor: ew-resize;
 }
 
-#peers {
+#peers, #mypeer {
   padding: 10px;
   display: grid;
   grid-template-columns: repeat(1, 1fr);
@@ -1027,7 +1058,7 @@ legend {
 .show-video {
   position: absolute;
   right: 30px;
-    bottom: 120px;
+  top: 10px;
   color: white;
   width: 50px;
   height: 50px;
@@ -1106,7 +1137,6 @@ legend {
   max-width: 200px;
   transition: all 0.3s;
   background: #ffffff;
-    border-right: 1px solid #dcdcdc;
 }
 
 #left-sidebar .galene-header {
@@ -1157,7 +1187,7 @@ header .collapse:hover {
 #users {
   padding: 0;
   margin: 0;
-    height: calc(100% - 84px);
+  height: calc(100% - 60px);
   width: 100%;
   position: relative;
   display: block;
@@ -1178,6 +1208,20 @@ header .collapse:hover {
   white-space: pre;
 }
 
+#users .user-p div {
+  display: inline-flex;
+  justify-content: space-between;
+  width: calc(100% - 25px);
+}
+
+#users .user-p span {
+text-align: left;
+}
+
+#users .user-p span:last-child {
+  padding: 1px 5px;
+}
+
 #left-sidebar.active #users > div {
   padding: 10px 5px !important;
 }
@@ -1236,20 +1280,32 @@ header .collapse:hover {
   }
 
   .full-width {
-        height: calc(var(--vh, 1vh) * 100 - 56px);
+      height: calc(var(--vh, 1vh) * 100 - 40px);
   }
 
   .close-chat, .show-chat {
       display: none;
   }
 
+  #pushtalk {
+    cursor: default;
+  }
+
   .video-container {
-        position: fixed;
-        height: calc(var(--vh, 1vh) * 100 - 56px);
+      /*position: fixed;
+      height: calc(var(--vh, 1vh) * 100 - 40px);
       top: 56px;
       right: 0;
       left: 0;
-        margin-bottom: 60px;
+      margin-bottom: 60px;*/
+      height: 100%;
+  }
+  .media {
+    max-height: calc(var(--vh, 1vh) * 50 - 36px);
+  }
+
+  #peers {
+    display: block;
   }
 
   .top-video-controls {
@@ -1270,24 +1326,27 @@ header .collapse:hover {
   }
 
   .coln-left {
-        flex: 100%;
+      flex: 50%;
       width: 100vw;
       /* chat is always visible here */
       display: block !important;
   }
 
   .coln-right {
-        flex: none;
+      flex: 50%;
       position: relative;
   }
 
   .full-width {
       width: 100vw;
+      flex-wrap: wrap;
+      flex-direction: column-reverse;
   }
 
   #left-sidebar.active {
       min-width: 200px;
       max-width: 200px;
+      border-right: 1px solid #dcdcdc;
   }
 
   #left-sidebar {
@@ -1330,6 +1389,13 @@ header .collapse:hover {
       border-right: none;
   }
 
+  #box {
+    /* 40px header height
+       53px reply box height
+    */
+    height: calc((var(--vh, 1vh) * 100 - 40px) / 2 - 53px);
+  }
+
   .dropdown-content {
       margin-top: 10px;
   }
@@ -1338,8 +1404,8 @@ header .collapse:hover {
 
 :root{
   --contextualMenuBg: #eee;
-    --contextualMenuShadow: 1px 1px 1px #444; */
-    --contextualMenuRadius: 0px; */
+  --contextualMenuShadow: 1px 1px 1px #444;
+  --contextualMenuRadius: 0px;
   --contextualMenuText: black;
 
   --contextualSubMenuBg: #eee;

static/galene.html

@@ -47,11 +47,17 @@
                   </button>
                 </li>
                 <li>
-                  <div id="mutebutton" class="nav-link nav-button">
+                  <div id="mutebutton" class="nav-link nav-button invisible">
                     <span><i class="fas fa-microphone-slash" aria-hidden="true"></i></span>
                     <label>Mute</label>
                   </div>
                 </li>
+                <li>
+                  <div id="videoon" class="nav-link nav-button invisible">
+                    <span><i class="fas fa-video-camera" aria-hidden="true"></i></span>
+                    <label>Camera</label>
+                  </div>
+                </li>
                 <li>
                   <div id="sharebutton" class="invisible nav-link nav-button">
                     <span><i class="fas fa-share-square" aria-hidden="true"></i></span>
@@ -69,10 +75,24 @@
           <div class="row full-width" id="mainrow">
             <div class="coln-left" id="left">
               <div id="chat">
+                <div class="video-container invisible" id="myvideo-container">
+                  <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 id="mypeer"></div>
+                </div>
                 <div id="chatbox">
                   <div class="close-chat" id="close-chat"  title="Hide chat">
                     <span class="close-icon"></span>
                   </div>
+                  <span class="show-video blink invisible" id="show-video">
+                    <i class="fas fa-exchange-alt" aria-hidden="true"></i>
+                  </span>
+                  <button id="pushtalk" class="btn btn-big btn-success invisible">
+                    <i id="pushvideo" class="fas fa-play invisible" aria-hidden="true"></i>
+                    <i id="pushmic" class="fas fa-microphone invisible" aria-hidden="true"></i>
+                  </button>
+
                   <div id="box"></div>
                   <div class="reply">
                     <form id="inputform">
@@ -85,20 +105,12 @@
             </div>
             <div id="resizer"></div>
             <div class="coln-right" id="right">
-              <span class="show-video blink invisible" id="show-video">
-                <i class="fas fa-exchange-alt" aria-hidden="true"></i>
-              </span>
               <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>
-              </div>
               <div class="login-container invisible" id="login-container">
                 <div class="login-box">
                   <form id="userform" class="userform">
@@ -110,17 +122,17 @@
                            autocomplete="current-password" class="form-control"/>
                     <label>Enable at start:</label>
                     <div class="present-switch">
-                      <p class="switch-radio">
-                        <input id="presentoff" type="radio" name="presentradio" value="" checked/>
+                      <!--<p class="switch-radio">
+                        <input id="presentoff" type="radio" name="presentradio" value=""/>
                         <label for="presentoff">Nothing</label>
-                      </p>
+                      </p>-->
                       <p class="switch-radio">
                         <input id="presentmike" type="radio" name="presentradio" value="mike"/>
-                        <label for="presentmike">Microphone</label>
+                        <label for="presentmike">Audio only</label>
                       </p>
                       <p class="switch-radio">
-                        <input id="presentboth" type="radio" name="presentradio" value="both"/>
-                        <label for="presentboth">Camera and microphone</label>
+                        <input id="presentvideo" type="radio" name="presentradio" value="camera" checked/>
+                        <label for="presentvideo">Audio and Camera</label>
                       </p>
                     </div>
                     <div class="clear"></div>
@@ -209,9 +221,9 @@
           <form id="sendform">
             <label for="sendselect" class="sidenav-label-first">Send:</label>
             <select id="sendselect" class="select select-inline">
-              <option value="lowest">lowest</option>
+              <option value="lowest" selected>lowest</option>
               <option value="low">low</option>
-              <option value="normal" selected>normal</option>
+              <option value="normal">normal</option>
               <option value="unlimited">unlimited</option>
             </select>
           </form>
@@ -258,7 +270,7 @@
           </span>
         </div>
         <div class="controls-button controls-right">
-          <span class="pip" title="Picture In Picture">
+          <span class="pip invisible" title="Picture In Picture">
             <i class="far fa-clone" aria-hidden="true"></i>
           </span>
           <span class="fullscreen" title="Fullscreen">
@@ -272,6 +284,10 @@
         <div class="controls-button controls-right">
           <span class="close-icon video-stop" title="Stop video">
           </span>
+          <span class="change-camera"><i class='fas fa-camera-rotate'></i></span>
+        </div>
+        <div class="controls-button controls-left">
+          <span class="video-off"><i class='fas fa-video-camera'></i></span>
         </div>
       </div>
     </div>