diff --git a/front/src/Components/Video/VideoMediaBox.svelte b/front/src/Components/Video/VideoMediaBox.svelte index cc7fb424..88634a9f 100644 --- a/front/src/Components/Video/VideoMediaBox.svelte +++ b/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); +
@@ -37,7 +46,7 @@ Report this user Report/Block - + {#if $constraintStore && $constraintStore.audio !== false} diff --git a/front/src/Stores/MediaStore.ts b/front/src/Stores/MediaStore.ts index 10e4523d..8e70a1af 100644 --- a/front/src/Stores/MediaStore.ts +++ b/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); diff --git a/front/src/WebRtc/ScreenSharingPeer.ts b/front/src/WebRtc/ScreenSharingPeer.ts index 18810182..1bb8cdcc 100644 --- a/front/src/WebRtc/ScreenSharingPeer.ts +++ b/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() })) + ); } } diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 510918a2..04075df2 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/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") { diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index aee3f735..bdf8ec16 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/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) { diff --git a/front/style/mobile-style.scss b/front/style/mobile-style.scss index 1b37053a..7f1e770f 100644 --- a/front/style/mobile-style.scss +++ b/front/style/mobile-style.scss @@ -28,8 +28,8 @@ height: 80%; &> div { - max-height: 120px; min-width: 200px; + max-height: 21vh; } .video-container{ diff --git a/front/style/style.scss b/front/style/style.scss index 6c8574b7..9b37e122 100644 --- a/front/style/style.scss +++ b/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 {