From b7c2f8be7bfae6c8a41979c2ea6df7c082b4ab67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 22 Aug 2020 15:26:40 +0200
Subject: [PATCH] Adding colors for cam/mic/screen share button

Microphone and camera are now red when disabled.
Screen-share is green when enabled.
Also, they are now always partially visible (they were completely hidden previously until hovering in the lower right corner)
---
 front/dist/index.html                |  6 +++---
 front/dist/resources/style/style.css |  8 +++++++-
 front/src/WebRtc/MediaManager.ts     | 12 ++++++++++++
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/front/dist/index.html b/front/dist/index.html
index 68940afe..5de00b3b 100644
--- a/front/dist/index.html
+++ b/front/dist/index.html
@@ -70,15 +70,15 @@
                         </div>
                     </div>
                     <div class="btn-cam-action">
-                        <div class="btn-micro">
+                        <div id="btn-micro" class="btn-micro">
                             <img id="microphone" src="resources/logos/microphone.svg">
                             <img id="microphone-close" src="resources/logos/microphone-close.svg">
                         </div>
-                        <div class="btn-video">
+                        <div id="btn-video" class="btn-video">
                             <img id="cinema" src="resources/logos/cinema.svg">
                             <img id="cinema-close" src="resources/logos/cinema-close.svg">
                         </div>
-                        <div class="btn-monitor">
+                        <div id="btn-monitor" class="btn-monitor">
                             <img id="monitor" src="resources/logos/monitor.svg">
                             <img id="monitor-close" src="resources/logos/monitor-close.svg">
                         </div>
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 382a4444..c5a3cc67 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -96,10 +96,16 @@ video#myCamVideo{
     background: #666;
     box-shadow: 2px 2px 24px #444;
     border-radius: 48px;
-    transform: translateY(12vh);
+    transform: translateY(40px);
     transition-timing-function: ease-in-out;
     bottom: 20px;
 }
+.btn-cam-action div.disabled {
+    background: #d75555;
+}
+.btn-cam-action div.enabled {
+    background: #73c973;
+}
 .btn-cam-action:hover div{
     transform: translateY(0);
 }
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 314fea14..a043e51e 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -32,6 +32,9 @@ export class MediaManager {
     updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
+    private microphoneBtn: HTMLDivElement;
+    private cinemaBtn: HTMLDivElement;
+    private monitorBtn: HTMLDivElement;
 
 
     constructor() {
@@ -40,6 +43,7 @@ export class MediaManager {
         this.webrtcInAudio = this.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
         this.webrtcInAudio.volume = 0.2;
 
+        this.microphoneBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-micro');
         this.microphoneClose = this.getElementByIdOrFail<HTMLImageElement>('microphone-close');
         this.microphoneClose.style.display = "none";
         this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
@@ -54,6 +58,7 @@ export class MediaManager {
             //update tracking
         });
 
+        this.cinemaBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-video');
         this.cinemaClose = this.getElementByIdOrFail<HTMLImageElement>('cinema-close');
         this.cinemaClose.style.display = "none";
         this.cinemaClose.addEventListener('click', (e: MouseEvent) => {
@@ -68,6 +73,7 @@ export class MediaManager {
             //update tracking
         });
 
+        this.monitorBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-monitor');
         this.monitorClose = this.getElementByIdOrFail<HTMLImageElement>('monitor-close');
         this.monitorClose.style.display = "block";
         this.monitorClose.addEventListener('click', (e: MouseEvent) => {
@@ -128,6 +134,7 @@ export class MediaManager {
 
     private enableCamera() {
         this.cinemaClose.style.display = "none";
+        this.cinemaBtn.classList.remove("disabled");
         this.cinema.style.display = "block";
         this.constraintsMedia.video = videoConstraint;
         this.getCamera().then((stream: MediaStream) => {
@@ -138,6 +145,7 @@ export class MediaManager {
     private disableCamera() {
         this.cinemaClose.style.display = "block";
         this.cinema.style.display = "none";
+        this.cinemaBtn.classList.add("disabled");
         this.constraintsMedia.video = false;
         this.myCamVideo.srcObject = null;
         if (this.localStream) {
@@ -153,6 +161,7 @@ export class MediaManager {
     private enableMicrophone() {
         this.microphoneClose.style.display = "none";
         this.microphone.style.display = "block";
+        this.microphoneBtn.classList.remove("disabled");
         this.constraintsMedia.audio = true;
         this.getCamera().then((stream) => {
             this.triggerUpdatedLocalStreamCallbacks(stream);
@@ -162,6 +171,7 @@ export class MediaManager {
     private disableMicrophone() {
         this.microphoneClose.style.display = "block";
         this.microphone.style.display = "none";
+        this.microphoneBtn.classList.add("disabled");
         this.constraintsMedia.audio = false;
         if(this.localStream) {
             this.localStream.getAudioTracks().forEach((MediaStreamTrack: MediaStreamTrack) => {
@@ -176,6 +186,7 @@ export class MediaManager {
     private enableScreenSharing() {
         this.monitorClose.style.display = "none";
         this.monitor.style.display = "block";
+        this.monitorBtn.classList.add("enabled");
         this.getScreenMedia().then((stream) => {
             this.triggerStartedScreenSharingCallbacks(stream);
         });
@@ -184,6 +195,7 @@ export class MediaManager {
     private disableScreenSharing() {
         this.monitorClose.style.display = "block";
         this.monitor.style.display = "none";
+        this.monitorBtn.classList.remove("enabled");
         this.removeActiveScreenSharingVideo('me');
         this.localScreenCapture?.getTracks().forEach((track: MediaStreamTrack) => {
             track.stop();