From 9e35f96ce5284c9e6a7d5807ee72ac05315e8af7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Wed, 2 Jun 2021 09:58:00 +0200
Subject: [PATCH] Fixing absolute/relative layouts of Svelte layers

---
 front/src/Components/App.svelte               | 47 ++++++++++------
 front/src/Components/CameraControls.svelte    | 44 +++++++--------
 .../EnableCamera/EnableCameraScene.svelte     | 54 ++++++++++++-------
 front/style/style.scss                        | 10 ++--
 4 files changed, 97 insertions(+), 58 deletions(-)

diff --git a/front/src/Components/App.svelte b/front/src/Components/App.svelte
index cba741fe..d1a18f21 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -22,31 +22,48 @@
 </script>
 
 <div>
-{#if $gameOverlayVisibilityStore}
-    <MyCamera></MyCamera>
-    <CameraControls></CameraControls>
-{/if}
-<div class="absolute-overlay">
     {#if $loginSceneVisibleStore}
-        <LoginScene game={game}></LoginScene>
+        <div>
+            <LoginScene game={game}></LoginScene>
+        </div>
     {/if}
     {#if $selectCharacterSceneVisibleStore}
-        <SelectCharacterScene game={ game }></SelectCharacterScene>
+        <div>
+            <SelectCharacterScene game={ game }></SelectCharacterScene>
+        </div>
     {/if}
     {#if $customCharacterSceneVisibleStore}
-        <CustomCharacterScene game={ game }></CustomCharacterScene>
+        <div>
+           <CustomCharacterScene game={ game }></CustomCharacterScene>
+        </div>
     {/if}
     {#if $selectCompanionSceneVisibleStore}
-        <SelectCompanionScene game={ game }></SelectCompanionScene>
+        <div>
+            <SelectCompanionScene game={ game }></SelectCompanionScene>
+        </div>
     {/if}
     {#if $enableCameraSceneVisibilityStore}
-        <EnableCameraScene game={game}></EnableCameraScene>
+        <div>
+            <EnableCameraScene game={game}></EnableCameraScene>
+        </div>
+    {/if}
+
+    <!--
+    {#if $menuIconVisible}
+        <div>
+            <MenuIcon  />
+        </div>
+    {/if}
+    -->
+    {#if $gameOverlayVisibilityStore}
+        <div>
+            <MyCamera></MyCamera>
+            <CameraControls></CameraControls>
+        </div>
     {/if}
-    <!-- {#if $menuIconVisible}
-    <MenuIcon  />
-    {/if} -->
     {#if $helpCameraSettingsVisibleStore}
-        <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        <div>
+            <HelpCameraSettingsPopup game={ game }></HelpCameraSettingsPopup>
+        </div>
     {/if}
 </div>
-</div>
diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte
index bd35d230..5c17a9fe 100644
--- a/front/src/Components/CameraControls.svelte
+++ b/front/src/Components/CameraControls.svelte
@@ -34,26 +34,28 @@
 
 </script>
 
-<div class="btn-cam-action">
-    <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} 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} class:disabled={!$requestedMicrophoneState}>
-        {#if $requestedMicrophoneState}
-            <img src={microphoneImg} alt="Turn on microphone">
-        {:else}
-            <img src={microphoneCloseImg} alt="Turn off microphone">
-        {/if}
+<div>
+    <div class="btn-cam-action">
+        <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} 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} class:disabled={!$requestedMicrophoneState}>
+            {#if $requestedMicrophoneState}
+                <img src={microphoneImg} alt="Turn on microphone">
+            {:else}
+                <img src={microphoneCloseImg} alt="Turn off microphone">
+            {/if}
+        </div>
     </div>
 </div>
diff --git a/front/src/Components/EnableCamera/EnableCameraScene.svelte b/front/src/Components/EnableCamera/EnableCameraScene.svelte
index 36e31cf6..b5b2748a 100644
--- a/front/src/Components/EnableCamera/EnableCameraScene.svelte
+++ b/front/src/Components/EnableCamera/EnableCameraScene.svelte
@@ -11,6 +11,8 @@
     import {onDestroy} from "svelte";
     import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
     import cinemaCloseImg from "../images/cinema-close.svg";
+    import cinemaImg from "../images/cinema.svg";
+    import microphoneImg from "../images/microphone.svg";
 
     export let game: Game;
     let selectedCamera : string|null = null;
@@ -86,27 +88,33 @@
     <section class="selectWebcamForm">
 
         {#if $cameraListStore.length > 1 }
-        <div class="nes-select">
-            <select bind:value={selectedCamera} on:change={selectCamera}>
-                {#each $cameraListStore as camera}
-                    <option value={camera.deviceId}>
-                        {normalizeDeviceName(camera.label)}
-                    </option>
-                {/each}
-            </select>
-        </div>
+            <div class="control-group">
+                <img src={cinemaImg} alt="Camera" />
+                <div class="nes-select">
+                    <select bind:value={selectedCamera} on:change={selectCamera}>
+                        {#each $cameraListStore as camera}
+                            <option value={camera.deviceId}>
+                                {normalizeDeviceName(camera.label)}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
         {/if}
 
         {#if $microphoneListStore.length > 1 }
-        <div class="nes-select">
-            <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
-                {#each $microphoneListStore as microphone}
-                    <option value={microphone.deviceId}>
-                        {normalizeDeviceName(microphone.label)}
-                    </option>
-                {/each}
-            </select>
-        </div>
+            <div class="control-group">
+                <img src={microphoneImg} alt="Microphone" />
+                <div class="nes-select">
+                    <select bind:value={selectedMicrophone} on:change={selectMicrophone}>
+                        {#each $microphoneListStore as microphone}
+                            <option value={microphone.deviceId}>
+                                {normalizeDeviceName(microphone.label)}
+                            </option>
+                        {/each}
+                    </select>
+                </div>
+            </div>
         {/if}
 
     </section>
@@ -190,6 +198,16 @@
         font-size: 200%;
       }
 
+      .control-group {
+        display: flex;
+        flex-direction: row;
+
+        img {
+          width: 30px;
+          margin-right: 10px;
+        }
+      }
+
       .webrtcsetup{
         /*position: absolute;
         top: 140px;
diff --git a/front/style/style.scss b/front/style/style.scss
index 78cfcc66..ef3df5c5 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -1212,13 +1212,15 @@ div.action.danger p.action-body{
     height: 100%;
     pointer-events: none;
 
-    .absolute-overlay {
-        position: absolute;
+    & > div {
+        position: relative;
         width: 100%;
         height: 100%;
 
-        & > * {
-            position: relative;
+        & > div {
+            position: absolute;
+            width: 100%;
+            height: 100%;
         }
     }
 }