133 lines
3.4 KiB
JavaScript
133 lines
3.4 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import { appNavigate } from '../../app';
|
|
import {
|
|
toggleAudioMuted,
|
|
toggleVideoMuted
|
|
} from '../../base/media';
|
|
import { ColorPalette } from '../../base/styles';
|
|
|
|
import { styles } from './styles';
|
|
|
|
/**
|
|
* Abstract (base) class for the conference toolbar.
|
|
*
|
|
* @abstract
|
|
*/
|
|
export class AbstractToolbar extends Component {
|
|
/**
|
|
* Initializes a new AbstractToolbar instance.
|
|
*
|
|
* @param {Object} props - The read-only React Component props with which
|
|
* the new instance is to be initialized.
|
|
*/
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
// Bind event handlers so they are only bound once for every instance.
|
|
this._onHangup = this._onHangup.bind(this);
|
|
this._toggleAudio = this._toggleAudio.bind(this);
|
|
this._toggleVideo = this._toggleVideo.bind(this);
|
|
}
|
|
|
|
/**
|
|
* Gets the styles for a button that toggles the mute state of a specific
|
|
* media type.
|
|
*
|
|
* @param {string} mediaType - The {@link MEDIA_TYPE} associated with the
|
|
* button to get styles for.
|
|
* @protected
|
|
* @returns {{
|
|
* buttonStyle: Object,
|
|
* iconName: string,
|
|
* iconStyle: Object
|
|
* }}
|
|
*/
|
|
_getMuteButtonStyles(mediaType) {
|
|
let buttonStyle;
|
|
let iconName;
|
|
let iconStyle;
|
|
|
|
if (this.props[`${mediaType}Muted`]) {
|
|
buttonStyle = {
|
|
...styles.toolbarButton,
|
|
backgroundColor: ColorPalette.buttonUnderlay
|
|
};
|
|
iconName = this[`${mediaType}MutedIcon`];
|
|
iconStyle = styles.whiteIcon;
|
|
} else {
|
|
buttonStyle = styles.toolbarButton;
|
|
iconName = this[`${mediaType}Icon`];
|
|
iconStyle = styles.icon;
|
|
}
|
|
|
|
return {
|
|
buttonStyle,
|
|
iconName,
|
|
iconStyle
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Dispatches action to leave the current conference.
|
|
*
|
|
* @protected
|
|
* @returns {void}
|
|
*/
|
|
_onHangup() {
|
|
// XXX We don't know here which value is effectively/internally used
|
|
// when there's no valid room name to join. It isn't our business to
|
|
// know that anyway. The undefined value is our expression of (1) the
|
|
// lack of knowledge & (2) the desire to no longer have a valid room
|
|
// name to join.
|
|
this.props.dispatch(appNavigate(undefined));
|
|
}
|
|
|
|
/**
|
|
* Dispatches action to toggle the mute state of the audio/microphone.
|
|
*
|
|
* @protected
|
|
* @returns {void}
|
|
*/
|
|
_toggleAudio() {
|
|
this.props.dispatch(toggleAudioMuted());
|
|
}
|
|
|
|
/**
|
|
* Dispatches action to toggle the mute state of the video/camera.
|
|
*
|
|
* @protected
|
|
* @returns {void}
|
|
*/
|
|
_toggleVideo() {
|
|
this.props.dispatch(toggleVideoMuted());
|
|
}
|
|
}
|
|
|
|
/**
|
|
* AbstractToolbar component's property types.
|
|
*
|
|
* @static
|
|
*/
|
|
AbstractToolbar.propTypes = {
|
|
audioMuted: React.PropTypes.bool,
|
|
dispatch: React.PropTypes.func,
|
|
videoMuted: React.PropTypes.bool,
|
|
visible: React.PropTypes.bool.isRequired
|
|
};
|
|
|
|
/**
|
|
* Maps parts of media state to component props.
|
|
*
|
|
* @param {Object} state - Redux state.
|
|
* @returns {{ audioMuted: boolean, videoMuted: boolean }}
|
|
*/
|
|
export function mapStateToProps(state) {
|
|
const media = state['features/base/media'];
|
|
|
|
return {
|
|
audioMuted: media.audio.muted,
|
|
videoMuted: media.video.muted
|
|
};
|
|
}
|