From b7c2f8be7bfae6c8a41979c2ea6df7c082b4ab67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= 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 @@
-
+
-
+
-
+
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 = new Set(); startScreenSharingCallBacks : Set = new Set(); stopScreenSharingCallBacks : Set = new Set(); + private microphoneBtn: HTMLDivElement; + private cinemaBtn: HTMLDivElement; + private monitorBtn: HTMLDivElement; constructor() { @@ -40,6 +43,7 @@ export class MediaManager { this.webrtcInAudio = this.getElementByIdOrFail('audio-webrtc-in'); this.webrtcInAudio.volume = 0.2; + this.microphoneBtn = this.getElementByIdOrFail('btn-micro'); this.microphoneClose = this.getElementByIdOrFail('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('btn-video'); this.cinemaClose = this.getElementByIdOrFail('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('btn-monitor'); this.monitorClose = this.getElementByIdOrFail('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();