+
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();