2020-10-23 16:16:30 +02:00
|
|
|
import {JITSI_URL} from "../Enum/EnvironmentVariable";
|
2020-10-23 17:00:56 +02:00
|
|
|
import {mediaManager} from "./MediaManager";
|
2020-10-27 16:59:12 +01:00
|
|
|
import {coWebsiteManager} from "./CoWebsiteManager";
|
2020-10-23 16:16:30 +02:00
|
|
|
declare const window:any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
|
|
|
|
2021-02-09 14:17:48 +01:00
|
|
|
const config = {
|
|
|
|
startWithAudioMuted: !mediaManager.constraintsMedia.audio,
|
|
|
|
startWithVideoMuted: mediaManager.constraintsMedia.video === false,
|
|
|
|
prejoinPageEnabled: false
|
|
|
|
}
|
|
|
|
|
2020-10-23 16:16:30 +02:00
|
|
|
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 {
|
2021-02-09 14:17:48 +01:00
|
|
|
public jitsiConfig: object = config;
|
|
|
|
public jitsiInterfaceConfig: object = interfaceConfig;
|
2020-10-23 16:16:30 +02:00
|
|
|
private jitsiApi: any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
2020-10-26 15:07:34 +01:00
|
|
|
private audioCallback = this.onAudioChange.bind(this);
|
|
|
|
private videoCallback = this.onVideoChange.bind(this);
|
|
|
|
|
2020-10-23 16:16:30 +02:00
|
|
|
public start(roomName: string, playerName:string, jwt?: string): void {
|
2020-10-27 16:59:12 +01:00
|
|
|
coWebsiteManager.insertCoWebsite((cowebsiteDiv => {
|
2020-10-23 16:16:30 +02:00
|
|
|
const domain = JITSI_URL;
|
2020-10-27 16:59:12 +01:00
|
|
|
const options: any = { // eslint-disable-line @typescript-eslint/no-explicit-any
|
2020-10-23 16:16:30 +02:00
|
|
|
roomName: roomName,
|
|
|
|
jwt: jwt,
|
|
|
|
width: "100%",
|
|
|
|
height: "100%",
|
|
|
|
parentNode: cowebsiteDiv,
|
2021-02-09 14:17:48 +01:00
|
|
|
configOverwrite: this.jitsiConfig,
|
|
|
|
interfaceConfigOverwrite: this.jitsiInterfaceConfig
|
2020-10-23 16:16:30 +02:00
|
|
|
};
|
|
|
|
if (!options.jwt) {
|
|
|
|
delete options.jwt;
|
|
|
|
}
|
2020-10-27 16:59:12 +01:00
|
|
|
|
2020-11-13 18:08:43 +01:00
|
|
|
return new Promise((resolve, reject) => {
|
2020-10-27 16:59:12 +01:00
|
|
|
options.onload = () => resolve(); //we want for the iframe to be loaded before triggering animations.
|
2020-11-16 16:15:21 +01:00
|
|
|
setTimeout(() => resolve(), 2000); //failsafe in case the iframe is deleted before loading or too long to load
|
2020-10-27 16:59:12 +01:00
|
|
|
this.jitsiApi = new window.JitsiMeetExternalAPI(domain, options);
|
|
|
|
this.jitsiApi.executeCommand('displayName', playerName);
|
2020-10-26 15:07:34 +01:00
|
|
|
|
2020-10-27 16:59:12 +01:00
|
|
|
this.jitsiApi.addListener('audioMuteStatusChanged', this.audioCallback);
|
|
|
|
this.jitsiApi.addListener('videoMuteStatusChanged', this.videoCallback);
|
|
|
|
});
|
2020-10-23 16:16:30 +02:00
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
2020-10-27 16:59:12 +01:00
|
|
|
public async stop(): Promise<void> {
|
2020-10-31 14:04:55 +01:00
|
|
|
if(!this.jitsiApi){
|
|
|
|
return;
|
|
|
|
}
|
2020-10-27 16:59:12 +01:00
|
|
|
await coWebsiteManager.closeCoWebsite();
|
2020-10-26 15:07:34 +01:00
|
|
|
this.jitsiApi.removeListener('audioMuteStatusChanged', this.audioCallback);
|
|
|
|
this.jitsiApi.removeListener('videoMuteStatusChanged', this.videoCallback);
|
2020-10-23 16:16:30 +02:00
|
|
|
this.jitsiApi?.dispose();
|
|
|
|
}
|
2020-10-26 15:07:34 +01:00
|
|
|
|
|
|
|
private onAudioChange({muted}: {muted: boolean}): void {
|
|
|
|
if (muted && mediaManager.constraintsMedia.audio === true) {
|
|
|
|
mediaManager.disableMicrophone();
|
|
|
|
} else if(!muted && mediaManager.constraintsMedia.audio === false) {
|
|
|
|
mediaManager.enableMicrophone();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
private onVideoChange({muted}: {muted: boolean}): void {
|
|
|
|
if (muted && mediaManager.constraintsMedia.video !== false) {
|
|
|
|
mediaManager.disableCamera();
|
|
|
|
} else if(!muted && mediaManager.constraintsMedia.video === false) {
|
|
|
|
mediaManager.enableCamera();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-09 14:17:48 +01:00
|
|
|
public setJitsiConfig(jitsiConfig: string|undefined): void {
|
|
|
|
if(jitsiConfig) {
|
|
|
|
try {
|
|
|
|
const parsedConfig = JSON.parse(jitsiConfig);
|
|
|
|
this.jitsiConfig = {...config, ...parsedConfig};
|
|
|
|
} catch (e) {
|
|
|
|
console.warn('jitsiConfig', e);
|
|
|
|
this.jitsiConfig = config;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.jitsiConfig = config;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
public setJitsiInterfaceConfig(jitsiInterfaceConfig: string|undefined): void {
|
|
|
|
if(jitsiInterfaceConfig) {
|
|
|
|
try {
|
|
|
|
const parsedInterfaceConfig = JSON.parse(jitsiInterfaceConfig);
|
|
|
|
this.jitsiInterfaceConfig = {...interfaceConfig, ...parsedInterfaceConfig};
|
|
|
|
} catch (e) {
|
|
|
|
console.warn('jitsiInterfaceConfig', e);
|
|
|
|
this.jitsiInterfaceConfig = interfaceConfig;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
this.jitsiInterfaceConfig = interfaceConfig;
|
|
|
|
}
|
|
|
|
}
|
2020-10-23 16:16:30 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
export const jitsiFactory = new JitsiFactory();
|