fix(virtual-background): Responsive virtual background dialog
Fixes: https://github.com/jitsi/jitsi-meet/issues/9202
This commit is contained in:
parent
496e47af20
commit
d7a6a48acd
|
@ -1,17 +1,22 @@
|
||||||
.virtual-background-dialog {
|
.virtual-background-dialog {
|
||||||
|
margin-left:-10px;
|
||||||
position: relative;
|
position: relative;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
color: white;
|
color: white;
|
||||||
display: inline-grid;
|
display: inline-grid;
|
||||||
grid-template-columns: auto auto auto auto auto;
|
grid-template-columns: auto auto auto auto auto;
|
||||||
column-gap: 8px;
|
column-gap: 9px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
.thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{
|
.thumbnail:hover, .blur:hover, .slight-blur:hover, .virtual-background-none:hover{
|
||||||
height: 56px;
|
height: 56px;
|
||||||
width: 103px;
|
width: 103px;
|
||||||
opacity: .5;
|
opacity: .5;
|
||||||
border: 2px solid #99bbf3;
|
border: 2px solid #99bbf3;
|
||||||
@media (min-width: 432px) and (max-width: 632px) {
|
@media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
|
||||||
|
height: 56px;
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
|
@media (max-width: 432px){
|
||||||
height: 56px;
|
height: 56px;
|
||||||
width: 56px;
|
width: 56px;
|
||||||
}
|
}
|
||||||
|
@ -31,8 +36,8 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
height: 60px;
|
height: 56px;
|
||||||
width: 107px;
|
width: 103px;
|
||||||
border: 2px solid #246FE5;
|
border: 2px solid #246FE5;
|
||||||
}
|
}
|
||||||
.blur{
|
.blur{
|
||||||
|
@ -52,8 +57,8 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
background: #7E8287;
|
background: #7E8287;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 60px;
|
height: 56px;
|
||||||
width: 107px;
|
width: 103px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid #246FE5;
|
border: 2px solid #246FE5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -77,8 +82,8 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
background: #A4A4A4;
|
background: #A4A4A4;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 60px;
|
height: 56px;
|
||||||
width: 107px;
|
width: 103px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid #246FE5;
|
border: 2px solid #246FE5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -100,8 +105,8 @@
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
background: #525252;
|
background: #525252;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
height: 60px;
|
height: 56px;
|
||||||
width: 107px;
|
width: 103px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 2px solid #246FE5;
|
border: 2px solid #246FE5;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
@ -111,10 +116,25 @@
|
||||||
|
|
||||||
@media (min-width: 432px) and (max-width: 632px) {
|
@media (min-width: 432px) and (max-width: 632px) {
|
||||||
font-size: 1.5vw;
|
font-size: 1.5vw;
|
||||||
.virtual-background-none, .thumbnail, .thumbnail-selected, .none-selected, .blur, .blur-selected, .slight-blur, .slight-blur-selected{
|
.virtual-background-none, .thumbnail, .blur, .slight-blur{
|
||||||
height: 60px;
|
height: 60px;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
}
|
}
|
||||||
|
.thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{
|
||||||
|
height: 56px;
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 432px){
|
||||||
|
font-size: 1.5vw;
|
||||||
|
.virtual-background-none, .thumbnail, .blur, .slight-blur{
|
||||||
|
height: 60px;
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
.thumbnail-selected, .none-selected, .blur-selected, .slight-blur-selected{
|
||||||
|
height: 56px;
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -135,6 +155,7 @@
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
margin-left: -10px;
|
||||||
margin-top: 16px;
|
margin-top: 16px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: #669AEC;
|
color: #669AEC;
|
||||||
|
@ -151,6 +172,9 @@
|
||||||
@media (min-width: 432px) and (max-width: 632px) {
|
@media (min-width: 432px) and (max-width: 632px) {
|
||||||
left: 51px
|
left: 51px
|
||||||
}
|
}
|
||||||
|
@media (min-width: 432px) {
|
||||||
|
left: 51px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.delete-image-icon:hover {
|
.delete-image-icon:hover {
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -170,16 +194,21 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-background-preview-entry{
|
.video-background-preview-entry{
|
||||||
|
margin-left:5px;
|
||||||
height: 250px;
|
height: 250px;
|
||||||
|
width: 94%;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
width: 572px;
|
position: absolute;
|
||||||
position: fixed;
|
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
@media (min-width: 432px) and (max-width: 632px) {
|
|
||||||
width: 340px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.virtual-background-preview-video{
|
||||||
|
margin-left: -10;
|
||||||
|
border-radius: 6px;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
.video-preview-loader{
|
.video-preview-loader{
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
|
|
@ -180,8 +180,7 @@ function VirtualBackground({ _jitsiTrack, _selectedThumbnail, dispatch, t }: Pro
|
||||||
okKey = { 'virtualBackground.apply' }
|
okKey = { 'virtualBackground.apply' }
|
||||||
onSubmit = { applyVirtualBackground }
|
onSubmit = { applyVirtualBackground }
|
||||||
submitDisabled = { !options || loading }
|
submitDisabled = { !options || loading }
|
||||||
titleKey = { 'virtualBackground.title' }
|
titleKey = { 'virtualBackground.title' } >
|
||||||
width = '640px'>
|
|
||||||
<VirtualBackgroundPreview options = { options } />
|
<VirtualBackgroundPreview options = { options } />
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div className = 'virtual-background-loading'>
|
<div className = 'virtual-background-loading'>
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { getCurrentCameraDeviceId } from '../../base/settings';
|
||||||
import { createLocalTracksF } from '../../base/tracks/functions';
|
import { createLocalTracksF } from '../../base/tracks/functions';
|
||||||
import { toggleBackgroundEffect } from '../actions';
|
import { toggleBackgroundEffect } from '../actions';
|
||||||
|
|
||||||
const videoClassName = 'video-preview-video flipVideoX';
|
const videoClassName = 'virtual-background-preview-video flipVideoX';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* The type of the React {@code PureComponent} props of {@link VirtualBackgroundPreview}.
|
* The type of the React {@code PureComponent} props of {@link VirtualBackgroundPreview}.
|
||||||
|
|
Loading…
Reference in New Issue