lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Fix style and refactor

Browse source
This commit is contained in:
Gregoire Parant 2020-10-25 19:38:00 +01:00
parent e640f67156
commit b6fe9e72e1
3 changed files with 29 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
front/dist/resources/style/style.css vendored
View file

@ -72,8 +72,9 @@ body .message-info.warning{
#div-myCamVideo { #div-myCamVideo {
position: absolute; position: absolute;
right: 0; right: 15px;
bottom: 0; bottom: 15px;
border-radius: 15px;
} }
video#myCamVideo{ video#myCamVideo{
@ -419,7 +420,7 @@ body {
max-height: 80%; max-height: 80%;
top: -80%; top: -80%;
left: 10%; left: 10%;
background: #000000a6; background: #333333;
z-index: 200; z-index: 200;
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
} }

24
front/src/Phaser/Login/EnableCameraScene.ts
View file

@ -7,6 +7,7 @@ import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter"; import {SoundMeter} from "../Components/SoundMeter";
import {SoundMeterSprite} from "../Components/SoundMeterSprite"; import {SoundMeterSprite} from "../Components/SoundMeterSprite";
import {HtmlUtils} from "../../WebRtc/HtmlUtils";
export const EnableCameraSceneName = "EnableCameraScene"; export const EnableCameraSceneName = "EnableCameraScene";
enum LoginTextures { enum LoginTextures {
@ -93,7 +94,7 @@ export class EnableCameraScene extends Phaser.Scene {
this.login(); this.login();
}); });
this.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').classList.add('active'); HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').classList.add('active');
const mediaPromise = mediaManager.getCamera(); const mediaPromise = mediaManager.getCamera();
mediaPromise.then(this.getDevices.bind(this)); mediaPromise.then(this.getDevices.bind(this));
@ -150,10 +151,10 @@ export class EnableCameraScene extends Phaser.Scene {
* Function called each time a camera is changed * Function called each time a camera is changed
*/ */
private setupStream(stream: MediaStream): void { private setupStream(stream: MediaStream): void {
const img = this.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo'); const img = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo');
img.style.display = 'none'; img.style.display = 'none';
const div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup'); const div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
div.srcObject = stream; div.srcObject = stream;
this.soundMeter.connectToSource(stream, new window.AudioContext()); this.soundMeter.connectToSource(stream, new window.AudioContext());
@ -164,7 +165,7 @@ export class EnableCameraScene extends Phaser.Scene {
private updateWebCamName(): void { private updateWebCamName(): void {
if (this.camerasList.length > 1) { if (this.camerasList.length > 1) {
const div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup'); const div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
let label = this.camerasList[this.cameraSelected].label; let label = this.camerasList[this.cameraSelected].label;
// remove text in parenthesis // remove text in parenthesis
@ -211,10 +212,10 @@ export class EnableCameraScene extends Phaser.Scene {
} }
private reposition(): void { private reposition(): void {
let div = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup'); let div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
let bounds = div.getBoundingClientRect(); let bounds = div.getBoundingClientRect();
if (!div.srcObject) { if (!div.srcObject) {
div = this.getElementByIdOrFail<HTMLVideoElement>('webRtcSetup'); div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('webRtcSetup');
bounds = div.getBoundingClientRect(); bounds = div.getBoundingClientRect();
} }
@ -255,7 +256,7 @@ export class EnableCameraScene extends Phaser.Scene {
} }
private login(): void { private login(): void {
this.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none'; HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').style.display = 'none';
this.soundMeter.stop(); this.soundMeter.stop();
window.removeEventListener('resize', this.repositionCallback); window.removeEventListener('resize', this.repositionCallback);
@ -276,13 +277,4 @@ export class EnableCameraScene extends Phaser.Scene {
} }
this.updateWebCamName(); this.updateWebCamName();
} }
private getElementByIdOrFail<T extends HTMLElement>(id: string): T {
const elem = document.getElementById(id);
if (elem === null) {
throw new Error("Cannot find HTML element with id '"+id+"'");
}
// FIXME: does not check the type of the returned type
return elem as T;
}
} }

43
front/src/WebRtc/MediaManager.ts
View file

@ -40,49 +40,49 @@ export class MediaManager {
constructor() { constructor() {
this.myCamVideo = this.getElementByIdOrFail<HTMLVideoElement>('myCamVideo'); this.myCamVideo = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideo');
this.webrtcInAudio = this.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in'); this.webrtcInAudio = HtmlUtils.getElementByIdOrFail<HTMLAudioElement>('audio-webrtc-in');
this.webrtcInAudio.volume = 0.2; this.webrtcInAudio.volume = 0.2;
this.microphoneBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-micro'); this.microphoneBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-micro');
this.microphoneClose = this.getElementByIdOrFail<HTMLImageElement>('microphone-close'); this.microphoneClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone-close');
this.microphoneClose.style.display = "none"; this.microphoneClose.style.display = "none";
this.microphoneClose.addEventListener('click', (e: MouseEvent) => { this.microphoneClose.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
this.enableMicrophone(); this.enableMicrophone();
//update tracking //update tracking
}); });
this.microphone = this.getElementByIdOrFail<HTMLImageElement>('microphone'); this.microphone = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('microphone');
this.microphone.addEventListener('click', (e: MouseEvent) => { this.microphone.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
this.disableMicrophone(); this.disableMicrophone();
//update tracking //update tracking
}); });
this.cinemaBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-video'); this.cinemaBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-video');
this.cinemaClose = this.getElementByIdOrFail<HTMLImageElement>('cinema-close'); this.cinemaClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('cinema-close');
this.cinemaClose.style.display = "none"; this.cinemaClose.style.display = "none";
this.cinemaClose.addEventListener('click', (e: MouseEvent) => { this.cinemaClose.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
this.enableCamera(); this.enableCamera();
//update tracking //update tracking
}); });
this.cinema = this.getElementByIdOrFail<HTMLImageElement>('cinema'); this.cinema = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('cinema');
this.cinema.addEventListener('click', (e: MouseEvent) => { this.cinema.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
this.disableCamera(); this.disableCamera();
//update tracking //update tracking
}); });
this.monitorBtn = this.getElementByIdOrFail<HTMLDivElement>('btn-monitor'); this.monitorBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('btn-monitor');
this.monitorClose = this.getElementByIdOrFail<HTMLImageElement>('monitor-close'); this.monitorClose = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('monitor-close');
this.monitorClose.style.display = "block"; this.monitorClose.style.display = "block";
this.monitorClose.addEventListener('click', (e: MouseEvent) => { this.monitorClose.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
this.enableScreenSharing(); this.enableScreenSharing();
//update tracking //update tracking
}); });
this.monitor = this.getElementByIdOrFail<HTMLImageElement>('monitor'); this.monitor = HtmlUtils.getElementByIdOrFail<HTMLImageElement>('monitor');
this.monitor.style.display = "none"; this.monitor.style.display = "none";
this.monitor.addEventListener('click', (e: MouseEvent) => { this.monitor.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
@ -126,12 +126,12 @@ export class MediaManager {
} }
public showGameOverlay(){ public showGameOverlay(){
const gameOverlay = this.getElementByIdOrFail('game-overlay'); const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
gameOverlay.classList.add('active'); gameOverlay.classList.add('active');
} }
public hideGameOverlay(){ public hideGameOverlay(){
const gameOverlay = this.getElementByIdOrFail('game-overlay'); const gameOverlay = HtmlUtils.getElementByIdOrFail('game-overlay');
gameOverlay.classList.remove('active'); gameOverlay.classList.remove('active');
} }
@ -355,14 +355,14 @@ export class MediaManager {
layoutManager.add(DivImportance.Normal, userId, html); layoutManager.add(DivImportance.Normal, userId, html);
if (reportCallBack) { if (reportCallBack) {
const reportBtn = this.getElementByIdOrFail<HTMLDivElement>(`report-${userId}`); const reportBtn = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(`report-${userId}`);
reportBtn.addEventListener('click', (e: MouseEvent) => { reportBtn.addEventListener('click', (e: MouseEvent) => {
e.preventDefault(); e.preventDefault();
this.showReportModal(userId, userName, reportCallBack); this.showReportModal(userId, userName, reportCallBack);
}); });
} }
this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId)); this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail<HTMLVideoElement>(userId));
} }
addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){ addScreenSharingActiveVideo(userId: string, divImportance: DivImportance = DivImportance.Important){
@ -376,7 +376,7 @@ export class MediaManager {
layoutManager.add(divImportance, userId, html); layoutManager.add(divImportance, userId, html);
this.remoteVideo.set(userId, this.getElementByIdOrFail<HTMLVideoElement>(userId)); this.remoteVideo.set(userId, HtmlUtils.getElementByIdOrFail<HTMLVideoElement>(userId));
} }
disabledMicrophoneByUserId(userId: number){ disabledMicrophoneByUserId(userId: number){
@ -499,18 +499,9 @@ export class MediaManager {
return color; return color;
} }
private getElementByIdOrFail<T extends HTMLElement>(id: string): T {
const elem = document.getElementById(id);
if (elem === null) {
throw new Error("Cannot find HTML element with id '"+id+"'");
}
// FIXME: does not check the type of the returned type
return elem as T;
}
private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){ private showReportModal(userId: string, userName: string, reportCallBack: ReportCallback){
//create report text area //create report text area
const mainContainer = this.getElementByIdOrFail<HTMLDivElement>('main-container'); const mainContainer = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('main-container');
const divReport = document.createElement('div'); const divReport = document.createElement('div');
divReport.classList.add('modal-report-user'); divReport.classList.add('modal-report-user');