Add callback report in discussion part

front/dist/resources/style/style.css

@@ -82,13 +82,14 @@ body .message-info.warning{
     position: absolute;
     right: 15px;
     bottom: 15px;
-    border-radius: 15px;
+    border-radius: 15px 15px 15px 15px;
 }
 
 video#myCamVideo{
     width: 15vw;
     -webkit-transform: scaleX(-1);
     transform: scaleX(-1);
+    border-radius: 15px 15px 15px 15px;
     /*width: 200px;*/
     /*height: 113px;*/
 }
@@ -365,6 +366,7 @@ body {
     margin: 2%;
     transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s;
     cursor: pointer;
+    border-radius: 15px 15px 15px 15px;
 }
 
 .sidebar > div:hover {
@@ -525,7 +527,7 @@ body {
     border: 1px solid black;
     background-color: #00000000;
     color: #ffda01;
-    border-radius: 10px;
+    border-radius: 15px;
     padding: 10px 30px;
     transition: all .2s ease;
 }
@@ -662,7 +664,7 @@ div.modal-report-user{
     border: 1px solid black;
     background-color: #00000000;
     color: #ffda01;
-    border-radius: 10px;
+    border-radius: 15px;
     padding: 10px 30px;
     transition: all .2s ease;
 }

front/src/WebRtc/DiscussionManager.ts

@@ -1,9 +1,8 @@
 import {HtmlUtils} from "./HtmlUtils";
-import {UpdatedLocalStreamCallback} from "./MediaManager";
+import {MediaManager, ReportCallback, UpdatedLocalStreamCallback} from "./MediaManager";
 export type SendMessageCallback = (message:string) => void;
 
 export class DiscussionManager {
-
     private mainContainer: HTMLDivElement;
 
     private divDiscuss?: HTMLDivElement;
@@ -17,7 +16,7 @@ export class DiscussionManager {
 
     private sendMessageCallBack : Map<number|string, SendMessageCallback> = new Map<number|string, SendMessageCallback>();
 
-    constructor(name: string) {
+    constructor(private mediaManager: MediaManager, name: string) {
         this.mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
         this.createDiscussPart(name);
     }
@@ -86,7 +85,13 @@ export class DiscussionManager {
         this.addParticipant('me', 'Moi', undefined, true);
     }
 
-    public addParticipant(userId: number|string, name: string|undefined, img?: string|undefined, isMe: boolean = false) {
+    public addParticipant(
+        userId: number|string,
+        name: string|undefined,
+        img?: string|undefined,
+        isMe: boolean = false,
+        reportCallback?: ReportCallback
+    ) {
         const divParticipant: HTMLDivElement = document.createElement('div');
         divParticipant.classList.add('participant');
         divParticipant.id = `participant-${userId}`;
@@ -110,8 +115,9 @@ export class DiscussionManager {
             reportBanUserAction.classList.add('report-btn')
             reportBanUserAction.innerText = 'Report';
             reportBanUserAction.addEventListener('click', () => {
-                //TODO report user
+                if(reportCallback) {
-                console.log('report');
+                    this.mediaManager.showReportModal(`${userId}`, name ?? '', reportCallback);
+                }
             });
             divParticipant.appendChild(reportBanUserAction);
         }

front/src/WebRtc/MediaManager.ts

@@ -93,7 +93,7 @@ export class MediaManager {
             //update tracking
         });
 
-        this.discussionManager = new DiscussionManager('test');
+        this.discussionManager = new DiscussionManager(this,'test');
     }
 
     public onUpdateLocalStream(callback: UpdatedLocalStreamCallback): void {
@@ -370,7 +370,7 @@ export class MediaManager {
         this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail<HTMLVideoElement>(userId));
 
         //permit to create participant in discussion part
-        this.addNewParticipant(userId, userName);
+        this.addNewParticipant(userId, userName, undefined, reportCallBack);
     }
     
     addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){
@@ -510,7 +510,7 @@ export class MediaManager {
         return color;
     }
 
-    private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){
+    public showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){
         //create report text area
         const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
 
@@ -567,8 +567,8 @@ export class MediaManager {
         mainContainer.appendChild(divReport);
     }
 
-    public addNewParticipant(userId: number|string, name: string|undefined, img?: string){
+    public addNewParticipant(userId: number|string, name: string|undefined, img?: string, reportCallBack?: ReportCallback){
-        this.discussionManager.addParticipant(userId, name, img);
+        this.discussionManager.addParticipant(userId, name, img, false, reportCallBack);
     }
 
     public removeParticipant(userId: number|string){