fix(multi-stream) RN Add listeners for track streaming status updates on large-video.

* fix(multi-stream) RN Add listeners for track streaming status updates on large-video.
Fixes an issue where video on large-video is not being rendered when there is no filmstrip, i.e., there is only 1 remote participant in the call with source-name signaling enabled. Also do not show the screensharing indicator on the camera thumbnail when a virtual SS tile is created for the local screenshare.

* squash: add a comment

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

@@ -213,6 +213,7 @@ class Thumbnail extends PureComponent<Props> {
     _renderIndicators() {
         const {
             _audioMuted: audioMuted,
+            _isMultiStreamSupportEnabled,
             _isScreenShare: isScreenShare,
             _isVirtualScreenshare,
             _isFakeParticipant,
@@ -246,8 +247,9 @@ class Thumbnail extends PureComponent<Props> {
                     { audioMuted && !_isVirtualScreenshare && <AudioMutedIndicator /> }
                     { !tileView && _pinned && <PinnedIndicator />}
                     { renderModeratorIndicator && !_isVirtualScreenshare && <ModeratorIndicator />}
-                    { !tileView && (isScreenShare || _isVirtualScreenshare)
-                        && <ScreenShareIndicator />
+                    { !tileView && ((isScreenShare && !_isMultiStreamSupportEnabled) || _isVirtualScreenshare)
+                        && <ScreenShareIndicator /> /* Do not show screensharing indicator on the local camera
+                        thumbnail when a virtual SS participant tile is created for local screenshare */
                     }
                 </Container>
                 {

react/features/large-video/components/LargeVideo.native.js

@@ -1,14 +1,20 @@
 // @flow
 
 import React, { PureComponent } from 'react';
+import type { Dispatch } from 'redux';
 
+import { getSourceNameSignalingFeatureFlag } from '../../base/config/functions.any';
+import { JitsiTrackEvents } from '../../base/lib-jitsi-meet';
 import { ParticipantView, getParticipantById } from '../../base/participants';
 import { connect } from '../../base/redux';
-import { isLocalVideoTrackDesktop } from '../../base/tracks/functions';
+import {
+    getVideoTrackByParticipant,
+    isLocalVideoTrackDesktop,
+    trackStreamingStatusChanged
+} from '../../base/tracks';
 
 import { AVATAR_SIZE } from './styles';
 
-
 /**
  * The type of the React {@link Component} props of {@link LargeVideo}.
  */
@@ -31,11 +37,26 @@ type Props = {
      */
     _participantId: string,
 
+    /**
+     * Whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: boolean,
+
+    /**
+     * The video track that will be displayed in the thumbnail.
+     */
+    _videoTrack: ?Object,
+
     /**
      * Application's viewport height.
      */
     _width: number,
 
+    /**
+     * Invoked to trigger state changes in Redux.
+     */
+    dispatch: Dispatch<any>,
+
     /**
      * Callback to invoke when the {@code LargeVideo} is clicked/pressed.
      */
@@ -72,6 +93,18 @@ const DEFAULT_STATE = {
  * @augments Component
  */
 class LargeVideo extends PureComponent<Props, State> {
+    /**
+     * Creates new LargeVideo component.
+     *
+     * @param {Props} props - The props of the component.
+     * @returns {LargeVideo}
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this.handleTrackStreamingStatusChanged = this.handleTrackStreamingStatusChanged.bind(this);
+    }
+
     state = {
         ...DEFAULT_STATE
     };
@@ -100,6 +133,86 @@ class LargeVideo extends PureComponent<Props, State> {
 
     }
 
+    /**
+     * Starts listening for track streaming status updates after the initial render.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentDidMount() {
+        // Listen to track streaming status changed event to keep it updated.
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch, _sourceNameSignalingEnabled } = this.props;
+
+        if (_sourceNameSignalingEnabled && _videoTrack && !_videoTrack.local) {
+            _videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                this.handleTrackStreamingStatusChanged);
+            dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+        }
+    }
+
+    /**
+     * Stops listening for track streaming status updates on the old track and starts listening instead on the new
+     * track.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentDidUpdate(prevProps: Props) {
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch, _sourceNameSignalingEnabled } = this.props;
+
+        if (_sourceNameSignalingEnabled
+            && prevProps._videoTrack?.jitsiTrack?.getSourceName() !== _videoTrack?.jitsiTrack?.getSourceName()) {
+            if (prevProps._videoTrack && !prevProps._videoTrack.local) {
+                prevProps._videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                    this.handleTrackStreamingStatusChanged);
+                dispatch(trackStreamingStatusChanged(prevProps._videoTrack.jitsiTrack,
+                    prevProps._videoTrack.jitsiTrack.getTrackStreamingStatus()));
+            }
+            if (_videoTrack && !_videoTrack.local) {
+                _videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                    this.handleTrackStreamingStatusChanged);
+                dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                    _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+            }
+        }
+    }
+
+    /**
+     * Remove listeners for track streaming status update.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentWillUnmount() {
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch, _sourceNameSignalingEnabled } = this.props;
+
+        if (_sourceNameSignalingEnabled && _videoTrack && !_videoTrack.local) {
+            _videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                this.handleTrackStreamingStatusChanged);
+            dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+        }
+    }
+
+    /**
+     * Handle track streaming status change event by by dispatching an action to update track streaming status for the
+     * given track in app state.
+     *
+     * @param {JitsiTrack} jitsiTrack - The track with streaming status updated.
+     * @param {JitsiTrackStreamingStatus} streamingStatus - The updated track streaming status.
+     * @returns {void}
+     */
+    handleTrackStreamingStatusChanged(jitsiTrack, streamingStatus) {
+        this.props.dispatch(trackStreamingStatusChanged(jitsiTrack, streamingStatus));
+    }
+
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -142,6 +255,7 @@ function _mapStateToProps(state) {
     const { participantId } = state['features/large-video'];
     const participant = getParticipantById(state, participantId);
     const { clientHeight: height, clientWidth: width } = state['features/base/responsive-ui'];
+    const videoTrack = getVideoTrackByParticipant(state['features/base/tracks'], participant);
     let disableVideo = false;
 
     if (participant?.local) {
@@ -152,6 +266,8 @@ function _mapStateToProps(state) {
         _disableVideo: disableVideo,
         _height: height,
         _participantId: participantId,
+        _sourceNameSignalingEnabled: getSourceNameSignalingFeatureFlag(state),
+        _videoTrack: videoTrack,
         _width: width
     };
 }