fix enable/disabled video control button and video swtich

static/sfu.css

@@ -442,6 +442,10 @@ textarea.form-reply {
     color: #c8c8c8
 }
 
+.video-controls .fa-video-slash {
+  color: #cc0f21;
+}
+
 .mobile-container {
     display: block !important;
 }
@@ -838,6 +842,7 @@ legend {
 
 .nav-menu li {
     float: left;
+    margin: 0 1px;
     max-height: 70px;
     list-style: none;
 }
@@ -1054,7 +1059,7 @@ header .collapse {
 
     .collapse-video {
         left: inherit;
-        right: 60px;
+        right: 10px;
     }
 
     .close-chat {

static/sfu.html

@@ -109,7 +109,7 @@
             </div>
             <div id="resizer"></div>
             <div class="coln-right" id="right">
-              <span class="show-video blink" id="switch-video"><i class="fas fa-exchange" aria-hidden="true"></i></span>
+              <span class="show-video blink" id="switch-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>
@@ -199,7 +199,7 @@
           <i class="fas fa-volume-up" data-type="bt-volume" aria-hidden="true"></i>
         </span>
         <span class="camera" title="Camera">
-          <i class="fas fa-video"  data-type="bt-camera" aria-hidden="true"></i>
+          <i class="fas fa-video-slash"  data-type="bt-camera-off" aria-hidden="true"></i>
         </span>
         <span class="pip" title="Picture In Picture">
           <i class="fas fa-clone" data-type="bt-pip" aria-hidden="true"></i>

static/sfu.js

@@ -1037,7 +1037,7 @@ function setMedia(c, isUp) {
         if (local_media && local_media.kind === "local") {
             if (!settings.video) {
                 if (camera)
-                    camera.classList.add("camera-off");
+                    changeVideoIconState(camera.querySelector("i"));
             }
             volume.parentElement.remove();
         } else
@@ -1081,6 +1081,23 @@ function getParentVideo(target) {
     return media;
 }
 
+/**
+ * @param {HTMLElement} element
+ * @param {boolean} state
+ */
+function changeVideoIconState(element, state) {
+    let video_state = element.getAttribute("data-type");
+    if (state || video_state === "bt-camera-off") {
+        element.setAttribute("data-type", "bt-camera");
+        element.classList.add("fa-video");
+        element.classList.remove("fa-video-slash");
+    } else if (!state || video_state === "bt-camera") {
+        element.setAttribute("data-type", "bt-camera-off");
+        element.classList.add("fa-video-slash");
+        element.classList.remove("fa-video");
+    }
+}
+
 /**
  * @param {string} peerid
  */
@@ -1134,16 +1151,15 @@ function registerControlEvent(peerid) {
             event.preventDefault();
             let video = getParentVideo(event.target);
             let id = video.id.split("-")[1];
-            if(!settings.video)
+            if(!settings.video) {
+                displayMessage("Camera is disabled in your settings.");
                 return;
-            if(event.target.getAttribute("data-type") === "bt-camera") {
-                addLocalMedia(id, true);
-                event.target.setAttribute("data-type", "bt-camera-off");
-                event.target.parentElement.classList.add("disabled");
-            } else {
-                event.target.setAttribute("data-type", "bt-camera");
-                event.target.parentElement.classList.remove("disabled");
+            }
+            changeVideoIconState(event.target);
+            if(event.target.getAttribute("data-type") === "bt-camera-off") {
                 addLocalMedia(id);
+            } else {
+                addLocalMedia(id, true);
             }
         };
     }