Refactoring code to use the "visibilitychange" event

Using the "visiblitychange" event instead of relying on a "trick" related to RAF being disabled when a window is not open allows us to have cleaner code.
Bonus: the recursive call to "setTimeout" is gone, so the stacktrace growing indefinitely is gone too.
This should make the application a bit more stable.

front/src/Phaser/Game/GameScene.ts

@@ -183,6 +183,7 @@ export class GameScene extends ResizableScene implements CenterListener {
     private messageSubscription: Subscription|null = null;
     private popUpElements : Map<number, DOMElement> = new Map<number, Phaser.GameObjects.DOMElement>();
     private originalMapUrl: string|undefined;
+    private onVisibilityChangeCallback: () => void;
 
     constructor(private room: Room, MapUrlFile: string, customKey?: string|undefined) {
         super({
@@ -202,6 +203,7 @@ export class GameScene extends ResizableScene implements CenterListener {
         this.connectionAnswerPromise = new Promise<RoomJoinedMessageInterface>((resolve, reject): void => {
             this.connectionAnswerPromiseResolve = resolve;
         })
+        this.onVisibilityChangeCallback = this.onVisibilityChange.bind(this);
     }
 
     //hook preload scene
@@ -499,6 +501,8 @@ export class GameScene extends ResizableScene implements CenterListener {
         if (!this.room.isDisconnected()) {
             this.connect();
         }
+
+        document.addEventListener('visibilitychange', this.onVisibilityChangeCallback);
     }
 
     /**
@@ -620,6 +624,7 @@ export class GameScene extends ResizableScene implements CenterListener {
                         self.chatModeSprite.setVisible(false);
                         self.openChatIcon.setVisible(false);
                         audioManager.restoreVolume();
+                        self.onVisibilityChange();
                     }
                 }
             })
@@ -918,6 +923,8 @@ ${escapedMessage}
         for(const iframeEvents of this.iframeSubscriptionList){
             iframeEvents.unsubscribe();
         }
+
+        document.removeEventListener('visibilitychange', this.onVisibilityChangeCallback);
     }
 
     private removeAllRemotePlayers(): void {
@@ -1510,4 +1517,14 @@ ${escapedMessage}
             });
         }
     }
+
+    private onVisibilityChange(): void {
+        if (document.visibilityState === 'visible') {
+            mediaManager.focusCamera();
+        } else {
+            if (this.simplePeer.getNbConnections() === 0) {
+                mediaManager.blurCamera();
+            }
+        }
+    }
 }