From 0a7063a47822255c7152bdc6e00db375d1b571a6 Mon Sep 17 00:00:00 2001
From: Gregoire Parant <g.parant@thecodingmachine.com>
Date: Tue, 17 Nov 2020 18:03:44 +0100
Subject: [PATCH] Add close button

---
 front/dist/index.html                |  6 +++++-
 front/dist/resources/style/style.css | 17 +++++++++++++++++
 front/src/Phaser/Game/GameScene.ts   |  7 +++++++
 front/src/WebRtc/CoWebsiteManager.ts |  8 ++++++--
 front/src/WebRtc/MediaManager.ts     | 27 +++++++++++++++++++++++++++
 5 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/front/dist/index.html b/front/dist/index.html
index 0e696622..5806bef7 100644
--- a/front/dist/index.html
+++ b/front/dist/index.html
@@ -72,7 +72,11 @@
 
                 </div>
             </div>
-            <div id="cowebsite" class="cowebsite hidden"></div>
+            <div id="cowebsite" class="cowebsite hidden">
+                <button class="close-btn" id="cowebsite-close">
+                    <img src="resources/logos/close.svg"/>
+                </button>
+            </div>
             <div class="audio-playing">
                 <img src="/resources/logos/megaphone.svg"/>
             </div>
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index edd3ddf0..4a74fdae 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -274,6 +274,23 @@ body {
     #cowebsite.hidden {
         transform: translateX(100%);
     }
+
+    #cowebsite .close-btn{
+        position: absolute;
+        top: 10px;
+        right: -100px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        animation: right .2s ease;
+    }
+    #cowebsite .close-btn img{
+        height: 15px;
+        right: 15px;
+    }
+    #cowebsite:hover .close-btn{
+        right: 10px;
+    }
 }
 @media (max-aspect-ratio: 1/1) {
     .game-overlay {
diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index ae689775..2d6f1eec 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1196,12 +1196,19 @@ export class GameScene extends ResizableScene implements CenterListener {
         jitsiFactory.start(roomName, gameManager.getPlayerName(), jwt);
         this.connection.setSilent(true);
         mediaManager.hideGameOverlay();
+
+        //permit to stop jitsi when user close iframe
+        mediaManager.addTriggerCloseJitsiFrameButton('close-jisi',() => {
+            this.stopJitsi();
+        });
     }
 
     public stopJitsi(): void {
         this.connection.setSilent(false);
         jitsiFactory.stop();
         mediaManager.showGameOverlay();
+
+        mediaManager.removeTriggerCloseJitsiFrameButton('close-jisi');
     }
 
     private loadSpritesheet(name: string, url: string): Promise<void> {
diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index b625bf6e..e6d5b748 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -44,7 +44,9 @@ class CoWebsiteManager {
 
     public loadCoWebsite(url: string): void {
         this.load();
-        this.cowebsiteDiv.innerHTML = '';
+        this.cowebsiteDiv.innerHTML = `<button class="close-btn" id="cowebsite-close">
+                    <img src="resources/logos/close.svg">
+                </button>`;
 
         const iframe = document.createElement('iframe');
         iframe.id = 'cowebsite-iframe';
@@ -83,7 +85,9 @@ class CoWebsiteManager {
             this.close();
             this.fire();
             setTimeout(() => {
-                this.cowebsiteDiv.innerHTML = '';
+                this.cowebsiteDiv.innerHTML = `<button class="close-btn" id="cowebsite-close">
+                    <img src="resources/logos/close.svg">
+                </button>`;
                 resolve();
             }, animationTime)
         }));
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index fa703fbe..1f0988de 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -40,6 +40,8 @@ export class MediaManager {
 
     private hasCamera = true;
 
+    private triggerCloseJistiFrame : Map<String, Function> = new Map<String, Function>();
+
     constructor() {
 
         this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
@@ -130,11 +132,23 @@ export class MediaManager {
     public showGameOverlay(){
         const gameOverlay = this.getElementByIdOrFail('game-overlay');
         gameOverlay.classList.add('active');
+
+        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail('cowebsite-close');
+        const functionTrigger = () => {
+            this.triggerCloseJitsiFrameButton();
+        }
+        buttonCloseFrame.removeEventListener('click', functionTrigger);
     }
 
     public hideGameOverlay(){
         const gameOverlay = this.getElementByIdOrFail('game-overlay');
         gameOverlay.classList.remove('active');
+
+        const buttonCloseFrame = HtmlUtils.getElementByIdOrFail('cowebsite-close');
+        const functionTrigger = () => {
+            this.triggerCloseJitsiFrameButton();
+        }
+        buttonCloseFrame.addEventListener('click', functionTrigger);
     }
 
     public enableCamera() {
@@ -582,6 +596,19 @@ export class MediaManager {
         mainContainer.appendChild(divReport);
     }
 
+    public addTriggerCloseJitsiFrameButton(id: String, Function: Function){
+        this.triggerCloseJistiFrame.set(id, Function);
+    }
+
+    public removeTriggerCloseJitsiFrameButton(id: String){
+        this.triggerCloseJistiFrame.delete(id);
+    }
+
+    private triggerCloseJitsiFrameButton(): void {
+        for (const callback of this.triggerCloseJistiFrame.values()) {
+            callback();
+        }
+    }
 
 }