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/App.svelte b/front/src/Components/App.svelte
index 16cd903a..9b072e8d 100644
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@@ -3,6 +3,7 @@
import {menuIconVisible} from "../Stores/MenuStore";
import {gameOverlayVisibilityStore} from "../Stores/MediaStore";
import CameraControls from "./CameraControls.svelte";
+ import MyCamera from "./MyCamera.svelte";
@@ -11,6 +12,7 @@
+
{/if}
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);