haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Robert Pintilii 2022-03-04 15:10:57 +02:00 committed by GitHub
parent fca9a249dc
commit 2863b05f37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 64 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
modules/UI/videolayout/LargeVideoManager.js
View File

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

15
react/features/display-name/components/web/DominantSpeakerName.js
View File

@ -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),
transition: 'margin-bottom 0.3s'
marginBottom: theme.spacing(7),
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>
);

21
react/features/filmstrip/components/web/Filmstrip.js
View File

@ -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
? _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);
filmstripStyle.maxWidth = _verticalViewMaxWidth;
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)
};
}

22
react/features/filmstrip/functions.web.js
View File

@ -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;
}

22
react/features/large-video/components/LargeVideo.web.js
View File

@ -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
};
}

11
react/features/toolbox/components/web/Toolbox.js
View File

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