_renderLocalParticipant()

in react/features/filmstrip/components/web/Thumbnail.js [852:930]
76 lines of code
8 McCabe index (conditional complexity)

    _renderLocalParticipant() {
        const {
            _allowEditing,
            _defaultLocalDisplayName,
            _disableLocalVideoFlip,
            _isMobile,
            _isMobilePortrait,
            _isScreenSharing,
            _localFlipX,
            _participant,
            _videoTrack
        } = this.props;
        const { id } = _participant || {};
        const { audioLevel } = this.state;
        const styles = this._getStyles();
        let containerClassName = this._getContainerClassName();
        const videoTrackClassName
            = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';

        if (_isMobilePortrait) {
            styles.thumbnail.height = styles.thumbnail.width;
            containerClassName = `${containerClassName} self-view-mobile-portrait`;
        }

        return (
            <span
                className = { containerClassName }
                id = 'localVideoContainer'
                { ...(_isMobile
                    ? {
                        onTouchEnd: this._onTouchEnd,
                        onTouchMove: this._onTouchMove,
                        onTouchStart: this._onTouchStart
                    }
                    : {
                        onClick: this._onClick,
                        onMouseEnter: this._onMouseEnter,
                        onMouseLeave: this._onMouseLeave
                    }
                ) }
                style = { styles.thumbnail }>
                <div className = 'videocontainer__background' />
                <span id = 'localVideoWrapper'>
                    <VideoTrack
                        className = { videoTrackClassName }
                        id = 'localVideo_container'
                        style = { styles.video }
                        videoTrack = { _videoTrack } />
                </span>
                <div className = 'videocontainer__toolbar'>
                    <StatusIndicators participantID = { id } />
                    <div
                        className = 'videocontainer__participant-name'
                        onClick = { onClick }>
                        <DisplayName
                            allowEditing = { _allowEditing }
                            displayNameSuffix = { _defaultLocalDisplayName }
                            elementID = 'localDisplayName'
                            participantID = { id } />
                    </div>
                </div>
                <div className = 'videocontainer__toptoolbar'>
                    { this._renderTopIndicators() }
                </div>
                <div className = 'videocontainer__hoverOverlay' />
                { this._renderAvatar(styles.avatar) }
                <span className = 'audioindicator-container'>
                    <AudioLevelIndicator audioLevel = { audioLevel } />
                </span>
                <span className = 'localvideomenu'>
                    <LocalVideoMenuTriggerButton
                        hidePopover = { this._hidePopover }
                        popoverVisible = { this.state.popoverVisible }
                        showPopover = { this._showPopover } />
                </span>

            </span>
        );
    }