From 9f310383bafb886a86ae8d58f2942cf91e9907d1 Mon Sep 17 00:00:00 2001
From: TabascoEye <tabascoeye@gmail.com>
Date: Thu, 9 Sep 2021 22:58:30 +0200
Subject: [PATCH 1/2] explain new property jitsiWidth

---
 docs/maps/meeting-rooms.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/maps/meeting-rooms.md b/docs/maps/meeting-rooms.md
index 97d1b96f..719e0630 100644
--- a/docs/maps/meeting-rooms.md
+++ b/docs/maps/meeting-rooms.md
@@ -11,6 +11,7 @@ In order to create Jitsi meet zones:
 
 *   You must create a specific layer.
 *   In layer properties, you MUST add a "`jitsiRoom`" property (of type "`string`"). The value of the property is the name of the room in Jitsi. Note: the name of the room will be "slugified" and prepended with the name of the instance of the map (so that different instances of the map have different rooms)
+*   You may also use "jitsiWidth" property (of type "number" between 0 and 100) to control the width of the iframe containing the meeting room.
 
 ## Triggering of the "Jitsi meet" action
 

From d071f5fa901362168430e2d4f983957472a24464 Mon Sep 17 00:00:00 2001
From: Kharhamel <oognic@gmail.com>
Date: Thu, 9 Sep 2021 16:51:02 +0200
Subject: [PATCH 2/2] FIX: the video element should not have a bigger height
 than its container

---
 front/src/Components/Video/VideoMediaBox.svelte | 10 +---------
 front/src/WebRtc/VideoPeer.ts                   |  4 ----
 front/style/mobile-style.scss                   |  1 -
 front/style/style.scss                          |  7 +++++--
 4 files changed, 6 insertions(+), 16 deletions(-)

diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte
index 924bb13a..cc7fb424 100644
--- a/front/src/Components/Video/VideoMediaBox.svelte
+++ b/front/src/Components/Video/VideoMediaBox.svelte
@@ -7,8 +7,6 @@
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
     import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
     import {getColorByString, srcObject} from "./utils";
-    import {obtainedMediaConstraintIsMobileStore} from "../../Stores/MediaStore";
-    import {onDestroy} from "svelte";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -20,12 +18,6 @@
         showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
     }
 
-    let isMobile : boolean|null;
-    const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
-        isMobile = value;
-    });
-    onDestroy(unsubscribe);
-
 </script>
 
 <div class="video-container">
@@ -45,7 +37,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    <video class:mobile="{isMobile === true}" use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
+    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
     <img src={blockSignImg} class="block-logo" alt="Block" />
     {#if $constraintStore && $constraintStore.audio !== false}
         <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>
diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts
index b66a27fe..990adb4e 100644
--- a/front/src/WebRtc/VideoPeer.ts
+++ b/front/src/WebRtc/VideoPeer.ts
@@ -7,7 +7,6 @@ import type { UserSimplePeerInterface } from "./SimplePeer";
 import { readable, Readable, Unsubscriber } from "svelte/store";
 import {
     localStreamStore,
-    obtainedMediaConstraintIsMobileStore,
     obtainedMediaConstraintStore,
     ObtainedMediaStreamConstraints,
 } from "../Stores/MediaStore";
@@ -162,9 +161,6 @@ export class VideoPeer extends Peer {
                 } else {
                     mediaManager.disabledVideoByUserId(this.userId);
                 }
-                if (message.isMobile != undefined) {
-                    obtainedMediaConstraintIsMobileStore.set(message.isMobile);
-                }
             } else if (message.type === MESSAGE_TYPE_MESSAGE) {
                 if (!blackListManager.isBlackListed(this.userUuid)) {
                     chatMessagesStore.addExternalMessage(this.userId, message.message);
diff --git a/front/style/mobile-style.scss b/front/style/mobile-style.scss
index 7f1e770f..ad91b8dc 100644
--- a/front/style/mobile-style.scss
+++ b/front/style/mobile-style.scss
@@ -40,7 +40,6 @@
   .main-section {
     position: absolute;
     width: 100%;
-    min-width: 400px;
 
     & > div {
       z-index: 2;
diff --git a/front/style/style.scss b/front/style/style.scss
index d02b7e11..f66875e3 100644
--- a/front/style/style.scss
+++ b/front/style/style.scss
@@ -44,7 +44,7 @@ body .message-info.warning{
     video {
         width: 100%;
         height: 100%;
-        max-height: 90vh;
+        object-fit: cover;
         cursor: url('./images/cursor_pointer.png'), pointer;
 
         &.mobile{
@@ -76,7 +76,6 @@ body .message-info.warning{
         left: 5px;
         bottom: 5px;
         padding: 10px;
-        z-index: 2;
 
         &.active {
             display: block !important;
@@ -547,6 +546,10 @@ input[type=range]:focus::-ms-fill-upper {
     cursor: url('./images/cursor_pointer.png'), pointer;
     border-radius: 15px 15px 15px 15px;
     pointer-events: auto;
+
+    video {
+        max-height: 21vh;
+    }
 }
 
 .sidebar > div:hover {