Merge remote-tracking branch 'remotes/workadventure-main/develop' into gamestate-api-read
# Conflicts: # front/src/Api/IframeListener.ts
This commit is contained in:
jonny
commit
8cef4f6e90
17 changed files with 9120 additions and 362 deletions
|
|
@ -1,14 +1,14 @@
|
|||
import {DivImportance, layoutManager} from "./LayoutManager";
|
||||
import {HtmlUtils} from "./HtmlUtils";
|
||||
import {discussionManager, SendMessageCallback} from "./DiscussionManager";
|
||||
import {UserInputManager} from "../Phaser/UserInput/UserInputManager";
|
||||
import {localUserStore} from "../Connexion/LocalUserStore";
|
||||
import {UserSimplePeerInterface} from "./SimplePeer";
|
||||
import {SoundMeter} from "../Phaser/Components/SoundMeter";
|
||||
import { DivImportance, layoutManager } from "./LayoutManager";
|
||||
import { HtmlUtils } from "./HtmlUtils";
|
||||
import { discussionManager, SendMessageCallback } from "./DiscussionManager";
|
||||
import { UserInputManager } from "../Phaser/UserInput/UserInputManager";
|
||||
import { localUserStore } from "../Connexion/LocalUserStore";
|
||||
import { UserSimplePeerInterface } from "./SimplePeer";
|
||||
import { SoundMeter } from "../Phaser/Components/SoundMeter";
|
||||
|
||||
declare const navigator:any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
declare const navigator: any; // eslint-disable-line @typescript-eslint/no-explicit-any
|
||||
|
||||
let videoConstraint: boolean|MediaTrackConstraints = {
|
||||
let videoConstraint: boolean | MediaTrackConstraints = {
|
||||
width: { min: 640, ideal: 1280, max: 1920 },
|
||||
height: { min: 400, ideal: 720 },
|
||||
frameRate: { ideal: localUserStore.getVideoQualityValue() },
|
||||
|
|
@ -16,24 +16,24 @@ let videoConstraint: boolean|MediaTrackConstraints = {
|
|||
resizeMode: 'crop-and-scale',
|
||||
aspectRatio: 1.777777778
|
||||
};
|
||||
const audioConstraint: boolean|MediaTrackConstraints = {
|
||||
const audioConstraint: boolean | MediaTrackConstraints = {
|
||||
//TODO: make these values configurable in the game settings menu and store them in localstorage
|
||||
autoGainControl: false,
|
||||
echoCancellation: true,
|
||||
noiseSuppression: false
|
||||
};
|
||||
|
||||
export type UpdatedLocalStreamCallback = (media: MediaStream|null) => void;
|
||||
export type UpdatedLocalStreamCallback = (media: MediaStream | null) => void;
|
||||
export type StartScreenSharingCallback = (media: MediaStream) => void;
|
||||
export type StopScreenSharingCallback = (media: MediaStream) => void;
|
||||
export type ReportCallback = (message: string) => void;
|
||||
export type ShowReportCallBack = (userId: string, userName: string|undefined) => void;
|
||||
export type ShowReportCallBack = (userId: string, userName: string | undefined) => void;
|
||||
export type HelpCameraSettingsCallBack = () => void;
|
||||
|
||||
// TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
|
||||
export class MediaManager {
|
||||
localStream: MediaStream|null = null;
|
||||
localScreenCapture: MediaStream|null = null;
|
||||
localStream: MediaStream | null = null;
|
||||
localScreenCapture: MediaStream | null = null;
|
||||
private remoteVideo: Map<string, HTMLVideoElement> = new Map<string, HTMLVideoElement>();
|
||||
myCamVideo: HTMLVideoElement;
|
||||
cinemaClose: HTMLImageElement;
|
||||
|
|
@ -43,35 +43,35 @@ export class MediaManager {
|
|||
microphoneClose: HTMLImageElement;
|
||||
microphone: HTMLImageElement;
|
||||
webrtcInAudio: HTMLAudioElement;
|
||||
mySoundMeterElement: HTMLDivElement;
|
||||
// mySoundMeterElement: HTMLDivElement;
|
||||
private webrtcOutAudio: HTMLAudioElement;
|
||||
constraintsMedia : MediaStreamConstraints = {
|
||||
constraintsMedia: MediaStreamConstraints = {
|
||||
audio: audioConstraint,
|
||||
video: videoConstraint
|
||||
};
|
||||
updatedLocalStreamCallBacks : Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
|
||||
startScreenSharingCallBacks : Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
|
||||
stopScreenSharingCallBacks : Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
|
||||
showReportModalCallBacks : Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
|
||||
helpCameraSettingsCallBacks : Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
|
||||
|
||||
updatedLocalStreamCallBacks: Set<UpdatedLocalStreamCallback> = new Set<UpdatedLocalStreamCallback>();
|
||||
startScreenSharingCallBacks: Set<StartScreenSharingCallback> = new Set<StartScreenSharingCallback>();
|
||||
stopScreenSharingCallBacks: Set<StopScreenSharingCallback> = new Set<StopScreenSharingCallback>();
|
||||
showReportModalCallBacks: Set<ShowReportCallBack> = new Set<ShowReportCallBack>();
|
||||
helpCameraSettingsCallBacks: Set<HelpCameraSettingsCallBack> = new Set<HelpCameraSettingsCallBack>();
|
||||
|
||||
private microphoneBtn: HTMLDivElement;
|
||||
private cinemaBtn: HTMLDivElement;
|
||||
private monitorBtn: HTMLDivElement;
|
||||
|
||||
private previousConstraint : MediaStreamConstraints;
|
||||
private focused : boolean = true;
|
||||
private previousConstraint: MediaStreamConstraints;
|
||||
private focused: boolean = true;
|
||||
|
||||
private lastUpdateScene : Date = new Date();
|
||||
private setTimeOutlastUpdateScene? : NodeJS.Timeout;
|
||||
private lastUpdateScene: Date = new Date();
|
||||
private setTimeOutlastUpdateScene?: NodeJS.Timeout;
|
||||
|
||||
private hasCamera = true;
|
||||
|
||||
private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
|
||||
private triggerCloseJistiFrame: Map<String, Function> = new Map<String, Function>();
|
||||
|
||||
private userInputManager?: UserInputManager;
|
||||
|
||||
private mySoundMeter?: SoundMeter|null;
|
||||
private mySoundMeter?: SoundMeter | null;
|
||||
private soundMeters: Map<string, SoundMeter> = new Map<string, SoundMeter>();
|
||||
private soundMeterElements: Map<string, HTMLDivElement> = new Map<string, HTMLDivElement>();
|
||||
|
||||
|
|
@ -134,19 +134,19 @@ export class MediaManager {
|
|||
|
||||
this.checkActiveUser(); //todo: desactivated in case of bug
|
||||
|
||||
this.mySoundMeterElement = (HtmlUtils.getElementByIdOrFail('mySoundMeter'));
|
||||
this.mySoundMeterElement.childNodes.forEach((value: ChildNode, index) => {
|
||||
this.mySoundMeterElement.children.item(index)?.classList.remove('active');
|
||||
});
|
||||
/* this.mySoundMeterElement = (HtmlUtils.getElementByIdOrFail('mySoundMeter'));
|
||||
this.mySoundMeterElement.childNodes.forEach((value: ChildNode, index) => {
|
||||
this.mySoundMeterElement.children.item(index)?.classList.remove('active');
|
||||
});*/
|
||||
}
|
||||
|
||||
public updateScene(){
|
||||
public updateScene() {
|
||||
this.lastUpdateScene = new Date();
|
||||
this.updateSoudMeter();
|
||||
}
|
||||
|
||||
public blurCamera() {
|
||||
if(!this.focused){
|
||||
if (!this.focused) {
|
||||
return;
|
||||
}
|
||||
this.focused = false;
|
||||
|
|
@ -155,7 +155,7 @@ export class MediaManager {
|
|||
}
|
||||
|
||||
public focusCamera() {
|
||||
if(this.focused){
|
||||
if (this.focused) {
|
||||
return;
|
||||
}
|
||||
this.focused = true;
|
||||
|
|
@ -178,7 +178,7 @@ export class MediaManager {
|
|||
this.updatedLocalStreamCallBacks.delete(callback);
|
||||
}
|
||||
|
||||
private triggerUpdatedLocalStreamCallbacks(stream: MediaStream|null): void {
|
||||
private triggerUpdatedLocalStreamCallbacks(stream: MediaStream | null): void {
|
||||
for (const callback of this.updatedLocalStreamCallBacks) {
|
||||
callback(stream);
|
||||
}
|
||||
|
|
@ -196,7 +196,7 @@ export class MediaManager {
|
|||
}
|
||||
}
|
||||
|
||||
public showGameOverlay(){
|
||||
public showGameOverlay() {
|
||||
const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
|
||||
gameOverlay.classList.add('active');
|
||||
|
||||
|
|
@ -207,7 +207,7 @@ export class MediaManager {
|
|||
buttonCloseFrame.removeEventListener('click', functionTrigger);
|
||||
}
|
||||
|
||||
public hideGameOverlay(){
|
||||
public hideGameOverlay() {
|
||||
const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
|
||||
gameOverlay.classList.remove('active');
|
||||
|
||||
|
|
@ -221,7 +221,7 @@ export class MediaManager {
|
|||
public updateCameraQuality(value: number) {
|
||||
this.enableCameraStyle();
|
||||
const newVideoConstraint = JSON.parse(JSON.stringify(videoConstraint));
|
||||
newVideoConstraint.frameRate = {exact: value, ideal: value};
|
||||
newVideoConstraint.frameRate = { exact: value, ideal: value };
|
||||
videoConstraint = newVideoConstraint;
|
||||
this.constraintsMedia.video = videoConstraint;
|
||||
this.getCamera().then((stream: MediaStream) => {
|
||||
|
|
@ -235,7 +235,7 @@ export class MediaManager {
|
|||
this.getCamera().then((stream: MediaStream) => {
|
||||
//TODO show error message tooltip upper of camera button
|
||||
//TODO message : please check camera permission of your navigator
|
||||
if(stream.getVideoTracks().length === 0) {
|
||||
if (stream.getVideoTracks().length === 0) {
|
||||
throw Error('Video track is empty, please check camera permission of your navigator')
|
||||
}
|
||||
this.enableCameraStyle();
|
||||
|
|
@ -267,7 +267,7 @@ export class MediaManager {
|
|||
this.getCamera().then((stream) => {
|
||||
//TODO show error message tooltip upper of camera button
|
||||
//TODO message : please check microphone permission of your navigator
|
||||
if(stream.getAudioTracks().length === 0) {
|
||||
if (stream.getAudioTracks().length === 0) {
|
||||
throw Error('Audio track is empty, please check microphone permission of your navigator')
|
||||
}
|
||||
this.enableMicrophoneStyle();
|
||||
|
|
@ -296,14 +296,14 @@ export class MediaManager {
|
|||
|
||||
private applyPreviousConfig() {
|
||||
this.constraintsMedia = this.previousConstraint;
|
||||
if(!this.constraintsMedia.video){
|
||||
if (!this.constraintsMedia.video) {
|
||||
this.disableCameraStyle();
|
||||
}else{
|
||||
} else {
|
||||
this.enableCameraStyle();
|
||||
}
|
||||
if(!this.constraintsMedia.audio){
|
||||
if (!this.constraintsMedia.audio) {
|
||||
this.disableMicrophoneStyle()
|
||||
}else{
|
||||
} else {
|
||||
this.enableMicrophoneStyle()
|
||||
}
|
||||
|
||||
|
|
@ -312,13 +312,13 @@ export class MediaManager {
|
|||
});
|
||||
}
|
||||
|
||||
private enableCameraStyle(){
|
||||
private enableCameraStyle() {
|
||||
this.cinemaClose.style.display = "none";
|
||||
this.cinemaBtn.classList.remove("disabled");
|
||||
this.cinema.style.display = "block";
|
||||
}
|
||||
|
||||
private disableCameraStyle(){
|
||||
private disableCameraStyle() {
|
||||
this.cinemaClose.style.display = "block";
|
||||
this.cinema.style.display = "none";
|
||||
this.cinemaBtn.classList.add("disabled");
|
||||
|
|
@ -327,13 +327,13 @@ export class MediaManager {
|
|||
this.stopCamera();
|
||||
}
|
||||
|
||||
private enableMicrophoneStyle(){
|
||||
private enableMicrophoneStyle() {
|
||||
this.microphoneClose.style.display = "none";
|
||||
this.microphone.style.display = "block";
|
||||
this.microphoneBtn.classList.remove("disabled");
|
||||
}
|
||||
|
||||
private disableMicrophoneStyle(){
|
||||
private disableMicrophoneStyle() {
|
||||
this.microphoneClose.style.display = "block";
|
||||
this.microphone.style.display = "none";
|
||||
this.microphoneBtn.classList.add("disabled");
|
||||
|
|
@ -381,7 +381,7 @@ export class MediaManager {
|
|||
}
|
||||
|
||||
//get screen
|
||||
getScreenMedia() : Promise<MediaStream>{
|
||||
getScreenMedia(): Promise<MediaStream> {
|
||||
try {
|
||||
return this._startScreenCapture()
|
||||
.then((stream: MediaStream) => {
|
||||
|
|
@ -403,7 +403,7 @@ export class MediaManager {
|
|||
console.error("Error => getScreenMedia => ", err);
|
||||
throw err;
|
||||
});
|
||||
}catch (err) {
|
||||
} catch (err) {
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
|
||||
reject(err);
|
||||
});
|
||||
|
|
@ -411,10 +411,10 @@ export class MediaManager {
|
|||
}
|
||||
|
||||
private _startScreenCapture() {
|
||||
if (navigator.getDisplayMedia) {
|
||||
return navigator.getDisplayMedia({video: true});
|
||||
if (navigator.getDisplayMedia) {
|
||||
return navigator.getDisplayMedia({ video: true });
|
||||
} else if (navigator.mediaDevices.getDisplayMedia) {
|
||||
return navigator.mediaDevices.getDisplayMedia({video: true});
|
||||
return navigator.mediaDevices.getDisplayMedia({ video: true });
|
||||
} else {
|
||||
return new Promise((resolve, reject) => { // eslint-disable-line no-unused-vars
|
||||
reject("error sharing screen");
|
||||
|
|
@ -435,7 +435,7 @@ export class MediaManager {
|
|||
return this.getLocalStream().catch((err) => {
|
||||
console.info('Error get camera, trying with video option at null =>', err);
|
||||
this.disableCameraStyle();
|
||||
return this.getLocalStream().then((stream : MediaStream) => {
|
||||
return this.getLocalStream().then((stream: MediaStream) => {
|
||||
this.hasCamera = false;
|
||||
return stream;
|
||||
}).catch((err) => {
|
||||
|
|
@ -452,14 +452,14 @@ export class MediaManager {
|
|||
console.info(`${width}x${height}`); // 6*/
|
||||
}
|
||||
|
||||
private getLocalStream() : Promise<MediaStream> {
|
||||
return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream : MediaStream) => {
|
||||
private getLocalStream(): Promise<MediaStream> {
|
||||
return navigator.mediaDevices.getUserMedia(this.constraintsMedia).then((stream: MediaStream) => {
|
||||
this.localStream = stream;
|
||||
this.myCamVideo.srcObject = this.localStream;
|
||||
|
||||
//init sound meter
|
||||
this.mySoundMeter = null;
|
||||
if(this.constraintsMedia.audio){
|
||||
if (this.constraintsMedia.audio) {
|
||||
this.mySoundMeter = new SoundMeter();
|
||||
this.mySoundMeter.connectToSource(stream, new AudioContext());
|
||||
}
|
||||
|
|
@ -494,7 +494,7 @@ export class MediaManager {
|
|||
|
||||
setCamera(id: string): Promise<MediaStream> {
|
||||
let video = this.constraintsMedia.video;
|
||||
if (typeof(video) === 'boolean' || video === undefined) {
|
||||
if (typeof (video) === 'boolean' || video === undefined) {
|
||||
video = {}
|
||||
}
|
||||
video.deviceId = {
|
||||
|
|
@ -506,7 +506,7 @@ export class MediaManager {
|
|||
|
||||
setMicrophone(id: string): Promise<MediaStream> {
|
||||
let audio = this.constraintsMedia.audio;
|
||||
if (typeof(audio) === 'boolean' || audio === undefined) {
|
||||
if (typeof (audio) === 'boolean' || audio === undefined) {
|
||||
audio = {}
|
||||
}
|
||||
audio.deviceId = {
|
||||
|
|
@ -516,14 +516,14 @@ export class MediaManager {
|
|||
return this.getCamera();
|
||||
}
|
||||
|
||||
addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){
|
||||
addActiveVideo(user: UserSimplePeerInterface, userName: string = "") {
|
||||
this.webrtcInAudio.play();
|
||||
const userId = ''+user.userId
|
||||
const userId = '' + user.userId
|
||||
|
||||
userName = userName.toUpperCase();
|
||||
const color = this.getColorByString(userName);
|
||||
|
||||
const html = `
|
||||
const html = `
|
||||
<div id="div-${userId}" class="video-container">
|
||||
<div class="connecting-spinner"></div>
|
||||
<div class="rtc-error" style="display: none"></div>
|
||||
|
|
@ -546,12 +546,12 @@ export class MediaManager {
|
|||
`;
|
||||
|
||||
layoutManager.add(DivImportance.Normal, userId, html);
|
||||
|
||||
|
||||
this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail<HTMLVideoElement>(userId));
|
||||
|
||||
//permit to create participant in discussion part
|
||||
const showReportUser = () => {
|
||||
for(const callBack of this.showReportModalCallBacks){
|
||||
for (const callBack of this.showReportModalCallBacks) {
|
||||
callBack(userId, userName);
|
||||
}
|
||||
};
|
||||
|
|
@ -564,8 +564,8 @@ export class MediaManager {
|
|||
showReportUser();
|
||||
});
|
||||
}
|
||||
|
||||
addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){
|
||||
|
||||
addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important) {
|
||||
|
||||
userId = this.getScreenSharingId(userId);
|
||||
const html = `
|
||||
|
|
@ -583,22 +583,22 @@ export class MediaManager {
|
|||
return `screen-sharing-${userId}`;
|
||||
}
|
||||
|
||||
disabledMicrophoneByUserId(userId: number){
|
||||
disabledMicrophoneByUserId(userId: number) {
|
||||
const element = document.getElementById(`microphone-${userId}`);
|
||||
if(!element){
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.classList.add('active') //todo: why does a method 'disable' add a class 'active'?
|
||||
}
|
||||
|
||||
enabledMicrophoneByUserId(userId: number){
|
||||
|
||||
enabledMicrophoneByUserId(userId: number) {
|
||||
const element = document.getElementById(`microphone-${userId}`);
|
||||
if(!element){
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
element.classList.remove('active') //todo: why does a method 'enable' remove a class 'active'?
|
||||
}
|
||||
|
||||
|
||||
disabledVideoByUserId(userId: number) {
|
||||
let element = document.getElementById(`${userId}`);
|
||||
if (element) {
|
||||
|
|
@ -609,23 +609,23 @@ export class MediaManager {
|
|||
element.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
enabledVideoByUserId(userId: number){
|
||||
|
||||
enabledVideoByUserId(userId: number) {
|
||||
let element = document.getElementById(`${userId}`);
|
||||
if(element){
|
||||
if (element) {
|
||||
element.style.opacity = "1";
|
||||
}
|
||||
element = document.getElementById(`name-${userId}`);
|
||||
if(element){
|
||||
if (element) {
|
||||
element.style.display = "none";
|
||||
}
|
||||
}
|
||||
|
||||
toggleBlockLogo(userId: number, show: boolean): void {
|
||||
const blockLogoElement = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('blocking-'+userId);
|
||||
const blockLogoElement = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('blocking-' + userId);
|
||||
show ? blockLogoElement.classList.add('active') : blockLogoElement.classList.remove('active');
|
||||
}
|
||||
addStreamRemoteVideo(userId: string, stream : MediaStream): void {
|
||||
addStreamRemoteVideo(userId: string, stream: MediaStream): void {
|
||||
const remoteVideo = this.remoteVideo.get(userId);
|
||||
if (remoteVideo === undefined) {
|
||||
throw `Unable to find video for ${userId}`;
|
||||
|
|
@ -636,9 +636,9 @@ export class MediaManager {
|
|||
const soundMeter = new SoundMeter();
|
||||
soundMeter.connectToSource(stream, new AudioContext());
|
||||
this.soundMeters.set(userId, soundMeter);
|
||||
this.soundMeterElements.set(userId, HtmlUtils.getElementByIdOrFail<HTMLImageElement>('soundMeter-'+userId));
|
||||
this.soundMeterElements.set(userId, HtmlUtils.getElementByIdOrFail<HTMLImageElement>('soundMeter-' + userId));
|
||||
}
|
||||
addStreamRemoteScreenSharing(userId: string, stream : MediaStream){
|
||||
addStreamRemoteScreenSharing(userId: string, stream: MediaStream) {
|
||||
// In the case of screen sharing (going both ways), we may need to create the HTML element if it does not exist yet
|
||||
const remoteVideo = this.remoteVideo.get(this.getScreenSharingId(userId));
|
||||
if (remoteVideo === undefined) {
|
||||
|
|
@ -647,8 +647,8 @@ export class MediaManager {
|
|||
|
||||
this.addStreamRemoteVideo(this.getScreenSharingId(userId), stream);
|
||||
}
|
||||
|
||||
removeActiveVideo(userId: string){
|
||||
|
||||
removeActiveVideo(userId: string) {
|
||||
layoutManager.remove(userId);
|
||||
this.remoteVideo.delete(userId);
|
||||
|
||||
|
|
@ -662,7 +662,7 @@ export class MediaManager {
|
|||
removeActiveScreenSharingVideo(userId: string) {
|
||||
this.removeActiveVideo(this.getScreenSharingId(userId))
|
||||
}
|
||||
|
||||
|
||||
playWebrtcOutSound(): void {
|
||||
this.webrtcOutAudio.play();
|
||||
}
|
||||
|
|
@ -686,10 +686,10 @@ export class MediaManager {
|
|||
isError(userId: string): void {
|
||||
console.info("isError", `div-${userId}`);
|
||||
const element = document.getElementById(`div-${userId}`);
|
||||
if(!element){
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
const errorDiv = element.getElementsByClassName('rtc-error').item(0) as HTMLDivElement|null;
|
||||
const errorDiv = element.getElementsByClassName('rtc-error').item(0) as HTMLDivElement | null;
|
||||
if (errorDiv === null) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -700,16 +700,16 @@ export class MediaManager {
|
|||
}
|
||||
|
||||
|
||||
private getSpinner(userId: string): HTMLDivElement|null {
|
||||
private getSpinner(userId: string): HTMLDivElement | null {
|
||||
const element = document.getElementById(`div-${userId}`);
|
||||
if(!element){
|
||||
if (!element) {
|
||||
return null;
|
||||
}
|
||||
const connnectingSpinnerDiv = element.getElementsByClassName('connecting-spinner').item(0) as HTMLDivElement|null;
|
||||
const connnectingSpinnerDiv = element.getElementsByClassName('connecting-spinner').item(0) as HTMLDivElement | null;
|
||||
return connnectingSpinnerDiv;
|
||||
}
|
||||
|
||||
private getColorByString(str: String) : String|null {
|
||||
|
||||
private getColorByString(str: String): String | null {
|
||||
let hash = 0;
|
||||
if (str.length === 0) return null;
|
||||
for (let i = 0; i < str.length; i++) {
|
||||
|
|
@ -724,18 +724,18 @@ export class MediaManager {
|
|||
return color;
|
||||
}
|
||||
|
||||
public addNewParticipant(userId: number|string, name: string|undefined, img?: string, showReportUserCallBack?: ShowReportCallBack){
|
||||
public addNewParticipant(userId: number | string, name: string | undefined, img?: string, showReportUserCallBack?: ShowReportCallBack) {
|
||||
discussionManager.addParticipant(userId, name, img, false, showReportUserCallBack);
|
||||
}
|
||||
|
||||
public removeParticipant(userId: number|string){
|
||||
public removeParticipant(userId: number | string) {
|
||||
discussionManager.removeParticipant(userId);
|
||||
}
|
||||
public addTriggerCloseJitsiFrameButton(id: String, Function: Function){
|
||||
public addTriggerCloseJitsiFrameButton(id: String, Function: Function) {
|
||||
this.triggerCloseJistiFrame.set(id, Function);
|
||||
}
|
||||
|
||||
public removeTriggerCloseJitsiFrameButton(id: String){
|
||||
public removeTriggerCloseJitsiFrameButton(id: String) {
|
||||
this.triggerCloseJistiFrame.delete(id);
|
||||
}
|
||||
|
||||
|
|
@ -748,100 +748,100 @@ export class MediaManager {
|
|||
* For some reasons, the microphone muted icon or the stream is not always up to date.
|
||||
* Here, every 30 seconds, we are "reseting" the streams and sending again the constraints to the other peers via the data channel again (see SimplePeer::pushVideoToRemoteUser)
|
||||
**/
|
||||
private pingCameraStatus(){
|
||||
private pingCameraStatus() {
|
||||
/*setInterval(() => {
|
||||
console.log('ping camera status');
|
||||
this.triggerUpdatedLocalStreamCallbacks(this.localStream);
|
||||
}, 30000);*/
|
||||
}
|
||||
|
||||
public addNewMessage(name: string, message: string, isMe: boolean = false){
|
||||
public addNewMessage(name: string, message: string, isMe: boolean = false) {
|
||||
discussionManager.addMessage(name, message, isMe);
|
||||
|
||||
//when there are new message, show discussion
|
||||
if(!discussionManager.activatedDiscussion) {
|
||||
if (!discussionManager.activatedDiscussion) {
|
||||
discussionManager.showDiscussionPart();
|
||||
}
|
||||
}
|
||||
|
||||
public addSendMessageCallback(userId: string|number, callback: SendMessageCallback){
|
||||
public addSendMessageCallback(userId: string | number, callback: SendMessageCallback) {
|
||||
discussionManager.onSendMessageCallback(userId, callback);
|
||||
}
|
||||
|
||||
get activatedDiscussion(){
|
||||
get activatedDiscussion() {
|
||||
return discussionManager.activatedDiscussion;
|
||||
}
|
||||
|
||||
public setUserInputManager(userInputManager : UserInputManager){
|
||||
public setUserInputManager(userInputManager: UserInputManager) {
|
||||
this.userInputManager = userInputManager;
|
||||
discussionManager.setUserInputManager(userInputManager);
|
||||
}
|
||||
//check if user is active
|
||||
private checkActiveUser(){
|
||||
if(this.setTimeOutlastUpdateScene){
|
||||
private checkActiveUser() {
|
||||
if (this.setTimeOutlastUpdateScene) {
|
||||
clearTimeout(this.setTimeOutlastUpdateScene);
|
||||
}
|
||||
this.setTimeOutlastUpdateScene = setTimeout(() => {
|
||||
const now = new Date();
|
||||
//if last update is more of 10 sec
|
||||
if( (now.getTime() - this.lastUpdateScene.getTime()) > 10000) {
|
||||
if ((now.getTime() - this.lastUpdateScene.getTime()) > 10000) {
|
||||
this.blurCamera();
|
||||
}else{
|
||||
} else {
|
||||
this.focusCamera();
|
||||
}
|
||||
this.checkActiveUser();
|
||||
}, this.focused ? 10000 : 1000);
|
||||
}
|
||||
|
||||
public setShowReportModalCallBacks(callback: ShowReportCallBack){
|
||||
public setShowReportModalCallBacks(callback: ShowReportCallBack) {
|
||||
this.showReportModalCallBacks.add(callback);
|
||||
}
|
||||
|
||||
public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack){
|
||||
public setHelpCameraSettingsCallBack(callback: HelpCameraSettingsCallBack) {
|
||||
this.helpCameraSettingsCallBacks.add(callback);
|
||||
}
|
||||
|
||||
private showHelpCameraSettingsCallBack(){
|
||||
for(const callBack of this.helpCameraSettingsCallBacks){
|
||||
private showHelpCameraSettingsCallBack() {
|
||||
for (const callBack of this.helpCameraSettingsCallBacks) {
|
||||
callBack();
|
||||
}
|
||||
}
|
||||
|
||||
updateSoudMeter(){
|
||||
try{
|
||||
updateSoudMeter() {
|
||||
try {
|
||||
const volume = parseInt(((this.mySoundMeter ? this.mySoundMeter.getVolume() : 0) / 10).toFixed(0));
|
||||
this.setVolumeSoundMeter(volume, this.mySoundMeterElement);
|
||||
|
||||
for(const indexUserId of this.soundMeters.keys()){
|
||||
//this.setVolumeSoundMeter(volume, this.mySoundMeterElement);
|
||||
|
||||
for (const indexUserId of this.soundMeters.keys()) {
|
||||
const soundMeter = this.soundMeters.get(indexUserId);
|
||||
const soundMeterElement = this.soundMeterElements.get(indexUserId);
|
||||
if(!soundMeter || !soundMeterElement){
|
||||
if (!soundMeter || !soundMeterElement) {
|
||||
return;
|
||||
}
|
||||
const volumeByUser = parseInt((soundMeter.getVolume() / 10).toFixed(0));
|
||||
this.setVolumeSoundMeter(volumeByUser, soundMeterElement);
|
||||
}
|
||||
}catch(err){
|
||||
} catch (err) {
|
||||
//console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
private setVolumeSoundMeter(volume: number, element: HTMLDivElement){
|
||||
if(volume <= 0 && !element.classList.contains('active')){
|
||||
private setVolumeSoundMeter(volume: number, element: HTMLDivElement) {
|
||||
if (volume <= 0 && !element.classList.contains('active')) {
|
||||
return;
|
||||
}
|
||||
element.classList.remove('active');
|
||||
if(volume <= 0){
|
||||
if (volume <= 0) {
|
||||
return;
|
||||
}
|
||||
element.classList.add('active');
|
||||
element.childNodes.forEach((value: ChildNode, index) => {
|
||||
const elementChildre = element.children.item(index);
|
||||
if(!elementChildre){
|
||||
if (!elementChildre) {
|
||||
return;
|
||||
}
|
||||
elementChildre.classList.remove('active');
|
||||
if((index +1) > volume){
|
||||
if ((index + 1) > volume) {
|
||||
return;
|
||||
}
|
||||
elementChildre.classList.add('active');
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue