diff --git a/react/features/base/color-scheme/defaultScheme.js b/react/features/base/color-scheme/defaultScheme.js index 082dd7022a..a2b6ccdc75 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 0528f39ef8..8c189693dc 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 0000000000..745efe4b12 --- /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 31ed6d263c..e4b5b5f22a 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 4db56fb89e..ad7004f539 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 (