Menu bar for buttons

front/dist/resources/logos/cowebsite-swipe.svg

@@ -0,0 +1 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><defs><image  width="12" height="14" id="img1" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAOAQMAAAAhc2+vAAAAAXNSR0IB2cksfwAAAAZQTFRFAAAA////pdmf3QAAAAJ0Uk5TAP9bkSK1AAAAJUlEQVR4nGNgOMDAoMDw/wMDCDgwMDQwQIAASBgE/j8ACRswAACLjwYPIknTggAAAABJRU5ErkJggg=="/><image  width="12" height="12" id="img2" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMAgMAAAArG7R0AAAAAXNSR0IB2cksfwAAAAlQTFRFAAAA/////wAAzV63nAAAAAN0Uk5TAP8BHlUJOgAAACJJREFUeJxjYGAQYGBgYGEIDQ0F0xA+BwMDEi80NASqigEAOD8CVqGVgwsAAAAASUVORK5CYII="/></defs><style></style><use  href="#img1" x="2" y="1" /><use  href="#img2" x="2" y="2" /></svg>

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 {

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({
+            if ($mainCoWebsite.iframe.id === coWebsite.iframe.id) {
-                type: "cowebsite",
+                const coWebsites = $coWebsitesNotAsleep;
-                embed: coWebsite,
+                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;
+    }
 </script>
 
 <div
@@ -50,60 +68,61 @@
     class:asleep={$state === "asleep"}
     class:loading={$state === "loading"}
     class:ready={$state === "ready"}
+    class:displayed={isMain || isHighlight}
     class:vertical
-    on:click={toggleHighlightEmbedScreen}
+    on:click={onClick}
 >
     <img class="cowebsite-icon noselect nes-pointer" bind:this={icon} on:dragstart|preventDefault={noDrag} alt="" />
 </div>
 
 <style lang="scss">
-    .cowebsite-thumbnail::before {
-        content: "";
-        position: absolute;
-        width: 58px;
-        height: 58px;
-        left: -8px;
-        top: -8px;
-
-        margin: 4px;
-
-        border-style: solid;
-        border-width: 4px;
-        border-image-slice: 3;
-        border-image-width: 3;
-        border-image-repeat: stretch;
-        border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
-        border-image-outset: 1;
-    }
-
-    .cowebsite-thumbnail.vertical::before {
-        width: 48px;
-        height: 48px;
-    }
-
     .cowebsite-thumbnail {
-
         position: relative;
         padding: 0;
         background-color: rgba(#000000, 0.6);
-        margin: 1%;
+        margin: 12px;
         margin-top: auto;
         margin-bottom: auto;
 
-        .cowebsite-icon {
+        &::before {
-            width: 50px;
+            content: "";
-            height: 50px;
+            position: absolute;
-            object-fit: cover;
+            width: 58px;
+            height: 58px;
+            left: -8px;
+            top: -8px;
+
+            margin: 4px;
+
+            border-style: solid;
+            border-width: 4px;
+            border-image-slice: 3;
+            border-image-width: 3;
+            border-image-repeat: stretch;
+            border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
+            border-image-outset: 1;
         }
 
         &.vertical {
             margin: 7px;
+
+            &::before {
+                width: 48px;
+                height: 48px;
+            }
+
             .cowebsite-icon {
                 width: 40px;
                 height: 40px;
             }
         }
 
+        &.displayed {
+            &:not(.vertical) {
+                animation: activeThumbnail 300ms ease-in 0s forwards;
+            }
+        }
+
         &.asleep {
             filter: grayscale(100%);
             --webkit-filter: grayscale(100%);
@@ -113,6 +132,12 @@
             animation: 2500ms ease-in-out 0s infinite alternate backgroundLoading;
         }
 
+        &.ready {
+            &::before {
+                border-image-source: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="8" height="8" xmlns="http://www.w3.org/2000/svg"><path d="M3 1 h1 v1 h-1 z M4 1 h1 v1 h-1 z M2 2 h1 v1 h-1 z M5 2 h1 v1 h-1 z M1 3 h1 v1 h-1 z M6 3 h1 v1 h-1 z M1 4 h1 v1 h-1 z M6 4 h1 v1 h-1 z M2 5 h1 v1 h-1 z M5 5 h1 v1 h-1 z M3 6 h1 v1 h-1 z M4 6 h1 v1 h-1 z" fill="rgb(38, 74, 110)" /></svg>');
+            }
+        }
+
         @keyframes backgroundLoading {
             0% {
                 background-color: rgba(#000000, 0.6);
@@ -122,5 +147,21 @@
                 background-color: #25598e;
             }
         }
+
+        @keyframes activeThumbnail {
+            0% {
+                transform: translateY(0);
+            }
+
+            100% {
+                transform: translateY(-15px);
+            }
+        }
+
+        .cowebsite-icon {
+            width: 50px;
+            height: 50px;
+            object-fit: cover;
+        }
     }
 </style>

front/src/Components/EmbedScreens/CoWebsitesContainer.svelte

@@ -1,13 +1,13 @@
 <script lang="typescript">
-    import { coWebsiteThumbails } from "../../Stores/CoWebsiteStore";
+    import { coWebsites } from "../../Stores/CoWebsiteStore";
     import CoWebsiteThumbnail from "./CoWebsiteThumbnailSlot.svelte";
 
     export let vertical = false;
 </script>
 
-{#if $coWebsiteThumbails.length > 0}
+{#if $coWebsites.length > 0}
     <div id="cowebsite-thumbnail-container" class:vertical>
-        {#each [...$coWebsiteThumbails.values()] as coWebsite, index (coWebsite.iframe.id)}
+        {#each [...$coWebsites.values()] as coWebsite, index (coWebsite.iframe.id)}
             <CoWebsiteThumbnail {index} {coWebsite} {vertical} />
         {/each}
     </div>
@@ -16,13 +16,21 @@
 <style lang="scss">
     #cowebsite-thumbnail-container {
         pointer-events: all;
-        height: 12%;
+        height: 100px;
+        width: 100%;
         display: flex;
+        position: absolute;
+        bottom: 5px;
+        left: 2%;
         overflow-x: auto;
         overflow-y: hidden;
 
         &.vertical {
             height: auto !important;
+            width: auto !important;
+            bottom: auto !important;
+            left: auto !important;
+            position: relative;
             overflow-x: hidden;
             overflow-y: auto;
             flex-direction: column;

front/src/Components/EmbedScreens/Layouts/PresentationLayout.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import { highlightedEmbedScreen } from "../../../Stores/EmbedScreensStore";
     import CamerasContainer from "../CamerasContainer.svelte";
-    import CoWebsitesContainer from "../CoWebsitesContainer.svelte";
     import MediaBox from "../../Video/MediaBox.svelte";
     import { coWebsiteManager } from "../../../WebRtc/CoWebsiteManager";
     import { afterUpdate, onMount } from "svelte";
@@ -22,19 +21,6 @@
         }
     }
 
-    function minimiseCoWebsite() {
-        if ($highlightedEmbedScreen?.type === "cowebsite") {
-            highlightedEmbedScreen.removeHighlight();
-            coWebsiteManager.resizeAllIframes();
-        }
-    }
-
-    function expandCoWebsite() {
-        if ($highlightedEmbedScreen?.type === "cowebsite") {
-            coWebsiteManager.goToMain($highlightedEmbedScreen.embed);
-        }
-    }
-
     afterUpdate(() => {
         if ($highlightedEmbedScreen) {
             coWebsiteManager.resizeAllIframes();
@@ -88,14 +74,6 @@
                                 class="highlighted-cowebsite nes-container is-rounded"
                             >
                                 <div class="actions">
-                                    <button type="button" class="nes-btn is-primary expand" on:click={expandCoWebsite}
-                                        >></button
-                                    >
-                                    <button
-                                        type="button"
-                                        class="nes-btn is-secondary minimise"
-                                        on:click={minimiseCoWebsite}>=</button
-                                    >
                                     <button type="button" class="nes-btn is-error close" on:click={closeCoWebsite}
                                         >&times;</button
                                     >
@@ -105,10 +83,6 @@
                     {/if}
                 {/if}
             </div>
-
-            {#if displayCoWebsiteContainer}
-                <CoWebsitesContainer />
-            {/if}
         </div>
 
         {#if $peerStore.size > 0}
@@ -143,13 +117,13 @@
     }
 
     #main-embed-screen {
-        height: 82%;
+        height: 100%;
         margin-bottom: 3%;
 
         .highlighted-cowebsite {
             height: 100% !important;
             width: 96%;
-            /*background-color: rgba(#000000, 0.6);*/
+            background-color: rgba(#000000, 0.6);
             margin: 0 !important;
 
             .actions {
@@ -164,10 +138,6 @@
                     pointer-events: all;
                 }
             }
-
-            &.nes-container.is-rounded {
-              border-image-outset: 1;
-            }
         }
     }
 </style>

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 @@
             <MenuIcon />
         {/if}
 
-        {#if $embedScreenLayout === LayoutMode.VideoChat || displayCoWebsiteContainer}
+        {#if $embedScreenLayout === LayoutMode.VideoChat || displayCoWebsiteContainerMd}
             <CoWebsitesContainer vertical={true} />
         {/if}
     </aside>
@@ -118,6 +120,10 @@
     </section>
 
     <section id="main-layout-baseline">
+        {#if displayCoWebsiteContainerLg}
+            <CoWebsitesContainer />
+        {/if}
+
         {#if $layoutManagerActionVisibilityStore}
             <LayoutActionManager />
         {/if}

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;

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<CoWebsite>());
@@ -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))
-            );
-        })
-);

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);
+        const buttonCloseCoWebsite = HtmlUtils.getElementByIdOrFail(cowebsiteCloseButtonId);
-        buttonCloseCoWebsites.addEventListener("click", () => {
+        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();
                 })
         );

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 {