[mirotalk] - improve video border, add possibility to enable-disable remote video controls

www/client.js

@@ -39,6 +39,7 @@ var isAudioVideoDevicesVisible = false;
 var signalingSocket = null; // socket.io connection to our webserver
 var localMediaStream = null; // my microphone / webcam
 var remoteMediaStream = null; // peers microphone / webcam
+var remoteMediaControls = false; // enable - disable peers video player controls (default false)
 var peerConnections = {}; // keep track of our peer connections, indexed by peer_id == socket.io id
 var peerMediaElements = {}; // keep track of our peer <video> tags, indexed by peer_id
 var iceServers = [{ urls: "stun:stun.l.google.com:19302" }]; // backup iceServers
@@ -347,7 +348,10 @@ function initPeer() {
         remoteMedia.mediaGroup = "remotevideo";
         remoteMedia.poster = loaderGif;
         remoteMedia.autoplay = true;
-        remoteMedia.controls = false;
+        isMobileDevice
+          ? (remoteMediaControls = false)
+          : (remoteMediaControls = remoteMediaControls);
+        remoteMedia.controls = remoteMediaControls;
         peerMediaElements[peer_id] = remoteMedia;
         document.body.appendChild(videoWrap);
         // attachMediaStream is a part of the adapter.js library

www/index.html

@@ -45,16 +45,17 @@
       sizes="32x32"
       href="/images/favicon.png"
     />
+    <!-- mirotalk css-->
     <link rel="stylesheet" href="style.css" />
-    <script
-      src="https://kit.fontawesome.com/d2f1016e6f.js"
-      crossorigin="anonymous"
-    ></script>
     <!-- https://animate.style -->
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
     />
+    <script
+      src="https://kit.fontawesome.com/d2f1016e6f.js"
+      crossorigin="anonymous"
+    ></script>
     <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
     <script src="https://cdn.rawgit.com/muaz-khan/DetectRTC/master/DetectRTC.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
@@ -74,8 +75,10 @@
 
     <div id="countTime">00:00:00</div>
 
+    <!-- Start left buttons 
+    https://fontawesome.com/icons?d=gallery
+    -->
     <div id="leftButtons">
-      <!-- https://fontawesome.com/icons?d=gallery -->
       <button
         title="share room"
         id="shareRoomBtn"
@@ -117,10 +120,13 @@
         class="fas fa-phone-slash"
       ></button>
     </div>
+    <!-- End left buttons -->
 
-    <!-- Start chat room -->
+    <!-- Start chat room 
+    https://codepen.io/sajadhsm/pen/odaBdd
+    https://getemoji.com
+    -->
     <section id="msgerDraggable" class="msger-draggable">
-      <!-- https://codepen.io/sajadhsm/pen/odaBdd -->
       <section id="msger" class="msger">
         <header id="msgerHeader" class="msger-header">
           <div class="msger-header-title">
@@ -167,7 +173,7 @@
                 <div class="msg-info-name">Friends Name</div>
                 <div class="msg-info-time">00:00</div>
               </div>
-              <!-- https://getemoji.com -->
+
               <div class="msg-text">Hi, welcome to mirotalk-Chat</div>
             </div>
           </div>
@@ -206,7 +212,9 @@
     </section>
     <!-- End chat room -->
 
-    <!-- https://github.com/nolanlawson/emoji-picker-element -->
+    <!-- Start emoji picker 
+    https://github.com/nolanlawson/emoji-picker-element ] 
+    -->
     <section id="msgerEmojiPicker">
       <header id="msgerEmojiHeader">
         <button
@@ -218,7 +226,9 @@
       <emoji-picker class="dark"></emoji-picker>
       <!-- <emoji-picker class="light"></emoji-picker> -->
     </section>
+    <!-- End emoji picker -->
 
+    <!-- Start audio - video devices -->
     <section id="myDevices">
       <header id="myDeviceHeader">
         <button
@@ -245,6 +255,7 @@
         </div>
       </main>
     </section>
+    <!-- End audio - video devices -->
 
     <!-- 
 		the <video> and <audio> tags are all added and removed dynamically

www/style.css

@@ -377,7 +377,7 @@ video {
   width: 100%;
   height: 100%;
   object-fit: var(--video-object-fit);
-  border: 1px solid transparent;
+  border: 5px solid transparent;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   border-radius: 6px;