Add button to enter un visio

front/dist/index.html

@@ -30,5 +30,8 @@
                 </div>
             </div>
         </div>
+        <div id="phone-open" class="phone-open">
+            <img src="resources/logos/phone-open.svg">
+        </div>
     </body>
 </html>

front/dist/resources/logos/phone-open.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M163.2,351.1c-2.4-23.4-1.1-46.7,3.9-69.2c2.6-11-2.1-23.8-9.4-29.6l-36.8-39.7C142.5,160,170,126.2,216.8,95
+			l45.1,27.2c9,7.3,21.3,9.1,32,4.4c21.2-9.5,43.7-15.4,67.2-17.7c16.9-1.7,29.3-16.8,27.6-33.7L381.5,5
+			c-1.7-16.9-16.8-29.3-33.7-27.6C154-2.8,12.4,170.8,32.1,364.5c1.7,16.9,16.8,29.3,33.7,27.6l69.9-7.1
+			C152.5,383.1,164.9,368,163.2,351.1z"/>
+	</g>
+</g>
+</svg>

front/dist/resources/style/style.css

@@ -111,4 +111,43 @@ video:nth-child(3):nth-last-child(1) {
     top: calc(48px - 32px);
     left: calc(48px - 35px);
     position: relative;
+}
+.phone-open{
+    position: absolute;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    left: calc(50% - 70px);
+    padding: 20px;
+    bottom: 20px;
+    box-shadow: 2px 2px 24px #444;
+    background-color: green;
+    opacity: 0;
+    transition: all .4s ease-in-out;
+}
+.phone-open.active{
+    opacity: 1;
+    animation-name: phone-move;
+    animation-duration: 0.4s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+.phone-open:hover{
+    animation: none;
+    cursor: pointer;
+}
+
+@keyframes phone-move {
+    0%   {
+        left: calc(50% - 70px);
+        bottom: 20px;
+    }
+    25% {
+        left: calc(50% - 65px);
+        bottom: 15px;
+    }
+    25% {
+        left: calc(50% - 75px);
+        bottom: 25px;
+    }
 }

front/src/Phaser/Game/GameManager.ts

@@ -15,7 +15,6 @@ export interface GameManagerInterface {
     status : number;
     SimplePeer: SimplePeerInterface;
     createCurrentPlayer() : void;
-    startWebRtc() : void;
     shareUserPosition(ListMessageUserPosition : ListMessageUserPositionInterface): void;
 }
 export class GameManager implements GameManagerInterface {
@@ -62,10 +61,6 @@ export class GameManager implements GameManagerInterface {
         this.status = StatusGameManagerEnum.CURRENT_USER_CREATED;
     }
 
-    startWebRtc() : void {
-        this.SimplePeer.startWebRtc();
-    }
-
     /**
      * Share position in game
      * @param ListMessageUserPosition

front/src/Phaser/Game/GameScene.ts

@@ -253,7 +253,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
         //init colision
         this.physics.add.collider(this.CurrentPlayer, player, (CurrentPlayer: CurrentGamerInterface, MapPlayer: GamerInterface) => {
             CurrentPlayer.say("Hello, how are you ? ");
-            this.GameManager.startWebRtc();
+            this.GameManager.SimplePeer.activePhone();
         });
     }
 }

front/src/WebRtc/MediaManager.ts

@@ -1,25 +1,23 @@
 export class MediaManager {
     localStream: MediaStream;
-    remoteStream: MediaStream;
     remoteVideo: Array<any> = new Array<any>();
     myCamVideo: any;
     cinemaClose: any = null;
     cinema: any = null;
     microphoneClose: any = null;
     microphone: any = null;
-    constraintsMedia = {audio: true, video: true};
+    constraintsMedia = {audio: false, video: true};
     getCameraPromise : Promise<any> = null;
 
     constructor() {
         this.myCamVideo = document.getElementById('myCamVideo');
-
         this.microphoneClose = document.getElementById('microphone-close');
+
         this.microphoneClose.addEventListener('click', (e: any) => {
             e.preventDefault();
             this.enabledMicrophone();
             //update tracking
         });
-
         this.microphone = document.getElementById('microphone');
         this.microphone.addEventListener('click', (e: any) => {
             e.preventDefault();
@@ -42,7 +40,9 @@ export class MediaManager {
 
         this.enabledCamera();
         this.enabledMicrophone();
+    }
 
+    activeVisio(){
         let webRtc = document.getElementById('webRtc');
         webRtc.classList.add('active');
     }
@@ -91,6 +91,18 @@ export class MediaManager {
         }
     }
 
+    getElementActivePhone(){
+        return document.getElementById('phone-open');
+    }
+
+    activePhoneOpen(){
+        return this.getElementActivePhone().classList.add("active");
+    }
+
+    disablePhoneOpen(){
+        return this.getElementActivePhone().classList.remove("active");
+    }
+
     //get camera
     getCamera() {
         return this.getCameraPromise = navigator.mediaDevices.getUserMedia(this.constraintsMedia)

front/src/WebRtc/SimplePeer.ts

@@ -3,7 +3,8 @@ import {MediaManager} from "./MediaManager";
 let Peer = require('simple-peer');
 
 export interface SimplePeerInterface {
-    startWebRtc(): void;
+    activePhone(): void;
+    disablePhone(): void;
 }
 
 export class SimplePeer {
@@ -16,13 +17,18 @@ export class SimplePeer {
     constructor(Connexion: ConnexionInterface, roomId: string = "test-webrtc") {
         this.Connexion = Connexion;
         this.RoomId = roomId;
+        this.MediaManager = new MediaManager();
+        this.MediaManager.getElementActivePhone().addEventListener("click", () => {
+            this.startWebRtc();
+            this.disablePhone();
+        });
     }
 
     /**
      * server has two person connected, start the meet
      */
     startWebRtc() {
-        this.MediaManager = new MediaManager();
+        this.MediaManager.activeVisio();
         return this.MediaManager.getCamera().then((stream: MediaStream) => {
             this.MediaManager.localStream = stream;
             //send message to join a room
@@ -126,4 +132,12 @@ export class SimplePeer {
      addMedia (userId : any) {
          this.PeerConnexionArray[userId].addStream(this.MediaManager.localStream) // <- add streams to peer dynamically
     }
+
+    activePhone(){
+         this.MediaManager.activePhoneOpen();
+    }
+
+    disablePhone(){
+        this.MediaManager.disablePhoneOpen();
+    }
 }