Merge pull request #1880 from thecodingmachine/fix-cowebsite-high-master

Hot fixes for co-websites

front/src/Components/EmbedScreens/CamerasContainer.svelte

@@ -3,7 +3,7 @@
     import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
     import MediaBox from "../Video/MediaBox.svelte";
 
-    export let highlightedEmbedScreen: EmbedScreen | null;
+    export let highlightedEmbedScreen: EmbedScreen | undefined;
     export let full = false;
     $: clickable = !full;
 </script>

front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte

@@ -73,9 +73,9 @@
             $mainCoWebsite !== undefined &&
             $mainCoWebsite.getId() === coWebsite.getId();
         isHighlight =
-            $highlightedEmbedScreen !== null &&
+            $highlightedEmbedScreen !== undefined &&
-            $highlightedEmbedScreen.type === "cowebsite" &&
+            $highlightedEmbedScreen?.type === "cowebsite" &&
-            $highlightedEmbedScreen.embed.getId() === coWebsite.getId();
+            $highlightedEmbedScreen?.embed.getId() === coWebsite.getId();
     }
 </script>
 

front/src/Stores/EmbedScreensStore.ts

@@ -15,7 +15,7 @@ export type EmbedScreen =
       };
 
 function createHighlightedEmbedScreenStore() {
-    const { subscribe, set, update } = writable<EmbedScreen | null>(null);
+    const { subscribe, set, update } = writable<EmbedScreen | undefined>(undefined);
 
     return {
         subscribe,
@@ -23,7 +23,7 @@ function createHighlightedEmbedScreenStore() {
             set(embedScreen);
         },
         removeHighlight: () => {
-            set(null);
+            set(undefined);
         },
         toggleHighlight: (embedScreen: EmbedScreen) => {
             update((currentEmbedScreen) =>
@@ -36,7 +36,7 @@ function createHighlightedEmbedScreenStore() {
                     currentEmbedScreen.type === "streamable" &&
                     embedScreen.embed.uniqueId !== currentEmbedScreen.embed.uniqueId)
                     ? embedScreen
-                    : null
+                    : undefined
             );
         },
     };

front/src/WebRtc/CoWebsiteManager.ts

@@ -159,9 +159,17 @@ class CoWebsiteManager {
         });
 
         buttonSwipe.addEventListener("click", () => {
+            const mainCoWebsite = this.getMainCoWebsite();
             const highlightedEmbed = get(highlightedEmbedScreen);
             if (highlightedEmbed?.type === "cowebsite") {
                 this.goToMain(highlightedEmbed.embed);
+
+                if (mainCoWebsite) {
+                    highlightedEmbedScreen.toggleHighlight({
+                        type: "cowebsite",
+                        embed: mainCoWebsite,
+                    });
+                }
             }
         });
     }
@@ -553,6 +561,13 @@ class CoWebsiteManager {
         coWebsites.remove(coWebsite);
         coWebsites.add(coWebsite, 0);
 
+        if (mainCoWebsite) {
+            const iframe = mainCoWebsite.getIframe();
+            if (iframe) {
+                iframe.style.display = "block";
+            }
+        }
+
         if (
             isMediaBreakpointDown("lg") &&
             get(embedScreenLayout) === LayoutMode.Presentation &&
@@ -596,12 +611,20 @@ class CoWebsiteManager {
             .load()
             .then(() => {
                 const mainCoWebsite = this.getMainCoWebsite();
-                if (mainCoWebsite && mainCoWebsite.getId() === coWebsite.getId()) {
+                const highlightedEmbed = get(highlightedEmbedScreen);
+                if (mainCoWebsite) {
+                    if (mainCoWebsite.getId() === coWebsite.getId()) {
                         this.openMain();
 
                         setTimeout(() => {
                             this.fire();
                         }, animationTime);
+                    } else if (!highlightedEmbed) {
+                        highlightedEmbedScreen.toggleHighlight({
+                            type: "cowebsite",
+                            embed: coWebsite,
+                        });
+                    }
                 }
                 this.resizeAllIframes();
             })