[RN] Tint active speaker thumbnail

react/features/base/participants/components/ParticipantView.native.js

@@ -83,19 +83,6 @@ type Props = {
      */
     participantId: string,
 
-    /**
-     * True if the avatar of the depicted participant is to be shown should the
-     * avatar be available and the video of the participant is not to be shown;
-     * otherwise, false. If undefined, defaults to true.
-     */
-    showAvatar: boolean,
-
-    /**
-     * True if the video of the depicted participant is to be shown should the
-     * video be available. If undefined, defaults to true.
-     */
-    showVideo: boolean,
-
     /**
      * The style, if any, to apply to {@link ParticipantView} in addition to its
      * default style.
@@ -107,6 +94,12 @@ type Props = {
      */
     t: Function,
 
+    /**
+     * If true, a tinting will be applied to the view, regardless of video or
+     * avatar is rendered.
+     */
+    tintEnabled: boolean,
+
     /**
      * The test hint id which can be used to locate the {@code ParticipantView}
      * on the jitsi-meet-torture side. If not provided, the
@@ -211,28 +204,19 @@ class ParticipantView extends Component<Props> {
         // doesn't retain the last frame forever, so we would end up with a
         // black screen.
         const waitForVideoStarted = false;
-        let renderVideo
+        const renderVideo
             = !this.props._audioOnly
                 && (connectionStatus
                     === JitsiParticipantConnectionStatus.ACTIVE)
                 && shouldRenderVideoTrack(videoTrack, waitForVideoStarted);
 
         // Is the avatar to be rendered?
-        let renderAvatar = Boolean(!renderVideo && avatar);
-
-        // The consumer of this ParticipantView is allowed to forbid showing the
-        // video if the private logic of this ParticipantView determines that
-        // the video could be rendered.
-        renderVideo = renderVideo && _toBoolean(this.props.showVideo, true);
-
-        // The consumer of this ParticipantView is allowed to forbid showing the
-        // avatar if the private logic of this ParticipantView determines that
-        // the avatar could be rendered.
-        renderAvatar = renderAvatar && _toBoolean(this.props.showAvatar, true);
+        const renderAvatar = Boolean(!renderVideo && avatar);
 
         // If the connection has problems, we will "tint" the video / avatar.
         const useTint
-            = connectionStatus !== JitsiParticipantConnectionStatus.ACTIVE;
+            = connectionStatus !== JitsiParticipantConnectionStatus.ACTIVE
+                || this.props.tintEnabled;
 
         const testHintId
             = this.props.testHintId
@@ -278,21 +262,6 @@ class ParticipantView extends Component<Props> {
     }
 }
 
-/**
- * Converts the specified value to a boolean value. If the specified value is
- * undefined, returns the boolean value of undefinedValue.
- *
- * @param {any} value - The value to convert to a boolean value should it not be
- * undefined.
- * @param {any} undefinedValue - The value to convert to a boolean value should
- * the specified value be undefined.
- * @private
- * @returns {boolean}
- */
-function _toBoolean(value, undefinedValue) {
-    return Boolean(typeof value === 'undefined' ? undefinedValue : value);
-}
-
 /**
  * Maps (parts of) the redux state to the associated {@link ParticipantView}'s
  * props.

react/features/filmstrip/components/native/Thumbnail.js

@@ -79,8 +79,8 @@ class Thumbnail extends Component {
         const audioMuted = !audioTrack || audioTrack.muted;
         const renderAudio = !audioMuted && !audioTrack.local;
         const participantId = participant.id;
-        const participantNotInLargeVideo
-            = participantId !== largeVideo.participantId;
+        const participantInLargeVideo
+            = participantId === largeVideo.participantId;
         const videoMuted = !videoTrack || videoTrack.muted;
 
         return (
@@ -96,8 +96,7 @@ class Thumbnail extends Component {
                 <ParticipantView
                     avatarSize = { AVATAR_SIZE }
                     participantId = { participantId }
-                    showAvatar = { participantNotInLargeVideo }
-                    showVideo = { participantNotInLargeVideo }
+                    tintEnabled = { participantInLargeVideo }
                     zOrder = { 1 } />
 
                 { participant.role === PARTICIPANT_ROLE.MODERATOR