diff --git a/front/dist/index.html b/front/dist/index.html index 4b628398..a9f51d4d 100644 --- a/front/dist/index.html +++ b/front/dist/index.html @@ -30,5 +30,8 @@ +
+ +
diff --git a/front/dist/resources/logos/phone-open.svg b/front/dist/resources/logos/phone-open.svg new file mode 100644 index 00000000..73b08951 --- /dev/null +++ b/front/dist/resources/logos/phone-open.svg @@ -0,0 +1,16 @@ + + + + + + + + + + diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 71b948bd..9e2d2daa 100644 --- 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 6121d262..f4f24ef5 100644 --- 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 0fac397e..5a320c38 100644 --- 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 0d1a3a99..5b8d0076 100644 --- 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 = new Array(); 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 = 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 86b33850..a53fd754 100644 --- 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