From 4b77e8c57754fcd6e50719a91ec2cc33177fbcda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 09:31:04 +0200
Subject: [PATCH 1/8] Switching Camera controls in Svelte

Moving Camera controls out of HTML + MediaManager and into Svelte components
---
 front/dist/index.tmpl.html                    |  4 +-
 front/src/Components/App.svelte               |  5 ++
 front/src/Components/CameraControls.svelte    | 59 +++++++++++++++++++
 front/src/Components/images/cinema-close.svg  | 41 +++++++++++++
 .../Components/images}/cinema.svg             |  0
 .../Components/images}/microphone-close.svg   |  0
 .../Components/images}/microphone.svg         |  0
 .../Components/images}/monitor-close.svg      |  0
 .../Components/images}/monitor.svg            |  0
 front/src/WebRtc/MediaManager.ts              | 28 ++++-----
 10 files changed, 121 insertions(+), 16 deletions(-)
 create mode 100644 front/src/Components/CameraControls.svelte
 create mode 100644 front/src/Components/images/cinema-close.svg
 rename front/{dist/resources/logos => src/Components/images}/cinema.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/microphone-close.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/microphone.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/monitor-close.svg (100%)
 rename front/{dist/resources/logos => src/Components/images}/monitor.svg (100%)

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 7ef44116..1da7fad6 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -59,7 +59,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="btn-cam-action">
+<!--                    <div class="btn-cam-action">
                         <div id="btn-monitor" class="btn-monitor">
                             <img id="monitor" src="resources/logos/monitor.svg">
                             <img id="monitor-close" src="resources/logos/monitor-close.svg">
@@ -72,7 +72,7 @@
                             <img id="microphone" src="resources/logos/microphone.svg">
                             <img id="microphone-close" src="resources/logos/microphone-close.svg">
                         </div>
-                    </div>
+                    </div> -->
                 </div>
             </div>
             <div id="cowebsite" class="cowebsite hidden">
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 69fa2f62..16cd903a 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -1,11 +1,16 @@
 <script lang="typescript">
     import MenuIcon from "./Menu/MenuIcon.svelte";
     import {menuIconVisible} from "../Stores/MenuStore";
+    import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
+    import CameraControls from "./CameraControls.svelte";
 
 </script>
 
 <div>
+    {#if $gameOverlayVisibilityStore}
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+        <CameraControls></CameraControls>
+    {/if}
 </div>
diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
new file mode 100644
index 00000000..b3c94716
--- /dev/null
+++ b/front/src/Components/CameraControls.svelte
@@ -0,0 +1,59 @@
+<script lang="typescript">
+    import {requestedScreenSharingState, screenSharingAvailableStore} from "../Stores/ScreenSharingStore";
+    import {requestedCameraState, requestedMicrophoneState} from "../Stores/MediaStore";
+    import monitorImg from "./images/monitor.svg";
+    import monitorCloseImg from "./images/monitor-close.svg";
+    import cinemaImg from "./images/cinema.svg";
+    import cinemaCloseImg from "./images/cinema-close.svg";
+    import microphoneImg from "./images/microphone.svg";
+    import microphoneCloseImg from "./images/microphone-close.svg";
+
+    function screenSharingClick(): void {
+        if ($requestedScreenSharingState === true) {
+            requestedScreenSharingState.disableScreenSharing();
+        } else {
+            requestedScreenSharingState.enableScreenSharing();
+        }
+    }
+
+    function cameraClick(): void {
+        if ($requestedCameraState === true) {
+            requestedCameraState.disableWebcam();
+        } else {
+            requestedCameraState.enableWebcam();
+        }
+    }
+
+    function microphoneClick(): void {
+        if ($requestedMicrophoneState === true) {
+            requestedMicrophoneState.disableMicrophone();
+        } else {
+            requestedMicrophoneState.enableMicrophone();
+        }
+    }
+
+</script>
+
+<div class="btn-cam-action">
+    <div class="btn-monitor" on:click={screenSharingClick} class:hide={$screenSharingAvailableStore}>
+        {#if $requestedScreenSharingState}
+            <img src={monitorImg} alt="Start screen sharing">
+        {:else}
+            <img src={monitorCloseImg} alt="Stop screen sharing">
+        {/if}
+    </div>
+    <div class="btn-video" on:click={cameraClick}>
+        {#if $requestedCameraState}
+            <img src={cinemaImg} alt="Turn on webcam">
+        {:else}
+            <img src={cinemaCloseImg} alt="Turn off webcam">
+        {/if}
+    </div>
+    <div class="btn-micro" on:click={microphoneClick}>
+        {#if $requestedMicrophoneState}
+            <img src={microphoneImg} alt="Turn on microphone">
+        {:else}
+            <img src={microphoneCloseImg} alt="Turn off microphone">
+        {/if}
+    </div>
+</div>
diff --git a/front/src/Components/images/cinema-close.svg b/front/src/Components/images/cinema-close.svg
new file mode 100644
index 00000000..aa1d9b17
--- /dev/null
+++ b/front/src/Components/images/cinema-close.svg
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 332.8 332.8" style="enable-background:new 0 0 332.8 332.8;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<g>
+			<path class="st0" d="M330.8,171c-3.6-6.4-12-8.8-18.8-4.8l-45.6,26.4l-11.6,6.8v63.2l10.8,6.4c0.4,0,0.4,0.4,0.8,0.4l44.8,26
+				c2,1.6,4.8,2.4,7.6,2.4c7.6,0,13.6-6,13.6-13.6v-53.6l0.4-52.8C332.8,175.4,332.4,173,330.8,171z"/>
+			<path class="st0" d="M193.2,150.6c35.6,0,64.4-28.8,64.4-64.4s-28.8-64.4-64.4-64.4s-64.4,28.8-64.4,64.4
+				C128.8,121.8,157.6,150.6,193.2,150.6z M193.2,59.8c14.8,0,26.4,12,26.4,26.4c0,14.8-12,26.4-26.4,26.4s-26.4-12-26.4-26.4
+				C166.8,71.4,178.4,59.8,193.2,59.8z"/>
+		</g>
+	</g>
+</g>
+<g>
+	<g>
+	</g>
+</g>
+<rect x="134.8" y="-45.3" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 376.0669 224.8258)" class="st0" width="19.6" height="460.7"/>
+<path class="st0" d="M90.6,83.3c-0.2-2.2-1.3-8.9-6.7-14.9c-5.4-5.9-11.9-7.6-14.1-8.1C59.7,49.2,49.5,38,39.4,26.8
+	c24.3-9.8,52-4.4,70.2,13.6c19.9,19.7,24.7,50.8,11.5,76.4C110.9,105.6,100.8,94.5,90.6,83.3z"/>
+<path class="st0" d="M10.1,51.6c9.4,10.2,18.8,20.4,28.2,30.6c-0.2,1.8-1.4,11.7,5.5,20.5c8.2,10.3,20.7,10.2,22.1,10.1
+	c9.2,10.3,18.5,20.6,27.7,30.8c-4.8,2.3-24.6,11.2-48.3,4.1c-6-1.8-20.7-7.3-32.1-22C-0.3,108.1-0.2,89.1,0.1,83.4
+	C0.8,68,6.8,56.8,10.1,51.6z"/>
+<g>
+	<path class="st0" d="M243.4,178.2c0.1,24.5,0.2,49,0.2,73.5c-30.7-33.8-61.3-67.7-92-101.5c5.9,3.9,20.9,12.4,41.6,12.4
+		c16,0,28.2-5.2,34.4-8.4c2.5,1.5,7,4.6,10.7,10.3C242,170,243,175.4,243.4,178.2z"/>
+	<g>
+		<path class="st0" d="M211.2,311C150.8,258.7,90.4,206.5,30,154.2c6.1,3.1,18.2,8.4,34.4,8.4c18.1,0,31.5-6.5,37.5-9.9
+			c44.5,49,89.1,98.1,133.6,147.1c-1.8,2.1-5.3,5.5-10.6,8.1C219.2,310.6,214,311,211.2,311z"/>
+		<path class="st0" d="M46.8,311C36,267.7,25.2,224.3,14.4,181c0.1-3.2,0.7-11.3,6.5-18.8c3.1-4.1,6.7-6.6,9.1-8
+			C90.4,206.5,150.8,258.7,211.2,311C156.4,311,101.6,311,46.8,311z"/>
+		<path class="st0" d="M14.4,278.6L14.4,278.6c0-32.5,0-65.1,0-97.6c10.8,43.3,21.6,86.7,32.4,130c-2.6,0-12.7-0.4-21.5-8.1
+			C14.7,293.5,14.4,280.7,14.4,278.6z"/>
+	</g>
+</g>
+</svg>
diff --git a/front/dist/resources/logos/cinema.svg b/front/src/Components/images/cinema.svg
similarity index 100%
rename from front/dist/resources/logos/cinema.svg
rename to front/src/Components/images/cinema.svg
diff --git a/front/dist/resources/logos/microphone-close.svg b/front/src/Components/images/microphone-close.svg
similarity index 100%
rename from front/dist/resources/logos/microphone-close.svg
rename to front/src/Components/images/microphone-close.svg
diff --git a/front/dist/resources/logos/microphone.svg b/front/src/Components/images/microphone.svg
similarity index 100%
rename from front/dist/resources/logos/microphone.svg
rename to front/src/Components/images/microphone.svg
diff --git a/front/dist/resources/logos/monitor-close.svg b/front/src/Components/images/monitor-close.svg
similarity index 100%
rename from front/dist/resources/logos/monitor-close.svg
rename to front/src/Components/images/monitor-close.svg
diff --git a/front/dist/resources/logos/monitor.svg b/front/src/Components/images/monitor.svg
similarity index 100%
rename from front/dist/resources/logos/monitor.svg
rename to front/src/Components/images/monitor.svg
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index fad33de3..36f70918 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -47,12 +47,12 @@ export class MediaManager {
     localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     myCamVideo: HTMLVideoElement;
-    cinemaClose: HTMLImageElement;
+    /*cinemaClose: HTMLImageElement;
     cinema: HTMLImageElement;
     monitorClose: HTMLImageElement;
     monitor: HTMLImageElement;
     microphoneClose: HTMLImageElement;
-    microphone: HTMLImageElement;
+    microphone: HTMLImageElement;*/
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
@@ -63,9 +63,9 @@ export class MediaManager {
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
     helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
 
-    private microphoneBtn: HTMLDivElement;
+/*    private microphoneBtn: HTMLDivElement;
     private cinemaBtn: HTMLDivElement;
-    private monitorBtn: HTMLDivElement;
+    private monitorBtn: HTMLDivElement;*/
 
     private focused : boolean = true;
 
@@ -86,7 +86,7 @@ export class MediaManager {
         this.webrtcInAudio.volume = 0.2;
         this.webrtcOutAudio.volume = 0.2;
 
-        this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
+        /*this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
         this.microphoneClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone-close');
         this.microphoneClose.style.display = "none";
         this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
@@ -126,7 +126,7 @@ export class MediaManager {
             e.preventDefault();
             //this.disableScreenSharing();
             requestedScreenSharingState.disableScreenSharing();
-        });
+        });*/
 
         this.pingCameraStatus();
 
@@ -166,7 +166,7 @@ export class MediaManager {
             this.triggerUpdatedLocalStreamCallbacks(result.stream);
         });
 
-        requestedCameraState.subscribe((enabled) => {
+        /*requestedCameraState.subscribe((enabled) => {
             if (enabled) {
                 this.enableCameraStyle();
             } else {
@@ -179,7 +179,7 @@ export class MediaManager {
             } else {
                 this.disableMicrophoneStyle();
             }
-        });
+        });*/
         //let screenSharingStream : MediaStream|null;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
@@ -191,7 +191,7 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
-                this.enableScreenSharingStyle();
+                //this.enableScreenSharingStyle();
                 mediaManager.localScreenCapture = result.stream;
 
                 // TODO: migrate this out of MediaManager
@@ -202,7 +202,7 @@ export class MediaManager {
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
-                this.disableScreenSharingStyle();
+                //this.disableScreenSharingStyle();
                 this.removeActiveScreenSharingVideo('me');
 
                 // FIXME: we need the old stream that is being stopped!
@@ -216,13 +216,13 @@ export class MediaManager {
 
         });
 
-        screenSharingAvailableStore.subscribe((available) => {
+        /*screenSharingAvailableStore.subscribe((available) => {
             if (available) {
                 document.querySelector('.btn-monitor')?.classList.remove('hide');
             } else {
                 document.querySelector('.btn-monitor')?.classList.add('hide');
             }
-        });
+        });*/
     }
 
     public updateScene(){
@@ -290,7 +290,7 @@ export class MediaManager {
         gameOverlayVisibilityStore.hideGameOverlay();
     }
 
-    private enableCameraStyle(){
+    /*private enableCameraStyle(){
         this.cinemaClose.style.display = "none";
         this.cinemaBtn.classList.remove("disabled");
         this.cinema.style.display = "block";
@@ -324,7 +324,7 @@ export class MediaManager {
         this.monitorClose.style.display = "block";
         this.monitor.style.display = "none";
         this.monitorBtn.classList.remove("enabled");
-    }
+    }*/
 
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
         this.webrtcInAudio.play();

From cc1eab653a1b7d77fce73356aab50596e318bb81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 10:48:13 +0200
Subject: [PATCH 2/8] Fixing screen sharing button display

---
 front/src/Components/CameraControls.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index b3c94716..98dfa4c5 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -35,7 +35,7 @@
 </script>
 
 <div class="btn-cam-action">
-    <div class="btn-monitor" on:click={screenSharingClick} class:hide={$screenSharingAvailableStore}>
+    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore}>
         {#if $requestedScreenSharingState}
             <img src={monitorImg} alt="Start screen sharing">
         {:else}

From d1c22b122c99f6b47ef38a0810fee14b49e794e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 10:48:24 +0200
Subject: [PATCH 3/8] Improving icons centering

---
 front/style/style.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/style/style.css b/front/style/style.css
index a3bbfa1d..50c842d0 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -212,7 +212,9 @@ video#myCamVideo{
 /*btn animation*/
 .btn-cam-action div{
     cursor: url('./images/cursor_pointer.png'), pointer;
-    /*position: absolute;*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border: solid 0px black;
     width: 44px;
     height: 44px;
@@ -267,8 +269,6 @@ video#myCamVideo{
 .btn-cam-action div img{
     height: 22px;
     width: 30px;
-    top: calc(48px - 37px);
-    left: calc(48px - 41px);
     position: relative;
     cursor: url('./images/cursor_pointer.png'), pointer;
 }

From b3aa8975e94831adae820a3f163ade4ddb2468ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Fri, 28 May 2021 15:48:58 +0200
Subject: [PATCH 4/8] Switching the video feedback in Svelte

---
 front/dist/index.tmpl.html                   | 26 ---------
 front/src/Components/App.svelte              |  2 +
 front/src/Components/MyCamera.svelte         | 46 +++++++++++++++
 front/src/Components/SoundMeterWidget.svelte | 36 ++++++++++++
 front/src/WebRtc/MediaManager.ts             | 60 +-------------------
 front/style/mobile-style.scss                | 32 +++++------
 front/style/style.css                        |  8 +--
 7 files changed, 107 insertions(+), 103 deletions(-)
 create mode 100644 front/src/Components/MyCamera.svelte
 create mode 100644 front/src/Components/SoundMeterWidget.svelte

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index 1da7fad6..d5b97023 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -47,32 +47,6 @@
                     </aside>
                     <div id="chat-mode" class="chat-mode three-col" style="display: none;">
                     </div>
-                    <div id="activeCam" class="activeCam">
-                        <div id="div-myCamVideo" class="video-container">
-                            <video id="myCamVideo" autoplay muted></video>
-                            <div id="mySoundMeter" class="sound-progress">
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                                <span></span>
-                            </div>
-                        </div>
-                    </div>
-<!--                    <div class="btn-cam-action">
-                        <div id="btn-monitor" class="btn-monitor">
-                            <img id="monitor" src="resources/logos/monitor.svg">
-                            <img id="monitor-close" src="resources/logos/monitor-close.svg">
-                        </div>
-                        <div id="btn-video" class="btn-video">
-                            <img id="cinema" src="resources/logos/cinema.svg">
-                            <img id="cinema-close" src="resources/logos/cinema-close.svg">
-                        </div>
-                        <div id="btn-micro" class="btn-micro">
-                            <img id="microphone" src="resources/logos/microphone.svg">
-                            <img id="microphone-close" src="resources/logos/microphone-close.svg">
-                        </div>
-                    </div> -->
                 </div>
             </div>
             <div id="cowebsite" class="cowebsite hidden">
diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index 16cd903a..9b072e8d 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -3,6 +3,7 @@
     import {menuIconVisible} from "../Stores/MenuStore";
     import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
     import CameraControls from "./CameraControls.svelte";
+    import MyCamera from "./MyCamera.svelte";
 
 </script>
 
@@ -11,6 +12,7 @@
     <!-- {#if $menuIconVisible}
     <MenuIcon  />
     {/if} -->
+        <MyCamera></MyCamera>
         <CameraControls></CameraControls>
     {/if}
 </div>
diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
new file mode 100644
index 00000000..6e1e50ef
--- /dev/null
+++ b/front/src/Components/MyCamera.svelte
@@ -0,0 +1,46 @@
+<script lang="typescript">
+    import {localStreamStore} from "../Stores/MediaStore";
+    import SoundMeterWidget from "./SoundMeterWidget.svelte";
+    import {onDestroy} from "svelte";
+
+    function srcObject(node, stream) {
+        node.srcObject = stream;
+        return {
+            update(newStream) {
+                if (node.srcObject != newStream) {
+                    node.srcObject = newStream
+                }
+            }
+        }
+    }
+
+    let stream : MediaStream|null;
+    /*$: {
+        if ($localStreamStore.type === 'success') {
+            stream = $localStreamStore.stream;
+        } else {
+            stream = null;
+        }
+    }*/
+
+    const unsubscribe = localStreamStore.subscribe(value => {
+        if (value.type === 'success') {
+            stream = value.stream;
+        } else {
+            stream = null;
+        }
+    });
+
+    onDestroy(unsubscribe);
+
+</script>
+
+
+<div>
+    <div class="video-container div-myCamVideo" class:hide={!$localStreamStore.constraints.video}>
+        <video class="myCamVideo" use:srcObject={$localStreamStore.stream} autoplay muted></video>
+        <!-- {#if stream}
+        <SoundMeterWidget stream={stream}></SoundMeterWidget>
+        {/if} -->
+    </div>
+</div>
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte
new file mode 100644
index 00000000..cff6be86
--- /dev/null
+++ b/front/src/Components/SoundMeterWidget.svelte
@@ -0,0 +1,36 @@
+<script lang="typescript">
+    import {SoundMeter} from "../Phaser/Components/SoundMeter";
+    import {onDestroy} from "svelte";
+
+    export let stream: MediaStream;
+    let volume = 0;
+
+    console.log('stream', stream);
+
+    if (stream.getAudioTracks().length > 0) {
+        const soundMeter = new SoundMeter();
+        soundMeter.connectToSource(stream, new AudioContext());
+
+        const timeout = setInterval(() => {
+            try{
+                volume = parseInt((soundMeter.getVolume() / 10).toFixed(0));
+                console.log(volume);
+            }catch(err){
+
+            }
+        }, 100);
+
+        onDestroy(() => {
+            clearInterval(timeout);
+        })
+    }
+</script>
+
+
+<div class="sound-progress" class:active={stream?.getAudioTracks().length > 0}>
+    <span class:active={volume > 1}></span>
+    <span class:active={volume > 2}></span>
+    <span class:active={volume > 3}></span>
+    <span class:active={volume > 4}></span>
+    <span class:active={volume > 5}></span>
+</div>
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 36f70918..bb86e70f 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -46,13 +46,6 @@ export class MediaManager {
     localStream: MediaStream|null = null;
     localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
-    myCamVideo: HTMLVideoElement;
-    /*cinemaClose: HTMLImageElement;
-    cinema: HTMLImageElement;
-    monitorClose: HTMLImageElement;
-    monitor: HTMLImageElement;
-    microphoneClose: HTMLImageElement;
-    microphone: HTMLImageElement;*/
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
@@ -63,10 +56,6 @@ export class MediaManager {
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
     helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
 
-/*    private microphoneBtn: HTMLDivElement;
-    private cinemaBtn: HTMLDivElement;
-    private monitorBtn: HTMLDivElement;*/
-
     private focused : boolean = true;
 
     private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
@@ -80,54 +69,11 @@ export class MediaManager {
 
     constructor() {
 
-        this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
         this.webrtcInAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
         this.webrtcOutAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-out');
         this.webrtcInAudio.volume = 0.2;
         this.webrtcOutAudio.volume = 0.2;
 
-        /*this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
-        this.microphoneClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone-close');
-        this.microphoneClose.style.display = "none";
-        this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedMicrophoneState.enableMicrophone();
-        });
-        this.microphone = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone');
-        this.microphone.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedMicrophoneState.disableMicrophone();
-        });
-
-        this.cinemaBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-video');
-        this.cinemaClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('cinema-close');
-        this.cinemaClose.style.display = "none";
-        this.cinemaClose.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedCameraState.enableWebcam();
-        });
-        this.cinema = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('cinema');
-        this.cinema.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            requestedCameraState.disableWebcam();
-        });
-
-        this.monitorBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-monitor');
-        this.monitorClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('monitor-close');
-        this.monitorClose.style.display = "block";
-        this.monitorClose.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            //this.enableScreenSharing();
-            requestedScreenSharingState.enableScreenSharing();
-        });
-        this.monitor = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('monitor');
-        this.monitor.style.display = "none";
-        this.monitor.addEventListener('click', (e: MouseEvent) => {
-            e.preventDefault();
-            //this.disableScreenSharing();
-            requestedScreenSharingState.disableScreenSharing();
-        });*/
-
         this.pingCameraStatus();
 
         //FIX ME SOUNDMETER: check stability of sound meter calculation
@@ -148,11 +94,11 @@ export class MediaManager {
                 return;
             }
 
-            if (result.constraints.video !== false) {
+            /*if (result.constraints.video !== false) {
                 HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide');
             } else {
                 HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide');
-            }/*
+            }
             if (result.constraints.audio !== false) {
                 this.enableMicrophoneStyle();
             } else {
@@ -160,7 +106,7 @@ export class MediaManager {
             }*/
 
             this.localStream = result.stream;
-            this.myCamVideo.srcObject = this.localStream;
+            //this.myCamVideo.srcObject = this.localStream;
 
             // TODO: migrate all listeners to the store directly.
             this.triggerUpdatedLocalStreamCallbacks(result.stream);
diff --git a/front/style/mobile-style.scss b/front/style/mobile-style.scss
index 21753ebd..1b37053a 100644
--- a/front/style/mobile-style.scss
+++ b/front/style/mobile-style.scss
@@ -1,9 +1,24 @@
+@media (hover: none) {
+  /**
+   * If we cannot hover over elements, let's display camera button in full.
+   */
+  .btn-cam-action {
+    div {
+      transform: translateY(0px);
+    }
+  }
+}
+
 @media screen and (max-width: 700px),
         screen and (max-height: 700px){
-  video#myCamVideo {
+  video.myCamVideo {
     width: 150px;
   }
 
+  .div-myCamVideo.hide {
+    right: -160px;
+  }
+
   .sidebar {
     width: 20%;
     min-width: 200px;
@@ -22,21 +37,6 @@
     }
   }
 
-  .btn-cam-action {
-    min-width: 150px;
-
-    &:hover{
-      transform: translateY(20px);
-    }
-    div {
-      margin: 0 1%;
-      &:hover {
-        background-color: #666;
-      }
-      margin-bottom: 30px;
-    }
-  }
-
   .main-section {
     position: absolute;
     width: 100%;
diff --git a/front/style/style.css b/front/style/style.css
index 50c842d0..525b517a 100644
--- a/front/style/style.css
+++ b/front/style/style.css
@@ -133,11 +133,11 @@ body .message-info.warning{
     outline: none;
 }
 
-.video-container#div-myCamVideo{
+.video-container.div-myCamVideo{
     border: none;
 }
 
-#div-myCamVideo {
+.div-myCamVideo {
     position: absolute;
     right: 15px;
     bottom: 30px;
@@ -146,11 +146,11 @@ body .message-info.warning{
     transition: right 350ms;
 }
 
-#div-myCamVideo.hide {
+.div-myCamVideo.hide {
     right: -20vw;
 }
 
-video#myCamVideo{
+video.myCamVideo{
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);

From 679b5b6b7945476a2ee5313c9d9ecb10b64ec5ee Mon Sep 17 00:00:00 2001
From: kharhamel <oognic@gmail.com>
Date: Fri, 28 May 2021 17:51:18 +0200
Subject: [PATCH 5/8] FIX: better error text in LoginScene

---
 front/src/Phaser/Login/LoginScene.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts
index 435592f2..1761f664 100644
--- a/front/src/Phaser/Login/LoginScene.ts
+++ b/front/src/Phaser/Login/LoginScene.ts
@@ -41,7 +41,7 @@ export class LoginScene extends ResizableScene {
             }
             pErrorElement.innerHTML = '';
             if(inputElement.value && !isUserNameValid(inputElement.value)){
-                pErrorElement.innerHTML = 'Invalid user name: only letters and numbers are allowed. No spaces.';
+                pErrorElement.innerHTML = 'Invalid user name: No spaces are allowed.';
             }
             if (event.key === 'Enter') {
                 event.preventDefault();

From b7f14614057de0fabab0ea338dc248b8f7112ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 29 May 2021 22:04:08 +0200
Subject: [PATCH 6/8] Removing listeners from MediaManager. SimplePeer now
 reacts only to stores.

---
 .../dist/resources/logos/microphone-close.svg |  27 +++++
 front/src/WebRtc/MediaManager.ts              | 101 ------------------
 front/src/WebRtc/ScreenSharingPeer.ts         |  16 +--
 front/src/WebRtc/SimplePeer.ts                |  96 ++++++++++-------
 4 files changed, 90 insertions(+), 150 deletions(-)
 create mode 100644 front/dist/resources/logos/microphone-close.svg

diff --git a/front/dist/resources/logos/microphone-close.svg b/front/dist/resources/logos/microphone-close.svg
new file mode 100644
index 00000000..16731829
--- /dev/null
+++ b/front/dist/resources/logos/microphone-close.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<rect x="257" y="-47.9" transform="matrix(-0.7402 0.6723 -0.6723 -0.7402 643.9641 283.6469)" class="st0" width="20.4" height="628.3"/>
+<g>
+	<g>
+		<path class="st0" d="M333.6,250.3c-52.6-43.9-105.1-87.9-157.7-131.8c0-17.9,0-35.8,0-53.6c6.5-38.6,40.3-67,79.3-66.8
+			c38.6,0.2,71.9,28.5,78.4,66.8C333.6,126.7,333.6,188.5,333.6,250.3z"/>
+		<path class="st0" d="M322.6,279.9c-48.9-53.8-97.8-107.6-146.6-161.4l0,0c52.6,43.9,105.1,87.9,157.7,131.8
+			c-0.2,1.6-0.5,3.3-0.9,5C330.5,265.2,326.6,273.5,322.6,279.9z"/>
+	</g>
+	<path class="st0" d="M292.5,308.1c-2.3,1.2-39.5,20.3-76.7-1c-36.4-20.8-39.4-61.2-39.6-64.1c-0.1-21-0.1-42.1-0.2-63.1
+		C214.8,222.6,253.6,265.3,292.5,308.1z"/>
+</g>
+<path class="st0" d="M431.6,238.5c-0.9-8.4-8.5-14.4-16.6-13.5c-7.9,0.9-13.9,8.1-13.2,16.3c-0.1,13.3-2.2,34.6-12.6,57.9
+	c-6.3,14.2-14,25.2-20.6,33.1c6.8,7.5,13.6,14.9,20.3,22.4c9.5-10.9,23.4-29.7,32.8-56.3C430.3,273.9,431.8,252.5,431.6,238.5z"/>
+<line class="st0" x1="354.5" y1="347.2" x2="374.6" y2="369.4"/>
+<path class="st0" d="M338.5,359.9c6.8,7.4,13.5,14.9,20.3,22.3c-52.6,37.6-121.5,43.7-179.2,15.8c-60.3-29.1-98.9-90.7-99.3-158.2
+	c0-8.2,6.8-15,15-15s15,6.8,15,15c0.1,13.5,2.4,54.4,32.4,91.6c4.2,5.2,45.1,54.1,113.3,54.1C297,385.6,326.7,367.9,338.5,359.9z"/>
+<rect x="241" y="409.6" class="st0" width="29.9" height="102.3"/>
+<path class="st0" d="M304.2,511.9h-97.1c-8-0.4-14.3-7.1-14.3-15c0-8.1,6.7-14.9,15-15c31.7,0,63.4,0.1,95.1,0.1
+	c8.9-0.6,16.3,6.5,16.3,14.9C319.2,504.8,312.6,511.7,304.2,511.9z"/>
+</svg>
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index bb86e70f..5ddc4905 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -44,13 +44,11 @@ export type HelpCameraSettingsCallBack = () => void;
 
 export class MediaManager {
     localStream: MediaStream|null = null;
-    localScreenCapture: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
     //mySoundMeterElement: HTMLDivElement;
     private webrtcOutAudio: HTMLAudioElement;
-    updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
     startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
     stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
     showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
@@ -108,24 +106,8 @@ export class MediaManager {
             this.localStream = result.stream;
             //this.myCamVideo.srcObject = this.localStream;
 
-            // TODO: migrate all listeners to the store directly.
-            this.triggerUpdatedLocalStreamCallbacks(result.stream);
         });
 
-        /*requestedCameraState.subscribe((enabled) => {
-            if (enabled) {
-                this.enableCameraStyle();
-            } else {
-                this.disableCameraStyle();
-            }
-        });
-        requestedMicrophoneState.subscribe((enabled) => {
-            if (enabled) {
-                this.enableMicrophoneStyle();
-            } else {
-                this.disableMicrophoneStyle();
-            }
-        });*/
         //let screenSharingStream : MediaStream|null;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
@@ -137,26 +119,13 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
-                //this.enableScreenSharingStyle();
-                mediaManager.localScreenCapture = result.stream;
-
-                // TODO: migrate this out of MediaManager
-                this.triggerStartedScreenSharingCallbacks(result.stream);
-
                 //screenSharingStream = result.stream;
 
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
-                //this.disableScreenSharingStyle();
                 this.removeActiveScreenSharingVideo('me');
 
-                // FIXME: we need the old stream that is being stopped!
-                if (this.localScreenCapture) {
-                    this.triggerStoppedScreenSharingCallbacks(this.localScreenCapture);
-                    this.localScreenCapture = null;
-                }
-
                 //screenSharingStream = null;
             }
 
@@ -176,40 +145,6 @@ export class MediaManager {
         //this.updateSoudMeter();
     }
 
-    public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
-        this.updatedLocalStreamCallBacks.add(callback);
-    }
-
-    public onStartScreenSharing(callback: StartScreenSharingCallback): void {
-        this.startScreenSharingCallBacks.add(callback);
-    }
-
-    public onStopScreenSharing(callback: StopScreenSharingCallback): void {
-        this.stopScreenSharingCallBacks.add(callback);
-    }
-
-    removeUpdateLocalStreamEventListener(callback: UpdatedLocalStreamCallback): void {
-        this.updatedLocalStreamCallBacks.delete(callback);
-    }
-
-    private triggerUpdatedLocalStreamCallbacks(stream: MediaStream|null): void {
-        for (const callback of this.updatedLocalStreamCallBacks) {
-            callback(stream);
-        }
-    }
-
-    private triggerStartedScreenSharingCallbacks(stream: MediaStream): void {
-        for (const callback of this.startScreenSharingCallBacks) {
-            callback(stream);
-        }
-    }
-
-    private triggerStoppedScreenSharingCallbacks(stream: MediaStream): void {
-        for (const callback of this.stopScreenSharingCallBacks) {
-            callback(stream);
-        }
-    }
-
     public showGameOverlay(): void {
         const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
         gameOverlay.classList.add('active');
@@ -236,42 +171,6 @@ export class MediaManager {
         gameOverlayVisibilityStore.hideGameOverlay();
     }
 
-    /*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");
-    }
-
-    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");
-    }
-
-    private enableScreenSharingStyle(){
-        this.monitorClose.style.display = "none";
-        this.monitor.style.display = "block";
-        this.monitorBtn.classList.add("enabled");
-    }
-
-    private disableScreenSharingStyle(){
-        this.monitorClose.style.display = "block";
-        this.monitor.style.display = "none";
-        this.monitorBtn.classList.remove("enabled");
-    }*/
-
     addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
         this.webrtcInAudio.play();
         const userId = ''+user.userId
diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts
index f1786ef3..947549eb 100644
--- a/front/src/WebRtc/ScreenSharingPeer.ts
+++ b/front/src/WebRtc/ScreenSharingPeer.ts
@@ -19,7 +19,7 @@ export class ScreenSharingPeer extends Peer {
     public _connected: boolean = false;
     private userId: number;
 
-    constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
+    constructor(user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, stream: MediaStream | null) {
         super({
             initiator: initiator ? initiator : false,
             //reconnectTimer: 10000,
@@ -81,7 +81,9 @@ export class ScreenSharingPeer extends Peer {
             this._onFinish();
         });
 
-        this.pushScreenSharingToRemoteUser();
+        if (stream) {
+            this.addStream(stream);
+        }
     }
 
     private sendWebrtcScreenSharingSignal(data: unknown) {
@@ -141,16 +143,6 @@ export class ScreenSharingPeer extends Peer {
         }
     }
 
-    private pushScreenSharingToRemoteUser() {
-        const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
-        if(!localScreenCapture){
-            return;
-        }
-
-        this.addStream(localScreenCapture);
-        return;
-    }
-
     public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
         this.removeStream(stream);
         this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true})));
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 4633374d..ba2cb05e 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -15,7 +15,10 @@ import {connectionManager} from "../Connexion/ConnectionManager";
 import {GameConnexionTypes} from "../Url/UrlManager";
 import {blackListManager} from "./BlackListManager";
 import {get} from "svelte/store";
-import {localStreamStore, obtainedMediaConstraintStore} from "../Stores/MediaStore";
+import {localStreamStore, LocalStreamStoreValue, obtainedMediaConstraintStore} from "../Stores/MediaStore";
+import {screenSharingLocalStreamStore} from "../Stores/ScreenSharingStore";
+import {DivImportance, layoutManager} from "./LayoutManager";
+import {HtmlUtils} from "./HtmlUtils";
 
 export interface UserSimplePeerInterface{
     userId: number;
@@ -39,9 +42,9 @@ export class SimplePeer {
 
     private PeerScreenSharingConnectionArray: Map<number, ScreenSharingPeer> = new Map<number, ScreenSharingPeer>();
     private PeerConnectionArray: Map<number, VideoPeer> = new Map<number, VideoPeer>();
-    private readonly sendLocalVideoStreamCallback: UpdatedLocalStreamCallback;
     private readonly sendLocalScreenSharingStreamCallback: StartScreenSharingCallback;
     private readonly stopLocalScreenSharingStreamCallback: StopScreenSharingCallback;
+    private readonly unsubscribers: (() => void)[] = [];
     private readonly peerConnectionListeners: Array<PeerConnectionListener> = new Array<PeerConnectionListener>();
     private readonly userId: number;
     private lastWebrtcUserName: string|undefined;
@@ -49,13 +52,32 @@ export class SimplePeer {
 
     constructor(private Connection: RoomConnection, private enableReporting: boolean, private myName: string) {
         // We need to go through this weird bound function pointer in order to be able to "free" this reference later.
-        this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
         this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
         this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
 
-        mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
-        mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
-        mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
+        this.unsubscribers.push(localStreamStore.subscribe((streamResult) => {
+            this.sendLocalVideoStream(streamResult);
+        }));
+
+        let localScreenCapture: MediaStream|null = null;
+
+        this.unsubscribers.push(screenSharingLocalStreamStore.subscribe((streamResult) => {
+            if (streamResult.type === 'error') {
+                // Let's ignore screen sharing errors, we will deal with those in a different way.
+                return;
+            }
+
+            if (streamResult.stream !== null) {
+                localScreenCapture = streamResult.stream;
+                this.sendLocalScreenSharingStream(localScreenCapture);
+            } else {
+                if (localScreenCapture) {
+                    this.stopLocalScreenSharingStream(localScreenCapture);
+                    localScreenCapture = null;
+                }
+            }
+        }));
+
         this.userId = Connection.getUserId();
         this.initialise();
     }
@@ -155,8 +177,9 @@ export class SimplePeer {
         // When a connection is established to a video stream, and if a screen sharing is taking place,
         // the user sharing screen should also initiate a connection to the remote user!
         peer.on('connect', () => {
-            if (mediaManager.localScreenCapture) {
-                this.sendLocalScreenSharingStreamToUser(user.userId);
+            const streamResult = get(screenSharingLocalStreamStore);
+            if (streamResult.type === 'success' && streamResult.stream !== null) {
+                this.sendLocalScreenSharingStreamToUser(user.userId, streamResult.stream);
             }
         });
 
@@ -175,7 +198,7 @@ export class SimplePeer {
     /**
      * create peer connection to bind users
      */
-    private createPeerScreenSharingConnection(user : UserSimplePeerInterface) : ScreenSharingPeer | null{
+    private createPeerScreenSharingConnection(user : UserSimplePeerInterface, stream: MediaStream | null) : ScreenSharingPeer | null{
         const peerConnection = this.PeerScreenSharingConnectionArray.get(user.userId);
         if(peerConnection){
             if(peerConnection.destroyed){
@@ -204,7 +227,7 @@ export class SimplePeer {
             user.webRtcPassword = this.lastWebrtcPassword;
         }
 
-        const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection);
+        const peer = new ScreenSharingPeer(user, user.initiator ? user.initiator : false, this.Connection, stream);
         this.PeerScreenSharingConnectionArray.set(user.userId, peer);
 
         for (const peerConnectionListener of this.peerConnectionListeners) {
@@ -294,7 +317,9 @@ export class SimplePeer {
      * Unregisters any held event handler.
      */
     public unregister() {
-        mediaManager.removeUpdateLocalStreamEventListener(this.sendLocalVideoStreamCallback);
+        for (const unsubscriber of this.unsubscribers) {
+            unsubscriber();
+        }
     }
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -318,18 +343,26 @@ export class SimplePeer {
     private receiveWebrtcScreenSharingSignal(data: WebRtcSignalReceivedMessageInterface) {
         if (blackListManager.isBlackListed(data.userId)) return;
         console.log("receiveWebrtcScreenSharingSignal", data);
+        const streamResult = get(screenSharingLocalStreamStore);
+        let stream : MediaStream | null = null;
+        if (streamResult.type === 'success' && streamResult.stream !== null) {
+            stream = streamResult.stream;
+        }
+
         try {
             //if offer type, create peer connection
             if(data.signal.type === "offer"){
-                this.createPeerScreenSharingConnection(data);
+                this.createPeerScreenSharingConnection(data, stream);
             }
             const peer = this.PeerScreenSharingConnectionArray.get(data.userId);
             if (peer !== undefined) {
                 peer.signal(data.signal);
             } else {
                 console.error('Could not find peer whose ID is "'+data.userId+'" in receiveWebrtcScreenSharingSignal');
-                console.info('tentative to create new peer connexion');
-                this.sendLocalScreenSharingStreamToUser(data.userId);
+                console.info('Attempt to create new peer connexion');
+                if (stream) {
+                    this.sendLocalScreenSharingStreamToUser(data.userId, stream);
+                }
             }
         } catch (e) {
             console.error(`receiveWebrtcSignal => ${data.userId}`, e);
@@ -339,21 +372,19 @@ export class SimplePeer {
         }
     }
 
-    private pushVideoToRemoteUser(userId : number) {
+    private pushVideoToRemoteUser(userId: number, streamResult: LocalStreamStoreValue) {
         try {
             const PeerConnection = this.PeerConnectionArray.get(userId);
             if (!PeerConnection) {
                 throw new Error('While adding media, cannot find user with ID ' + userId);
             }
 
-            const result = get(localStreamStore);
+            PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...streamResult.constraints})));
 
-            PeerConnection.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...result.constraints})));
-
-            if (result.type === 'error') {
+            if (streamResult.type === 'error') {
                 return;
             }
-            const localStream: MediaStream | null = result.stream;
+            const localStream: MediaStream | null = streamResult.stream;
 
             if(!localStream){
                 return;
@@ -370,15 +401,11 @@ export class SimplePeer {
         }
     }
 
-    private pushScreenSharingToRemoteUser(userId : number) {
+    private pushScreenSharingToRemoteUser(userId: number, localScreenCapture: MediaStream) {
         const PeerConnection = this.PeerScreenSharingConnectionArray.get(userId);
         if (!PeerConnection) {
             throw new Error('While pushing screen sharing, cannot find user with ID ' + userId);
         }
-        const localScreenCapture: MediaStream | null = mediaManager.localScreenCapture;
-        if(!localScreenCapture){
-            return;
-        }
 
         for (const track of localScreenCapture.getTracks()) {
             PeerConnection.addTrack(track, localScreenCapture);
@@ -386,23 +413,18 @@ export class SimplePeer {
         return;
     }
 
-    public sendLocalVideoStream(){
+    public sendLocalVideoStream(streamResult: LocalStreamStoreValue){
         for (const user of this.Users) {
-            this.pushVideoToRemoteUser(user.userId);
+            this.pushVideoToRemoteUser(user.userId, streamResult);
         }
     }
 
     /**
      * Triggered locally when clicking on the screen sharing button
      */
-    public sendLocalScreenSharingStream() {
-        if (!mediaManager.localScreenCapture) {
-            console.error('Could not find localScreenCapture to share')
-            return;
-        }
-
+    public sendLocalScreenSharingStream(localScreenCapture: MediaStream) {
         for (const user of this.Users) {
-            this.sendLocalScreenSharingStreamToUser(user.userId);
+            this.sendLocalScreenSharingStreamToUser(user.userId, localScreenCapture);
         }
     }
 
@@ -415,11 +437,11 @@ export class SimplePeer {
         }
     }
 
-    private sendLocalScreenSharingStreamToUser(userId: number): void {
+    private sendLocalScreenSharingStreamToUser(userId: number, localScreenCapture: MediaStream): void {
         if (blackListManager.isBlackListed(userId)) return;
         // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
         if (this.PeerScreenSharingConnectionArray.has(userId)) {
-            this.pushScreenSharingToRemoteUser(userId);
+            this.pushScreenSharingToRemoteUser(userId, localScreenCapture);
             return;
         }
 
@@ -427,7 +449,7 @@ export class SimplePeer {
             userId,
             initiator: true
         };
-        const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser);
+        const PeerConnectionScreenSharing = this.createPeerScreenSharingConnection(screenSharingUser, localScreenCapture);
         if (!PeerConnectionScreenSharing) {
             return;
         }

From 588e5566d0239f649aa60e733171cf63896cdf60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 29 May 2021 22:05:47 +0200
Subject: [PATCH 7/8] Fixing buttons design

Fixing the color of camera/microphone/screen sharing buttons that was broken following the migration to Svelte
---
 front/src/Components/CameraControls.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index 98dfa4c5..bd35d230 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -35,21 +35,21 @@
 </script>
 
 <div class="btn-cam-action">
-    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore}>
+    <div class="btn-monitor" on:click={screenSharingClick} class:hide={!$screenSharingAvailableStore} class:enabled={$requestedScreenSharingState}>
         {#if $requestedScreenSharingState}
             <img src={monitorImg} alt="Start screen sharing">
         {:else}
             <img src={monitorCloseImg} alt="Stop screen sharing">
         {/if}
     </div>
-    <div class="btn-video" on:click={cameraClick}>
+    <div class="btn-video" on:click={cameraClick} class:disabled={!$requestedCameraState}>
         {#if $requestedCameraState}
             <img src={cinemaImg} alt="Turn on webcam">
         {:else}
             <img src={cinemaCloseImg} alt="Turn off webcam">
         {/if}
     </div>
-    <div class="btn-micro" on:click={microphoneClick}>
+    <div class="btn-micro" on:click={microphoneClick} class:disabled={!$requestedMicrophoneState}>
         {#if $requestedMicrophoneState}
             <img src={microphoneImg} alt="Turn on microphone">
         {:else}

From 90176da8886b4a311c05f5e0bef8f6e62acdfb2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Sat, 29 May 2021 22:34:38 +0200
Subject: [PATCH 8/8] MediaManager cleanup

- Removing the last reference to the local video stream. Everything is now fetched from the store.
- Remvoing commented code
---
 front/src/WebRtc/MediaManager.ts | 43 --------------------------------
 front/src/WebRtc/SimplePeer.ts   | 26 +++++++++++++------
 front/src/WebRtc/VideoPeer.ts    |  7 +++---
 3 files changed, 22 insertions(+), 54 deletions(-)

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 5ddc4905..5ab603d2 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -8,33 +8,11 @@ import {SoundMeter} from "../Phaser/Components/SoundMeter";
 import {DISABLE_NOTIFICATIONS} from "../Enum/EnvironmentVariable";
 import {
     gameOverlayVisibilityStore, localStreamStore,
-    mediaStreamConstraintsStore,
-    requestedCameraState,
-    requestedMicrophoneState
 } from "../Stores/MediaStore";
 import {
-    requestedScreenSharingState,
-    screenSharingAvailableStore,
     screenSharingLocalStreamStore
 } from "../Stores/ScreenSharingStore";
 
-declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
-const videoConstraint: boolean|MediaTrackConstraints = {
-    width: { min: 640, ideal: 1280, max: 1920 },
-    height: { min: 400, ideal: 720 },
-    frameRate: { ideal: localUserStore.getVideoQualityValue() },
-    facingMode: "user",
-    resizeMode: 'crop-and-scale',
-    aspectRatio: 1.777777778
-};
-const audioConstraint: boolean|MediaTrackConstraints = {
-    //TODO: make these values configurable in the game settings menu and store them in localstorage
-    autoGainControl: false,
-    echoCancellation: true,
-    noiseSuppression: true
-};
-
 export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
 export type StartScreenSharingCallback = (media: MediaStream) => void;
 export type StopScreenSharingCallback = (media: MediaStream) => void;
@@ -43,7 +21,6 @@ export type ShowReportCallBack = (userId: string, userName: string|undefined) =>
 export type HelpCameraSettingsCallBack = () => void;
 
 export class MediaManager {
-    localStream: MediaStream|null = null;
     private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
     webrtcInAudio: HTMLAudioElement;
     //FIX ME SOUNDMETER: check stalability of sound meter calculation
@@ -91,24 +68,8 @@ export class MediaManager {
                 }, this.userInputManager);
                 return;
             }
-
-            /*if (result.constraints.video !== false) {
-                HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide');
-            } else {
-                HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide');
-            }
-            if (result.constraints.audio !== false) {
-                this.enableMicrophoneStyle();
-            } else {
-                this.disableMicrophoneStyle();
-            }*/
-
-            this.localStream = result.stream;
-            //this.myCamVideo.srcObject = this.localStream;
-
         });
 
-        //let screenSharingStream : MediaStream|null;
         screenSharingLocalStreamStore.subscribe((result) => {
             if (result.type === 'error') {
                 console.error(result.error);
@@ -119,14 +80,10 @@ export class MediaManager {
             }
 
             if (result.stream !== null) {
-                //screenSharingStream = result.stream;
-
                 this.addScreenSharingActiveVideo('me', DivImportance.Normal);
                 HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('screen-sharing-me').srcObject = result.stream;
             } else {
                 this.removeActiveScreenSharingVideo('me');
-
-                //screenSharingStream = null;
             }
 
         });
diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index ba2cb05e..caec53c5 100644
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/front/src/WebRtc/SimplePeer.ts
@@ -128,13 +128,19 @@ export class SimplePeer {
         if(!user.initiator){
             return;
         }
-        this.createPeerConnection(user);
+        const streamResult = get(localStreamStore);
+        let stream : MediaStream | null = null;
+        if (streamResult.type === 'success' && streamResult.stream) {
+            stream = streamResult.stream;
+        }
+
+        this.createPeerConnection(user, stream);
     }
 
     /**
      * create peer connection to bind users
      */
-    private createPeerConnection(user : UserSimplePeerInterface) : VideoPeer | null {
+    private createPeerConnection(user : UserSimplePeerInterface, localStream: MediaStream | null) : VideoPeer | null {
         const peerConnection = this.PeerConnectionArray.get(user.userId)
         if (peerConnection) {
             if (peerConnection.destroyed) {
@@ -144,11 +150,11 @@ export class SimplePeer {
                 if (!peerConnexionDeleted) {
                     throw 'Error to delete peer connection';
                 }
-                this.createPeerConnection(user);
+                //return this.createPeerConnection(user, localStream);
             } else {
                 peerConnection.toClose = false;
+                return null;
             }
-            return null;
         }
 
         let name = user.name;
@@ -166,7 +172,7 @@ export class SimplePeer {
         this.lastWebrtcUserName = user.webRtcUser;
         this.lastWebrtcPassword = user.webRtcPassword;
 
-        const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection);
+        const peer = new VideoPeer(user, user.initiator ? user.initiator : false, this.Connection, localStream);
 
         //permit to send message
         mediaManager.addSendMessageCallback(user.userId,(message: string) => {
@@ -208,7 +214,7 @@ export class SimplePeer {
                 if(!peerConnexionDeleted){
                     throw 'Error to delete peer connection';
                 }
-                this.createPeerConnection(user);
+                this.createPeerConnection(user, stream);
             }else {
                 peerConnection.toClose = false;
             }
@@ -327,7 +333,13 @@ export class SimplePeer {
         try {
             //if offer type, create peer connection
             if(data.signal.type === "offer"){
-                this.createPeerConnection(data);
+                const streamResult = get(localStreamStore);
+                let stream : MediaStream | null = null;
+                if (streamResult.type === 'success' && streamResult.stream) {
+                    stream = streamResult.stream;
+                }
+
+                this.createPeerConnection(data, stream);
             }
             const peer = this.PeerConnectionArray.get(data.userId);
             if (peer !== undefined) {
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
index 32e8e97f..5ca8952c 100644
--- a/front/src/WebRtc/VideoPeer.ts
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -27,7 +27,7 @@ export class VideoPeer extends Peer {
     private onBlockSubscribe: Subscription;
     private onUnBlockSubscribe: Subscription;
 
-    constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection) {
+    constructor(public user: UserSimplePeerInterface, initiator: boolean, private connection: RoomConnection, localStream: MediaStream | null) {
         super({
             initiator: initiator ? initiator : false,
             //reconnectTimer: 10000,
@@ -107,7 +107,7 @@ export class VideoPeer extends Peer {
             this._onFinish();
         });
 
-        this.pushVideoToRemoteUser();
+        this.pushVideoToRemoteUser(localStream);
         this.onBlockSubscribe = blackListManager.onBlockStream.subscribe((userId) => {
             if (userId === this.userId) {
                 this.toggleRemoteStream(false);
@@ -190,9 +190,8 @@ export class VideoPeer extends Peer {
         }
     }
 
-    private pushVideoToRemoteUser() {
+    private pushVideoToRemoteUser(localStream: MediaStream | null) {
         try {
-            const localStream: MediaStream | null = mediaManager.localStream;
             this.write(new Buffer(JSON.stringify({type: MESSAGE_TYPE_CONSTRAINT, ...get(obtainedMediaConstraintStore)})));
 
             if(!localStream){