@ -1,20 +1,24 @@
import React , { Component } from 'react' ;
import { Text , View } from 'react-native' ;
import { GestureResponderEvent , Text , TextStyle , View , ViewStyle } from 'react-native' ;
import { connect } from 'react-redux' ;
import { IReduxState } from '../../../app/types' ;
import {
isTrackStreamingStatusActive ,
isTrackStreamingStatusInactive
} from '../../../connection-indicator/functions' ;
import SharedVideo from '../../../shared-video/components/native/SharedVideo' ;
import { IStateful } from '../../app/types' ;
import Avatar from '../../avatar/components/Avatar' ;
import { translate } from '../../i18n/functions' ;
import VideoTrack from '../../media/components/native/VideoTrack' ;
import { shouldRenderVideoTrack } from '../../media/functions' ;
import Container from '../../react/components/native/Container' ;
import { toState } from '../../redux/functions' ;
import { StyleType } from '../../styles/functions.any' ;
import TestHint from '../../testing/components/TestHint' ;
import { getVideoTrackByParticipant } from '../../tracks/functions' ;
import { ITrack } from '../../tracks/types' ;
import { getParticipantById , getParticipantDisplayName , isSharedVideoParticipant } from '../functions' ;
import styles from './styles' ;
@ -22,69 +26,69 @@ import styles from './styles';
/ * *
* The type of the React { @link Component } props of { @link ParticipantView } .
* /
type Props = {
interface IProps {
/ * *
* Whether the connection is inactive or not .
*
* @private
* /
_isConnectionInactive : boolean ,
_isConnectionInactive : boolean ;
/ * *
* Whether the participant is a shared video participant .
* /
_isSharedVideoParticipant : boolean ,
_isSharedVideoParticipant : boolean ;
/ * *
* The name of the participant which this component represents .
*
* @private
* /
_participantName : string ,
_participantName : string ;
/ * *
* True if the video should be rendered , false otherwise .
* /
_renderVideo : boolean ,
_renderVideo : boolean ;
/ * *
* The video Track of the participant with { @link # participantId } .
* /
_videoTrack : Object ,
_videoTrack? : ITrack ;
/ * *
* The avatar size .
* /
avatarSize : number ,
avatarSize : number ;
/ * *
* Whether video should be disabled for his view .
* /
disableVideo : ?boolean ,
disableVideo? : boolean ;
/ * *
* Callback to invoke when the { @code ParticipantView } is clicked / pressed .
* /
onPress : Function ,
onPress : ( e? : GestureResponderEvent ) = > void ;
/ * *
* The ID of the participant ( to be ) depicted by { @link ParticipantView } .
*
* @public
* /
participantId : string ,
participantId : string ;
/ * *
* The style , if any , to apply to { @link ParticipantView } in addition to its
* default style .
* /
style : Object ,
style : StyleType ;
/ * *
* The function to translate human - readable text .
* /
t : Function ,
t : Function ;
/ * *
* The test hint id which can be used to locate the { @code ParticipantView }
@ -92,26 +96,26 @@ type Props = {
* { @code participantId } with the following format will be used :
* { @code ` org.jitsi.meet.Participant# ${ participantId } ` } .
* /
testHintId : ?string ,
testHintId? : string ;
/ * *
* Indicates if the connectivity info label should be shown , if appropriate .
* It will be shown in case the connection is interrupted .
* /
useConnectivityInfoLabel : boolean ,
useConnectivityInfoLabel : boolean ;
/ * *
* The z - order of the { @link Video } of { @link ParticipantView } in the
* stacking space of all { @code Video } s . For more details , refer to the
* { @code zOrder } property of the { @code Video } class for React Native .
* /
zOrder : number ,
zOrder : number ;
/ * *
* Indicates whether zooming ( pinch to zoom and / or drag ) is enabled .
* /
zoomEnabled : boolean
} ;
zoomEnabled : boolean ;
}
/ * *
* Implements a React Component which depicts a specific participant ' s avatar
@ -119,7 +123,7 @@ type Props = {
*
* @augments Component
* /
class ParticipantView extends Component < Props > {
class ParticipantView extends Component < I Props> {
/ * *
* Renders the inactive connection status label .
@ -144,8 +148,8 @@ class ParticipantView extends Component<Props> {
return (
< View
pointerEvents = 'box-none'
style = { containerStyle } >
< Text style = { styles . connectionInfoText } >
style = { containerStyle as ViewStyle } >
< Text style = { styles . connectionInfoText as TextStyle } >
{ t ( 'connection.LOW_BANDWIDTH' , { displayName } ) }
< / Text >
< / View >
@ -200,7 +204,7 @@ class ParticipantView extends Component<Props> {
zoomEnabled = { this . props . zoomEnabled } / > }
{ ! renderSharedVideo && ! renderVideo
&& < View style = { styles . avatarContainer } >
&& < View style = { styles . avatarContainer as ViewStyle } >
< Avatar
participantId = { this . props . participantId }
size = { this . props . avatarSize } / >
@ -221,9 +225,9 @@ class ParticipantView extends Component<Props> {
* @param { Object } ownProps - The React { @code Component } props passed to the
* associated ( instance of ) { @code ParticipantView } .
* @private
* @returns { Props }
* @returns { I Props}
* /
function _mapStateToProps ( state , ownProps ) {
function _mapStateToProps ( state : IReduxState , ownProps : any ) {
const { disableVideo , participantId } = ownProps ;
const participant = getParticipantById ( state , participantId ) ;
const videoTrack = getVideoTrackByParticipant ( state , participant ) ;
@ -245,7 +249,7 @@ function _mapStateToProps(state, ownProps) {
* @param { string } id - The ID of the participant .
* @returns { boolean }
* /
function shouldRenderParticipantVideo ( stateful , id ) {
function shouldRenderParticipantVideo ( stateful : IStateful , id : string ) {
const state = toState ( stateful ) ;
const participant = getParticipantById ( state , id ) ;
Robert Pintilii
2 years ago
committed by