diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 2531bd4b..aa323c76 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1290,7 +1290,6 @@ ${escapedMessage} */ update(time: number, delta: number) : void { this.dirty = false; - mediaManager.updateScene(); this.currentTick = time; this.CurrentPlayer.moveUser(delta); diff --git a/front/src/Phaser/Menu/MenuScene.ts b/front/src/Phaser/Menu/MenuScene.ts index 01e27c2b..db41504c 100644 --- a/front/src/Phaser/Menu/MenuScene.ts +++ b/front/src/Phaser/Menu/MenuScene.ts @@ -79,10 +79,6 @@ export class MenuScene extends Phaser.Scene { }); this.gameReportElement = new ReportMenu(this, connectionManager.getConnexionType === GameConnexionTypes.anonymous); - mediaManager.setShowReportModalCallBacks((userId, userName) => { - this.closeAll(); - this.gameReportElement.open(parseInt(userId), userName); - }); showReportScreenStore.subscribe((user) => { this.closeAll(); if (user !== null) { diff --git a/front/src/WebRtc/DiscussionManager.ts b/front/src/WebRtc/DiscussionManager.ts index 504ee91b..2106b9de 100644 --- a/front/src/WebRtc/DiscussionManager.ts +++ b/front/src/WebRtc/DiscussionManager.ts @@ -1,9 +1,9 @@ import {HtmlUtils} from "./HtmlUtils"; -import type {ShowReportCallBack} from "./MediaManager"; import type {UserInputManager} from "../Phaser/UserInput/UserInputManager"; import {connectionManager} from "../Connexion/ConnectionManager"; import {GameConnexionTypes} from "../Url/UrlManager"; import {iframeListener} from "../Api/IframeListener"; +import {showReportScreenStore} from "../Stores/ShowReportScreenStore"; export type SendMessageCallback = (message:string) => void; @@ -104,11 +104,11 @@ export class DiscussionManager { } public addParticipant( - userId: number|string, + userId: number|'me', name: string|undefined, img?: string|undefined, isMe: boolean = false, - showReportCallBack?: ShowReportCallBack + //showReportCallBack?: ShowReportCallBack ) { const divParticipant: HTMLDivElement = document.createElement('div'); divParticipant.classList.add('participant'); @@ -132,16 +132,13 @@ export class DiscussionManager { !isMe && connectionManager.getConnexionType && connectionManager.getConnexionType !== GameConnexionTypes.anonymous + && userId !== 'me' ) { const reportBanUserAction: HTMLButtonElement = document.createElement('button'); reportBanUserAction.classList.add('report-btn') reportBanUserAction.innerText = 'Report'; reportBanUserAction.addEventListener('click', () => { - if(showReportCallBack) { - showReportCallBack(`${userId}`, name); - }else{ - console.info('report feature is not activated!'); - } + showReportScreenStore.set({ userId: userId, userName: name ? name : ''}); }); divParticipant.appendChild(reportBanUserAction); } diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index a71618e0..56afd4ab 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -17,20 +17,13 @@ import {helpCameraSettingsVisibleStore} from "../Stores/HelpCameraSettingsStore" 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 HelpCameraSettingsCallBack = () => void; import {cowebsiteCloseButtonId} from "./CoWebsiteManager"; import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility"; export class MediaManager { - private remoteVideo: Map = new Map(); - //FIX ME SOUNDMETER: check stalability of sound meter calculation - //mySoundMeterElement: HTMLDivElement; startScreenSharingCallBacks : Set = new Set(); stopScreenSharingCallBacks : Set = new Set(); - showReportModalCallBacks : Set = new Set(); private focused : boolean = true; @@ -75,32 +68,7 @@ export class MediaManager { }, this.userInputManager); return; } - - /*if (result.stream !== null) { - isScreenSharing = true; - this.addScreenSharingActiveVideo('me', DivImportance.Normal); - HtmlUtils.getElementByIdOrFail('screen-sharing-me').srcObject = result.stream; - } else { - if (isScreenSharing) { - isScreenSharing = false; - this.removeActiveScreenSharingVideo('me'); - } - }*/ - }); - - /*screenSharingAvailableStore.subscribe((available) => { - if (available) { - document.querySelector('.btn-monitor')?.classList.remove('hide'); - } else { - document.querySelector('.btn-monitor')?.classList.add('hide'); - } - });*/ - } - - public updateScene(){ - //FIX ME SOUNDMETER: check stability of sound meter calculation - //this.updateSoudMeter(); } public showGameOverlay(): void { @@ -135,68 +103,6 @@ export class MediaManager { gameOverlayVisibilityStore.hideGameOverlay(); } - /*addActiveVideo(user: UserSimplePeerInterface, userName: string = ""){ - const userId = ''+user.userId - - userName = userName.toUpperCase(); - const color = this.getColorByString(userName); - - const html = ` -
- - - ${userName} - - - - -
- - - - - -
-
- `; - - layoutManager.add(DivImportance.Normal, userId, html); - - this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail(userId)); - - //permit to create participant in discussion part - const showReportUser = () => { - for(const callBack of this.showReportModalCallBacks){ - callBack(userId, userName); - } - }; - this.addNewParticipant(userId, userName, undefined, showReportUser); - - const reportBanUserActionEl: HTMLImageElement = HtmlUtils.getElementByIdOrFail(`report-${userId}`); - reportBanUserActionEl.addEventListener('click', (e) => { - e.preventDefault(); - e.stopPropagation(); - showReportUser(); - }); - } - - addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){ - - userId = this.getScreenSharingId(userId); - const html = ` -
- -
- `; - - layoutManager.add(divImportance, userId, html); - - this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail(userId)); - }*/ - private getScreenSharingId(userId: string): string { return `screen-sharing-${userId}`; } @@ -243,33 +149,6 @@ export class MediaManager { const blockLogoElement = HtmlUtils.getElementByIdOrFail('blocking-'+userId); show ? blockLogoElement.classList.add('active') : blockLogoElement.classList.remove('active'); } - /*addStreamRemoteVideo(userId: string, stream : MediaStream): void { - const remoteVideo = this.remoteVideo.get(userId); - if (remoteVideo === undefined) { - throw `Unable to find video for ${userId}`; - } - remoteVideo.srcObject = stream; - } - 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) { - this.addScreenSharingActiveVideo(userId); - } - - this.addStreamRemoteVideo(this.getScreenSharingId(userId), stream); - }*/ - - removeActiveVideo(userId: string){ - //layoutManager.remove(userId); - //this.remoteVideo.delete(userId); - - //permit to remove user in discussion part - this.removeParticipant(userId); - } - /*removeActiveScreenSharingVideo(userId: string) { - this.removeActiveVideo(this.getScreenSharingId(userId)) - }*/ isConnecting(userId: string): void { const connectingSpinnerDiv = this.getSpinner(userId); @@ -328,13 +207,6 @@ export class MediaManager { return color; } - public addNewParticipant(userId: number|string, name: string|undefined, img?: string, showReportUserCallBack?: ShowReportCallBack){ - discussionManager.addParticipant(userId, name, img, false, showReportUserCallBack); - } - - public removeParticipant(userId: number|string){ - discussionManager.removeParticipant(userId); - } public addTriggerCloseJitsiFrameButton(id: String, Function: Function){ this.triggerCloseJistiFrame.set(id, Function); } @@ -381,52 +253,6 @@ export class MediaManager { discussionManager.setUserInputManager(userInputManager); } - public setShowReportModalCallBacks(callback: ShowReportCallBack){ - this.showReportModalCallBacks.add(callback); - } - - //FIX ME SOUNDMETER: check stalability of sound meter calculation - /*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()){ - const soundMeter = this.soundMeters.get(indexUserId); - const soundMeterElement = this.soundMeterElements.get(indexUserId); - if(!soundMeter || !soundMeterElement){ - return; - } - const volumeByUser = parseInt((soundMeter.getVolume() / 10).toFixed(0)); - this.setVolumeSoundMeter(volumeByUser, soundMeterElement); - } - }catch(err){ - //console.error(err); - } - }*/ - - private setVolumeSoundMeter(volume: number, element: HTMLDivElement){ - if(volume <= 0 && !element.classList.contains('active')){ - return; - } - element.classList.remove('active'); - if(volume <= 0){ - return; - } - element.classList.add('active'); - element.childNodes.forEach((value: ChildNode, index) => { - const elementChildre = element.children.item(index); - if(!elementChildre){ - return; - } - elementChildre.classList.remove('active'); - if((index +1) > volume){ - return; - } - elementChildre.classList.add('active'); - }); - } - public getNotification(){ //Get notification if (!DISABLE_NOTIFICATIONS && window.Notification && Notification.permission !== "granted") { diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts index 7c6264a9..2d068b41 100644 --- a/front/src/WebRtc/SimplePeer.ts +++ b/front/src/WebRtc/SimplePeer.ts @@ -19,6 +19,7 @@ import {localStreamStore, LocalStreamStoreValue, obtainedMediaConstraintStore} f import {screenSharingLocalStreamStore} from "../Stores/ScreenSharingStore"; import {DivImportance, layoutManager} from "./LayoutManager"; import {HtmlUtils} from "./HtmlUtils"; +import {discussionManager} from "./DiscussionManager"; export interface UserSimplePeerInterface{ userId: number; @@ -164,7 +165,7 @@ export class SimplePeer { name = this.getName(user.userId); } - mediaManager.removeActiveVideo("" + user.userId); + discussionManager.removeParticipant(user.userId); //mediaManager.addActiveVideo(user, name); diff --git a/front/src/WebRtc/VideoPeer.ts b/front/src/WebRtc/VideoPeer.ts index 3ad006ce..805b7fb4 100644 --- a/front/src/WebRtc/VideoPeer.ts +++ b/front/src/WebRtc/VideoPeer.ts @@ -8,6 +8,7 @@ import type {UserSimplePeerInterface} from "./SimplePeer"; import {get, readable, Readable} from "svelte/store"; import {obtainedMediaConstraintStore} from "../Stores/MediaStore"; import {DivImportance} from "./LayoutManager"; +import {discussionManager} from "./DiscussionManager"; const Peer: SimplePeerNamespace.SimplePeer = require('simple-peer'); @@ -234,7 +235,7 @@ export class VideoPeer extends Peer { } this.onBlockSubscribe.unsubscribe(); this.onUnBlockSubscribe.unsubscribe(); - mediaManager.removeActiveVideo("" + this.userId); + discussionManager.removeParticipant(this.userId); // FIXME: I don't understand why "Closing connection with" message is displayed TWICE before "Nb users in peerConnectionArray" // I do understand the method closeConnection is called twice, but I don't understand how they manage to run in parallel. super.destroy(error);