- { this._renderStatistics() }
-
- { isLocalVideo && enableSaveLogs ? this._renderSaveLogs() : null}
- { !disableShowMoreStats && this._renderShowMoreLink() }
+
+
+ { this._renderStatistics() }
+
+ { isLocalVideo && enableSaveLogs ? this._renderSaveLogs() : null}
+ { !disableShowMoreStats && this._renderShowMoreLink() }
+
+ { this.props.shouldShowMore ? this._renderAdditionalStats() : null }
+
);
}
@@ -839,4 +865,4 @@ function getStringFromArray(array) {
return res;
}
-export default translate(ConnectionStatsTable);
+export default translate(withStyles(styles)(ConnectionStatsTable));
diff --git a/react/features/display-name/components/web/DisplayName.js b/react/features/display-name/components/web/DisplayName.js
index b71f12f1a..ec2a03913 100644
--- a/react/features/display-name/components/web/DisplayName.js
+++ b/react/features/display-name/components/web/DisplayName.js
@@ -1,5 +1,6 @@
/* @flow */
+import { withStyles } from '@material-ui/styles';
import React, { Component } from 'react';
import type { Dispatch } from 'redux';
@@ -10,6 +11,8 @@ import {
} from '../../../base/participants';
import { connect } from '../../../base/redux';
import { updateSettings } from '../../../base/settings';
+import { Tooltip } from '../../../base/tooltip';
+import { getIndicatorsTooltipPosition } from '../../../filmstrip/functions.web';
import { appendSuffix } from '../../functions';
/**
@@ -33,6 +36,11 @@ type Props = {
*/
allowEditing: boolean,
+ /**
+ * The current layout of the filmstrip.
+ */
+ currentLayout: string,
+
/**
* Invoked to update the participant's display name.
*/
@@ -43,6 +51,11 @@ type Props = {
*/
displayNameSuffix: string,
+ /**
+ * An object containing the CSS classes.
+ */
+ classes: Object,
+
/**
* The ID attribute to add to the component. Useful for global querying for
* the component by legacy components and torture tests.
@@ -76,6 +89,30 @@ type State = {
isEditing: boolean
};
+const styles = theme => {
+ return {
+ displayName: {
+ ...theme.typography.labelBold,
+ lineHeight: `${theme.typography.labelBold.lineHeight}px`,
+ color: theme.palette.text01,
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ },
+
+ editDisplayName: {
+ outline: 'none',
+ border: 'none',
+ background: 'none',
+ boxShadow: 'none',
+ padding: 0,
+ ...theme.typography.labelBold,
+ lineHeight: `${theme.typography.labelBold.lineHeight}px`,
+ color: theme.palette.text01
+ }
+ };
+};
+
/**
* React {@code Component} for displaying and editing a participant's name.
*
@@ -146,7 +183,9 @@ class DisplayName extends Component
{
const {
_nameToDisplay,
allowEditing,
+ currentLayout,
displayNameSuffix,
+ classes,
elementID,
t
} = this.props;
@@ -155,10 +194,11 @@ class DisplayName extends Component {
return (
{
}
return (
-
- { appendSuffix(_nameToDisplay, displayNameSuffix) }
-
+
+
+ { appendSuffix(_nameToDisplay, displayNameSuffix) }
+
+
);
}
+ /**
+ * Stop click event propagation.
+ *
+ * @param {MouseEvent} e - The click event.
+ * @private
+ * @returns {void}
+ */
+ _onClick(e) {
+ e.stopPropagation();
+ }
+
_onChange: () => void;
/**
@@ -215,11 +270,13 @@ class DisplayName extends Component {
* Updates the component to display an editable input field and sets the
* initial value to the current display name.
*
+ * @param {MouseEvent} e - The click event.
* @private
* @returns {void}
*/
- _onStartEditing() {
+ _onStartEditing(e) {
if (this.props.allowEditing) {
+ e.stopPropagation();
this.setState({
isEditing: true,
editDisplayNameValue: this.props._configuredDisplayName
@@ -292,4 +349,4 @@ function _mapStateToProps(state, ownProps) {
};
}
-export default translate(connect(_mapStateToProps)(DisplayName));
+export default translate(connect(_mapStateToProps)(withStyles(styles)(DisplayName)));
diff --git a/react/features/filmstrip/components/web/AudioMutedIndicator.js b/react/features/filmstrip/components/web/AudioMutedIndicator.js
index e6fdb8af7..fdf17da32 100644
--- a/react/features/filmstrip/components/web/AudioMutedIndicator.js
+++ b/react/features/filmstrip/components/web/AudioMutedIndicator.js
@@ -1,8 +1,8 @@
/* @flow */
-import React, { Component } from 'react';
+import React from 'react';
-import { IconMicDisabled } from '../../../base/icons';
+import { IconMicrophoneEmptySlash } from '../../../base/icons';
import { BaseIndicator } from '../../../base/react';
/**
@@ -19,26 +19,16 @@ type Props = {
/**
* React {@code Component} for showing an audio muted icon with a tooltip.
*
- * @augments Component
+ * @returns {Component}
*/
-class AudioMutedIndicator extends Component {
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- return (
-
- );
- }
-}
+const AudioMutedIndicator = ({ tooltipPosition }: Props) => (
+
+);
export default AudioMutedIndicator;
diff --git a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js b/react/features/filmstrip/components/web/DominantSpeakerIndicator.js
deleted file mode 100644
index bd576685f..000000000
--- a/react/features/filmstrip/components/web/DominantSpeakerIndicator.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react';
-
-import { IconDominantSpeaker } from '../../../base/icons';
-import { BaseIndicator } from '../../../base/react';
-
-/**
- * The type of the React {@code Component} props of
- * {@link DominantSpeakerIndicator}.
- */
-type Props = {
-
- /**
- * The font-size for the icon.
- */
- iconSize: number,
-
- /**
- * From which side of the indicator the tooltip should appear from.
- */
- tooltipPosition: string
-};
-
-/**
- * Thumbnail badge showing that the participant is the dominant speaker in
- * the conference.
- *
- * @augments Component
- */
-class DominantSpeakerIndicator extends Component {
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- */
- render() {
- return (
-
- );
- }
-}
-
-export default DominantSpeakerIndicator;
diff --git a/react/features/filmstrip/components/web/ModeratorIndicator.js b/react/features/filmstrip/components/web/ModeratorIndicator.js
index aa802d4ec..33c6817af 100644
--- a/react/features/filmstrip/components/web/ModeratorIndicator.js
+++ b/react/features/filmstrip/components/web/ModeratorIndicator.js
@@ -1,8 +1,8 @@
/* @flow */
-import React, { Component } from 'react';
+import React from 'react';
-import { IconModerator } from '../../../base/icons';
+import { IconCrown } from '../../../base/icons';
import { BaseIndicator } from '../../../base/react';
/**
@@ -19,27 +19,14 @@ type Props = {
/**
* React {@code Component} for showing a moderator icon with a tooltip.
*
- * @augments Component
+ * @returns {Component}
*/
-class ModeratorIndicator extends Component {
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- * @returns {ReactElement}
- */
- render() {
- return (
-
-
-
- );
- }
-}
+const ModeratorIndicator = ({ tooltipPosition }: Props) => (
+
+);
export default ModeratorIndicator;
diff --git a/react/features/filmstrip/components/web/RaisedHandIndicator.js b/react/features/filmstrip/components/web/RaisedHandIndicator.js
index 848f81b7f..04dbaa267 100644
--- a/react/features/filmstrip/components/web/RaisedHandIndicator.js
+++ b/react/features/filmstrip/components/web/RaisedHandIndicator.js
@@ -1,53 +1,75 @@
/* @flow */
+import { makeStyles } from '@material-ui/styles';
import React from 'react';
+import { useSelector } from 'react-redux';
import { IconRaisedHand } from '../../../base/icons';
+import { getParticipantById, hasRaisedHand } from '../../../base/participants';
import { BaseIndicator } from '../../../base/react';
-import { connect } from '../../../base/redux';
-import AbstractRaisedHandIndicator, {
- type Props as AbstractProps,
- _mapStateToProps
-} from '../AbstractRaisedHandIndicator';
/**
* The type of the React {@code Component} props of {@link RaisedHandIndicator}.
*/
-type Props = AbstractProps & {
+type Props = {
/**
* The font-size for the icon.
*/
iconSize: number,
+ /**
+ * The participant id who we want to render the raised hand indicator
+ * for.
+ */
+ participantId: string,
+
/**
* From which side of the indicator the tooltip should appear from.
*/
tooltipPosition: string
};
+const useStyles = makeStyles(theme => {
+ return {
+ raisedHandIndicator: {
+ backgroundColor: theme.palette.warning01,
+ padding: '2px',
+ zIndex: 3,
+ display: 'inline-block',
+ borderRadius: '4px',
+ boxSizing: 'border-box'
+ }
+ };
+});
+
/**
* Thumbnail badge showing that the participant would like to speak.
*
- * @augments Component
+ * @returns {ReactElement}
*/
-class RaisedHandIndicator extends AbstractRaisedHandIndicator {
- /**
- * Renders the platform specific indicator element.
- *
- * @returns {React$Element<*>}
- */
- _renderIndicator() {
- return (
-
- );
- }
-}
+const RaisedHandIndicator = ({
+ iconSize,
+ participantId,
+ tooltipPosition
+}: Props) => {
+ const _raisedHand = hasRaisedHand(useSelector(state =>
+ getParticipantById(state, participantId)));
+ const styles = useStyles();
-export default connect(_mapStateToProps)(RaisedHandIndicator);
+ if (!_raisedHand) {
+ return null;
+ }
+
+ return (
+
+
+
+ );
+};
+
+export default RaisedHandIndicator;
diff --git a/react/features/filmstrip/components/web/ScreenShareIndicator.js b/react/features/filmstrip/components/web/ScreenShareIndicator.js
index e22538dc6..c7515a0e1 100644
--- a/react/features/filmstrip/components/web/ScreenShareIndicator.js
+++ b/react/features/filmstrip/components/web/ScreenShareIndicator.js
@@ -23,10 +23,9 @@ type Props = {
export default function ScreenShareIndicator(props: Props) {
return (
);
diff --git a/react/features/filmstrip/components/web/StatusIndicators.js b/react/features/filmstrip/components/web/StatusIndicators.js
index 387725f3c..7fd790097 100644
--- a/react/features/filmstrip/components/web/StatusIndicators.js
+++ b/react/features/filmstrip/components/web/StatusIndicators.js
@@ -6,12 +6,12 @@ import { MEDIA_TYPE } from '../../../base/media';
import { getParticipantByIdOrUndefined, PARTICIPANT_ROLE } from '../../../base/participants';
import { connect } from '../../../base/redux';
import { getTrackByMediaTypeAndParticipant, isLocalTrackMuted, isRemoteTrackMuted } from '../../../base/tracks';
-import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
+import { getCurrentLayout } from '../../../video-layout';
+import { getIndicatorsTooltipPosition } from '../../functions.web';
import AudioMutedIndicator from './AudioMutedIndicator';
import ModeratorIndicator from './ModeratorIndicator';
import ScreenShareIndicator from './ScreenShareIndicator';
-import VideoMutedIndicator from './VideoMutedIndicator';
declare var interfaceConfig: Object;
@@ -40,11 +40,6 @@ type Props = {
*/
_showScreenShareIndicator: Boolean,
- /**
- * Indicates if the video muted indicator should be visible or not.
- */
- _showVideoMutedIndicator: Boolean,
-
/**
* The ID of the participant for which the status bar is rendered.
*/
@@ -68,29 +63,16 @@ class StatusIndicators extends Component {
_currentLayout,
_showAudioMutedIndicator,
_showModeratorIndicator,
- _showScreenShareIndicator,
- _showVideoMutedIndicator
+ _showScreenShareIndicator
} = this.props;
- let tooltipPosition;
-
- switch (_currentLayout) {
- case LAYOUTS.TILE_VIEW:
- tooltipPosition = 'right';
- break;
- case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
- tooltipPosition = 'left';
- break;
- default:
- tooltipPosition = 'top';
- }
+ const tooltipPosition = getIndicatorsTooltipPosition(_currentLayout);
return (
-
- { _showAudioMutedIndicator ?
: null }
- { _showScreenShareIndicator ?
: null }
- { _showVideoMutedIndicator ?
: null }
- { _showModeratorIndicator ?
: null }
-
- { !_connectionIndicatorDisabled
- &&
- }
-
- { showDominantSpeaker && _participantCountMoreThan2
- &&
- }
-
);
- }
-
/**
* Renders the avatar.
*
@@ -820,115 +655,31 @@ class Thumbnail extends Component {
_getContainerClassName() {
let className = 'videocontainer';
const { displayMode } = this.state;
- const { _isAudioOnly, _isDominantSpeakerDisabled, _isHidden, _participant } = this.props;
- const isRemoteParticipant = !_participant?.local && !_participant?.isFakeParticipant;
+ const {
+ _isDominantSpeakerDisabled,
+ _participant,
+ _currentLayout,
+ _isAnyParticipantPinned,
+ classes
+ } = this.props;
className += ` ${DISPLAY_MODE_TO_CLASS_NAME[displayMode]}`;
- if (_participant?.pinned) {
- className += ' videoContainerFocused';
- }
-
- if (!_isDominantSpeakerDisabled && _participant?.dominantSpeaker) {
- className += ' active-speaker';
- }
-
- if (_isHidden) {
- className += ' hidden';
- }
-
- if (isRemoteParticipant && _isAudioOnly) {
- className += ' audio-only';
+ if (_currentLayout === LAYOUTS.TILE_VIEW) {
+ if (!_isDominantSpeakerDisabled && _participant?.dominantSpeaker) {
+ className += ` ${classes.activeSpeaker} dominant-speaker`;
+ }
+ } else if (_isAnyParticipantPinned) {
+ if (_participant?.pinned) {
+ className += ` videoContainerFocused ${classes.activeSpeaker}`;
+ }
+ } else if (!_isDominantSpeakerDisabled && _participant?.dominantSpeaker) {
+ className += ` ${classes.activeSpeaker} dominant-speaker`;
}
return className;
}
- /**
- * Renders the local participant's thumbnail.
- *
- * @returns {ReactElement}
- */
- _renderLocalParticipant() {
- const {
- _allowEditing,
- _defaultLocalDisplayName,
- _disableLocalVideoFlip,
- _isMobile,
- _isMobilePortrait,
- _isScreenSharing,
- _localFlipX,
- _participant,
- _videoTrack
- } = this.props;
- const { id } = _participant || {};
- const { audioLevel } = this.state;
- const styles = this._getStyles();
- let containerClassName = this._getContainerClassName();
- const videoTrackClassName
- = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
-
- if (_isMobilePortrait) {
- styles.thumbnail.height = styles.thumbnail.width;
- containerClassName = `${containerClassName} self-view-mobile-portrait`;
- }
-
- return (
-
-
-
-
-
-
-
- { this._renderTopIndicators() }
-
-
- { this._renderAvatar(styles.avatar) }
-
-
-
-
-
-
-
-
- );
- }
-
_onCanPlay: Object => void;
/**
@@ -971,40 +722,59 @@ class Thumbnail extends Component {
/**
* Renders a remote participant's 'thumbnail.
*
+ * @param {boolean} local - Whether or not it's the local participant.
* @returns {ReactElement}
*/
- _renderRemoteParticipant() {
+ _renderParticipant(local = false) {
const {
+ _audioTrack,
+ _currentLayout,
+ _disableLocalVideoFlip,
_isMobile,
+ _isMobilePortrait,
+ _isScreenSharing,
_isTestModeEnabled,
+ _localFlipX,
_participant,
- _startSilent,
_videoTrack,
- _volume = 1
+ classes
} = this.props;
- const { id } = _participant;
- const { audioLevel } = this.state;
+ const { id } = _participant || {};
+ const { isHovered, popoverVisible } = this.state;
const styles = this._getStyles();
- const containerClassName = this._getContainerClassName();
-
- // hide volume when in silent mode
- const onVolumeChange = _startSilent ? undefined : this._onVolumeChange;
+ let containerClassName = this._getContainerClassName();
+ const videoTrackClassName
+ = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
const jitsiVideoTrack = _videoTrack?.jitsiTrack;
const videoTrackId = jitsiVideoTrack && jitsiVideoTrack.getId();
const videoEventListeners = {};
- if (_videoTrack && _isTestModeEnabled) {
- VIDEO_TEST_EVENTS.forEach(attribute => {
- videoEventListeners[attribute] = this._onTestingEvent;
- });
+ if (local) {
+ if (_isMobilePortrait) {
+ styles.thumbnail.height = styles.thumbnail.width;
+ containerClassName = `${containerClassName} self-view-mobile-portrait`;
+ }
+ } else {
+ if (_videoTrack && _isTestModeEnabled) {
+ VIDEO_TEST_EVENTS.forEach(attribute => {
+ videoEventListeners[attribute] = this._onTestingEvent;
+ });
+ }
+ videoEventListeners.onCanPlay = this._onCanPlay;
}
- videoEventListeners.onCanPlay = this._onCanPlay;
+ const video = _videoTrack && ;
return (
{
}
) }
style = { styles.thumbnail }>
- {
- _videoTrack &&
- }
-
-
- { this._renderTopIndicators() }
+ {local
+ ?
{video}
+ : video}
+
+
+
-
-
-
+ { this._renderAvatar(styles.avatar) }
+ { !local && (
+
-
-
- { this._renderAvatar(styles.avatar) }
-
-
-
-
-
-
-
+ )}
+
+
);
}
- _onVolumeChange: number => void;
-
- /**
- * Handles volume changes.
- *
- * @param {number} value - The new value for the volume.
- * @returns {void}
- */
- _onVolumeChange(value) {
- const { _participant, dispatch } = this.props;
- const { id } = _participant;
-
- dispatch(setVolume(id, value));
- }
-
/**
* Implements React's {@link Component#render()}.
*
@@ -1092,14 +848,14 @@ class Thumbnail extends Component
{
const { isFakeParticipant, local } = _participant;
if (local) {
- return this._renderLocalParticipant();
+ return this._renderParticipant(true);
}
if (isFakeParticipant) {
return this._renderFakeParticipant();
}
- return this._renderRemoteParticipant();
+ return this._renderParticipant();
}
}
@@ -1118,7 +874,6 @@ function _mapStateToProps(state, ownProps): Object {
const id = participant?.id;
const isLocal = participant?.local ?? true;
const tracks = state['features/base/tracks'];
- const { participantsVolume } = state['features/filmstrip'];
const _videoTrack = isLocal
? getLocalVideoTrack(tracks) : getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participantID);
const _audioTrack = isLocal
@@ -1127,14 +882,12 @@ function _mapStateToProps(state, ownProps): Object {
let size = {};
let _isMobilePortrait = false;
const {
- startSilent,
defaultLocalDisplayName,
disableLocalVideoFlip,
disableTileEnlargement,
iAmRecorder,
iAmSipGateway
} = state['features/base/config'];
- const { NORMAL = 8 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
const { localFlipX } = state['features/base/settings'];
const _isMobile = isMobileBrowser();
@@ -1167,7 +920,6 @@ function _mapStateToProps(state, ownProps): Object {
break;
}
case LAYOUTS.TILE_VIEW: {
-
const { width, height } = state['features/filmstrip'].tileViewDimensions.thumbnailSize;
size = {
@@ -1179,12 +931,7 @@ function _mapStateToProps(state, ownProps): Object {
}
return {
- _allowEditing: !isNameReadOnly(state),
_audioTrack,
- _connectionIndicatorAutoHideEnabled:
- Boolean(state['features/base/config'].connectionIndicators?.autoHide ?? true),
- _connectionIndicatorDisabled: _isMobile
- || Boolean(state['features/base/config'].connectionIndicators?.disabled),
_currentLayout,
_defaultLocalDisplayName: defaultLocalDisplayName,
_disableLocalVideoFlip: Boolean(disableLocalVideoFlip),
@@ -1198,15 +945,11 @@ function _mapStateToProps(state, ownProps): Object {
_isScreenSharing: _videoTrack?.videoType === 'desktop',
_isTestModeEnabled: isTestModeEnabled(state),
_isVideoPlayable: id && isVideoPlayable(state, id),
- _indicatorIconSize: NORMAL,
_localFlipX: Boolean(localFlipX),
_participant: participant,
- _participantCountMoreThan2: getParticipantCount(state) > 2,
- _startSilent: Boolean(startSilent),
_videoTrack,
- _volume: isLocal ? undefined : id ? participantsVolume[id] : undefined,
...size
};
}
-export default connect(_mapStateToProps)(Thumbnail);
+export default connect(_mapStateToProps)(withStyles(defaultStyles)(Thumbnail));
diff --git a/react/features/filmstrip/components/web/ThumbnailAudioIndicator.js b/react/features/filmstrip/components/web/ThumbnailAudioIndicator.js
new file mode 100644
index 000000000..e7d4717ee
--- /dev/null
+++ b/react/features/filmstrip/components/web/ThumbnailAudioIndicator.js
@@ -0,0 +1,47 @@
+// @flow
+
+import React, { useEffect, useState } from 'react';
+
+import { AudioLevelIndicator } from '../../../audio-level-indicator';
+import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
+
+const JitsiTrackEvents = JitsiMeetJS.events.track;
+
+type Props = {
+
+ /**
+ * The audio track related to the participant.
+ */
+ _audioTrack: ?Object
+}
+
+const ThumbnailAudioIndicator = ({
+ _audioTrack
+}: Props) => {
+ const [ audioLevel, setAudioLevel ] = useState(0);
+
+ useEffect(() => {
+ setAudioLevel(0);
+ if (_audioTrack) {
+ const { jitsiTrack } = _audioTrack;
+
+ jitsiTrack && jitsiTrack.on(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
+ }
+
+ return () => {
+ if (_audioTrack) {
+ const { jitsiTrack } = _audioTrack;
+
+ jitsiTrack && jitsiTrack.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
+ }
+ };
+ }, [ _audioTrack ]);
+
+ return (
+
+
+
+ );
+};
+
+export default ThumbnailAudioIndicator;
diff --git a/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
new file mode 100644
index 000000000..4b4c97f14
--- /dev/null
+++ b/react/features/filmstrip/components/web/ThumbnailBottomIndicators.js
@@ -0,0 +1,84 @@
+// @flow
+
+import { makeStyles } from '@material-ui/styles';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { isNameReadOnly } from '../../../base/config/functions.any';
+import DisplayName from '../../../display-name/components/web/DisplayName';
+import { LAYOUTS } from '../../../video-layout';
+
+import StatusIndicators from './StatusIndicators';
+
+declare var interfaceConfig: Object;
+
+type Props = {
+
+ /**
+ * The current layout of the filmstrip.
+ */
+ currentLayout: string,
+
+ /**
+ * Class name for indicators container.
+ */
+ className: string,
+
+ /**
+ * Whether or not the indicators are for the local participant.
+ */
+ local: boolean,
+
+ /**
+ * Id of the participant for which the component is displayed.
+ */
+ participantId: string
+}
+
+const useStyles = makeStyles(() => {
+ return {
+ nameContainer: {
+ display: 'flex',
+ overflow: 'hidden',
+ padding: '2px 0',
+
+ '&>div': {
+ display: 'flex',
+ overflow: 'hidden'
+ },
+
+ '&:first-child': {
+ marginLeft: '6px'
+ }
+ }
+ };
+});
+
+const ThumbnailBottomIndicators = ({
+ className,
+ currentLayout,
+ local,
+ participantId
+}: Props) => {
+ const styles = useStyles();
+ const _allowEditing = !useSelector(isNameReadOnly);
+ const _defaultLocalDisplayName = interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME;
+
+ return (
+
+
+
+
+
);
+};
+
+export default ThumbnailBottomIndicators;
diff --git a/react/features/filmstrip/components/web/ThumbnailTopIndicators.js b/react/features/filmstrip/components/web/ThumbnailTopIndicators.js
new file mode 100644
index 000000000..a79ae692e
--- /dev/null
+++ b/react/features/filmstrip/components/web/ThumbnailTopIndicators.js
@@ -0,0 +1,132 @@
+// @flow
+
+import { makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { isMobileBrowser } from '../../../base/environment/utils';
+import ConnectionIndicator from '../../../connection-indicator/components/web/ConnectionIndicator';
+import { LAYOUTS } from '../../../video-layout';
+import { STATS_POPOVER_POSITION } from '../../constants';
+import { getIndicatorsTooltipPosition } from '../../functions.web';
+
+import RaisedHandIndicator from './RaisedHandIndicator';
+import StatusIndicators from './StatusIndicators';
+import VideoMenuTriggerButton from './VideoMenuTriggerButton';
+
+declare var interfaceConfig: Object;
+
+type Props = {
+
+ /**
+ * The current layout of the filmstrip.
+ */
+ currentLayout: string,
+
+ /**
+ * Hide popover callback.
+ */
+ hidePopover: Function,
+
+ /**
+ * Class name for the status indicators container.
+ */
+ indicatorsClassName: string,
+
+ /**
+ * Whether or not the thumbnail is hovered.
+ */
+ isHovered: boolean,
+
+ /**
+ * Whether or not the indicators are for the local participant.
+ */
+ local: boolean,
+
+ /**
+ * Id of the participant for which the component is displayed.
+ */
+ participantId: string,
+
+ /**
+ * Whether popover is visible or not.
+ */
+ popoverVisible: boolean,
+
+ /**
+ * Show popover callback.
+ */
+ showPopover: Function
+}
+
+const useStyles = makeStyles(() => {
+ return {
+ container: {
+ display: 'flex',
+
+ '& > *:not(:last-child)': {
+ marginRight: '4px'
+ }
+ }
+ };
+});
+
+const ThumbnailTopIndicators = ({
+ currentLayout,
+ hidePopover,
+ indicatorsClassName,
+ isHovered,
+ local,
+ participantId,
+ popoverVisible,
+ showPopover
+}: Props) => {
+ const styles = useStyles();
+
+ const _isMobile = isMobileBrowser();
+ const { NORMAL = 16 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
+ const _indicatorIconSize = NORMAL;
+ const _connectionIndicatorAutoHideEnabled = Boolean(
+ useSelector(state => state['features/base/config'].connectionIndicators?.autoHide) ?? true);
+ const _connectionIndicatorDisabled = _isMobile
+ || Boolean(useSelector(state => state['features/base/config'].connectionIndicators?.disabled));
+
+ const showConnectionIndicator = isHovered || !_connectionIndicatorAutoHideEnabled;
+
+ return (
+ <>
+
+ {!_connectionIndicatorDisabled
+ &&
+ }
+
+ {currentLayout === LAYOUTS.TILE_VIEW && (
+
+
+
+ )}
+
+
+
+ );
+};
+
+export default ThumbnailTopIndicators;
diff --git a/react/features/filmstrip/components/web/ThumbnailWrapper.js b/react/features/filmstrip/components/web/ThumbnailWrapper.js
index d9655bb2d..0a23ed8eb 100644
--- a/react/features/filmstrip/components/web/ThumbnailWrapper.js
+++ b/react/features/filmstrip/components/web/ThumbnailWrapper.js
@@ -23,6 +23,11 @@ type Props = {
*/
_horizontalOffset: number,
+ /**
+ * Whether or not there is a pinned participant.
+ */
+ _isAnyParticipantPinned: boolean,
+
/**
* The ID of the participant associated with the Thumbnail.
*/
@@ -75,7 +80,7 @@ class ThumbnailWrapper extends Component {
* @returns {ReactElement}
*/
render() {
- const { _participantID, style, _horizontalOffset = 0, _disableSelfView } = this.props;
+ const { _participantID, style, _horizontalOffset = 0, _isAnyParticipantPinned, _disableSelfView } = this.props;
if (typeof _participantID !== 'string') {
return null;
@@ -91,6 +96,7 @@ class ThumbnailWrapper extends Component {
return (
{
function _mapStateToProps(state, ownProps) {
const _currentLayout = getCurrentLayout(state);
const { remoteParticipants } = state['features/filmstrip'];
+ const { remote, local } = state['features/base/participants'];
const remoteParticipantsLength = remoteParticipants.length;
const { testing = {} } = state['features/base/config'];
const disableSelfView = getDisableSelfView(state);
@@ -160,8 +167,11 @@ function _mapStateToProps(state, ownProps) {
return {};
}
+ const _isAnyParticipantPinned = Boolean([ ...remote ].find(([ , value ]) => value?.pinned) || local?.pinned);
+
return {
- _participantID: remoteParticipants[index]
+ _participantID: remoteParticipants[index],
+ _isAnyParticipantPinned
};
}
diff --git a/react/features/filmstrip/components/web/VideoMenuTriggerButton.js b/react/features/filmstrip/components/web/VideoMenuTriggerButton.js
new file mode 100644
index 000000000..20d35af18
--- /dev/null
+++ b/react/features/filmstrip/components/web/VideoMenuTriggerButton.js
@@ -0,0 +1,69 @@
+// @flow
+
+import React from 'react';
+
+import { LocalVideoMenuTriggerButton, RemoteVideoMenuTriggerButton } from '../../../video-menu';
+
+type Props = {
+
+ /**
+ * Hide popover callback.
+ */
+ hidePopover: Function,
+
+ /**
+ * Whether or not the button is for the local participant.
+ */
+ local: boolean,
+
+ /**
+ * The id of the participant for which the button is.
+ */
+ participantId?: string,
+
+ /**
+ * Whether popover is visible or not.
+ */
+ popoverVisible: boolean,
+
+ /**
+ * Show popover callback.
+ */
+ showPopover: Function,
+
+ /**
+ * Whether or not the component is visible.
+ */
+ visible: boolean
+}
+
+// eslint-disable-next-line no-confusing-arrow
+const VideoMenuTriggerButton = ({
+ hidePopover,
+ local,
+ participantId,
+ popoverVisible,
+ showPopover,
+ visible
+}: Props) => local
+ ? (
+
+ )
+ : (
+
+ );
+
+export default VideoMenuTriggerButton;
diff --git a/react/features/filmstrip/components/web/VideoMutedIndicator.js b/react/features/filmstrip/components/web/VideoMutedIndicator.js
deleted file mode 100644
index 88c104d78..000000000
--- a/react/features/filmstrip/components/web/VideoMutedIndicator.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* @flow */
-
-import React, { Component } from 'react';
-
-import { IconCameraDisabled } from '../../../base/icons';
-import { BaseIndicator } from '../../../base/react';
-
-/**
- * The type of the React {@code Component} props of {@link VideoMutedIndicator}.
- */
-type Props = {
-
- /**
- * From which side of the indicator the tooltip should appear from.
- */
- tooltipPosition: string
-};
-
-/**
- * React {@code Component} for showing a video muted icon with a tooltip.
- *
- * @augments Component
- */
-class VideoMutedIndicator extends Component {
- /**
- * Implements React's {@link Component#render()}.
- *
- * @inheritdoc
- */
- render() {
- return (
-
- );
- }
-}
-
-export default VideoMutedIndicator;
diff --git a/react/features/filmstrip/components/web/index.js b/react/features/filmstrip/components/web/index.js
index 410fdcf2b..cbb17a39d 100644
--- a/react/features/filmstrip/components/web/index.js
+++ b/react/features/filmstrip/components/web/index.js
@@ -1,10 +1,8 @@
// @flow
export { default as AudioMutedIndicator } from './AudioMutedIndicator';
-export { default as DominantSpeakerIndicator } from './DominantSpeakerIndicator';
export { default as Filmstrip } from './Filmstrip';
export { default as ModeratorIndicator } from './ModeratorIndicator';
export { default as RaisedHandIndicator } from './RaisedHandIndicator';
export { default as StatusIndicators } from './StatusIndicators';
-export { default as VideoMutedIndicator } from './VideoMutedIndicator';
export { default as Thumbnail } from './Thumbnail';
diff --git a/react/features/filmstrip/constants.js b/react/features/filmstrip/constants.js
index 4be05f119..32950ae6e 100644
--- a/react/features/filmstrip/constants.js
+++ b/react/features/filmstrip/constants.js
@@ -1,6 +1,7 @@
// @flow
import { BoxModel } from '../base/styles';
+import { LAYOUTS } from '../video-layout/constants';
/**
* The size (height and width) of the small (not tile view) thumbnails.
@@ -96,33 +97,6 @@ export const DISPLAY_VIDEO = 0;
*/
export const DISPLAY_AVATAR = 1;
-/**
- * Display mode constant used when neither video nor avatar is being displayed
- * on the small video. And we just show the display name.
- *
- * @type {number}
- * @constant
- */
-export const DISPLAY_BLACKNESS_WITH_NAME = 2;
-
-/**
- * Display mode constant used when video is displayed and display name
- * at the same time.
- *
- * @type {number}
- * @constant
- */
-export const DISPLAY_VIDEO_WITH_NAME = 3;
-
-/**
- * Display mode constant used when neither video nor avatar is being displayed
- * on the small video. And we just show the display name.
- *
- * @type {number}
- * @constant
- */
-export const DISPLAY_AVATAR_WITH_NAME = 4;
-
/**
* Maps the display modes to class name that will be applied on the thumbnail container.
*
@@ -131,24 +105,7 @@ export const DISPLAY_AVATAR_WITH_NAME = 4;
*/
export const DISPLAY_MODE_TO_CLASS_NAME = [
'display-video',
- 'display-avatar-only',
- 'display-name-on-black',
- 'display-name-on-video',
- 'display-avatar-with-name'
-];
-
-/**
- * Maps the display modes to string.
- *
- * @type {Array}
- * @constant
- */
-export const DISPLAY_MODE_TO_STRING = [
- 'video',
- 'avatar',
- 'blackness-with-name',
- 'video-with-name',
- 'avatar-with-name'
+ 'display-avatar-only'
];
/**
@@ -165,6 +122,20 @@ export const TILE_VERTICAL_MARGIN = 4;
*/
export const TILE_HORIZONTAL_MARGIN = 4;
+/**
+ * The vertical margin of the tile grid container.
+ *
+ * @type {number}
+ */
+export const TILE_VIEW_GRID_VERTICAL_MARGIN = 12;
+
+/**
+ * The horizontal margin of the tile grid container.
+ *
+ * @type {number}
+ */
+export const TILE_VIEW_GRID_HORIZONTAL_MARGIN = 12;
+
/**
* The height of the whole toolbar.
*/
@@ -238,3 +209,21 @@ export const SHOW_TOOLBAR_CONTEXT_MENU_AFTER = 600;
* @type {number}
*/
export const TILE_MARGIN = 10;
+
+/**
+ * The popover position for the connection stats table.
+ */
+export const STATS_POPOVER_POSITION = {
+ [LAYOUTS.TILE_VIEW]: 'right-start',
+ [LAYOUTS.VERTICAL_FILMSTRIP_VIEW]: 'left-start',
+ [LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW]: 'top-end'
+};
+
+/**
+ * The tooltip position for the indicators on the thumbnail.
+ */
+export const INDICATORS_TOOLTIP_POSITION = {
+ [LAYOUTS.TILE_VIEW]: 'right',
+ [LAYOUTS.VERTICAL_FILMSTRIP_VIEW]: 'left',
+ [LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW]: 'top'
+};
diff --git a/react/features/filmstrip/functions.web.js b/react/features/filmstrip/functions.web.js
index d0c9ab757..1398ec7e7 100644
--- a/react/features/filmstrip/functions.web.js
+++ b/react/features/filmstrip/functions.web.js
@@ -15,20 +15,21 @@ import {
isLocalTrackMuted,
isRemoteTrackMuted
} from '../base/tracks/functions';
+import { LAYOUTS } from '../video-layout';
import {
ASPECT_RATIO_BREAKPOINT,
DISPLAY_AVATAR,
- DISPLAY_AVATAR_WITH_NAME,
- DISPLAY_BLACKNESS_WITH_NAME,
DISPLAY_VIDEO,
- DISPLAY_VIDEO_WITH_NAME,
+ INDICATORS_TOOLTIP_POSITION,
SCROLL_SIZE,
SQUARE_TILE_ASPECT_RATIO,
STAGE_VIEW_THUMBNAIL_HORIZONTAL_BORDER,
TILE_ASPECT_RATIO,
TILE_HORIZONTAL_MARGIN,
TILE_VERTICAL_MARGIN,
+ TILE_VIEW_GRID_HORIZONTAL_MARGIN,
+ TILE_VIEW_GRID_VERTICAL_MARGIN,
VERTICAL_FILMSTRIP_MIN_HORIZONTAL_MARGIN
} from './constants';
@@ -190,8 +191,8 @@ export function calculateThumbnailSizeForTileView({
aspectRatio = SQUARE_TILE_ASPECT_RATIO;
}
- const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN);
- const viewHeight = clientHeight - (minVisibleRows * TILE_VERTICAL_MARGIN);
+ const viewWidth = clientWidth - (columns * TILE_HORIZONTAL_MARGIN) - TILE_VIEW_GRID_HORIZONTAL_MARGIN;
+ const viewHeight = clientHeight - (minVisibleRows * TILE_VERTICAL_MARGIN) - TILE_VIEW_GRID_VERTICAL_MARGIN;
const initialWidth = viewWidth / columns;
const initialHeight = viewHeight / minVisibleRows;
const aspectRatioHeight = initialWidth / aspectRatio;
@@ -240,32 +241,75 @@ export function getVerticalFilmstripVisibleAreaWidth() {
/**
* Computes information that determine the display mode.
*
- * @param {Object} input - Obejct containing all necessary information for determining the display mode for
+ * @param {Object} input - Object containing all necessary information for determining the display mode for
* the thumbnail.
- * @returns {number} - One of DISPLAY_VIDEO, DISPLAY_AVATAR or DISPLAY_BLACKNESS_WITH_NAME.
+ * @returns {number} - One of DISPLAY_VIDEO or DISPLAY_AVATAR.
*/
-export function computeDisplayMode(input: Object) {
+export function computeDisplayModeFromInput(input: Object) {
const {
isAudioOnly,
isCurrentlyOnLargeVideo,
isScreenSharing,
canPlayEventReceived,
- isHovered,
isRemoteParticipant,
tileViewActive
} = input;
const adjustedIsVideoPlayable = input.isVideoPlayable && (!isRemoteParticipant || canPlayEventReceived);
if (!tileViewActive && isScreenSharing && isRemoteParticipant) {
- return isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+ return DISPLAY_AVATAR;
} else if (isCurrentlyOnLargeVideo && !tileViewActive) {
// Display name is always and only displayed when user is on the stage
- return adjustedIsVideoPlayable && !isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
+ return adjustedIsVideoPlayable && !isAudioOnly ? DISPLAY_VIDEO : DISPLAY_AVATAR;
} else if (adjustedIsVideoPlayable && !isAudioOnly) {
// check hovering and change state to video with name
- return isHovered ? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
+ return DISPLAY_VIDEO;
}
// check hovering and change state to avatar with name
- return isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+ return DISPLAY_AVATAR;
+}
+
+/**
+ * Extracts information for props and state needed to compute the display mode.
+ *
+ * @param {Object} props - The Thumbnail component's props.
+ * @param {Object} state - The Thumbnail component's state.
+ * @returns {Object}
+*/
+export function getDisplayModeInput(props: Object, state: Object) {
+ const {
+ _currentLayout,
+ _isAudioOnly,
+ _isCurrentlyOnLargeVideo,
+ _isScreenSharing,
+ _isVideoPlayable,
+ _participant,
+ _videoTrack
+ } = props;
+ const tileViewActive = _currentLayout === LAYOUTS.TILE_VIEW;
+ const { canPlayEventReceived } = state;
+
+ return {
+ isCurrentlyOnLargeVideo: _isCurrentlyOnLargeVideo,
+ isAudioOnly: _isAudioOnly,
+ tileViewActive,
+ isVideoPlayable: _isVideoPlayable,
+ connectionStatus: _participant?.connectionStatus,
+ canPlayEventReceived,
+ videoStream: Boolean(_videoTrack),
+ isRemoteParticipant: !_participant?.isFakeParticipant && !_participant?.local,
+ isScreenSharing: _isScreenSharing,
+ videoStreamMuted: _videoTrack ? _videoTrack.muted : 'no stream'
+ };
+}
+
+/**
+ * Gets the tooltip position for the thumbnail indicators.
+ *
+ * @param {string} currentLayout - The current layout of the app.
+ * @returns {string}
+ */
+export function getIndicatorsTooltipPosition(currentLayout: string) {
+ return INDICATORS_TOOLTIP_POSITION[currentLayout] || 'top';
}
diff --git a/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js b/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js
index 315f76376..a6f297107 100644
--- a/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js
+++ b/react/features/participants-pane/components/web/MeetingParticipantContextMenu.js
@@ -1,87 +1,16 @@
// @flow
-import { withStyles } from '@material-ui/styles';
import React, { Component } from 'react';
-import { createBreakoutRoomsEvent, sendAnalytics } from '../../../analytics';
-import { approveParticipant } from '../../../av-moderation/actions';
-import { Avatar } from '../../../base/avatar';
-import { ContextMenu, ContextMenuItemGroup } from '../../../base/components';
-import { isToolbarButtonEnabled } from '../../../base/config/functions.web';
-import { openDialog } from '../../../base/dialog';
-import { isIosMobileBrowser } from '../../../base/environment/utils';
import { translate } from '../../../base/i18n';
-import {
- IconCloseCircle,
- IconCrown,
- IconMessage,
- IconMicDisabled,
- IconMicrophone,
- IconMuteEveryoneElse,
- IconRingGroup,
- IconShareVideo,
- IconVideoOff
-} from '../../../base/icons';
-import { MEDIA_TYPE } from '../../../base/media';
import {
getLocalParticipant,
- getParticipantByIdOrUndefined,
- isLocalParticipantModerator,
- isParticipantModerator
+ getParticipantByIdOrUndefined
} from '../../../base/participants';
import { connect } from '../../../base/redux';
-import { isParticipantAudioMuted, isParticipantVideoMuted } from '../../../base/tracks';
-import { sendParticipantToRoom } from '../../../breakout-rooms/actions';
-import { getBreakoutRooms, getCurrentRoomId } from '../../../breakout-rooms/functions';
-import { openChatById } from '../../../chat/actions';
-import { setVolume } from '../../../filmstrip/actions.web';
-import { stopSharedVideo } from '../../../shared-video/actions.any';
-import { GrantModeratorDialog, KickRemoteParticipantDialog, MuteEveryoneDialog } from '../../../video-menu';
-import { VolumeSlider } from '../../../video-menu/components/web';
-import MuteRemoteParticipantsVideoDialog from '../../../video-menu/components/web/MuteRemoteParticipantsVideoDialog';
-import { isForceMuted } from '../../functions';
+import ParticipantContextMenu from '../../../video-menu/components/web/ParticipantContextMenu';
type Props = {
- /**
- * Whether or not the participant is audio force muted.
- */
- _isAudioForceMuted: boolean,
-
- /**
- * The id of the current room.
- */
- _currentRoomId: String,
-
- /**
- * True if the local participant is moderator and false otherwise.
- */
- _isLocalModerator: boolean,
-
- /**
- * True if the chat button is enabled and false otherwise.
- */
- _isChatButtonEnabled: boolean,
-
- /**
- * True if the participant is moderator and false otherwise.
- */
- _isParticipantModerator: boolean,
-
- /**
- * True if the participant is video muted and false otherwise.
- */
- _isParticipantVideoMuted: boolean,
-
- /**
- * True if the participant is audio muted and false otherwise.
- */
- _isParticipantAudioMuted: boolean,
-
- /**
- * Whether or not the participant is video force muted.
- */
- _isVideoForceMuted: boolean,
-
/**
* Shared video local participant owner.
*/
@@ -92,27 +21,11 @@ type Props = {
*/
_participant: Object,
- /**
- * Rooms reference.
- */
- _rooms: Array