From ec0e824a438220cd3f4eaebabc2e5d497f9a0d53 Mon Sep 17 00:00:00 2001 From: Robert Pintilii Date: Thu, 31 Mar 2022 14:39:49 +0300 Subject: [PATCH] feat(rn, thumbnail) Updated indicators on native (#11280) Remove tint for participant in large view Change pinned indicator from border to icon On stage view move screen sharing indicator from top to bottom On stage view show pinned indicator instead of moderator indicator --- .../base/color-scheme/defaultScheme.js | 5 -- .../components/ParticipantView.native.js | 23 ++------- .../components/native/PinnedIndicator.js | 17 +++++++ .../filmstrip/components/native/Thumbnail.js | 50 +++++-------------- .../filmstrip/components/native/TileView.js | 1 - .../filmstrip/components/native/styles.js | 27 ---------- 6 files changed, 32 insertions(+), 91 deletions(-) create mode 100644 react/features/filmstrip/components/native/PinnedIndicator.js diff --git a/react/features/base/color-scheme/defaultScheme.js b/react/features/base/color-scheme/defaultScheme.js index 082dd7022..a2b6ccdc7 100644 --- a/react/features/base/color-scheme/defaultScheme.js +++ b/react/features/base/color-scheme/defaultScheme.js @@ -45,11 +45,6 @@ export default { 'LargeVideo': { background: '#040404' }, - 'Thumbnail': { - activeParticipantHighlight: 'rgb(81, 214, 170)', - activeParticipantTint: 'rgba(49, 183, 106, 0.3)', - background: '#36383C' - }, 'Toolbox': { button: 'rgb(255, 255, 255)', buttonToggled: 'rgb(38, 58, 76)', diff --git a/react/features/base/participants/components/ParticipantView.native.js b/react/features/base/participants/components/ParticipantView.native.js index 0528f39ef..8c189693d 100644 --- a/react/features/base/participants/components/ParticipantView.native.js +++ b/react/features/base/participants/components/ParticipantView.native.js @@ -13,7 +13,6 @@ import { } from '../../media'; import { Container, TintedView } from '../../react'; import { connect } from '../../redux'; -import type { StyleType } from '../../styles'; import { TestHint } from '../../testing/components'; import { getTrackByMediaTypeAndParticipant } from '../../tracks'; import { shouldRenderParticipantVideo, getParticipantById } from '../functions'; @@ -91,17 +90,6 @@ type Props = { */ t: Function, - /** - * If true, a tinting will be applied to the view, regardless of video or - * avatar is rendered. - */ - tintEnabled: boolean, - - /** - * The style of the tinting when applied. - */ - tintStyle: StyleType, - /** * The test hint id which can be used to locate the {@code ParticipantView} * on the jitsi-meet-torture side. If not provided, the @@ -193,15 +181,12 @@ class ParticipantView extends Component { _renderVideo: renderVideo, _videoTrack: videoTrack, disableVideo, - onPress, - tintStyle + onPress } = this.props; // If the connection has problems, we will "tint" the video / avatar. const connectionProblem = connectionStatus !== JitsiParticipantConnectionStatus.ACTIVE; - const useTint - = connectionProblem || this.props.tintEnabled; const testHintId = this.props.testHintId @@ -241,12 +226,10 @@ class ParticipantView extends Component { size = { this.props.avatarSize } /> } - { useTint + { connectionProblem // If the connection has problems, tint the video / avatar. - && } + && } { this.props.useConnectivityInfoLabel && this._renderConnectionInfo(connectionStatus) } diff --git a/react/features/filmstrip/components/native/PinnedIndicator.js b/react/features/filmstrip/components/native/PinnedIndicator.js new file mode 100644 index 000000000..745efe4b1 --- /dev/null +++ b/react/features/filmstrip/components/native/PinnedIndicator.js @@ -0,0 +1,17 @@ +// @flow + +import React from 'react'; + +import { IconPinParticipant } from '../../../base/icons'; +import { BaseIndicator } from '../../../base/react'; + +/** + * Thumbnail badge for displaying if a participant is pinned. + * + * @returns {React$Element} + */ +export default function PinnedIndicator() { + return ( + + ); +} diff --git a/react/features/filmstrip/components/native/Thumbnail.js b/react/features/filmstrip/components/native/Thumbnail.js index 31ed6d263..e4b5b5f22 100644 --- a/react/features/filmstrip/components/native/Thumbnail.js +++ b/react/features/filmstrip/components/native/Thumbnail.js @@ -4,7 +4,6 @@ import React, { PureComponent } from 'react'; import { Image, View } from 'react-native'; import type { Dispatch } from 'redux'; -import { ColorSchemeRegistry } from '../../../base/color-scheme'; import { MEDIA_TYPE, VIDEO_TYPE } from '../../../base/media'; import { PARTICIPANT_ROLE, @@ -18,7 +17,6 @@ import { } from '../../../base/participants'; import { Container } from '../../../base/react'; import { connect } from '../../../base/redux'; -import { StyleType } from '../../../base/styles'; import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks'; import { ConnectionIndicator } from '../../../connection-indicator'; import { DisplayNameLabel } from '../../../display-name'; @@ -32,6 +30,7 @@ import { SQUARE_TILE_ASPECT_RATIO } from '../../constants'; import AudioMutedIndicator from './AudioMutedIndicator'; import ModeratorIndicator from './ModeratorIndicator'; +import PinnedIndicator from './PinnedIndicator'; import RaisedHandIndicator from './RaisedHandIndicator'; import ScreenShareIndicator from './ScreenShareIndicator'; import styles, { AVATAR_SIZE } from './styles'; @@ -79,11 +78,6 @@ type Props = { */ _participantId: string, - /** - * Indicates whether the participant is displayed on the large video. - */ - _participantInLargeVideo: boolean, - /** * Indicates whether the participant is pinned or not. */ @@ -104,18 +98,6 @@ type Props = { */ _renderModeratorIndicator: boolean, - /** - * The color-schemed stylesheet of the feature. - */ - _styles: StyleType, - - /** - * If true, there will be no color overlay (tint) on the thumbnail - * indicating the participant associated with the thumbnail is displayed on - * large video. By default there will be a tint. - */ - disableTint?: boolean, - /** * Invoked to trigger state changes in Redux. */ @@ -208,7 +190,9 @@ class Thumbnail extends PureComponent { _isFakeParticipant, _renderModeratorIndicator: renderModeratorIndicator, _participantId: participantId, - renderDisplayName + _pinned, + renderDisplayName, + tileView } = this.props; const indicators = []; @@ -221,7 +205,7 @@ class Thumbnail extends PureComponent { ] }> - {isScreenShare && ( + {tileView && isScreenShare && ( @@ -232,7 +216,11 @@ class Thumbnail extends PureComponent { style = { styles.thumbnailIndicatorContainer }> { audioMuted && } + { !tileView && _pinned && } { renderModeratorIndicator && } + { !tileView && isScreenShare + && + } { renderDisplayName && { _isScreenShare: isScreenShare, _isFakeParticipant, _participantId: participantId, - _participantInLargeVideo: participantInLargeVideo, - _pinned, _raisedHand, _renderDominantSpeakerIndicator, - _styles, - disableTint, height, tileView } = this.props; @@ -281,7 +265,6 @@ class Thumbnail extends PureComponent { onLongPress = { this._onThumbnailLongPress } style = { [ styles.thumbnail, - _pinned && !tileView ? _styles.thumbnailPinned : null, styleOverrides, _raisedHand ? styles.thumbnailRaisedHand : null, _renderDominantSpeakerIndicator ? styles.thumbnailDominantSpeaker : null @@ -295,8 +278,6 @@ class Thumbnail extends PureComponent { avatarSize = { tileView ? AVATAR_SIZE * 1.5 : AVATAR_SIZE } disableVideo = { isScreenShare || _isFakeParticipant } participantId = { participantId } - tintEnabled = { participantInLargeVideo && !disableTint } - tintStyle = { _styles.activeThumbnailTint } zOrder = { 1 } /> { this._renderIndicators() @@ -316,13 +297,9 @@ class Thumbnail extends PureComponent { * @returns {Object} */ function _mapStateToProps(state, ownProps) { - // We need read-only access to the state of features/large-video so that the - // filmstrip doesn't render the video of the participant who is rendered on - // the stage i.e. as a large video. - const largeVideo = state['features/large-video']; const { ownerId } = state['features/shared-video']; const tracks = state['features/base/tracks']; - const { participantID } = ownProps; + const { participantID, tileView } = ownProps; const participant = getParticipantByIdOrUndefined(state, participantID); const localParticipantId = getLocalParticipant(state).id; const id = participant?.id; @@ -334,9 +311,8 @@ function _mapStateToProps(state, ownProps) { const participantCount = getParticipantCount(state); const renderDominantSpeakerIndicator = participant && participant.dominantSpeaker && participantCount > 2; const _isEveryoneModerator = isEveryoneModerator(state); - const renderModeratorIndicator = !_isEveryoneModerator + const renderModeratorIndicator = tileView && !_isEveryoneModerator && participant?.role === PARTICIPANT_ROLE.MODERATOR; - const participantInLargeVideo = id === largeVideo.participantId; const { gifUrl: gifSrc } = getGifForParticipant(state, id); const mode = getGifDisplayMode(state); @@ -347,13 +323,11 @@ function _mapStateToProps(state, ownProps) { _isScreenShare: isScreenShare, _local: participant?.local, _localVideoOwner: Boolean(ownerId === localParticipantId), - _participantInLargeVideo: participantInLargeVideo, _participantId: id, _pinned: participant?.pinned, _raisedHand: hasRaisedHand(participant), _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator, - _renderModeratorIndicator: renderModeratorIndicator, - _styles: ColorSchemeRegistry.get(state, 'Thumbnail') + _renderModeratorIndicator: renderModeratorIndicator }; } diff --git a/react/features/filmstrip/components/native/TileView.js b/react/features/filmstrip/components/native/TileView.js index 4db56fb89..ad7004f53 100644 --- a/react/features/filmstrip/components/native/TileView.js +++ b/react/features/filmstrip/components/native/TileView.js @@ -263,7 +263,6 @@ class TileView extends PureComponent { return (