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] 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();