diff --git a/front/dist/resources/logos/cowebsite-swipe.svg b/front/dist/resources/logos/cowebsite-swipe.svg new file mode 100644 index 00000000..1d4f9ebc --- /dev/null +++ b/front/dist/resources/logos/cowebsite-swipe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/front/src/Components/CameraControls.svelte b/front/src/Components/CameraControls.svelte index adac23b0..32f4e2fc 100644 --- a/front/src/Components/CameraControls.svelte +++ b/front/src/Components/CameraControls.svelte @@ -139,6 +139,7 @@ text-align: center; align-content: center; justify-content: flex-end; + z-index: 251; &:hover { div.hide { diff --git a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte index 2fee5fd0..a668bcf6 100644 --- a/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte +++ b/front/src/Components/EmbedScreens/CoWebsiteThumbnailSlot.svelte @@ -2,7 +2,7 @@ import { onMount } from "svelte"; import { ICON_URL } from "../../Enum/EnvironmentVariable"; - import { mainCoWebsite } from "../../Stores/CoWebsiteStore"; + import { coWebsitesNotAsleep, mainCoWebsite } from "../../Stores/CoWebsiteStore"; import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore"; import type { CoWebsite } from "../../WebRtc/CoWebsiteManager"; import { coWebsiteManager } from "../../WebRtc/CoWebsiteManager"; @@ -22,14 +22,22 @@ icon.alt = urlObject.hostname; }); - async function toggleHighlightEmbedScreen() { + async function onClick() { if (vertical) { coWebsiteManager.goToMain(coWebsite); } else if ($mainCoWebsite) { - highlightedEmbedScreen.toggleHighlight({ - type: "cowebsite", - embed: coWebsite, - }); + if ($mainCoWebsite.iframe.id === coWebsite.iframe.id) { + const coWebsites = $coWebsitesNotAsleep; + const newMain = $highlightedEmbedScreen ?? coWebsites.length > 1 ? coWebsites[1] : undefined; + if (newMain) { + coWebsiteManager.goToMain(coWebsite); + } + } else { + highlightedEmbedScreen.toggleHighlight({ + type: "cowebsite", + embed: coWebsite, + }); + } } if ($state === "asleep") { @@ -42,6 +50,16 @@ function noDrag() { return false; } + + let isHighlight: boolean = false; + let isMain: boolean = false; + $: { + isMain = $mainCoWebsite !== undefined && $mainCoWebsite.iframe === coWebsite.iframe; + isHighlight = + $highlightedEmbedScreen !== null && + $highlightedEmbedScreen.type === "cowebsite" && + $highlightedEmbedScreen.embed.iframe === coWebsite.iframe; + }
diff --git a/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte b/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte index 95000daf..03cca902 100644 --- a/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte +++ b/front/src/Components/EmbedScreens/CoWebsitesContainer.svelte @@ -1,13 +1,13 @@ -{#if $coWebsiteThumbails.length > 0} +{#if $coWebsites.length > 0}
- {#each [...$coWebsiteThumbails.values()] as coWebsite, index (coWebsite.iframe.id)} + {#each [...$coWebsites.values()] as coWebsite, index (coWebsite.iframe.id)} {/each}
@@ -16,13 +16,21 @@ diff --git a/front/src/Components/MainLayout.svelte b/front/src/Components/MainLayout.svelte index 6175f540..cf273e50 100644 --- a/front/src/Components/MainLayout.svelte +++ b/front/src/Components/MainLayout.svelte @@ -21,7 +21,7 @@ import ReportMenu from "./ReportMenu/ReportMenu.svelte"; import VisitCard from "./VisitCard/VisitCard.svelte"; import WarningContainer from "./WarningContainer/WarningContainer.svelte"; - import { isMediaBreakpointUp } from "../Utils/BreakpointsUtils"; + import { isMediaBreakpointDown, isMediaBreakpointUp } from "../Utils/BreakpointsUtils"; import CoWebsitesContainer from "./EmbedScreens/CoWebsitesContainer.svelte"; import FollowMenu from "./FollowMenu/FollowMenu.svelte"; import { followStateStore } from "../Stores/FollowStore"; @@ -39,10 +39,12 @@ let mainLayout: HTMLDivElement; - let displayCoWebsiteContainer = isMediaBreakpointUp("md"); + let displayCoWebsiteContainerMd = isMediaBreakpointUp("md"); + let displayCoWebsiteContainerLg = isMediaBreakpointDown("lg"); const resizeObserver = new ResizeObserver(() => { - displayCoWebsiteContainer = isMediaBreakpointUp("md"); + displayCoWebsiteContainerMd = isMediaBreakpointUp("md"); + displayCoWebsiteContainerLg = isMediaBreakpointDown("lg"); }); onMount(() => { @@ -56,7 +58,7 @@ {/if} - {#if $embedScreenLayout === LayoutMode.VideoChat || displayCoWebsiteContainer} + {#if $embedScreenLayout === LayoutMode.VideoChat || displayCoWebsiteContainerMd} {/if} @@ -118,6 +120,10 @@
+ {#if displayCoWebsiteContainerLg} + + {/if} + {#if $layoutManagerActionVisibilityStore} {/if} diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte index 06a86e58..e84d763d 100644 --- a/front/src/Components/MyCamera.svelte +++ b/front/src/Components/MyCamera.svelte @@ -65,8 +65,11 @@ max-height: 20%; transition: transform 1000ms; padding: 0; + background-color: rgba(#000000, 0.6); + background-clip: content-box; overflow: hidden; line-height: 0; + z-index: 250; &.nes-container.is-rounded { border-image-outset: 1; diff --git a/front/src/Stores/CoWebsiteStore.ts b/front/src/Stores/CoWebsiteStore.ts index 57779e58..4227c405 100644 --- a/front/src/Stores/CoWebsiteStore.ts +++ b/front/src/Stores/CoWebsiteStore.ts @@ -1,6 +1,5 @@ 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()); @@ -50,17 +49,3 @@ export const coWebsitesNotAsleep = derived([coWebsites], ([$coWebsites]) => 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)) - ); - }) -); diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts index ae61f35d..70f70227 100644 --- a/front/src/WebRtc/CoWebsiteManager.ts +++ b/front/src/WebRtc/CoWebsiteManager.ts @@ -25,6 +25,7 @@ export const cowebsiteCloseButtonId = "cowebsite-close"; const cowebsiteFullScreenButtonId = "cowebsite-fullscreen"; const cowebsiteOpenFullScreenImageId = "cowebsite-fullscreen-open"; const cowebsiteCloseFullScreenImageId = "cowebsite-fullscreen-close"; +const cowebsiteSwipeButtonId = "cowebsite-swipe"; const cowebsiteSlotBaseDomId = "cowebsite-slot-"; const animationTime = 500; //time used by the css transitions, in ms. @@ -118,8 +119,8 @@ class CoWebsiteManager { this.resizeObserver.observe(this.cowebsiteDom); this.resizeObserver.observe(this.gameOverlayDom); - const buttonCloseCoWebsites = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId); - buttonCloseCoWebsites.addEventListener("click", () => { + const buttonCloseCoWebsite = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId); + buttonCloseCoWebsite.addEventListener("click", () => { const coWebsite = this.getMainCoWebsite(); if (!coWebsite) { @@ -142,6 +143,24 @@ class CoWebsiteManager { buttonFullScreenFrame.blur(); this.fullscreen(); }); + + const buttonSwipe = HtmlUtils.getElementByIdOrFail(cowebsiteSwipeButtonId); + + highlightedEmbedScreen.subscribe((value) => { + if (!value || value.type !== "cowebsite") { + buttonSwipe.style.display = "none"; + return; + } + + buttonSwipe.style.display = "block"; + }); + + buttonSwipe.addEventListener("click", () => { + const highlightedEmbed = get(highlightedEmbedScreen); + if (highlightedEmbed?.type === "cowebsite") { + this.goToMain(highlightedEmbed.embed); + } + }); } public getCoWebsiteBuffer(): HTMLDivElement { @@ -671,6 +690,16 @@ class CoWebsiteManager { } this.removeCoWebsiteFromStack(coWebsite); + + const mainCoWebsite = this.getMainCoWebsite(); + + if (mainCoWebsite) { + this.removeHighlightCoWebsite(mainCoWebsite); + this.goToMain(mainCoWebsite); + this.resizeAllIframes(); + } else { + this.closeMain(); + } resolve(); }) ); diff --git a/front/style/cowebsite/_global.scss b/front/style/cowebsite/_global.scss index b9d8e2ee..52ca1e75 100644 --- a/front/style/cowebsite/_global.scss +++ b/front/style/cowebsite/_global.scss @@ -42,6 +42,14 @@ margin-bottom: auto; flex: 1; justify-content: start; + + #cowebsite-swipe { + display: none; + img { + transform: rotate(0deg) !important; + transform: scale(0.5); + } + } } .top-right-btn {