From 7e5c283e3cc25781907932276a5370ca2552c246 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Fri, 28 Jan 2022 12:47:54 +0200 Subject: [PATCH] feat(disableSelfView) Toggle self view on native (#10871) Added toggle button in overflow menu Created video menu with connection info and self view toggle buttons for local participant --- lang/main.json | 2 + .../filmstrip/components/native/Thumbnail.js | 7 +- .../participants-pane/actions.native.js | 8 +- .../components/native/ToggleSelfViewButton.js | 79 ++++++++ react/features/video-menu/actions.native.js | 11 +- .../components/native/LocalVideoMenu.js | 169 ++++++++++++++++++ .../video-menu/components/native/index.js | 1 + 7 files changed, 268 insertions(+), 9 deletions(-) create mode 100644 react/features/toolbox/components/native/ToggleSelfViewButton.js create mode 100644 react/features/video-menu/components/native/LocalVideoMenu.js diff --git a/lang/main.json b/lang/main.json index cedd4dfed..67a9432f9 100644 --- a/lang/main.json +++ b/lang/main.json @@ -1001,6 +1001,7 @@ "remoteVideoMute": "Disable camera of participant", "security": "Security options", "selectBackground": "Select Background", + "selfView": "Toggle self view", "shareRoom": "Invite someone", "shareYourScreen": "Start / Stop sharing your screen", "shareaudio": "Share audio", @@ -1168,6 +1169,7 @@ "remoteControl": "Start / Stop remote control", "screenSharing": "Participant is sharing their screen", "show": "Show on stage", + "showSelfView": "Show self view", "videoMuted": "Camera disabled", "videomute": "Participant has stopped the camera" }, diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js index ad13033d9..eadae3390 100644 --- a/react/features/filmstrip/components/native/Thumbnail.js +++ b/react/features/filmstrip/components/native/Thumbnail.js @@ -23,7 +23,6 @@ import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks'; import { ConnectionIndicator } from '../../../connection-indicator'; import { DisplayNameLabel } from '../../../display-name'; import { - showConnectionStatus, showContextMenuDetails, showSharedVideoMenu } from '../../../participants-pane/actions.native'; @@ -194,11 +193,7 @@ class Thumbnail extends PureComponent { } if (!_isFakeParticipant) { - if (_local) { - dispatch(showConnectionStatus(_participantId)); - } else { - dispatch(showContextMenuDetails(_participantId)); - } + dispatch(showContextMenuDetails(_participantId, _local)); } } diff --git a/react/features/participants-pane/actions.native.js b/react/features/participants-pane/actions.native.js index 187217d6a..e066c1c3c 100644 --- a/react/features/participants-pane/actions.native.js +++ b/react/features/participants-pane/actions.native.js @@ -2,6 +2,7 @@ import { openDialog } from '../base/dialog'; import { SharedVideoMenu } from '../video-menu'; +import { LocalVideoMenu } from '../video-menu/components/native'; import ConnectionStatusComponent from '../video-menu/components/native/ConnectionStatusComponent'; import RemoteVideoMenu from '../video-menu/components/native/RemoteVideoMenu'; @@ -37,10 +38,13 @@ export function showConnectionStatus(participantID: string) { * Displays the context menu for the selected meeting participant. * * @param {string} participantId - The ID of the selected meeting participant. + * @param {boolean} local - Whether the participant is local or not. * @returns {Function} */ -export function showContextMenuDetails(participantId: string) { - return openDialog(RemoteVideoMenu, { participantId }); +export function showContextMenuDetails(participantId: string, local: boolean = false) { + return local + ? openDialog(LocalVideoMenu) + : openDialog(RemoteVideoMenu, { participantId }); } /** diff --git a/react/features/toolbox/components/native/ToggleSelfViewButton.js b/react/features/toolbox/components/native/ToggleSelfViewButton.js new file mode 100644 index 000000000..e24f26ff3 --- /dev/null +++ b/react/features/toolbox/components/native/ToggleSelfViewButton.js @@ -0,0 +1,79 @@ +// @flow + +import { translate } from '../../../base/i18n'; +import { IconAudioOnlyOff } from '../../../base/icons'; +import { connect } from '../../../base/redux'; +import { updateSettings } from '../../../base/settings'; +import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components'; + +/** + * The type of the React {@code Component} props of {@link ToggleSelfViewButton}. + */ +type Props = AbstractButtonProps & { + + /** + * Whether the self view is disabled or not. + */ + _disableSelfView: boolean, + + /** + * The redux {@code dispatch} function. + */ + dispatch: Function +}; + +/** + * An implementation of a button for toggling the self view. + */ +class ToggleSelfViewButton extends AbstractButton { + accessibilityLabel = 'toolbar.accessibilityLabel.selfView'; + icon = IconAudioOnlyOff; + label = 'videothumbnail.hideSelfView'; + toggledLabel = 'videothumbnail.showSelfView'; + + /** + * Handles clicking / pressing the button. + * + * @override + * @protected + * @returns {void} + */ + _handleClick() { + const { _disableSelfView, dispatch } = this.props; + + dispatch(updateSettings({ + disableSelfView: !_disableSelfView + })); + } + + /** + * Indicates whether this button is in toggled state or not. + * + * @override + * @protected + * @returns {boolean} + */ + _isToggled() { + return this.props._disableSelfView; + } +} + +/** + * Maps (parts of) the redux state to the associated props for the + * {@code ToggleSelfViewButton} component. + * + * @param {Object} state - The Redux state. + * @private + * @returns {{ + * _disableSelfView: boolean + * }} + */ +function _mapStateToProps(state): Object { + const { disableSelfView } = state['features/base/settings']; + + return { + _disableSelfView: Boolean(disableSelfView) + }; +} + +export default translate(connect(_mapStateToProps)(ToggleSelfViewButton)); diff --git a/react/features/video-menu/actions.native.js b/react/features/video-menu/actions.native.js index 3b8de407a..bf0ac7209 100644 --- a/react/features/video-menu/actions.native.js +++ b/react/features/video-menu/actions.native.js @@ -1,7 +1,16 @@ // @flow import { hideDialog } from '../base/dialog'; -import { RemoteVideoMenu, SharedVideoMenu } from './components/native'; +import { RemoteVideoMenu, SharedVideoMenu, LocalVideoMenu } from './components/native'; + +/** + * Hides the local video menu. + * + * @returns {Function} + */ +export function hideLocalVideoMenu() { + return hideDialog(LocalVideoMenu); +} /** * Hides the remote video menu. diff --git a/react/features/video-menu/components/native/LocalVideoMenu.js b/react/features/video-menu/components/native/LocalVideoMenu.js new file mode 100644 index 000000000..7b2ec4345 --- /dev/null +++ b/react/features/video-menu/components/native/LocalVideoMenu.js @@ -0,0 +1,169 @@ +// @flow + +import React, { PureComponent } from 'react'; +import { Text, View } from 'react-native'; + +import { Avatar } from '../../../base/avatar'; +import { ColorSchemeRegistry } from '../../../base/color-scheme'; +import { BottomSheet, isDialogOpen } from '../../../base/dialog'; +import { translate } from '../../../base/i18n'; +import { + getLocalParticipant, + getParticipantDisplayName +} from '../../../base/participants'; +import { connect } from '../../../base/redux'; +import { StyleType } from '../../../base/styles'; +import ToggleSelfViewButton from '../../../toolbox/components/native/ToggleSelfViewButton'; +import { hideLocalVideoMenu } from '../../actions.native'; + +import ConnectionStatusButton from './ConnectionStatusButton'; +import styles from './styles'; + + +/** + * Size of the rendered avatar in the menu. + */ +const AVATAR_SIZE = 24; + +type Props = { + + /** + * The color-schemed stylesheet of the BottomSheet. + */ + _bottomSheetStyles: StyleType, + + /** + * True if the menu is currently open, false otherwise. + */ + _isOpen: boolean, + + /** + * The local participant. + */ + _participant: Object, + + /** + * Display name of the participant retrieved from Redux. + */ + _participantDisplayName: string, + + /** + * The Redux dispatch function. + */ + dispatch: Function, + + /** + * Translation function. + */ + t: Function +} + +// eslint-disable-next-line prefer-const +let LocalVideoMenu_; + +/** + * Class to implement a popup menu that opens upon long pressing a thumbnail. + */ +class LocalVideoMenu extends PureComponent { + /** + * Constructor of the component. + * + * @inheritdoc + */ + constructor(props: Props) { + super(props); + + this._onCancel = this._onCancel.bind(this); + this._renderMenuHeader = this._renderMenuHeader.bind(this); + } + + /** + * Implements {@code Component#render}. + * + * @inheritdoc + */ + render() { + const { _participant, _bottomSheetStyles } = this.props; + const buttonProps = { + afterClick: this._onCancel, + showLabel: true, + participantID: _participant.id, + styles: _bottomSheetStyles.buttons + }; + + return ( + + + + + ); + } + + _onCancel: () => boolean; + + /** + * Callback to hide the {@code RemoteVideoMenu}. + * + * @private + * @returns {boolean} + */ + _onCancel() { + if (this.props._isOpen) { + this.props.dispatch(hideLocalVideoMenu()); + + return true; + } + + return false; + } + + _renderMenuHeader: () => React$Element; + + /** + * Function to render the menu's header. + * + * @returns {React$Element} + */ + _renderMenuHeader() { + const { _bottomSheetStyles, _participant } = this.props; + + return ( + + + + { this.props._participantDisplayName } + + + ); + } +} + +/** + * Function that maps parts of Redux state tree into component props. + * + * @param {Object} state - Redux state. + * @private + * @returns {Props} + */ +function _mapStateToProps(state) { + const participant = getLocalParticipant(state); + + return { + _bottomSheetStyles: ColorSchemeRegistry.get(state, 'BottomSheet'), + _isOpen: isDialogOpen(state, LocalVideoMenu_), + _participant: participant, + _participantDisplayName: getParticipantDisplayName(state, participant.id) + }; +} + +LocalVideoMenu_ = translate(connect(_mapStateToProps)(LocalVideoMenu)); + +export default LocalVideoMenu_; diff --git a/react/features/video-menu/components/native/index.js b/react/features/video-menu/components/native/index.js index 6565a3c60..8671ed3f4 100644 --- a/react/features/video-menu/components/native/index.js +++ b/react/features/video-menu/components/native/index.js @@ -6,6 +6,7 @@ export { default as KickRemoteParticipantDialog } from './KickRemoteParticipantD export { default as MuteEveryoneDialog } from './MuteEveryoneDialog'; export { default as MuteEveryonesVideoDialog } from './MuteEveryonesVideoDialog'; export { default as MuteRemoteParticipantsVideoDialog } from './MuteRemoteParticipantsVideoDialog'; +export { default as LocalVideoMenu } from './LocalVideoMenu'; export { default as RemoteVideoMenu } from './RemoteVideoMenu'; export { default as SharedVideoMenu } from './SharedVideoMenu'; export { default as VolumeSlider } from './VolumeSlider';