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:
Jeff Emmett 2026-03-11 13:28:03 -07:00
parent 325960fa15
commit ec77b5f471
2 changed files with 10 additions and 23 deletions

View File

@ -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 {

View File

@ -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) {