From b3aa8975e94831adae820a3f163ade4ddb2468ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Fri, 28 May 2021 15:48:58 +0200 Subject: [PATCH] Switching the video feedback in Svelte --- front/dist/index.tmpl.html | 26 --------- front/src/Components/App.svelte | 2 + front/src/Components/MyCamera.svelte | 46 +++++++++++++++ front/src/Components/SoundMeterWidget.svelte | 36 ++++++++++++ front/src/WebRtc/MediaManager.ts | 60 +------------------- front/style/mobile-style.scss | 32 +++++------ front/style/style.css | 8 +-- 7 files changed, 107 insertions(+), 103 deletions(-) create mode 100644 front/src/Components/MyCamera.svelte create mode 100644 front/src/Components/SoundMeterWidget.svelte diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html index 1da7fad6..d5b97023 100644 --- a/front/dist/index.tmpl.html +++ b/front/dist/index.tmpl.html @@ -47,32 +47,6 @@ -
-
- -
- - - - - -
-
-
- diff --git a/front/src/Components/MyCamera.svelte b/front/src/Components/MyCamera.svelte new file mode 100644 index 00000000..6e1e50ef --- /dev/null +++ b/front/src/Components/MyCamera.svelte @@ -0,0 +1,46 @@ + + + +
+
+ + +
+
diff --git a/front/src/Components/SoundMeterWidget.svelte b/front/src/Components/SoundMeterWidget.svelte new file mode 100644 index 00000000..cff6be86 --- /dev/null +++ b/front/src/Components/SoundMeterWidget.svelte @@ -0,0 +1,36 @@ + + + +
0}> + 1}> + 2}> + 3}> + 4}> + 5}> +
diff --git a/front/src/WebRtc/MediaManager.ts b/front/src/WebRtc/MediaManager.ts index 36f70918..bb86e70f 100644 --- a/front/src/WebRtc/MediaManager.ts +++ b/front/src/WebRtc/MediaManager.ts @@ -46,13 +46,6 @@ export class MediaManager { localStream: MediaStream|null = null; localScreenCapture: MediaStream|null = null; private remoteVideo: Map = new Map(); - myCamVideo: HTMLVideoElement; - /*cinemaClose: HTMLImageElement; - cinema: HTMLImageElement; - monitorClose: HTMLImageElement; - monitor: HTMLImageElement; - microphoneClose: HTMLImageElement; - microphone: HTMLImageElement;*/ webrtcInAudio: HTMLAudioElement; //FIX ME SOUNDMETER: check stalability of sound meter calculation //mySoundMeterElement: HTMLDivElement; @@ -63,10 +56,6 @@ export class MediaManager { showReportModalCallBacks : Set = new Set(); helpCameraSettingsCallBacks : Set = new Set(); -/* private microphoneBtn: HTMLDivElement; - private cinemaBtn: HTMLDivElement; - private monitorBtn: HTMLDivElement;*/ - private focused : boolean = true; private triggerCloseJistiFrame : Map = new Map(); @@ -80,54 +69,11 @@ export class MediaManager { constructor() { - this.myCamVideo = HtmlUtils.getElementByIdOrFail('myCamVideo'); this.webrtcInAudio = HtmlUtils.getElementByIdOrFail('audio-webrtc-in'); this.webrtcOutAudio = HtmlUtils.getElementByIdOrFail('audio-webrtc-out'); this.webrtcInAudio.volume = 0.2; this.webrtcOutAudio.volume = 0.2; - /*this.microphoneBtn = HtmlUtils.getElementByIdOrFail('btn-micro'); - this.microphoneClose = HtmlUtils.getElementByIdOrFail('microphone-close'); - this.microphoneClose.style.display = "none"; - this.microphoneClose.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - requestedMicrophoneState.enableMicrophone(); - }); - this.microphone = HtmlUtils.getElementByIdOrFail('microphone'); - this.microphone.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - requestedMicrophoneState.disableMicrophone(); - }); - - this.cinemaBtn = HtmlUtils.getElementByIdOrFail('btn-video'); - this.cinemaClose = HtmlUtils.getElementByIdOrFail('cinema-close'); - this.cinemaClose.style.display = "none"; - this.cinemaClose.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - requestedCameraState.enableWebcam(); - }); - this.cinema = HtmlUtils.getElementByIdOrFail('cinema'); - this.cinema.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - requestedCameraState.disableWebcam(); - }); - - this.monitorBtn = HtmlUtils.getElementByIdOrFail('btn-monitor'); - this.monitorClose = HtmlUtils.getElementByIdOrFail('monitor-close'); - this.monitorClose.style.display = "block"; - this.monitorClose.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - //this.enableScreenSharing(); - requestedScreenSharingState.enableScreenSharing(); - }); - this.monitor = HtmlUtils.getElementByIdOrFail('monitor'); - this.monitor.style.display = "none"; - this.monitor.addEventListener('click', (e: MouseEvent) => { - e.preventDefault(); - //this.disableScreenSharing(); - requestedScreenSharingState.disableScreenSharing(); - });*/ - this.pingCameraStatus(); //FIX ME SOUNDMETER: check stability of sound meter calculation @@ -148,11 +94,11 @@ export class MediaManager { return; } - if (result.constraints.video !== false) { + /*if (result.constraints.video !== false) { HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.remove('hide'); } else { HtmlUtils.getElementByIdOrFail('div-myCamVideo').classList.add('hide'); - }/* + } if (result.constraints.audio !== false) { this.enableMicrophoneStyle(); } else { @@ -160,7 +106,7 @@ export class MediaManager { }*/ this.localStream = result.stream; - this.myCamVideo.srcObject = this.localStream; + //this.myCamVideo.srcObject = this.localStream; // TODO: migrate all listeners to the store directly. this.triggerUpdatedLocalStreamCallbacks(result.stream); diff --git a/front/style/mobile-style.scss b/front/style/mobile-style.scss index 21753ebd..1b37053a 100644 --- a/front/style/mobile-style.scss +++ b/front/style/mobile-style.scss @@ -1,9 +1,24 @@ +@media (hover: none) { + /** + * If we cannot hover over elements, let's display camera button in full. + */ + .btn-cam-action { + div { + transform: translateY(0px); + } + } +} + @media screen and (max-width: 700px), screen and (max-height: 700px){ - video#myCamVideo { + video.myCamVideo { width: 150px; } + .div-myCamVideo.hide { + right: -160px; + } + .sidebar { width: 20%; min-width: 200px; @@ -22,21 +37,6 @@ } } - .btn-cam-action { - min-width: 150px; - - &:hover{ - transform: translateY(20px); - } - div { - margin: 0 1%; - &:hover { - background-color: #666; - } - margin-bottom: 30px; - } - } - .main-section { position: absolute; width: 100%; diff --git a/front/style/style.css b/front/style/style.css index 50c842d0..525b517a 100644 --- a/front/style/style.css +++ b/front/style/style.css @@ -133,11 +133,11 @@ body .message-info.warning{ outline: none; } -.video-container#div-myCamVideo{ +.video-container.div-myCamVideo{ border: none; } -#div-myCamVideo { +.div-myCamVideo { position: absolute; right: 15px; bottom: 30px; @@ -146,11 +146,11 @@ body .message-info.warning{ transition: right 350ms; } -#div-myCamVideo.hide { +.div-myCamVideo.hide { right: -20vw; } -video#myCamVideo{ +video.myCamVideo{ width: 15vw; -webkit-transform: scaleX(-1); transform: scaleX(-1);