mirror of
https://gitcode.com/GitHub_Trending/ji/jitsi-meet.git
synced 2025-12-30 11:22:31 +00:00
d55e0f70d9
As an intermediate step on the path to merging jitsi-meet and
jitsi-meet-react, import the whole source code of jitsi-meet-react as it
stands at
2f23d98424
i.e. the lastest master at the time of this import. No modifications are
applied to the imported source code in order to preserve a complete
snapshot of it in the repository of jitsi-meet and, thus, facilitate
comparison later on. Consequently, the source code of jitsi-meet and/or
jitsi-meet-react may not work. For example, jitsi-meet's jshint may be
unable to parse jitsi-meet-react's source code.
90 lines
2.9 KiB
JavaScript
90 lines
2.9 KiB
JavaScript
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
|
|
import { MEDIA_TYPE } from '../../base/media';
|
|
import { Container } from '../../base/react';
|
|
import { ColorPalette } from '../../base/styles';
|
|
|
|
import {
|
|
AbstractToolbar,
|
|
mapStateToProps
|
|
} from './AbstractToolbar';
|
|
import { styles } from './styles';
|
|
import ToolbarButton from './ToolbarButton';
|
|
|
|
/**
|
|
* Implements the conference toolbar on Web.
|
|
*
|
|
* @extends AbstractToolbar
|
|
*/
|
|
class Toolbar extends AbstractToolbar {
|
|
/**
|
|
* Implements React's {@link Component#render()}.
|
|
*
|
|
* @inheritdoc
|
|
* @returns {ReactElement}
|
|
*/
|
|
render() {
|
|
const audioButtonStyles = this._getMuteButtonStyles(MEDIA_TYPE.AUDIO);
|
|
const videoButtonStyles = this._getMuteButtonStyles(MEDIA_TYPE.VIDEO);
|
|
|
|
return (
|
|
<Container
|
|
style = { styles.toolbarContainer }
|
|
visible = { this.props.visible }>
|
|
|
|
<div style = { styles.toolbarButtonsContainer }>
|
|
<ToolbarButton
|
|
iconName = { audioButtonStyles.iconName }
|
|
iconStyle = { audioButtonStyles.iconStyle }
|
|
|
|
// eslint-disable-next-line react/jsx-handler-names
|
|
onClick = { this._toggleAudio }
|
|
style = { audioButtonStyles.buttonStyle } />
|
|
<ToolbarButton
|
|
iconName = 'phone'
|
|
iconStyle = { styles.icon }
|
|
onClick = { this._onHangup }
|
|
style = {{
|
|
...styles.toolbarButton,
|
|
backgroundColor: ColorPalette.jitsiRed
|
|
}} />
|
|
<ToolbarButton
|
|
iconName = { videoButtonStyles.iconName }
|
|
iconStyle = { videoButtonStyles.iconStyle }
|
|
|
|
// eslint-disable-next-line react/jsx-handler-names
|
|
onClick = { this._toggleVideo }
|
|
style = { videoButtonStyles.buttonStyle } />
|
|
</div>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Additional properties for various icons, which are now platform-dependent.
|
|
* This is done to have common logic of generating styles for web and native.
|
|
* TODO As soon as we have common font sets for web and native, this will no
|
|
* longer be required.
|
|
*/
|
|
Object.assign(Toolbar.prototype, {
|
|
audioIcon: 'microphone',
|
|
audioMutedIcon: 'microphone-slash',
|
|
videoIcon: 'video-camera',
|
|
|
|
// TODO Currently, for web version we're using default FontAwesome font set,
|
|
// which doesn't have 'slashed' version of 'video-camera' icon. But this
|
|
// should be changed as soon as we start to use custom Jitsi icons.
|
|
videoMutedIcon: 'video-camera'
|
|
});
|
|
|
|
/**
|
|
* Toolbar component's property types.
|
|
*
|
|
* @static
|
|
*/
|
|
Toolbar.propTypes = AbstractToolbar.propTypes;
|
|
|
|
export default connect(mapStateToProps)(Toolbar);
|