Merge branch 'resizeSelect' of github.com:thecodingmachine/workadventure into resizeSelect

This commit is contained in:
GRL 2021-06-01 11:52:55 +02:00
commit 2d93be519f
4 changed files with 71 additions and 47 deletions

View File

@ -94,10 +94,6 @@
<div id="activeScreenSharing" class="active-screen-sharing active">
</div>
<div id="webRtcSetup" class="webrtcsetup">
<img id="webRtcSetupNoVideo" class="background-img" src="resources/logos/cinema-close.svg">
<video id="myCamVideoSetup" autoplay muted></video>
</div>
<audio id="audio-webrtc-in">
<source src="/resources/objects/webrtc-in.mp3" type="audio/mp3">
</audio>

View File

@ -1,6 +1,8 @@
<script lang="typescript">
import {Game} from "../../Phaser/Game/Game";
import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
import {localStreamStore} from "../../Stores/MediaStore";
import {onDestroy} from "svelte";
export let game: Game;
@ -10,12 +12,40 @@
enableCameraScene.login();
}
function srcObject(node, stream) {
node.srcObject = stream;
return {
update(newStream) {
if (node.srcObject != newStream) {
node.srcObject = newStream
}
}
}
}
let stream : MediaStream|null;
const unsubscribe = localStreamStore.subscribe(value => {
if (value.type === 'success') {
stream = value.stream;
} else {
stream = null;
}
});
onDestroy(unsubscribe);
</script>
<form class="enableCameraScene" on:submit|preventDefault={submit}>
<section class="title text-center">
<h2>Turn on your camera and microphone</h2>
</section>
<div id="webRtcSetup" class="webrtcsetup">
<img class="background-img" src="resources/logos/cinema-close.svg" alt="" class:hide={$localStreamStore.stream}>
<video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
</div>
<!--<section class="text-center">
<video id="myCamVideoSetup" autoplay muted></video>
</section>
@ -71,6 +101,42 @@
button.letsgo {
font-size: 200%;
}
.webrtcsetup{
position: absolute;
top: 140px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 50%;
width: 50%;
border: white 6px solid;
img.background-img {
position: relative;
display: block;
width: 40%;
height: 60%;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translateY(-50%);
}
img.hide {
display: none;
}
}
#myCamVideoSetup {
width: 100%;
height: 100%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
}
</style>

View File

@ -107,8 +107,6 @@ export class EnableCameraScene extends ResizableScene {
this.login();
});
HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetup').classList.add('active');
this.localStreamStoreUnsubscriber = localStreamStore.subscribe((result) => {
if (result.type === 'error') {
// TODO: we could handle the error in a specific way on the EnableCameraScene page.
@ -135,9 +133,12 @@ export class EnableCameraScene extends ResizableScene {
this.soundMeterSprite.setVisible(false);
this.add.existing(this.soundMeterSprite);
this.onResize();
enableCameraSceneVisibilityStore.showEnableCameraScene();
setTimeout(() => {
this.onResize();
}, 100);
}
private previousCam(): void {
@ -184,12 +185,6 @@ export class EnableCameraScene extends ResizableScene {
* Function called each time a camera is changed
*/
private setupStream(stream: MediaStream): void {
const img = HtmlUtils.getElementByIdOrFail<HTMLDivElement>('webRtcSetupNoVideo');
img.style.display = 'none';
const div = HtmlUtils.getElementByIdOrFail<HTMLVideoElement>('myCamVideoSetup');
div.srcObject = stream;
this.soundMeter.connectToSource(stream, new window.AudioContext());
this.soundMeterSprite.setVisible(true);

View File

@ -331,39 +331,6 @@ video.myCamVideo{
}
}
.webrtcsetup{
display: none;
position: absolute;
top: 140px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
height: 50%;
width: 50%;
border: white 6px solid;
}
.webrtcsetup .background-img {
position: relative;
display: block;
width: 40%;
height: 60%;
margin-left: auto;
margin-right: auto;
top: 50%;
transform: translateY(-50%);
}
#myCamVideoSetup {
width: 100%;
height: 100%;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
}
.webrtcsetup.active{
display: block;
}
/* New layout */
body {
margin: 0;