From 873c33505437e48c1c98db4d4a88d5cd6b16862f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?David=20N=C3=A9grier?= <d.negrier@thecodingmachine.com>
Date: Tue, 11 Jan 2022 13:52:38 +0100
Subject: [PATCH] Removing too wide border in videos

---
 front/src/Components/MyCamera.svelte          | 17 ++++-------
 front/src/Components/Video/MediaBox.svelte    | 29 ++++++++++++++-----
 .../src/Components/Video/VideoMediaBox.svelte |  4 +++
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte
index c9062008..06a86e58 100644
--- a/front/src/Components/MyCamera.svelte
+++ b/front/src/Components/MyCamera.svelte
@@ -65,8 +65,12 @@
         max-height: 20%;
         transition: transform 1000ms;
         padding: 0;
-        background-color: #00000099;
         overflow: hidden;
+        line-height: 0;
+
+        &.nes-container.is-rounded {
+            border-image-outset: 1;
+        }
     }
 
     .my-cam-video-container.hide {
@@ -76,6 +80,7 @@
     .my-cam-video {
         background-color: #00000099;
         max-height: 20vh;
+        max-width: max(25vw, 150px);
         width: 100%;
         -webkit-transform: scaleX(-1);
         transform: scaleX(-1);
@@ -86,14 +91,4 @@
         color: white;
         padding: 40px 20px;
     }
-
-    @include media-breakpoint-up(md) {
-        .my-cam-video {
-            width: 150px;
-        }
-
-        .my-cam-video-container.hide {
-            right: -160px;
-        }
-    }
 </style>
diff --git a/front/src/Components/Video/MediaBox.svelte b/front/src/Components/Video/MediaBox.svelte
index a59420c2..eca34aa5 100644
--- a/front/src/Components/Video/MediaBox.svelte
+++ b/front/src/Components/Video/MediaBox.svelte
@@ -5,6 +5,7 @@
     import { ScreenSharingPeer } from "../../WebRtc/ScreenSharingPeer";
     import LocalStreamMediaBox from "./LocalStreamMediaBox.svelte";
     import type { Streamable } from "../../Stores/StreamableCollectionStore";
+    import PixelContainer from "../Container/PixelContainer.svelte";
 
     export let streamable: Streamable;
     export let isHightlighted = false;
@@ -19,13 +20,15 @@
     class:mozaic-full-width={mozaicFullWidth}
     class:mozaic-quarter={mozaicQuarter}
 >
-    {#if streamable instanceof VideoPeer}
-        <VideoMediaBox peer={streamable} clickable={isClickable} />
-    {:else if streamable instanceof ScreenSharingPeer}
-        <ScreenSharingMediaBox peer={streamable} clickable={isClickable} />
-    {:else}
-        <LocalStreamMediaBox peer={streamable} clickable={isClickable} cssClass="" />
-    {/if}
+    <div>
+        {#if streamable instanceof VideoPeer}
+            <VideoMediaBox peer={streamable} clickable={isClickable} />
+        {:else if streamable instanceof ScreenSharingPeer}
+            <ScreenSharingMediaBox peer={streamable} clickable={isClickable} />
+        {:else}
+            <LocalStreamMediaBox peer={streamable} clickable={isClickable} cssClass="" />
+        {/if}
+    </div>
 </div>
 
 <style lang="scss">
@@ -40,7 +43,7 @@
         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%;
@@ -90,9 +93,19 @@
             }
         }
 
+        &.nes-container.is-rounded {
+            border-image-outset: 1;
+        }
+
         &.clickable {
             cursor: url("../../../style/images/cursor_pointer.png"), pointer;
         }
+
+        > div {
+            background-color: rgba(0, 0, 0, 0.6);
+            display: flex;
+            width: 100%;
+        }
     }
 
     @include media-breakpoint-only(md) {
diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index a724f704..2994041f 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -83,6 +83,7 @@
     </button>
     <!-- svelte-ignore a11y-media-has-caption -->
     <video
+        class:no-video={!$constraintStore || $constraintStore.video === false}
         use:srcObject={$streamStore}
         autoplay
         playsinline
@@ -115,4 +116,7 @@
             margin-right: 3px;
         }
     }
+    video.no-video {
+        visibility: collapse;
+    }
 </style>