merged develop

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/CoWebsiteStore.ts

@@ -0,0 +1,51 @@
+import { derived, get, writable } from "svelte/store";
+import type { CoWebsite } from "../WebRtc/CoWebsiteManager";
+
+function createCoWebsiteStore() {
+    const { subscribe, set, update } = writable(Array<CoWebsite>());
+
+    set(Array<CoWebsite>());
+
+    return {
+        subscribe,
+        add: (coWebsite: CoWebsite, position?: number) => {
+            coWebsite.state.subscribe((value) => {
+                update((currentArray) => currentArray);
+            });
+
+            if (position || position === 0) {
+                update((currentArray) => {
+                    if (position === 0) {
+                        return [coWebsite, ...currentArray];
+                    } else if (currentArray.length > position) {
+                        const test = [...currentArray.splice(position, 0, coWebsite)];
+                        return [...currentArray.splice(position, 0, coWebsite)];
+                    }
+
+                    return [...currentArray, coWebsite];
+                });
+                return;
+            }
+
+            update((currentArray) => [...currentArray, coWebsite]);
+        },
+        remove: (coWebsite: CoWebsite) => {
+            update((currentArray) => [
+                ...currentArray.filter((currentCoWebsite) => currentCoWebsite.iframe.id !== coWebsite.iframe.id),
+            ]);
+        },
+        empty: () => {
+            set(Array<CoWebsite>());
+        },
+    };
+}
+
+export const coWebsites = createCoWebsiteStore();
+
+export const coWebsitesNotAsleep = derived([coWebsites], ([$coWebsites]) =>
+    $coWebsites.filter((coWebsite) => get(coWebsite.state) !== "asleep")
+);
+
+export const mainCoWebsite = derived([coWebsites], ([$coWebsites]) =>
+    $coWebsites.find((coWebsite) => get(coWebsite.state) !== "asleep")
+);

front/src/Stores/EmbedScreensStore.ts

@@ -0,0 +1,51 @@
+import { derived, get, writable } from "svelte/store";
+import type { CoWebsite } from "../WebRtc/CoWebsiteManager";
+import { LayoutMode } from "../WebRtc/LayoutManager";
+import { coWebsites } from "./CoWebsiteStore";
+import { Streamable, streamableCollectionStore } from "./StreamableCollectionStore";
+
+export type EmbedScreen =
+    | {
+          type: "streamable";
+          embed: Streamable;
+      }
+    | {
+          type: "cowebsite";
+          embed: CoWebsite;
+      };
+
+function createHighlightedEmbedScreenStore() {
+    const { subscribe, set, update } = writable<EmbedScreen | null>(null);
+
+    return {
+        subscribe,
+        highlight: (embedScreen: EmbedScreen) => {
+            set(embedScreen);
+        },
+        removeHighlight: () => {
+            set(null);
+        },
+        toggleHighlight: (embedScreen: EmbedScreen) => {
+            update((currentEmbedScreen) =>
+                !currentEmbedScreen ||
+                embedScreen.type !== currentEmbedScreen.type ||
+                (embedScreen.type === "cowebsite" &&
+                    currentEmbedScreen.type === "cowebsite" &&
+                    embedScreen.embed.iframe.id !== currentEmbedScreen.embed.iframe.id) ||
+                (embedScreen.type === "streamable" &&
+                    currentEmbedScreen.type === "streamable" &&
+                    embedScreen.embed.uniqueId !== currentEmbedScreen.embed.uniqueId)
+                    ? embedScreen
+                    : null
+            );
+        },
+    };
+}
+
+export const highlightedEmbedScreen = createHighlightedEmbedScreenStore();
+export const embedScreenLayout = writable<LayoutMode>(LayoutMode.Presentation);
+
+export const hasEmbedScreen = derived(
+    [streamableCollectionStore],
+    ($values) => get(streamableCollectionStore).size + get(coWebsites).length > 0
+);

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)
  */

front/src/Stores/Utils/MapStore.ts

@@ -96,6 +96,7 @@ export class MapStore<K, V> extends Map<K, V> implements Readable<Map<K, V>> {
             const unsubscribe = storeByKey.subscribe((newMapValue) => {
                 if (unsubscribeDeepStore) {
                     unsubscribeDeepStore();
+                    unsubscribeDeepStore = undefined;
                 }
                 if (newMapValue === undefined) {
                     set(undefined);
@@ -115,6 +116,7 @@ export class MapStore<K, V> extends Map<K, V> implements Readable<Map<K, V>> {
                 unsubscribe();
                 if (unsubscribeDeepStore) {
                     unsubscribeDeepStore();
+                    unsubscribeDeepStore = undefined;
                 }
             };
         });