Change report flag

- Add icon on video
- Permit to have a modal with comment

front/src/WebRtc/MediaManager.ts

@@ -10,6 +10,7 @@ const videoConstraint: boolean|MediaTrackConstraints = {
 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;
 
 // TODO: Split MediaManager in 2 classes: MediaManagerUI (in charge of HTML) and MediaManager (singleton in charge of the camera only)
 // TODO: verify that microphone event listeners are not triggered plenty of time NOW (since MediaManager is created many times!!!!)
@@ -36,7 +37,6 @@ export class MediaManager {
     private cinemaBtn: HTMLDivElement;
     private monitorBtn: HTMLDivElement;
 
-
     constructor() {
 
         this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@@ -91,17 +91,14 @@ export class MediaManager {
     }
 
     public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
-
         this.updatedLocalStreamCallBacks.add(callback);
     }
 
     public onStartScreenSharing(callback: StartScreenSharingCallback): void {
-
         this.startScreenSharingCallBacks.add(callback);
     }
 
     public onStopScreenSharing(callback: StopScreenSharingCallback): void {
-
         this.stopScreenSharingCallBacks.add(callback);
     }
 
@@ -342,8 +339,10 @@ export class MediaManager {
     /**
      *
      * @param userId
+     * @param reportCallBack
+     * @param userName
      */
-    addActiveVideo(userId: string, userName: string = ""){
+    addActiveVideo(userId: string, reportCallBack: ReportCallback, userName: string = ""){
         this.webrtcInAudio.play();
 
         userName = userName.toUpperCase();
@@ -355,12 +354,19 @@ export class MediaManager {
                 <div class="rtc-error" style="display: none"></div>
                 <i id="name-${userId}" style="background-color: ${color};">${userName}</i>
                 <img id="microphone-${userId}" src="resources/logos/microphone-close.svg">
+                <img id="report-${userId}" class="report active" src="resources/logos/report.svg">
                 <video id="${userId}" autoplay></video>
             </div>
         `;
 
         layoutManager.add(DivImportance.Normal, userId, html);
 
+        const reportBtn = this.getElementByIdOrFail<HTMLDivElement>(`report-${userId}`);
+        reportBtn.addEventListener('click', (e: MouseEvent) => {
+            e.preventDefault();
+            this.showReportModal(userId, userName, reportCallBack);
+        });
+
         this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId));
     }
 
@@ -542,6 +548,58 @@ export class MediaManager {
         return elem as T;
     }
 
+    private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){
+        //create report text area
+        const mainContainer = this.getElementByIdOrFail<HTMLDivElement>('main-container');
+
+        const divReport = document.createElement('div');
+        divReport.classList.add('modal-report-user');
+
+        const inputHidden = document.createElement('input');
+        inputHidden.id = 'input-report-user';
+        inputHidden.type = 'hidden';
+        inputHidden.value = userId;
+        divReport.appendChild(inputHidden);
+
+        const titleMessage = document.createElement('p');
+        titleMessage.innerText = 'Vous souhaitez report : ' + userName;
+        divReport.appendChild(titleMessage);
+
+        const imgReportUser = document.createElement('img');
+        imgReportUser.id = 'img-report-user';
+        imgReportUser.src = 'resources/logos/report.svg';
+        divReport.appendChild(imgReportUser);
+
+        const textareaUser = document.createElement('textarea');
+        textareaUser.id = 'textarea-report-user';
+        textareaUser.placeholder = 'Laissez un commentaire pour confirmer le report de la personne';
+        divReport.appendChild(textareaUser);
+
+        const buttonReport = document.createElement('button');
+        buttonReport.id = 'button-save-report-user';
+        buttonReport.innerText = 'Report';
+        buttonReport.addEventListener('click', () => {
+            if(!textareaUser.value){
+                textareaUser.style.border = '1px solid red'
+                return;
+            }
+            reportCallBack(textareaUser.value);
+            divReport.remove();
+        });
+        divReport.appendChild(buttonReport);
+
+        const buttonCancel = document.createElement('img');
+        buttonCancel.id = 'cancel-report-user';
+        buttonCancel.src = 'resources/logos/close.svg';
+        buttonCancel.addEventListener('click', () => {
+            divReport.remove();
+        });
+        divReport.appendChild(buttonCancel);
+
+        mainContainer.appendChild(divReport);
+    }
+
+
 }
 
 export const mediaManager = new MediaManager();

front/src/WebRtc/SimplePeer.ts

@@ -47,6 +47,7 @@ export class SimplePeer {
         this.sendLocalVideoStreamCallback = this.sendLocalVideoStream.bind(this);
         this.sendLocalScreenSharingStreamCallback = this.sendLocalScreenSharingStream.bind(this);
         this.stopLocalScreenSharingStreamCallback = this.stopLocalScreenSharingStream.bind(this);
+
         mediaManager.onUpdateLocalStream(this.sendLocalVideoStreamCallback);
         mediaManager.onStartScreenSharing(this.sendLocalScreenSharingStreamCallback);
         mediaManager.onStopScreenSharing(this.stopLocalScreenSharingStreamCallback);
@@ -145,7 +146,9 @@ export class SimplePeer {
         }
 
         mediaManager.removeActiveVideo("" + user.userId);
-        mediaManager.addActiveVideo("" + user.userId, name);
+        mediaManager.addActiveVideo("" + user.userId, (comment: string) => {
+            this.reportUser(user.userId, comment);
+        }, name);
 
         const peer = new VideoPeer(user.userId, user.initiator ? user.initiator : false, this.Connection);
         // When a connection is established to a video stream, and if a screen sharing is taking place,
@@ -363,6 +366,13 @@ export class SimplePeer {
         }
     }
 
+    /**
+     * Triggered locally when clicking on the report button
+     */
+    public reportUser(userId: number, message: string) {
+        this.Connection.emitReportPlayerMessage(userId, message)
+    }
+
     private sendLocalScreenSharingStreamToUser(userId: number): void {
         // If a connection already exists with user (because it is already sharing a screen with us... let's use this connection)
         if (this.PeerScreenSharingConnectionArray.has(userId)) {