Improve mobile camera shown (#1354)

- Add new store to send mobile size
 - Update style to show video for mobile size

front/src/Components/Video/VideoMediaBox.svelte

@@ -7,6 +7,8 @@
     import {videoFocusStore} from "../../Stores/VideoFocusStore";
     import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
     import {getColorByString, srcObject} from "./utils";
+    import {localStreamStore, obtainedMediaConstraintIsMobileStore} from "../../Stores/MediaStore";
+    import {onDestroy} from "svelte";
 
     export let peer: VideoPeer;
     let streamStore = peer.streamStore;
@@ -18,6 +20,13 @@
         showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
     }
 
+    let isMobile : boolean|null;
+    const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
+        console.log('unsubscribe => obtainedMediaConstraintIsMobileStore', value);
+        isMobile = value;
+    });
+    onDestroy(unsubscribe);
+
 </script>
 
 <div class="video-container">
@@ -37,7 +46,7 @@
         <img alt="Report this user" src={reportImg}>
         <span>Report/Block</span>
     </button>
-    <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
+    <video class:mobile="{isMobile === true}" 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>

front/src/Stores/MediaStore.ts

@@ -576,3 +576,8 @@ localStreamStore.subscribe((streamResult) => {
         }
     }
 });
+
+/**
+ * A store containing the real active media is mobile
+ */
+export const obtainedMediaConstraintIsMobileStore = writable(false);

front/src/WebRtc/ScreenSharingPeer.ts

@@ -5,6 +5,7 @@ import type { UserSimplePeerInterface } from "./SimplePeer";
 import { Readable, readable } from "svelte/store";
 import { videoFocusStore } from "../Stores/VideoFocusStore";
 import { getIceServersConfig } from "../Components/Video/utils";
+import { isMobile } from "../Enum/EnvironmentVariable";
 
 const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
 
@@ -175,6 +176,8 @@ export class ScreenSharingPeer extends Peer {
 
     public stopPushingScreenSharingToRemoteUser(stream: MediaStream) {
         this.removeStream(stream);
-        this.write(new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true })));
+        this.write(
+            new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, streamEnded: true, isMobile: isMobile() }))
+        );
     }
 }

front/src/WebRtc/SimplePeer.ts

@@ -13,6 +13,7 @@ import { screenSharingLocalStreamStore } from "../Stores/ScreenSharingStore";
 import { discussionManager } from "./DiscussionManager";
 import { playersStore } from "../Stores/PlayersStore";
 import { newChatMessageStore } from "../Stores/ChatStore";
+import { isMobile } from "../Enum/EnvironmentVariable";
 
 export interface UserSimplePeerInterface {
     userId: number;
@@ -391,7 +392,13 @@ export class SimplePeer {
             }
 
             PeerConnection.write(
-                new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, ...streamResult.constraints }))
+                new Buffer(
+                    JSON.stringify({
+                        type: MESSAGE_TYPE_CONSTRAINT,
+                        ...streamResult.constraints,
+                        isMobile: isMobile(),
+                    })
+                )
             );
 
             if (streamResult.type === "error") {

front/src/WebRtc/VideoPeer.ts

@@ -5,10 +5,11 @@ import { blackListManager } from "./BlackListManager";
 import type { Subscription } from "rxjs";
 import type { UserSimplePeerInterface } from "./SimplePeer";
 import { get, readable, Readable, Unsubscriber } from "svelte/store";
-import { obtainedMediaConstraintStore } from "../Stores/MediaStore";
+import { obtainedMediaConstraintIsMobileStore, obtainedMediaConstraintStore } from "../Stores/MediaStore";
 import { playersStore } from "../Stores/PlayersStore";
 import { chatMessagesStore, chatVisibilityStore, newChatMessageStore } from "../Stores/ChatStore";
 import { getIceServersConfig } from "../Components/Video/utils";
+import { isMobile } from "../Enum/EnvironmentVariable";
 
 const Peer: SimplePeerNamespace.SimplePeer = require("simple-peer");
 
@@ -167,6 +168,9 @@ 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);
@@ -281,7 +285,13 @@ export class VideoPeer extends Peer {
     private pushVideoToRemoteUser(localStream: MediaStream | null) {
         try {
             this.write(
-                new Buffer(JSON.stringify({ type: MESSAGE_TYPE_CONSTRAINT, ...get(obtainedMediaConstraintStore) }))
+                new Buffer(
+                    JSON.stringify({
+                        type: MESSAGE_TYPE_CONSTRAINT,
+                        ...get(obtainedMediaConstraintStore),
+                        isMobile: isMobile(),
+                    })
+                )
             );
 
             if (!localStream) {

front/style/mobile-style.scss

@@ -28,8 +28,8 @@
     height: 80%;
 
     &> div {
-      max-height: 120px;
       min-width: 200px;
+      max-height: 21vh;
     }
 
     .video-container{

front/style/style.scss

@@ -47,6 +47,11 @@ body .message-info.warning{
         height: 100%;
         max-height: 90vh;
         cursor: url('./images/cursor_pointer.png'), pointer;
+
+        &.mobile{
+            width: 100%;
+            height: 21vh;
+        }
     }
 
     i {