haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
This commit is contained in:
Jaya Allamsetty 2022-06-01 16:13:27 -04:00 committed by GitHub
parent de294cae92
commit 1397b9ac80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 122 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
react/features/filmstrip/components/native/Thumbnail.js
View File

@ -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>
{

120
react/features/large-video/components/LargeVideo.native.js
View File

@ -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
};
}