Improve game overlay UI

front/src/Stores/BiggestAvailableAreaStore.ts

@@ -2,14 +2,14 @@ import { get, writable } from "svelte/store";
 import type { Box } from "../WebRtc/LayoutManager";
 import { HtmlUtils } from "../WebRtc/HtmlUtils";
 import { LayoutMode } from "../WebRtc/LayoutManager";
-import { layoutModeStore } from "./StreamableCollectionStore";
+import { embedScreenLayout } from "./EmbedScreensStore";
 
 /**
  * Tries to find the biggest available box of remaining space (this is a space where we can center the character)
  */
 function findBiggestAvailableArea(): Box {
     const game = HtmlUtils.querySelectorOrFail<HTMLCanvasElement>("#game canvas");
-    if (get(layoutModeStore) === LayoutMode.VideoChat) {
+    if (get(embedScreenLayout) === LayoutMode.VideoChat) {
         const children = document.querySelectorAll<HTMLDivElement>("div.chat-mode > div");
         const htmlChildren = Array.from(children.values());
 

front/src/Stores/GameOverlayStoreVisibility.ts

@@ -1,17 +0,0 @@
-import { writable } from "svelte/store";
-
-/**
- * A store that contains whether the game overlay is shown or not.
- * Typically, the overlay is hidden when entering Jitsi meet.
- */
-function createGameOverlayVisibilityStore() {
-    const { subscribe, set, update } = writable(false);
-
-    return {
-        subscribe,
-        showGameOverlay: () => set(true),
-        hideGameOverlay: () => set(false),
-    };
-}
-
-export const gameOverlayVisibilityStore = createGameOverlayVisibilityStore();

front/src/Stores/LayoutManagerStore.ts

@@ -51,6 +51,6 @@ function createLayoutManagerAction() {
 
 export const layoutManagerActionStore = createLayoutManagerAction();
 
-export const layoutManagerVisibilityStore = derived(layoutManagerActionStore, ($layoutManagerActionStore) => {
+export const layoutManagerActionVisibilityStore = derived(layoutManagerActionStore, ($layoutManagerActionStore) => {
     return !!$layoutManagerActionStore.length;
 });

front/src/Stores/MediaStore.ts

@@ -6,7 +6,7 @@ import { BrowserTooOldError } from "./Errors/BrowserTooOldError";
 import { errorStore } from "./ErrorStore";
 import { getNavigatorType, isIOS, NavigatorType } from "../WebRtc/DeviceUtils";
 import { WebviewOnOldIOS } from "./Errors/WebviewOnOldIOS";
-import { gameOverlayVisibilityStore } from "./GameOverlayStoreVisibility";
+import { myCameraVisibilityStore } from "./MyCameraStoreVisibility";
 import { peerStore } from "./PeerStore";
 import { privacyShutdownStore } from "./PrivacyShutdownStore";
 import { MediaStreamConstraintsError } from "./Errors/MediaStreamConstraintsError";
@@ -233,7 +233,7 @@ export const mediaStreamConstraintsStore = derived(
     [
         requestedCameraState,
         requestedMicrophoneState,
-        gameOverlayVisibilityStore,
+        myCameraVisibilityStore,
         enableCameraSceneVisibilityStore,
         videoConstraintStore,
         audioConstraintStore,
@@ -245,7 +245,7 @@ export const mediaStreamConstraintsStore = derived(
         [
             $requestedCameraState,
             $requestedMicrophoneState,
-            $gameOverlayVisibilityStore,
+            $myCameraVisibilityStore,
             $enableCameraSceneVisibilityStore,
             $videoConstraintStore,
             $audioConstraintStore,
@@ -283,7 +283,7 @@ export const mediaStreamConstraintsStore = derived(
         }
 
         // Disable webcam and microphone when in a Jitsi
-        if ($gameOverlayVisibilityStore === false) {
+        if ($myCameraVisibilityStore === false) {
             currentVideoConstraint = false;
             currentAudioConstraint = false;
         }

front/src/Stores/MyCameraStoreVisibility.ts

@@ -0,0 +1,8 @@
+import { writable } from "svelte/store";
+
+/**
+ * A store that contains whether my camera & actions is shown or not.
+ * Typically, the overlay is hidden when entering Jitsi meet.
+ */
+
+export const myCameraVisibilityStore = writable(false);

front/src/Stores/ScreenSharingStore.ts

@@ -1,7 +1,7 @@
 import { derived, Readable, readable, writable } from "svelte/store";
 import { peerStore } from "./PeerStore";
 import type { LocalStreamStoreValue } from "./MediaStore";
-import { gameOverlayVisibilityStore } from "./GameOverlayStoreVisibility";
+import { myCameraVisibilityStore } from "./MyCameraStoreVisibility";
 
 declare const navigator: any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
@@ -41,8 +41,8 @@ let previousComputedAudioConstraint: boolean | MediaTrackConstraints = false;
  * A store containing the media constraints we want to apply.
  */
 export const screenSharingConstraintsStore = derived(
-    [requestedScreenSharingState, gameOverlayVisibilityStore, peerStore],
-    ([$requestedScreenSharingState, $gameOverlayVisibilityStore, $peerStore], set) => {
+    [requestedScreenSharingState, myCameraVisibilityStore, peerStore],
+    ([$requestedScreenSharingState, $myCameraVisibilityStore, $peerStore], set) => {
         let currentVideoConstraint: boolean | MediaTrackConstraints = true;
         let currentAudioConstraint: boolean | MediaTrackConstraints = false;
 
@@ -53,7 +53,7 @@ export const screenSharingConstraintsStore = derived(
         }
 
         // Disable screen sharing when in a Jitsi
-        if (!$gameOverlayVisibilityStore) {
+        if (!$myCameraVisibilityStore) {
             currentVideoConstraint = false;
             currentAudioConstraint = false;
         }

front/src/Stores/StreamableCollectionStore.ts

@@ -1,13 +1,10 @@
-import { derived, get, Readable, writable } from "svelte/store";
+import { derived, get, Readable } from "svelte/store";
 import { ScreenSharingLocalMedia, screenSharingLocalMedia } from "./ScreenSharingStore";
 import { peerStore, screenSharingStreamStore } from "./PeerStore";
 import type { RemotePeer } from "../WebRtc/SimplePeer";
-import { LayoutMode } from "../WebRtc/LayoutManager";
 
 export type Streamable = RemotePeer | ScreenSharingLocalMedia;
 
-export const layoutModeStore = writable<LayoutMode>(LayoutMode.Presentation);
-
 /**
  * A store that contains everything that can produce a stream (so the peers + the local screen sharing stream)
  */