Co-website management move to Svelte

front/src/Stores/CoWebsiteStore.ts

@@ -0,0 +1,66 @@
+import { derived, get, writable } from "svelte/store";
+import type { CoWebsite } from "../WebRtc/CoWebsiteManager";
+import { highlightedEmbedScreen } from "./EmbedScreensStore";
+
+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")
+);
+
+export const coWebsiteThumbails = derived(
+    [coWebsites, highlightedEmbedScreen, mainCoWebsite],
+    ([$coWebsites, highlightedEmbedScreen, $mainCoWebsite]) =>
+        $coWebsites.filter((coWebsite, index) => {
+            return (
+                (!$mainCoWebsite || $mainCoWebsite.iframe.id !== coWebsite.iframe.id) &&
+                (!highlightedEmbedScreen ||
+                    highlightedEmbedScreen.type !== "cowebsite" ||
+                    (highlightedEmbedScreen.type === "cowebsite" &&
+                        highlightedEmbedScreen.embed.iframe.id !== coWebsite.iframe.id))
+            );
+        })
+);

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
+);