From b3c18702bb7eb1dd2eccf068ce1130d57f41bc12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 24 Jun 2020 17:46:41 +0200
Subject: [PATCH] Adding borders, centering camera, fixing small bug on resize
 when no camera is enabled

---
 front/dist/resources/style/style.css        |  3 +++
 front/src/Phaser/Login/EnableCameraScene.ts | 12 ++++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 5bf3559d..5f0e1cab 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -218,6 +218,7 @@ video{
     margin-right: auto;
     height: 50%;
     width: 50%;
+    border: white 6px solid;
 }
 .webrtcsetup .background-img {
     position: relative;
@@ -226,6 +227,8 @@ video{
     height: 60%;
     margin-left: auto;
     margin-right: auto;
+    top: 50%;
+    transform: translateY(-50%);
 }
 #myCamVideoSetup {
     width: 100%;
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 074582ea..9a5100af 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -36,7 +36,7 @@ export class EnableCameraScene extends Phaser.Scene {
     private soundMeter: SoundMeter;
     private soundMeterSprite: SoundMeterSprite;
     private microphoneNameField: TextField;
-    private repositionCallback: (this: Window, ev: UIEvent) => any;
+    private repositionCallback: (this: Window, ev: UIEvent) => void;
 
     constructor() {
         super({
@@ -164,6 +164,7 @@ export class EnableCameraScene extends Phaser.Scene {
         div.srcObject = stream;
 
         this.soundMeter.connectToSource(stream, new window.AudioContext());
+        this.soundMeterSprite.setVisible(true);
 
         this.updateWebCamName();
     }
@@ -217,14 +218,17 @@ export class EnableCameraScene extends Phaser.Scene {
     }
 
     private reposition(): void {
-        const div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
-        const bounds = div.getBoundingClientRect();
+        let div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
+        let bounds = div.getBoundingClientRect();
+        if (!div.srcObject) {
+            div = this.getElementByIdOrFail<HTMLVideoElement>('webRtcSetup');
+            bounds = div.getBoundingClientRect();
+        }
 
         this.cameraNameField.y = bounds.top / RESOLUTION - 8;
 
         this.soundMeterSprite.x = this.game.renderer.width / 2 - this.soundMeterSprite.getWidth() / 2;
         this.soundMeterSprite.y = bounds.bottom / RESOLUTION + 16;
-        this.soundMeterSprite.setVisible(true);
 
         this.microphoneNameField.y = this.soundMeterSprite.y + 22;