diff --git a/front/src/Components/EmbedScreens/CamerasContainer.svelte b/front/src/Components/EmbedScreens/CamerasContainer.svelte index 208ae529..6b4382d9 100644 --- a/front/src/Components/EmbedScreens/CamerasContainer.svelte +++ b/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; diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte index b01dbf0a..e7345223 100644 --- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte +++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte @@ -73,9 +73,9 @@ $mainCoWebsite !== undefined && $mainCoWebsite.getId() === coWebsite.getId(); isHighlight = - $highlightedEmbedScreen !== null && - $highlightedEmbedScreen.type === "cowebsite" && - $highlightedEmbedScreen.embed.getId() === coWebsite.getId(); + $highlightedEmbedScreen !== undefined && + $highlightedEmbedScreen?.type === "cowebsite" && + $highlightedEmbedScreen?.embed.getId() === coWebsite.getId(); } diff --git a/front/src/Stores/EmbedScreensStore.ts b/front/src/Stores/EmbedScreensStore.ts index 724733b3..172ec45b 100644 --- a/front/src/Stores/EmbedScreensStore.ts +++ b/front/src/Stores/EmbedScreensStore.ts @@ -15,7 +15,7 @@ export type EmbedScreen = }; function createHighlightedEmbedScreenStore() { - const { subscribe, set, update } = writable(null); + const { subscribe, set, update } = writable(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 ); }, }; diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index a5c57ed6..a33432dc 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/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()) { - this.openMain(); + const highlightedEmbed = get(highlightedEmbedScreen); + if (mainCoWebsite) { + if (mainCoWebsite.getId() === coWebsite.getId()) { + this.openMain(); - setTimeout(() => { - this.fire(); - }, animationTime); + setTimeout(() => { + this.fire(); + }, animationTime); + } else if (!highlightedEmbed) { + highlightedEmbedScreen.toggleHighlight({ + type: "cowebsite", + embed: coWebsite, + }); + } } this.resizeAllIframes(); })