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 fc055941..cc8f0d7c 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -284,6 +284,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 6a0b86d9..20eded64 100644
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@@ -1202,12 +1202,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 9dfbf7c4..943e13c2 100644
--- a/front/src/WebRtc/MediaManager.ts
+++ b/front/src/WebRtc/MediaManager.ts
@@ -52,6 +52,8 @@ export class MediaManager {
private hasCamera = true;
+ private triggerCloseJistiFrame : Map = new Map();
+
constructor() {
this.myCamVideo = HtmlUtils.getElementByIdOrFail('myCamVideo');
@@ -170,11 +172,23 @@ export class MediaManager {
public showGameOverlay(){
const gameOverlay = HtmlUtils.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 = HtmlUtils.getElementByIdOrFail('game-overlay');
gameOverlay.classList.remove('active');
+
+ const buttonCloseFrame = HtmlUtils.getElementByIdOrFail('cowebsite-close');
+ const functionTrigger = () => {
+ this.triggerCloseJitsiFrameButton();
+ }
+ buttonCloseFrame.addEventListener('click', functionTrigger);
}
public enableCamera() {
@@ -654,6 +668,19 @@ export class MediaManager {
public removeParticipant(userId: number|string){
this.discussionManager.removeParticipant(userId);
}
+ 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();
+ }
+ }
/**
* For some reasons, the microphone muted icon or the stream is not always up to date.
* Here, every 30 seconds, we are "reseting" the streams and sending again the constraints to the other peers via the data channel again (see SimplePeer::pushVideoToRemoteUser)