_renderRemoteParticipant()

in react/features/filmstrip/components/web/Thumbnail.js [976:1062]
83 lines of code
8 McCabe index (conditional complexity)

    _renderRemoteParticipant() {
        const {
            _isMobile,
            _isTestModeEnabled,
            _participant,
            _startSilent,
            _videoTrack,
            _volume = 1
        } = this.props;
        const { id } = _participant;
        const { audioLevel } = this.state;
        const styles = this._getStyles();
        const containerClassName = this._getContainerClassName();

        // hide volume when in silent mode
        const onVolumeChange = _startSilent ? undefined : this._onVolumeChange;
        const jitsiVideoTrack = _videoTrack?.jitsiTrack;
        const videoTrackId = jitsiVideoTrack && jitsiVideoTrack.getId();
        const videoEventListeners = {};

        if (_videoTrack && _isTestModeEnabled) {
            VIDEO_TEST_EVENTS.forEach(attribute => {
                videoEventListeners[attribute] = this._onTestingEvent;
            });
        }

        videoEventListeners.onCanPlay = this._onCanPlay;

        return (
            <span
                className = { containerClassName }
                id = { `participant_${id}` }
                { ...(_isMobile
                    ? {
                        onTouchEnd: this._onTouchEnd,
                        onTouchMove: this._onTouchMove,
                        onTouchStart: this._onTouchStart
                    }
                    : {
                        onClick: this._onClick,
                        onMouseEnter: this._onMouseEnter,
                        onMouseLeave: this._onMouseLeave
                    }
                ) }
                style = { styles.thumbnail }>
                {
                    _videoTrack && <VideoTrack
                        eventHandlers = { videoEventListeners }
                        id = { `remoteVideo_${videoTrackId || ''}` }
                        muted = { true }
                        style = { styles.video }
                        videoTrack = { _videoTrack } />
                }
                <div className = 'videocontainer__background' />
                <div className = 'videocontainer__toptoolbar'>
                    { this._renderTopIndicators() }
                </div>
                <div className = 'videocontainer__toolbar'>
                    <StatusIndicators participantID = { id } />
                    <div className = 'videocontainer__participant-name'>
                        <DisplayName
                            elementID = { `participant_${id}_name` }
                            participantID = { id } />
                    </div>
                </div>
                <div className = 'videocontainer__hoverOverlay' />
                { this._renderAvatar(styles.avatar) }
                <div className = 'presence-label-container'>
                    <PresenceLabel
                        className = 'presence-label'
                        participantID = { id } />
                </div>
                <span className = 'audioindicator-container'>
                    <AudioLevelIndicator audioLevel = { audioLevel } />
                </span>
                <span className = 'remotevideomenu'>
                    <RemoteVideoMenuTriggerButton
                        hidePopover = { this._hidePopover }
                        initialVolumeValue = { _volume }
                        onVolumeChange = { onVolumeChange }
                        participantID = { id }
                        popoverVisible = { this.state.popoverVisible }
                        showPopover = { this._showPopover } />
                </span>
            </span>
        );
    }