Add button to enter un visio

diff --git a/front/dist/index.html b/front/dist/index.html
index 4b6283987c5fe8bc7ebab056ac67b18b97c93459..a9f51d4d905729767db7d02d9a26d1de8fa40967 100644 (file)
--- a/front/dist/index.html
+++ b/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>

diff --git a/front/dist/resources/logos/phone-open.svg b/front/dist/resources/logos/phone-open.svg
new file mode 100644 (file)
index 0000000..73b0895
--- /dev/null
+++ b/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>

diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index 71b948bd634d895ee4b00172fa3efccf0ea8182f..9e2d2daacf29f3f56b9b9c18dd01c4cd7f864c27 100644 (file)
--- a/front/dist/resources/style/style.css
+++ b/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;
+    }
 }
\ No newline at end of file

diff --git a/front/src/Phaser/Game/GameManager.ts b/front/src/Phaser/Game/GameManager.ts
index 6121d262daa68d7be1672acf29edb8c836caed88..f4f24ef5a70c0f1fe36590d13f558a75624e48e0 100644 (file)
--- a/front/src/Phaser/Game/GameManager.ts
+++ b/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

diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts
index 0fac397e35b691d3f3e84bbed99e991aaa9e594d..5a320c3884ffacb46020b3d93f654595f30cb124 100644 (file)
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/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();
         });
     }
 }

diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts
index 0d1a3a99ef5b9fb78fa2efe5c3a6632513fd88a0..5b8d0076b72b837069207be5c4705c6235b13a30 100644 (file)
--- a/front/src/WebRtc/MediaManager.ts
+++ b/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)

diff --git a/front/src/WebRtc/SimplePeer.ts b/front/src/WebRtc/SimplePeer.ts
index 86b33850560d57d1a2a083ce26221accddb42459..a53fd75434cd2b09c89d478e940060b1ca9fb45d 100644 (file)
--- a/front/src/WebRtc/SimplePeer.ts
+++ b/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();
+    }
 }
\ No newline at end of file