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; - } - } 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} - - {:else if streamable instanceof ScreenSharingPeer} - - {:else} - - {/if} +
+ {#if streamable instanceof VideoPeer} + + {:else if streamable instanceof ScreenSharingPeer} + + {:else} + + {/if} +