jiti-meet/react/features/always-on-top/AudioMuteButton.js

149 lines
3.7 KiB
JavaScript
Raw Normal View History

// @flow
2019-07-19 13:26:32 +00:00
// We need to reference these files directly to avoid loading things that are not available
// in this environment (e.g. JitsiMeetJS or interfaceConfig)
import AbstractAudioMuteButton from '../base/toolbox/components/AbstractAudioMuteButton';
import type { Props } from '../base/toolbox/components/AbstractButton';
const { api } = window.alwaysOnTop;
2018-05-03 17:36:29 +00:00
/**
* The type of the React {@code Component} state of {@link AudioMuteButton}.
*/
type State = {
/**
* Whether audio is available is not.
*/
audioAvailable: boolean,
/**
* Whether audio is muted or not.
*/
audioMuted: boolean
};
/**
2018-05-03 17:36:29 +00:00
* Stateless "mute/unmute audio" button for the Always-on-Top windows.
*/
export default class AudioMuteButton
extends AbstractAudioMuteButton<Props, State> {
fix(i18n) Accessiblity labels translations (#3071) * fix(toolbar): accessibilityLabel should be translatable. This commit adds a helper property to get the accessibilityLabel of an item, providing a translation if one is available. This mimics the behavior of label and tooltip. * fix(toolbar) 'hangup' button accessibilityLabel i18n * fix(toolbar) 'mute' button accessibilityLabel i18n * fix(toolbar) 'videomute' button accessibilityLabel i18n * fix(toolbar) 'moreActions' button accessibilityLabel i18n * fix(toolbar) 'shareRoom' button accessibilityLabel i18n * fix(toolbar) 'audioRoute' button accessibilityLabel i18n * fix(toolbar) 'toggleCamera' button accessibilityLabel i18n * fix(toolbar) 'audioOnly' button accessibilityLabel i18n * fix(toolbar) 'roomLock' button accessibilityLabel i18n * fix(toolbar) 'pip' button accessibilityLabel i18n * fix(toolbar) 'invite' button accessibilityLabel i18n * fix(toolbar) 'raiseHand' button accessibilityLabel i18n * fix(toolbar) 'chat' button accessibilityLabel i18n * fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n * fix(toolbar) 'fullScreen' button accessibilityLabel i18n * fix(toolbar) 'sharedvideo' button accessibilityLabel i18n * fix(toolbar) 'document' button accessibilityLabel i18n * fix(toolbar) 'speakerStats' button accessibilityLabel i18n * fix(toolbar) 'feedback' button accessibilityLabel i18n * fix(toolbar) 'shortcuts' button accessibilityLabel i18n * fix(toolbar) 'recording' button accessibilityLabel i18n * fix(toolbar) 'settings' button accessibilityLabel i18n * fix(welcomepage) accessibilityLabels i18n * fix(toolbar) 'info' button accessibilityLabel i18n * fix(i18n): Add translation to various aria-label property values. * fix(i18n): Differentiate between overflow menu and button.
2018-06-07 20:32:18 +00:00
accessibilityLabel = 'Audio mute';
/**
* Initializes a new {@code AudioMuteButton} instance.
*
* @param {Props} props - The React {@code Component} props to initialize
* the new {@code AudioMuteButton} instance with.
*/
constructor(props: Props) {
super(props);
this.state = {
audioAvailable: false,
audioMuted: true
};
// Bind event handlers so they are only bound once per instance.
this._audioAvailabilityListener
= this._audioAvailabilityListener.bind(this);
this._audioMutedListener = this._audioMutedListener.bind(this);
}
/**
* Sets mouse move listener and initial toolbar timeout.
*
* @inheritdoc
* @returns {void}
*/
componentDidMount() {
api.on('audioAvailabilityChanged', this._audioAvailabilityListener);
api.on('audioMuteStatusChanged', this._audioMutedListener);
Promise.all([
api.isAudioAvailable(),
api.isAudioMuted()
])
2018-05-03 17:36:29 +00:00
.then(([ audioAvailable, audioMuted ]) =>
this.setState({
audioAvailable,
audioMuted
2018-05-03 17:36:29 +00:00
}))
.catch(console.error);
}
/**
* Removes all listeners.
*
* @inheritdoc
* @returns {void}
*/
componentWillUnmount() {
2018-05-03 17:36:29 +00:00
api.removeListener(
'audioAvailabilityChanged',
this._audioAvailabilityListener);
2018-05-03 17:36:29 +00:00
api.removeListener(
'audioMuteStatusChanged',
this._audioMutedListener);
}
2018-05-03 17:36:29 +00:00
_audioAvailabilityListener: ({ available: boolean }) => void;
/**
2018-05-03 17:36:29 +00:00
* Handles audio available api events.
*
2018-05-03 17:36:29 +00:00
* @param {{ available: boolean }} status - The new available status.
* @returns {void}
*/
2018-05-03 17:36:29 +00:00
_audioAvailabilityListener({ available }) {
this.setState({ audioAvailable: available });
}
_audioMutedListener: ({ muted: boolean }) => void;
/**
* Handles audio muted api events.
*
* @param {{ muted: boolean }} status - The new muted status.
* @returns {void}
*/
_audioMutedListener({ muted }) {
this.setState({ audioMuted: muted });
}
/**
* Indicates if audio is currently muted ot nor.
*
* @override
2018-05-11 02:10:26 +00:00
* @protected
* @returns {boolean}
*/
_isAudioMuted() {
return this.state.audioMuted;
}
/**
2018-05-03 17:36:29 +00:00
* Indicates whether this button is disabled or not.
*
2018-05-03 17:36:29 +00:00
* @override
2018-05-11 02:10:26 +00:00
* @protected
2018-05-03 17:36:29 +00:00
* @returns {boolean}
*/
2018-05-03 17:36:29 +00:00
_isDisabled() {
return !this.state.audioAvailable;
}
/**
2018-05-03 17:36:29 +00:00
* Changes the muted state.
*
2018-05-11 02:10:26 +00:00
* @override
2018-05-03 17:36:29 +00:00
* @param {boolean} audioMuted - Whether audio should be muted or not.
2018-05-11 02:10:26 +00:00
* @protected
* @returns {void}
*/
2018-05-03 17:36:29 +00:00
_setAudioMuted(audioMuted: boolean) { // eslint-disable-line no-unused-vars
this.state.audioAvailable && api.executeCommand('toggleAudio');
}
}