feat(video-layout): make videos fill tiles and remove blurred background
Videos now use object-fit: cover in all thumbnail types, removing dark bars around portrait videos. Hides the blurred large video background and makes the large video fill its container edge-to-edge. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
325960fa15
commit
ec77b5f471
|
|
@ -25,20 +25,7 @@
|
||||||
|
|
||||||
#largeVideoBackgroundContainer,
|
#largeVideoBackgroundContainer,
|
||||||
.large-video-background {
|
.large-video-background {
|
||||||
height: 100%;
|
display: none;
|
||||||
left: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
#largeVideoBackground {
|
|
||||||
min-height: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
#largeVideoBackgroundContainer {
|
|
||||||
filter: blur(40px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.videocontainer {
|
.videocontainer {
|
||||||
|
|
@ -122,6 +109,14 @@
|
||||||
#largeVideoWrapper
|
#largeVideoWrapper
|
||||||
{
|
{
|
||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
top: 0 !important;
|
||||||
|
left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#largeVideo {
|
||||||
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#sharedVideo video {
|
#sharedVideo video {
|
||||||
|
|
|
||||||
|
|
@ -665,19 +665,12 @@ class Thumbnail extends Component<IProps, IState> {
|
||||||
_isHidden,
|
_isHidden,
|
||||||
_isScreenSharing,
|
_isScreenSharing,
|
||||||
_participant,
|
_participant,
|
||||||
_thumbnailType,
|
|
||||||
_videoObjectPosition,
|
_videoObjectPosition,
|
||||||
_videoTrack,
|
|
||||||
_width,
|
_width,
|
||||||
horizontalOffset,
|
horizontalOffset,
|
||||||
style
|
style
|
||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const isTileType = _thumbnailType === THUMBNAIL_TYPE.TILE;
|
|
||||||
const jitsiVideoTrack = _videoTrack?.jitsiTrack;
|
|
||||||
const track = jitsiVideoTrack?.track;
|
|
||||||
const isPortraitVideo = (track?.getSettings()?.aspectRatio || 1) < 1;
|
|
||||||
|
|
||||||
let styles: {
|
let styles: {
|
||||||
avatar: Object;
|
avatar: Object;
|
||||||
thumbnail: any;
|
thumbnail: any;
|
||||||
|
|
@ -696,8 +689,7 @@ class Thumbnail extends Component<IProps, IState> {
|
||||||
}
|
}
|
||||||
|
|
||||||
let videoStyles: any = null;
|
let videoStyles: any = null;
|
||||||
const doNotStretchVideo = (isPortraitVideo && isTileType)
|
const doNotStretchVideo = _disableTileEnlargement
|
||||||
|| _disableTileEnlargement
|
|
||||||
|| _isScreenSharing;
|
|| _isScreenSharing;
|
||||||
|
|
||||||
if (canPlayEventReceived || _participant.local || _isVirtualScreenshareParticipant) {
|
if (canPlayEventReceived || _participant.local || _isVirtualScreenshareParticipant) {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue