From 47555d59558f8c324368d4fe155bbe09a6f98684 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 1 Jun 2021 11:19:46 +0200
Subject: [PATCH] Migrating cam to Svelte on Camera setup screen

---
 front/dist/index.tmpl.html                    |  4 --
 .../EnableCamera/EnableCameraScene.svelte     | 66 +++++++++++++++++++
 front/src/Phaser/Login/EnableCameraScene.ts   | 15 ++---
 front/style/style.css                         | 33 ----------
 4 files changed, 71 insertions(+), 47 deletions(-)

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 9c251bf3..279609e8 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -94,10 +94,6 @@
 
         <div id="activeScreenSharing" class="active-screen-sharing active">
         </div>
-        <div id="webRtcSetup" class="webrtcsetup">
-            <img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
-            <video id="myCamVideoSetup" autoplay muted></video>
-        </div>
         <audio id="audio-webrtc-in">
             <source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
         </audio>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index ac2cf992..f8b2867e 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -1,6 +1,8 @@
 <script lang="typescript">
     import {Game} from "../../Phaser/Game/Game";
     import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
+    import {localStreamStore} from "../../Stores/MediaStore";
+    import {onDestroy} from "svelte";
 
     export let game: Game;
 
@@ -10,12 +12,40 @@
         enableCameraScene.login();
     }
 
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream : MediaStream|null;
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+        } else {
+            stream = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
 </script>
 
 <form class="enableCameraScene" on:submit|preventDefault={submit}>
     <section class="title text-center">
         <h2>Turn on your camera and microphone</h2>
     </section>
+    <div id="webRtcSetup" class="webrtcsetup">
+        <img class="background-img" src="resources/logos/cinema-close.svg" alt="" class:hide={$localStreamStore.stream}>
+        <video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+    </div>
+
     <!--<section class="text-center">
         <video id="myCamVideoSetup" autoplay muted></video>
     </section>
@@ -71,6 +101,42 @@
       button.letsgo {
         font-size: 200%;
       }
+
+      .webrtcsetup{
+        position: absolute;
+        top: 140px;
+        left: 0;
+        right: 0;
+
+        margin-left: auto;
+        margin-right: auto;
+        height: 50%;
+        width: 50%;
+        border: white 6px solid;
+
+        img.background-img {
+          position: relative;
+          display: block;
+          width: 40%;
+          height: 60%;
+          margin-left: auto;
+          margin-right: auto;
+          top: 50%;
+          transform: translateY(-50%);
+        }
+
+        img.hide {
+          display: none;
+        }
+      }
+      #myCamVideoSetup {
+          width: 100%;
+          height: 100%;
+          -webkit-transform: scaleX(-1);
+          transform: scaleX(-1);
+      }
+
+
     }
 </style>
 
diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts
index 3eabe4d7..12e7ca66 100644
--- a/front/src/Phaser/Login/EnableCameraScene.ts
+++ b/front/src/Phaser/Login/EnableCameraScene.ts
@@ -107,8 +107,6 @@ export class EnableCameraScene extends ResizableScene {
             this.login();
         });
 
-        HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').classList.add('active');
-
         this.localStreamStoreUnsubscriber = localStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 // TODO: we could handle the error in a specific way on the EnableCameraScene page.
@@ -135,9 +133,12 @@ export class EnableCameraScene extends ResizableScene {
         this.soundMeterSprite.setVisible(false);
         this.add.existing(this.soundMeterSprite);
 
-        this.onResize();
-
         enableCameraSceneVisibilityStore.showEnableCameraScene();
+
+        setTimeout(() => {
+            this.onResize();
+        }, 100);
+
     }
 
     private previousCam(): void {
@@ -184,12 +185,6 @@ export class EnableCameraScene extends ResizableScene {
      * Function called each time a camera is changed
      */
     private setupStream(stream: MediaStream): void {
-        const img = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo');
-        img.style.display = 'none';
-
-        const div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
-        div.srcObject = stream;
-
         this.soundMeter.connectToSource(stream, new window.AudioContext());
         this.soundMeterSprite.setVisible(true);
 
diff --git a/front/style/style.css b/front/style/style.css
index 525b517a..10a5fdad 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -331,39 +331,6 @@ video.myCamVideo{
     }
 }
 
-.webrtcsetup{
-    display: none;
-    position: absolute;
-    top: 140px;
-    left: 0;
-    right: 0;
-    margin-left: auto;
-    margin-right: auto;
-    height: 50%;
-    width: 50%;
-    border: white 6px solid;
-}
-.webrtcsetup .background-img {
-    position: relative;
-    display: block;
-    width: 40%;
-    height: 60%;
-    margin-left: auto;
-    margin-right: auto;
-    top: 50%;
-    transform: translateY(-50%);
-}
-#myCamVideoSetup {
-    width: 100%;
-    height: 100%;
-    -webkit-transform: scaleX(-1);
-    transform: scaleX(-1);
-}
-.webrtcsetup.active{
-    display: block;
-}
-
-
 /* New layout */
 body {
     margin: 0;