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 @@
-
+
+
+
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 {
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 = ``;
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 = ``;
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 = new Map();
+
constructor() {
this.myCamVideo = this.getElementByIdOrFail('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();
+ }
+ }
}