diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 4f4664653..f376ba6b8 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -525,12 +525,21 @@ transition: box-shadow 0.3s ease; } -.userAvatar { +.avatar-container { @include maxSize(60px); @include absoluteAligning(); border-radius: 50%; + display: flex; + justify-content: center; height: 50%; + overflow: hidden; width: auto; + + .userAvatar { + height: 100%; + object-fit: cover; + width: 100%; + } } #videoNotAvailableScreen { diff --git a/css/filmstrip/_tile_view_overrides.scss b/css/filmstrip/_tile_view_overrides.scss index d4aac7989..942ceaca0 100644 --- a/css/filmstrip/_tile_view_overrides.scss +++ b/css/filmstrip/_tile_view_overrides.scss @@ -6,7 +6,7 @@ /** * Let the avatar grow with the tile. */ - .userAvatar { + .avatar-container { max-height: initial; max-width: initial; } diff --git a/modules/UI/videolayout/Filmstrip.js b/modules/UI/videolayout/Filmstrip.js index 5642b4245..264295862 100644 --- a/modules/UI/videolayout/Filmstrip.js +++ b/modules/UI/videolayout/Filmstrip.js @@ -361,6 +361,12 @@ const Filmstrip = { 'min-width': `${local.thumbWidth}px`, width: `${local.thumbWidth}px` }); + + const avatarSize = local.thumbHeight / 2; + + thumbs.localThumb.find('.avatar-container') + .height(avatarSize) + .width(avatarSize); } if (thumbs.remoteThumbs) { @@ -371,6 +377,12 @@ const Filmstrip = { 'min-width': `${remote.thumbWidth}px`, width: `${remote.thumbWidth}px` }); + + const avatarSize = remote.thumbHeight / 2; + + thumbs.remoteThumbs.find('.avatar-container') + .height(avatarSize) + .width(avatarSize); } const currentLayout = getCurrentLayout(APP.store.getState());