mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2026-05-14 23:37:47 +00:00
6e679f952f
Up until now we relied on implicit loading of middlewares and reducers, through having imports in each feature's index.js. This leads to many complex import cycles which result in (sometimes) hard to fix bugs in addition to (often) breaking mobile because a web-only feature gets imported on mobile too, thanks to the implicit loading. This PR changes that to make the process explicit. Both middlewares and reducers are imported in a single place, the app entrypoint. They have been divided into 3 categories: any, web and native, which represent each of the platforms respectively. Ideally no feature should have an index.js exporting actions, action types and components, but that's a larger ordeal, so this is just the first step in getting there. In order to both set example and avoid large cycles the app feature has been refactored to not have an idex.js itself.
113 lines
2.9 KiB
JavaScript
113 lines
2.9 KiB
JavaScript
// @flow
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
import { VIDEO_QUALITY_LEVELS } from '../../base/conference/constants';
|
|
import { translate } from '../../base/i18n';
|
|
import {
|
|
Icon,
|
|
IconVideoQualityAudioOnly,
|
|
IconVideoQualityHD,
|
|
IconVideoQualityLD,
|
|
IconVideoQualitySD
|
|
} from '../../base/icons';
|
|
import { connect } from '../../base/redux';
|
|
|
|
/**
|
|
* A map of of selectable receive resolutions to corresponding icons.
|
|
*
|
|
* @private
|
|
* @type {Object}
|
|
*/
|
|
const VIDEO_QUALITY_TO_ICON = {
|
|
[VIDEO_QUALITY_LEVELS.HIGH]: IconVideoQualityHD,
|
|
[VIDEO_QUALITY_LEVELS.STANDARD]: IconVideoQualitySD,
|
|
[VIDEO_QUALITY_LEVELS.LOW]: IconVideoQualityLD
|
|
};
|
|
|
|
/**
|
|
* The type of the React {@code Component} props of
|
|
* {@link OverflowMenuVideoQualityItem}.
|
|
*/
|
|
type Props = {
|
|
|
|
/**
|
|
* Whether or not audio only mode is currently enabled.
|
|
*/
|
|
_audioOnly: boolean,
|
|
|
|
/**
|
|
* The currently configured maximum quality resolution to be received from
|
|
* and sent to remote participants.
|
|
*/
|
|
_videoQuality: number,
|
|
|
|
/**
|
|
* Callback to invoke when {@link OverflowMenuVideoQualityItem} is clicked.
|
|
*/
|
|
onClick: Function,
|
|
|
|
/**
|
|
* Invoked to obtain translated strings.
|
|
*/
|
|
t: Function
|
|
};
|
|
|
|
/**
|
|
* React {@code Component} responsible for displaying a button in the overflow
|
|
* menu of the toolbar, including an icon showing the currently selected
|
|
* max receive quality.
|
|
*
|
|
* @extends Component
|
|
*/
|
|
class OverflowMenuVideoQualityItem extends Component<Props> {
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
const { _audioOnly, _videoQuality } = this.props;
|
|
const icon = _audioOnly || !_videoQuality
|
|
? IconVideoQualityAudioOnly
|
|
: VIDEO_QUALITY_TO_ICON[_videoQuality];
|
|
|
|
return (
|
|
<li
|
|
aria-label =
|
|
{ this.props.t('toolbar.accessibilityLabel.callQuality') }
|
|
className = 'overflow-menu-item'
|
|
onClick = { this.props.onClick }>
|
|
<span className = 'overflow-menu-item-icon'>
|
|
<Icon src = { icon } />
|
|
</span>
|
|
<span className = 'profile-text'>
|
|
{ this.props.t('toolbar.callQuality') }
|
|
</span>
|
|
</li>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Maps (parts of) the Redux state to the associated props for the
|
|
* {@code OverflowMenuVideoQualityItem} component.
|
|
*
|
|
* @param {Object} state - The Redux state.
|
|
* @private
|
|
* @returns {{
|
|
* _audioOnly: boolean,
|
|
* _videoQuality: number
|
|
* }}
|
|
*/
|
|
function _mapStateToProps(state) {
|
|
return {
|
|
_audioOnly: state['features/base/audio-only'].enabled,
|
|
_videoQuality: state['features/base/conference'].preferredVideoQuality
|
|
};
|
|
}
|
|
|
|
export default translate(
|
|
connect(_mapStateToProps)(OverflowMenuVideoQualityItem));
|