Improve game overlay UI

front/src/Components/Video/LocalStreamMediaBox.svelte

@@ -1,15 +1,33 @@
 <script lang="typescript">
+    import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
+    import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
     import type { ScreenSharingLocalMedia } from "../../Stores/ScreenSharingStore";
-    import { videoFocusStore } from "../../Stores/VideoFocusStore";
+    import type { Streamable } from "../../Stores/StreamableCollectionStore";
     import { srcObject } from "./utils";
 
+    export let clickable = false;
+
     export let peer: ScreenSharingLocalMedia;
     let stream = peer.stream;
     export let cssClass: string | undefined;
+    let embedScreen: EmbedScreen;
+
+    if (stream) {
+        embedScreen = {
+            type: "streamable",
+            embed: stream as unknown as Streamable,
+        };
+    }
 </script>
 
 <div class="video-container {cssClass ? cssClass : ''}" class:hide={!stream}>
     {#if stream}
-        <video use:srcObject={stream} autoplay muted playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
+        <video
+            use:srcObject={stream}
+            autoplay
+            muted
+            playsinline
+            on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}
+        />
     {/if}
 </div>

front/src/Components/Video/MediaBox.svelte

@@ -7,14 +7,65 @@
     import type { Streamable } from "../../Stores/StreamableCollectionStore";
 
     export let streamable: Streamable;
+    export let isHightlighted = false;
+    export let clickable = false;
 </script>
 
-<div class="media-container">
+<div class="media-container nes-container is-rounded {isHightlighted ? 'hightlighted' : ''}" class:clickable>
     {#if streamable instanceof VideoPeer}
-        <VideoMediaBox peer={streamable} />
+        <VideoMediaBox peer={streamable} {clickable} />
     {:else if streamable instanceof ScreenSharingPeer}
-        <ScreenSharingMediaBox peer={streamable} />
+        <ScreenSharingMediaBox peer={streamable} {clickable} />
     {:else}
-        <LocalStreamMediaBox peer={streamable} cssClass="" />
+        <LocalStreamMediaBox peer={streamable} {clickable} cssClass="" />
     {/if}
 </div>
+
+<style lang="scss">
+    @import "../../../style/breakpoints.scss";
+
+    .media-container {
+        display: flex;
+        margin-top: 4%;
+        margin-bottom: 4%;
+        margin-left: auto;
+        margin-right: auto;
+        transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s,
+            max-width 0.2s;
+        pointer-events: auto;
+        background-color: rgba(0, 0, 0, 0.6);
+        padding: 0;
+        max-height: 85%;
+        max-width: 85%;
+
+        &:hover {
+            margin-top: 2%;
+            margin-bottom: 2%;
+        }
+
+        &.hightlighted {
+            margin-top: 0% !important;
+            margin-bottom: 0% !important;
+            margin-left: 0% !important;
+
+            max-height: 100% !important;
+            max-width: 96% !important;
+
+            &:hover {
+                margin-top: 0% !important;
+                margin-bottom: 0% !important;
+            }
+        }
+
+        &.clickable {
+            cursor: url("../../../style/images/cursor_pointer.png"), pointer;
+        }
+    }
+
+    @include media-breakpoint-only(md) {
+        .media-container {
+            margin-top: 10%;
+            margin-bottom: 10%;
+        }
+    }
+</style>

front/src/Components/Video/PresentationLayout.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-    import { streamableCollectionStore } from "../../Stores/StreamableCollectionStore";
-    import { videoFocusStore } from "../../Stores/VideoFocusStore";
-    import { afterUpdate } from "svelte";
-    import { biggestAvailableAreaStore } from "../../Stores/BiggestAvailableAreaStore";
-    import MediaBox from "./MediaBox.svelte";
-
-    afterUpdate(() => {
-        biggestAvailableAreaStore.recompute();
-    });
-</script>
-
-<div class="main-section">
-    {#if $videoFocusStore}
-        {#key $videoFocusStore.uniqueId}
-            <MediaBox streamable={$videoFocusStore} />
-        {/key}
-    {/if}
-</div>
-<aside class="sidebar">
-    {#each [...$streamableCollectionStore.values()] as peer (peer.uniqueId)}
-        {#if peer !== $videoFocusStore}
-            <MediaBox streamable={peer} />
-        {/if}
-    {/each}
-</aside>

front/src/Components/Video/ScreenSharingMediaBox.svelte

@@ -1,12 +1,26 @@
 <script lang="ts">
+    import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
+    import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
+    import type { Streamable } from "../../Stores/StreamableCollectionStore";
+
     import type { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
-    import { videoFocusStore } from "../../Stores/VideoFocusStore";
     import { getColorByString, srcObject } from "./utils";
 
+    export let clickable = false;
+
     export let peer: ScreenSharingPeer;
     let streamStore = peer.streamStore;
     let name = peer.userName;
     let statusStore = peer.statusStore;
+
+    let embedScreen: EmbedScreen;
+
+    if (peer) {
+        embedScreen = {
+            type: "streamable",
+            embed: peer as unknown as Streamable,
+        };
+    }
 </script>
 
 <div class="video-container">
@@ -20,7 +34,12 @@
         <i style="background-color: {getColorByString(name)};">{name}</i>
     {:else}
         <!-- svelte-ignore a11y-media-has-caption -->
-        <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
+        <video
+            use:srcObject={$streamStore}
+            autoplay
+            playsinline
+            on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}
+        />
     {/if}
 </div>
 

front/src/Components/Video/VideoMediaBox.svelte

@@ -4,11 +4,17 @@
     import microphoneCloseImg from "../images/microphone-close.svg";
     import reportImg from "./images/report.svg";
     import blockSignImg from "./images/blockSign.svg";
-    import { videoFocusStore } from "../../Stores/VideoFocusStore";
     import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
     import { getColorByString, srcObject } from "./utils";
+    import { highlightedEmbedScreen } from "../../Stores/EmbedScreensStore";
+    import type { EmbedScreen } from "../../Stores/EmbedScreensStore";
+    import type { Streamable } from "../../Stores/StreamableCollectionStore";
 
     import Woka from "../Woka/Woka.svelte";
+    import { onMount } from "svelte";
+    import { isMediaBreakpointOnly } from "../../Utils/BreakpointsUtils";
+
+    export let clickable = false;
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -19,9 +25,32 @@
     function openReport(peer: VideoPeer): void {
         showReportScreenStore.set({ userId: peer.userId, userName: peer.userName });
     }
+
+    let embedScreen: EmbedScreen;
+    let videoContainer: HTMLDivElement;
+    let minimized = isMediaBreakpointOnly("md");
+
+    if (peer) {
+        embedScreen = {
+            type: "streamable",
+            embed: peer as unknown as Streamable,
+        };
+    }
+
+    function noDrag() {
+        return false;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+        minimized = isMediaBreakpointOnly("md");
+    });
+
+    onMount(() => {
+        resizeObserver.observe(videoContainer);
+    });
 </script>
 
-<div class="video-container">
+<div class="video-container" class:no-clikable={!clickable} bind:this={videoContainer}>
     {#if $statusStore === "connecting"}
         <div class="connecting-spinner" />
     {/if}
@@ -30,42 +59,60 @@
     {/if}
     <!-- {#if !$constraintStore || $constraintStore.video === false} -->
     <i
-        class="container {!$constraintStore || $constraintStore.video === false ? '' : 'minimized'}"
+        class="container"
+        class:has-video={$constraintStore && $constraintStore.video === true}
+        class:minimized={(!$constraintStore || $constraintStore.video !== true) && minimized}
         style="background-color: {getColorByString(name)};"
     >
-        <span>{peer.userName}</span>
+        <span style="noselect">{peer.userName}</span>
         <div class="woka-icon"><Woka userId={peer.userId} placeholderSrc={""} /></div>
     </i>
     <!-- {/if} -->
     {#if $constraintStore && $constraintStore.audio === false}
-        <img src={microphoneCloseImg} class="active" alt="Muted" />
+        <img
+            src={microphoneCloseImg}
+            class="active noselect"
+            draggable="false"
+            on:dragstart|preventDefault={noDrag}
+            alt="Muted"
+        />
     {/if}
     <button class="report" on:click={() => openReport(peer)}>
-        <img alt="Report this user" src={reportImg} />
-        <span>Report/Block</span>
+        <img alt="Report this user" draggable="false" on:dragstart|preventDefault={noDrag} src={reportImg} />
+        <span class="noselect">Report/Block</span>
     </button>
     <!-- svelte-ignore a11y-media-has-caption -->
-    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)} />
-    <img src={blockSignImg} class="block-logo" alt="Block" />
+    <video
+        use:srcObject={$streamStore}
+        autoplay
+        playsinline
+        on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}
+    />
+    <img src={blockSignImg} draggable="false" on:dragstart|preventDefault={noDrag} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore} />
     {/if}
 </div>
 
-<style>
+<style lang="scss">
     .container {
         display: flex;
         flex-direction: column;
         padding-top: 15px;
-    }
 
-    .minimized {
-        left: auto;
-        transform: scale(0.5);
-        opacity: 0.5;
-    }
+        &.has-video {
+            left: auto;
+            transform: scale(0.5);
+            opacity: 0.5;
+        }
 
-    .woka-icon {
-        margin-right: 3px;
+        &.minimized {
+            transform: scale(0.5);
+            opacity: 0.5;
+        }
+
+        .woka-icon {
+            margin-right: 3px;
+        }
     }
 </style>

front/src/Components/Video/VideoOverlay.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-    import { LayoutMode } from "../../WebRtc/LayoutManager";
-    import { layoutModeStore } from "../../Stores/StreamableCollectionStore";
-    import PresentationLayout from "./PresentationLayout.svelte";
-    import ChatLayout from "./ChatLayout.svelte";
+    // import {LayoutMode} from "../../WebRtc/LayoutManager";
+    // import {layoutModeStore} from "../../Stores/StreamableCollectionStore";
+    // import PresentationLayout from "./PresentationLayout.svelte";
+    // import ChatLayout from "./ChatLayout.svelte";
 </script>
 
 <div class="video-overlay">
-    {#if $layoutModeStore === LayoutMode.Presentation}
+    <!-- {#if $layoutModeStore === LayoutMode.Presentation }
         <PresentationLayout />
     {:else}
         <ChatLayout />
-    {/if}
+    {/if} -->
 </div>
 
 <style lang="scss">