Merge pull request #1798 from thecodingmachine/fix-my-cam

Fix bugs on new camera display

front/src/Components/Video/LocalStreamMediaBox.svelte

@@ -15,7 +15,7 @@
     if (stream) {
         embedScreen = {
             type: "streamable",
-            embed: stream as unknown as Streamable,
+            embed: peer as unknown as Streamable,
         };
     }
 </script>

front/src/Components/Video/ScreenSharingMediaBox.svelte

@@ -31,10 +31,10 @@
         <div class="rtc-error" />
     {/if}
     {#if $streamStore !== null}
-        <!-- svelte-ignore a11y-media-has-caption -->
         <i class="container">
             <span style="background-color: {getColorByString(name)};">{name}</span>
         </i>
+        <!-- svelte-ignore a11y-media-has-caption -->
         <video
             use:srcObject={$streamStore}
             autoplay

front/src/Components/Video/VideoMediaBox.svelte

@@ -50,7 +50,12 @@
     });
 </script>
 
-<div class="video-container" class:no-clikable={!clickable} bind:this={videoContainer}>
+<div
+    class="video-container"
+    class:no-clikable={!clickable}
+    bind:this={videoContainer}
+    on:click={() => (clickable ? highlightedEmbedScreen.toggleHighlight(embedScreen) : null)}
+>
     {#if $statusStore === "connecting"}
         <div class="connecting-spinner" />
     {/if}

front/src/Stores/StreamableCollectionStore.ts

@@ -2,6 +2,7 @@ import { derived, get, Readable } from "svelte/store";
 import { ScreenSharingLocalMedia, screenSharingLocalMedia } from "./ScreenSharingStore";
 import { peerStore, screenSharingStreamStore } from "./PeerStore";
 import type { RemotePeer } from "../WebRtc/SimplePeer";
+import { highlightedEmbedScreen } from "./EmbedScreensStore";
 
 export type Streamable = RemotePeer | ScreenSharingLocalMedia;
 
@@ -25,6 +26,12 @@ function createStreamableCollectionStore(): Readable<Map<string, Streamable>> {
                 addPeer($screenSharingLocalMedia);
             }
 
+            const $highlightedEmbedScreen = get(highlightedEmbedScreen);
+
+            if ($highlightedEmbedScreen?.type === "streamable" && !peers.has($highlightedEmbedScreen.embed.uniqueId)) {
+                highlightedEmbedScreen.removeHighlight();
+            }
+
             set(peers);
         }
     );

front/style/style.scss

@@ -38,8 +38,6 @@ body .message-info.warning{
 .video-container {
     display: flex;
     transition: all 0.2s ease;
-    background-color: #00000099;
-    border-radius: 15px;
     cursor: url('./images/cursor_pointer.png'), pointer;
     width: 100%;
 
@@ -55,7 +53,6 @@ body .message-info.warning{
         max-width: 100%;
         width: 100%;
         cursor: url('./images/cursor_pointer.png'), pointer;
-        border-radius: 15px;
 
         &.mobile{
             width: 100%;