Merge pull request #373 from thecodingmachine/jitsiQOL

some refractoring to jitsicreation and mediaManager

front/src/Phaser/Game/GameScene.ts

@@ -12,7 +12,6 @@ import {CurrentGamerInterface, hasMovedEventName, Player} from "../Player/Player
 import {
     DEBUG_MODE,
     JITSI_PRIVATE_MODE,
-    JITSI_URL,
     POSITION_DELAY,
     RESOLUTION,
     ZOOM_LEVEL
@@ -23,7 +22,6 @@ import {
     ITiledMapLayerProperty, ITiledMapObject,
     ITiledTileSet
 } from "../Map/ITiledMap";
-import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
 import {AddPlayerInterface} from "./AddPlayerInterface";
 import {PlayerAnimationNames} from "../Player/Animation";
 import {PlayerMovement} from "./PlayerMovement";
@@ -32,7 +30,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer";
 import {Queue} from 'queue-typescript';
 import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer";
 import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene";
-import {loadAllLayers, loadCustomTexture, loadObject, loadPlayerCharacters} from "../Entity/body_character";
+import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character";
 import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager";
 import Texture = Phaser.Textures.Texture;
 import Sprite = Phaser.GameObjects.Sprite;
@@ -55,11 +53,7 @@ import {UserMessageManager} from "../../Administration/UserMessageManager";
 import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
 import {ResizableScene} from "../Login/ResizableScene";
 import {Room} from "../../Connexion/Room";
-
+import {jitsiFactory} from "../../WebRtc/JitsiFactory";
-
-export enum Textures {
-    Player = "male1"
-}
 
 export interface GameSceneInitInterface {
     initPosition: PointInterface|null
@@ -147,8 +141,6 @@ export class GameScene extends ResizableScene implements CenterListener {
     private outlinedItem: ActionableItem|null = null;
     private userInputManager!: UserInputManager;
 
-    private jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any
-
     static createFromUrl(room: Room, mapUrlFile: string, gameSceneKey: string|null = null): GameScene {
         // We use the map URL as a key
         if (gameSceneKey === null) {
@@ -1231,53 +1223,14 @@ export class GameScene extends ResizableScene implements CenterListener {
     }
 
     public startJitsi(roomName: string, jwt?: string): void {
-        CoWebsiteManager.insertCoWebsite((cowebsiteDiv => {
+        jitsiFactory.start(roomName, gameManager.getPlayerName(), jwt);
-            const domain = JITSI_URL;
-            const options = {
-                roomName: roomName,
-                jwt: jwt,
-                width: "100%",
-                height: "100%",
-                parentNode: cowebsiteDiv,
-                configOverwrite: {
-                    prejoinPageEnabled: false
-                },
-                interfaceConfigOverwrite: {
-                    SHOW_CHROME_EXTENSION_BANNER: false,
-                    MOBILE_APP_PROMO: false,
-
-                    HIDE_INVITE_MORE_HEADER: true,
-
-                    // Note: hiding brand does not seem to work, we probably need to put this on the server side.
-                    SHOW_BRAND_WATERMARK: false,
-                    SHOW_JITSI_WATERMARK: false,
-                    SHOW_POWERED_BY: false,
-                    SHOW_PROMOTIONAL_CLOSE_PAGE: false,
-                    SHOW_WATERMARK_FOR_GUESTS: false,
-
-                    TOOLBAR_BUTTONS: [
-                        'microphone', 'camera', 'closedcaptions', 'desktop', /*'embedmeeting',*/ 'fullscreen',
-                        'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
-                        'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
-                        'videoquality', 'filmstrip', /*'invite',*/ 'feedback', 'stats', 'shortcuts',
-                        'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', /*'security'*/
-                    ],
-                }
-            };
-            if (!options.jwt) {
-                delete options.jwt;
-            }
-            this.jitsiApi = new (window as any).JitsiMeetExternalAPI(domain, options); // eslint-disable-line @typescript-eslint/no-explicit-any
-            this.jitsiApi.executeCommand('displayName', gameManager.getPlayerName());
-        }));
         this.connection.setSilent(true);
         mediaManager.hideGameOverlay();
     }
 
     public stopJitsi(): void {
         this.connection.setSilent(false);
-        this.jitsiApi?.dispose();
+        jitsiFactory.stop();
-        CoWebsiteManager.closeCoWebsite();
         mediaManager.showGameOverlay();
     }
 

front/src/Phaser/Player/Animation.ts

@@ -1,4 +1,3 @@
-import {Textures} from "../Game/GameScene";
 
 export enum PlayerAnimationNames {
     WalkDown = 'down',

front/src/WebRtc/JitsiFactory.ts

@@ -0,0 +1,60 @@
+import {CoWebsiteManager} from "./CoWebsiteManager";
+import {JITSI_URL} from "../Enum/EnvironmentVariable";
+import {mediaManager} from "./MediaManager";
+declare const window:any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+const interfaceConfig = {
+    SHOW_CHROME_EXTENSION_BANNER: false,
+    MOBILE_APP_PROMO: false,
+
+    HIDE_INVITE_MORE_HEADER: true,
+
+    // Note: hiding brand does not seem to work, we probably need to put this on the server side.
+    SHOW_BRAND_WATERMARK: false,
+    SHOW_JITSI_WATERMARK: false,
+    SHOW_POWERED_BY: false,
+    SHOW_PROMOTIONAL_CLOSE_PAGE: false,
+    SHOW_WATERMARK_FOR_GUESTS: false,
+
+    TOOLBAR_BUTTONS: [
+        'microphone', 'camera', 'closedcaptions', 'desktop', /*'embedmeeting',*/ 'fullscreen',
+        'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
+        'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
+        'videoquality', 'filmstrip', /*'invite',*/ 'feedback', 'stats', 'shortcuts',
+        'tileview', 'videobackgroundblur', 'download', 'help', 'mute-everyone', /*'security'*/
+    ],
+};
+
+class JitsiFactory {
+    private jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+    public start(roomName: string, playerName:string, jwt?: string): void {
+        CoWebsiteManager.insertCoWebsite((cowebsiteDiv => {
+            const domain = JITSI_URL;
+            const options = {
+                roomName: roomName,
+                jwt: jwt,
+                width: "100%",
+                height: "100%",
+                parentNode: cowebsiteDiv,
+                configOverwrite: {
+                    startWithAudioMuted: !mediaManager.constraintsMedia.audio,
+                    startWithVideoMuted: mediaManager.constraintsMedia.video === false,
+                    prejoinPageEnabled: false
+                },
+                interfaceConfigOverwrite: interfaceConfig,
+            };
+            if (!options.jwt) {
+                delete options.jwt;
+            }
+            this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
+            this.jitsiApi.executeCommand('displayName', playerName);
+        }));
+    }
+
+    public stop(): void {
+        this.jitsiApi?.dispose();
+        CoWebsiteManager.closeCoWebsite();
+    }
+}
+
+export const jitsiFactory = new JitsiFactory();

front/src/WebRtc/MediaManager.ts

@@ -1,5 +1,6 @@
 import {DivImportance, layoutManager} from "./LayoutManager";
 import {HtmlUtils} from "./HtmlUtils";
+declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
 
 const videoConstraint: boolean|MediaTrackConstraints = {
     width: { ideal: 1280 },
@@ -245,15 +246,11 @@ export class MediaManager {
     }
 
     private _startScreenCapture() {
-        // getDisplayMedia was moved to mediaDevices in 2018. Typescript definitions are not up to date yet.
+        if (navigator.getDisplayMedia) { 
-        // See: https://github.com/w3c/mediacapture-screen-share/pull/86
+            return navigator.getDisplayMedia({video: true});
-        //      https://github.com/microsoft/TypeScript/issues/31821
+        } else if (navigator.mediaDevices.getDisplayMedia) {
-        if ((navigator as any).getDisplayMedia) { // eslint-disable-line @typescript-eslint/no-explicit-any
+            return navigator.mediaDevices.getDisplayMedia({video: true});
-            return (navigator as any).getDisplayMedia({video: true}); // eslint-disable-line @typescript-eslint/no-explicit-any
-        } else if ((navigator.mediaDevices as any).getDisplayMedia) { // eslint-disable-line @typescript-eslint/no-explicit-any
-            return (navigator.mediaDevices as any).getDisplayMedia({video: true}); // eslint-disable-line @typescript-eslint/no-explicit-any
         } else {
-            //return navigator.mediaDevices.getUserMedia(({video: {mediaSource: 'screen'}} as any));
             return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
                 reject("error sharing screen");
             });
@@ -336,12 +333,6 @@ export class MediaManager {
         return this.getCamera();
     }
 
-    /**
-     *
-     * @param userId
-     * @param reportCallBack
-     * @param userName
-     */
     addActiveVideo(userId: string, reportCallBack: ReportCallback|undefined, userName: string = ""){
         this.webrtcInAudio.play();
 
@@ -373,13 +364,8 @@ export class MediaManager {
 
         this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
     }
-
+    
-    /**
-     *
-     * @param userId
-     */
     addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){
-        //this.webrtcInAudio.play();
 
         userId = `screen-sharing-${userId}`;
         const html = `
@@ -392,11 +378,7 @@ export class MediaManager {
 
         this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
     }
-
+    
-    /**
-     *
-     * @param userId
-     */
     disabledMicrophoneByUserId(userId: number){
         const element = document.getElementById(`microphone-${userId}`);
         if(!element){
@@ -404,11 +386,7 @@ export class MediaManager {
         }
         element.classList.add('active')
     }
-
+    
-    /**
-     *
-     * @param userId
-     */
     enabledMicrophoneByUserId(userId: number){
         const element = document.getElementById(`microphone-${userId}`);
         if(!element){
@@ -416,11 +394,7 @@ export class MediaManager {
         }
         element.classList.remove('active')
     }
-
+    
-    /**
-     *
-     * @param userId
-     */
     disabledVideoByUserId(userId: number) {
         let element = document.getElementById(`${userId}`);
         if (element) {
@@ -431,11 +405,7 @@ export class MediaManager {
             element.style.display = "block";
         }
     }
-
+    
-    /**
-     *
-     * @param userId
-     */
     enabledVideoByUserId(userId: number){
         let element = document.getElementById(`${userId}`);
         if(element){
@@ -447,11 +417,6 @@ export class MediaManager {
         }
     }
 
-    /**
-     *
-     * @param userId
-     * @param stream
-     */
     addStreamRemoteVideo(userId: string, stream : MediaStream){
         const remoteVideo = this.remoteVideo.get(userId);
         if (remoteVideo === undefined) {
@@ -468,11 +433,7 @@ export class MediaManager {
 
         this.addStreamRemoteVideo(`screen-sharing-${userId}`, stream);
     }
-
+    
-    /**
-     *
-     * @param userId
-     */
     removeActiveVideo(userId: string){
         layoutManager.remove(userId);
         this.remoteVideo.delete(userId);
@@ -522,11 +483,7 @@ export class MediaManager {
         const connnectingSpinnerDiv = element.getElementsByClassName('connecting-spinner').item(0) as HTMLDivElement|null;
         return connnectingSpinnerDiv;
     }
-
+    
-    /**
-     *
-     * @param str
-     */
     private getColorByString(str: String) : String|null {
         let hash = 0;
         if (str.length === 0) return null;