From 199ed1266a1ce419d398e8c527acb5b65a4483fa Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Sat, 24 Oct 2020 14:13:23 +0200
Subject: [PATCH] Switch off camera when user is not focused on WorkAdventure
 windows

Feature to switch off camera when user is not focused on WorkAdventure windows after 10 seconds
---
 front/src/WebRtc/MediaManager.ts | 84 ++++++++++++++++++++++++++------
 1 file changed, 69 insertions(+), 15 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 557f12fb..070f27f9 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -38,6 +38,9 @@ export class MediaManager {
     private cinemaBtn: HTMLDivElement;
     private monitorBtn: HTMLDivElement;
 
+    private previousConstraint : MediaStreamConstraints;
+    private timeoutBlurWindows?: NodeJS.Timeout;
+
     constructor() {
 
         this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@@ -89,6 +92,23 @@ export class MediaManager {
             this.disableScreenSharing();
             //update tracking
         });
+
+        this.previousConstraint = JSON.parse(JSON.stringify(this.constraintsMedia));
+        window.addEventListener('blur', () => {
+            if(this.timeoutBlurWindows){
+                clearTimeout(this.timeoutBlurWindows);
+            }
+            this.timeoutBlurWindows = setTimeout(() => {
+                this.previousConstraint = JSON.parse(JSON.stringify(this.constraintsMedia));
+                this.disableCamera();
+            }, 10000);
+        });
+        window.addEventListener('focus', () => {
+            if(this.timeoutBlurWindows){
+                clearTimeout(this.timeoutBlurWindows);
+            }
+            this.applyPreviousConfig();
+        });
     }
 
     public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
@@ -136,9 +156,7 @@ export class MediaManager {
     }
 
     private enableCamera() {
-        this.cinemaClose.style.display = "none";
-        this.cinemaBtn.classList.remove("disabled");
-        this.cinema.style.display = "block";
+        this.enableCameraStyle();
         this.constraintsMedia.video = videoConstraint;
         this.getCamera().then((stream: MediaStream) => {
             this.triggerUpdatedLocalStreamCallbacks(stream);
@@ -146,11 +164,7 @@ export class MediaManager {
     }
 
     private async disableCamera() {
-        this.cinemaClose.style.display = "block";
-        this.cinema.style.display = "none";
-        this.cinemaBtn.classList.add("disabled");
-        this.constraintsMedia.video = false;
-        this.myCamVideo.srcObject = null;
+        this.disableCameraStyle();
         this.stopCamera();
 
         if (this.constraintsMedia.audio !== false) {
@@ -162,9 +176,7 @@ export class MediaManager {
     }
 
     private enableMicrophone() {
-        this.microphoneClose.style.display = "none";
-        this.microphone.style.display = "block";
-        this.microphoneBtn.classList.remove("disabled");
+        this.enableMicrophoneStyle();
         this.constraintsMedia.audio = true;
 
         this.getCamera().then((stream) => {
@@ -173,10 +185,7 @@ export class MediaManager {
     }
 
     private async disableMicrophone() {
-        this.microphoneClose.style.display = "block";
-        this.microphone.style.display = "none";
-        this.microphoneBtn.classList.add("disabled");
-        this.constraintsMedia.audio = false;
+        this.disableMicrophoneStyle();
         this.stopMicrophone();
 
         if (this.constraintsMedia.video !== false) {
@@ -187,6 +196,51 @@ export class MediaManager {
         }
     }
 
+    private applyPreviousConfig() {
+        this.constraintsMedia = this.previousConstraint;
+        if(!this.constraintsMedia.video){
+            this.disableCameraStyle();
+        }else{
+            this.enableCameraStyle();
+        }
+        if(!this.constraintsMedia.audio){
+            this.disableMicrophoneStyle()
+        }else{
+            this.enableMicrophoneStyle()
+        }
+
+        this.getCamera().then((stream: MediaStream) => {
+            this.triggerUpdatedLocalStreamCallbacks(stream);
+        });
+    }
+
+    private enableCameraStyle(){
+        this.cinemaClose.style.display = "none";
+        this.cinemaBtn.classList.remove("disabled");
+        this.cinema.style.display = "block";
+    }
+
+    private disableCameraStyle(){
+        this.cinemaClose.style.display = "block";
+        this.cinema.style.display = "none";
+        this.cinemaBtn.classList.add("disabled");
+        this.constraintsMedia.video = false;
+        this.myCamVideo.srcObject = null;
+    }
+
+    private enableMicrophoneStyle(){
+        this.microphoneClose.style.display = "none";
+        this.microphone.style.display = "block";
+        this.microphoneBtn.classList.remove("disabled");
+    }
+
+    private disableMicrophoneStyle(){
+        this.microphoneClose.style.display = "block";
+        this.microphone.style.display = "none";
+        this.microphoneBtn.classList.add("disabled");
+        this.constraintsMedia.audio = false;
+    }
+
     private enableScreenSharing() {
         this.monitorClose.style.display = "none";
         this.monitor.style.display = "block";