fix(dominant-label) Fix dominant speaker stage view label (#11071)

Move label to LargeVideo so that's it's centred in the view instead of the whole screen
Move vertical filmstrip max width calculation to a function and use it to set the large video width

modules/UI/videolayout/LargeVideoManager.js

@@ -26,7 +26,7 @@ import {
     isTrackStreamingStatusInactive,
     isTrackStreamingStatusInterrupted
 } from '../../../react/features/connection-indicator/functions';
-import { FILMSTRIP_BREAKPOINT, isFilmstripResizable } from '../../../react/features/filmstrip';
+import { FILMSTRIP_BREAKPOINT, isFilmstripResizable, getVerticalViewMaxWidth } from '../../../react/features/filmstrip';
 import {
     updateKnownLargeVideoResolution
 } from '../../../react/features/large-video/actions';
@@ -419,7 +419,7 @@ export default class LargeVideoManager {
         }
 
         if (resizableFilmstrip && visible && filmstripWidth.current >= FILMSTRIP_BREAKPOINT) {
-            widthToUse -= filmstripWidth.current;
+            widthToUse -= getVerticalViewMaxWidth(state);
         }
 
         this.width = widthToUse;

react/features/display-name/components/web/DominantSpeakerName.js

@@ -18,13 +18,18 @@ const useStyles = makeStyles(theme => {
         badgeContainer: {
             ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
             alignItems: 'center',
-            display: 'flex',
+            display: 'inline-flex',
             justifyContent: 'center',
-            marginBottom: theme.spacing(2),
+            marginBottom: theme.spacing(7),
-            transition: 'margin-bottom 0.3s'
+            transition: 'margin-bottom 0.3s',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            zIndex: 1
         },
         containerElevated: {
-            marginBottom: theme.spacing(7)
+            marginBottom: theme.spacing(12)
         }
     };
 });
@@ -50,7 +55,7 @@ const DominantSpeakerName = () => {
     if (showDisplayName && nameToDisplay && selectedId !== localId && !isTileView) {
         return (
             <div
-                className = { `${classes.badgeContainer}${toolboxVisible ? '' : ` ${classes.containerElevated}`}` }>
+                className = { `${classes.badgeContainer}${toolboxVisible ? ` ${classes.containerElevated}` : ''}` }>
                 <DisplayNameBadge name = { nameToDisplay } />
             </div>
         );

react/features/filmstrip/components/web/Filmstrip.js

@@ -34,6 +34,7 @@ import {
     TOOLBAR_HEIGHT_MOBILE
 } from '../../constants';
 import {
+    getVerticalViewMaxWidth,
     isFilmstripResizable,
     shouldRemoteVideosBeVisible,
     showGridInVerticalView
@@ -152,6 +153,11 @@ type Props = {
      */
     _verticalViewGrid: boolean,
 
+    /**
+     * The max width of the vertical filmstrip.
+     */
+    _verticalViewMaxWidth: number,
+
     /**
      * Additional CSS class names to add to the container of all the thumbnails.
      */
@@ -285,23 +291,15 @@ class Filmstrip extends PureComponent <Props, State> {
             _verticalFilmstripWidth,
             _visible,
             _verticalViewGrid,
+            _verticalViewMaxWidth,
             classes
         } = this.props;
         const { isMouseDown } = this.state;
         const tileViewActive = _currentLayout === LAYOUTS.TILE_VIEW;
-        let maxWidth;
 
         switch (_currentLayout) {
         case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-            maxWidth = _resizableFilmstrip
+            filmstripStyle.maxWidth = _verticalViewMaxWidth;
-                ? _verticalFilmstripWidth || DEFAULT_FILMSTRIP_WIDTH
-                : interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH;
-
-            // Adding 4px for the border-right and margin-right.
-            // On non-resizable filmstrip add 4px for the left margin and border.
-            // Also adding 7px for the scrollbar. Also adding 9px for the drag handle.
-            filmstripStyle.maxWidth = maxWidth + (_verticalViewGrid ? 0 : 11) + (_resizableFilmstrip ? 9 : 4);
-
             if (!_visible) {
                 filmstripStyle.right = `-${filmstripStyle.maxWidth}px`;
             }
@@ -850,7 +848,8 @@ function _mapStateToProps(state) {
         _verticalFilmstripWidth: verticalFilmstripWidth.current,
         _videosClassName: videosClassName,
         _visible: visible,
-        _verticalViewGrid
+        _verticalViewGrid,
+        _verticalViewMaxWidth: getVerticalViewMaxWidth(state)
     };
 }
 

react/features/filmstrip/functions.web.js

@@ -401,3 +401,25 @@ export function showGridInVerticalView(state) {
 
     return resizableFilmstrip && ((width.current ?? 0) > FILMSTRIP_GRID_BREAKPOINT);
 }
+
+/**
+ * Gets the vertical filmstrip max width.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {number}
+ */
+export function getVerticalViewMaxWidth(state) {
+    const { width } = state['features/filmstrip'];
+    const _resizableFilmstrip = isFilmstripResizable(state);
+    const _verticalViewGrid = showGridInVerticalView(state);
+    let maxWidth = _resizableFilmstrip
+        ? width.current || DEFAULT_FILMSTRIP_WIDTH
+        : interfaceConfig.FILM_STRIP_MAX_HEIGHT || DEFAULT_FILMSTRIP_WIDTH;
+
+    // Adding 4px for the border-right and margin-right.
+    // On non-resizable filmstrip add 4px for the left margin and border.
+    // Also adding 7px for the scrollbar. Also adding 9px for the drag handle.
+    maxWidth += (_verticalViewGrid ? 0 : 11) + (_resizableFilmstrip ? 9 : 4);
+
+    return maxWidth;
+}

react/features/large-video/components/LargeVideo.web.js

@@ -6,7 +6,9 @@ import VideoLayout from '../../../../modules/UI/videolayout/VideoLayout';
 import { Watermarks } from '../../base/react';
 import { connect } from '../../base/redux';
 import { setColorAlpha } from '../../base/util';
+import { DominantSpeakerName } from '../../display-name';
 import { FILMSTRIP_BREAKPOINT, isFilmstripResizable } from '../../filmstrip';
+import { getVerticalViewMaxWidth } from '../../filmstrip/functions.web';
 import { SharedVideo } from '../../shared-video/components/web';
 import { Captions } from '../../subtitles/';
 import { setTileView } from '../../video-layout/actions';
@@ -46,11 +48,21 @@ type Props = {
      */
     _resizableFilmstrip: boolean,
 
+    /**
+     * Whether or not to show dominant speaker badge.
+     */
+    _showDominantSpeakerBadge: boolean,
+
     /**
      * The width of the vertical filmstrip (user resized).
      */
     _verticalFilmstripWidth: ?number,
 
+    /**
+     * The max width of the vertical filmstrip.
+     */
+    _verticalViewMaxWidth: number,
+
     /**
      * Whether or not the filmstrip is visible.
      */
@@ -113,7 +125,8 @@ class LargeVideo extends Component<Props> {
     render() {
         const {
             _isChatOpen,
-            _noAutoPlayVideo
+            _noAutoPlayVideo,
+            _showDominantSpeakerBadge
         } = this.props;
         const style = this._getCustomSyles();
         const className = `videocontainer${_isChatOpen ? ' shift-right' : ''}`;
@@ -162,6 +175,7 @@ class LargeVideo extends Component<Props> {
                 </div>
                 { interfaceConfig.DISABLE_TRANSCRIPTION_SUBTITLES
                     || <Captions /> }
+                {_showDominantSpeakerBadge && <DominantSpeakerName />}
             </div>
         );
     }
@@ -217,6 +231,7 @@ class LargeVideo extends Component<Props> {
             _customBackgroundColor,
             _customBackgroundImageUrl,
             _verticalFilmstripWidth,
+            _verticalViewMaxWidth,
             _visibleFilmstrip
         } = this.props;
 
@@ -234,7 +249,7 @@ class LargeVideo extends Component<Props> {
         }
 
         if (_visibleFilmstrip && _verticalFilmstripWidth >= FILMSTRIP_BREAKPOINT) {
-            styles.width = `calc(100% - ${_verticalFilmstripWidth || 0}px)`;
+            styles.width = `calc(100% - ${_verticalViewMaxWidth || 0}px)`;
         }
 
         return styles;
@@ -275,6 +290,7 @@ function _mapStateToProps(state) {
     const { backgroundColor, backgroundImageUrl } = state['features/dynamic-branding'];
     const { isOpen: isChatOpen } = state['features/chat'];
     const { width: verticalFilmstripWidth, visible } = state['features/filmstrip'];
+    const { hideDominantSpeakerBadge } = state['features/base/config'];
 
     return {
         _backgroundAlpha: state['features/base/config'].backgroundAlpha,
@@ -283,7 +299,9 @@ function _mapStateToProps(state) {
         _isChatOpen: isChatOpen,
         _noAutoPlayVideo: testingConfig?.noAutoPlayVideo,
         _resizableFilmstrip: isFilmstripResizable(state),
+        _showDominantSpeakerBadge: !hideDominantSpeakerBadge,
         _verticalFilmstripWidth: verticalFilmstripWidth.current,
+        _verticalViewMaxWidth: getVerticalViewMaxWidth(state),
         _visibleFilmstrip: visible
     };
 }

react/features/toolbox/components/web/Toolbox.js

@@ -27,7 +27,6 @@ import { connect } from '../../../base/redux';
 import { getLocalVideoTrack } from '../../../base/tracks';
 import { toggleChat } from '../../../chat';
 import { ChatButton } from '../../../chat/components';
-import { DominantSpeakerName } from '../../../display-name';
 import { EmbedMeetingButton } from '../../../embed-meeting';
 import { SharedDocumentButton } from '../../../etherpad';
 import { FeedbackButton } from '../../../feedback';
@@ -225,11 +224,6 @@ type Props = {
      */
     _sharingVideo: boolean,
 
-    /**
-     * Whether or not to show dominant speaker badge.
-     */
-    _showDominantSpeakerBadge: boolean,
-
     /**
      * Whether or not the tile view is enabled.
      */
@@ -1267,7 +1261,6 @@ class Toolbox extends Component<Props> {
             _overflowMenuVisible,
             _reactionsEnabled,
             _toolbarButtons,
-            _showDominantSpeakerBadge,
             classes,
             t
         } = this.props;
@@ -1287,8 +1280,6 @@ class Toolbox extends Component<Props> {
                         onMouseOver: this._onMouseOver
                     }) }>
 
-                    { _showDominantSpeakerBadge && <DominantSpeakerName /> }
-
                     <div className = 'toolbox-content-items'>
                         {mainMenuButtons.map(({ Content, key, ...rest }) => Content !== Separator && (
                             <Content
@@ -1359,7 +1350,6 @@ function _mapStateToProps(state, ownProps) {
         callStatsID,
         disableProfile,
         enableFeaturesBasedOnToken,
-        hideDominantSpeakerBadge,
         iAmRecorder,
         iAmSipGateway
     } = state['features/base/config'];
@@ -1417,7 +1407,6 @@ function _mapStateToProps(state, ownProps) {
         _raisedHand: hasRaisedHand(localParticipant),
         _reactionsEnabled: isReactionsEnabled(state),
         _screenSharing: isScreenVideoShared(state),
-        _showDominantSpeakerBadge: !hideDominantSpeakerBadge,
         _tileViewEnabled: shouldDisplayTileView(state),
         _toolbarButtons: toolbarButtons,
         _virtualSource: state['features/virtual-background'].virtualSource,