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

Merge pull request #1431 from thecodingmachine/fixVideoHeight

Browse source 
FIX: the video element should not have a bigger height than its container
This commit is contained in:
Kharhamel 2021-09-10 16:54:47 +02:00 committed by GitHub
parent 7471da6c26 d071f5fa90
commit 352b05b1ea
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 6 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
front/src/Components/Video/VideoMediaBox.svelte
View file

@ -7,8 +7,6 @@
import {videoFocusStore} from "../../Stores/VideoFocusStore"; import {videoFocusStore} from "../../Stores/VideoFocusStore";
import {showReportScreenStore} from "../../Stores/ShowReportScreenStore"; import {showReportScreenStore} from "../../Stores/ShowReportScreenStore";
import {getColorByString, srcObject} from "./utils"; import {getColorByString, srcObject} from "./utils";
import {obtainedMediaConstraintIsMobileStore} from "../../Stores/MediaStore";
import {onDestroy} from "svelte";
export let peer: VideoPeer; export let peer: VideoPeer;
let streamStore = peer.streamStore; let streamStore = peer.streamStore;
@ -20,12 +18,6 @@
showReportScreenStore.set({ userId:peer.userId, userName: peer.userName }); showReportScreenStore.set({ userId:peer.userId, userName: peer.userName });
} }
let isMobile : boolean|null;
const unsubscribe = obtainedMediaConstraintIsMobileStore.subscribe(value => {
isMobile = value;
});
onDestroy(unsubscribe);
</script> </script>
<div class="video-container"> <div class="video-container">
@ -45,7 +37,7 @@
<img alt="Report this user" src={reportImg}> <img alt="Report this user" src={reportImg}>
<span>Report/Block</span> <span>Report/Block</span>
</button> </button>
<video class:mobile="{isMobile === true}" use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video> <video use:srcObject={$streamStore} autoplay playsinline on:click={() => videoFocusStore.toggleFocus(peer)}></video>
<img src={blockSignImg} class="block-logo" alt="Block" /> <img src={blockSignImg} class="block-logo" alt="Block" />
{#if $constraintStore && $constraintStore.audio !== false} {#if $constraintStore && $constraintStore.audio !== false}
<SoundMeterWidget stream={$streamStore}></SoundMeterWidget> <SoundMeterWidget stream={$streamStore}></SoundMeterWidget>

4
front/src/WebRtc/VideoPeer.ts
View file

@ -7,7 +7,6 @@ import type { UserSimplePeerInterface } from "./SimplePeer";
import { readable, Readable, Unsubscriber } from "svelte/store"; import { readable, Readable, Unsubscriber } from "svelte/store";
import { import {
localStreamStore, localStreamStore,
obtainedMediaConstraintIsMobileStore,
obtainedMediaConstraintStore, obtainedMediaConstraintStore,
ObtainedMediaStreamConstraints, ObtainedMediaStreamConstraints,
} from "../Stores/MediaStore"; } from "../Stores/MediaStore";
@ -162,9 +161,6 @@ export class VideoPeer extends Peer {
} else { } else {
mediaManager.disabledVideoByUserId(this.userId); mediaManager.disabledVideoByUserId(this.userId);
} }
if (message.isMobile != undefined) {
obtainedMediaConstraintIsMobileStore.set(message.isMobile);
}
} else if (message.type === MESSAGE_TYPE_MESSAGE) { } else if (message.type === MESSAGE_TYPE_MESSAGE) {
if (!blackListManager.isBlackListed(this.userUuid)) { if (!blackListManager.isBlackListed(this.userUuid)) {
chatMessagesStore.addExternalMessage(this.userId, message.message); chatMessagesStore.addExternalMessage(this.userId, message.message);

1
front/style/mobile-style.scss
View file

@ -40,7 +40,6 @@
.main-section { .main-section {
position: absolute; position: absolute;
width: 100%; width: 100%;
min-width: 400px;
& > div { & > div {
z-index: 2; z-index: 2;

7
front/style/style.scss
View file

@ -44,7 +44,7 @@ body .message-info.warning{
video { video {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-height: 90vh; object-fit: cover;
cursor: url('./images/cursor_pointer.png'), pointer; cursor: url('./images/cursor_pointer.png'), pointer;
&.mobile{ &.mobile{
@ -76,7 +76,6 @@ body .message-info.warning{
left: 5px; left: 5px;
bottom: 5px; bottom: 5px;
padding: 10px; padding: 10px;
z-index: 2;
&.active { &.active {
display: block !important; display: block !important;
@ -547,6 +546,10 @@ input[type=range]:focus::-ms-fill-upper {
cursor: url('./images/cursor_pointer.png'), pointer; cursor: url('./images/cursor_pointer.png'), pointer;
border-radius: 15px 15px 15px 15px; border-radius: 15px 15px 15px 15px;
pointer-events: auto; pointer-events: auto;
video {
max-height: 21vh;
}
} }
.sidebar > div:hover { .sidebar > div:hover {