fix(large-video): make blurred background fit whole screen

pull/4327/head jitsi-meet_3795
Leonard Kim 6 years ago committed by virtuacoplenny
parent f85ac3ef91
commit df50e7fa69
  1. 11
      css/_videolayout_default.scss
  2. 17
      react/features/large-video/components/LargeVideoBackground.web.js

@ -23,14 +23,9 @@
top: 0;
width: 100%;
&.fit-full-height #largeVideoBackground {
height: 100%;
width: auto;
}
.fit-full-width #largeVideoBackground {
height: auto;
width: 100%;
#largeVideoBackground {
min-height: 100%;
min-width: 100%;
}
}
#largeVideoBackgroundContainer {

@ -15,18 +15,6 @@ export const ORIENTATION = {
PORTRAIT: 'portrait'
};
/**
* A mapping of orientations to a class that should fit the
* {@code LargeVideoBackground} into its container.
*
* @private
* @type {Object}
*/
const ORIENTATION_TO_CLASS = {
[ORIENTATION.LANDSCAPE]: 'fit-full-width',
[ORIENTATION.PORTRAIT]: 'fit-full-height'
};
/**
* The type of the React {@code Component} props of
* {@link LargeVideoBackgroundCanvas}.
@ -150,14 +138,11 @@ export class LargeVideoBackground extends Component<Props> {
const {
hidden,
mirror,
orientationFit,
showLocalProblemFilter,
showRemoteProblemFilter
} = this.props;
const orientationClass = orientationFit
? ORIENTATION_TO_CLASS[orientationFit] : '';
const classNames = `large-video-background ${mirror ? 'flip-x' : ''} ${
hidden ? 'invisible' : ''} ${orientationClass} ${
hidden ? 'invisible' : ''} ${
showLocalProblemFilter ? 'videoProblemFilter' : ''} ${
showRemoteProblemFilter ? 'remoteVideoProblemFilter' : ''}`;

Loading…
Cancel
Save