jiti-meet/react/features/video-quality/components/VideoQualityLabel.web.js

import Tooltip from '@atlaskit/tooltip';
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';

import { translate } from '../../base/i18n';
import { MEDIA_TYPE } from '../../base/media';
import { getTrackByMediaTypeAndParticipant } from '../../base/tracks';

/**
 * A map of video resolution (number) to translation key.
 *
 * @type {Object}
 */
const RESOLUTION_TO_TRANSLATION_KEY = {
    720: 'videoStatus.hd',
    360: 'videoStatus.sd',
    180: 'videoStatus.ld'
};

/**
 * Expected video resolutions placed into an array, sorted from lowest to
 * highest resolution.
 *
 * @type {number[]}
 */
const RESOLUTIONS
    = Object.keys(RESOLUTION_TO_TRANSLATION_KEY)
        .map(resolution => parseInt(resolution, 10))
        .sort((a, b) => a - b);

/**
 * React {@code Component} responsible for displaying a label that indicates
 * the displayed video state of the current conference. {@code AudioOnlyLabel}
 * will display when the conference is in audio only mode. {@code HDVideoLabel}
 * will display if not in audio only mode and a high-definition large video is
 * being displayed.
 */
export class VideoQualityLabel extends Component {
    /**
     * {@code VideoQualityLabel}'s property types.
     *
     * @static
     */
    static propTypes = {
        /**
         * Whether or not the conference is in audio only mode.
         */
        _audioOnly: PropTypes.bool,

        /**
         * Whether or not a connection to a conference has been established.
         */
        _conferenceStarted: PropTypes.bool,

        /**
         * Whether or not the filmstrip is displayed with remote videos. Used to
         * determine display classes to set.
         */
        _filmstripVisible: PropTypes.bool,

        /**
         * The current video resolution (height) to display a label for.
         */
        _resolution: PropTypes.number,

        /**
         * The redux representation of the JitsiTrack displayed on large video.
         */
        _videoTrack: PropTypes.object,

        /**
         * Invoked to obtain translated strings.
         */
        t: PropTypes.func
    };

    /**
     * Initializes a new {@code VideoQualityLabel} instance.
     *
     * @param {Object} props - The read-only React Component props with which
     * the new instance is to be initialized.
     */
    constructor(props) {
        super(props);

        this.state = {
            /**
             * Whether or not the filmstrip is transitioning from not visible
             * to visible. Used to set a transition class for animation.
             *
             * @type {boolean}
             */
            togglingToVisible: false
        };
    }

    /**
     * Updates the state for whether or not the filmstrip is being toggled to
     * display after having being hidden.
     *
     * @inheritdoc
     * @param {Object} nextProps - The read-only props which this Component will
     * receive.
     * @returns {void}
     */
    componentWillReceiveProps(nextProps) {
        this.setState({
            togglingToVisible: nextProps._filmstripVisible
                && !this.props._filmstripVisible
        });
    }

    /**
     * Implements React's {@link Component#render()}.
     *
     * @inheritdoc
     * @returns {ReactElement}
     */
    render() {
        const {
            _audioOnly,
            _conferenceStarted,
            _filmstripVisible,
            _resolution,
            _videoTrack,
            t
        } = this.props;

        // FIXME The _conferenceStarted check is used to be defensive against
        // toggling audio only mode while there is no conference and hides the
        // need for error handling around audio only mode toggling.
        if (!_conferenceStarted) {
            return null;
        }

        // Determine which classes should be set on the component. These classes
        // will used to help with animations and setting position.
        const baseClasses = 'video-state-indicator moveToCorner';
        const filmstrip
            = _filmstripVisible ? 'with-filmstrip' : 'without-filmstrip';
        const opening = this.state.togglingToVisible ? 'opening' : '';
        const classNames
            = `${baseClasses} ${filmstrip} ${opening}`;

        let labelContent;
        let tooltipKey;

        if (_audioOnly) {
            labelContent = <i className = 'icon-visibility-off' />;
            tooltipKey = 'videoStatus.labelTooltipAudioOnly';
        } else if (!_videoTrack || _videoTrack.muted) {
            labelContent = <i className = 'icon-visibility-off' />;
            tooltipKey = 'videoStatus.labelTooiltipNoVideo';
        } else {
            const translationKeys
                = this._mapResolutionToTranslationsKeys(_resolution);

            labelContent = t(translationKeys.labelKey);
            tooltipKey = translationKeys.tooltipKey;
        }


        return (
            <div
                className = { classNames }
                id = 'videoResolutionLabel'>
                <Tooltip
                    description = { t(tooltipKey) }
                    position = { 'left' }>
                    <div className = 'video-quality-label-status'>
                        { labelContent }
                    </div>
                </Tooltip>
            </div>
        );
    }

    /**
     * Matches the passed in resolution with a translation keys for describing
     * the resolution. The passed in resolution will be matched with a known
     * resolution that it is at least greater than or equal to.
     *
     * @param {number} resolution - The video height to match with a
     * translation.
     * @private
     * @returns {Object}
     */
    _mapResolutionToTranslationsKeys(resolution) {
        // Set the default matching resolution of the lowest just in case a
        // match is not found.
        let highestMatchingResolution = RESOLUTIONS[0];

        for (let i = 0; i < RESOLUTIONS.length; i++) {
            const knownResolution = RESOLUTIONS[i];

            if (resolution >= knownResolution) {
                highestMatchingResolution = knownResolution;
            } else {
                break;
            }
        }

        const labelKey
            = RESOLUTION_TO_TRANSLATION_KEY[highestMatchingResolution];

        return {
            labelKey,
            tooltipKey: `${labelKey}Tooltip`
        };
    }
}

/**
 * Maps (parts of) the Redux state to the associated {@code VideoQualityLabel}'s
 * props.
 *
 * @param {Object} state - The Redux state.
 * @private
 * @returns {{
 *     _audioOnly: boolean,
 *     _conferenceStarted: boolean,
 *     _filmstripVisible: true,
 *     _resolution: number,
 *     _videoTrack: Object
 * }}
 */
function _mapStateToProps(state) {
    const { audioOnly, conference } = state['features/base/conference'];
    const { visible } = state['features/filmstrip'];
    const { resolution, participantId } = state['features/large-video'];
    const videoTrackOnLargeVideo = getTrackByMediaTypeAndParticipant(
        state['features/base/tracks'],
        MEDIA_TYPE.VIDEO,
        participantId
    );

    return {
        _audioOnly: audioOnly,
        _conferenceStarted: Boolean(conference),
        _filmstripVisible: visible,
        _resolution: resolution,
        _videoTrack: videoTrackOnLargeVideo
    };
}

export default translate(connect(_mapStateToProps)(VideoQualityLabel));