jiti-meet/react/features/settings/components/web/SoundsTab.tsx

164 lines
5.0 KiB
TypeScript
Raw Normal View History

/* eslint-disable lines-around-comment */
import React from 'react';
2022-08-08 09:36:06 +00:00
import { WithTranslation } from 'react-i18next';
// @ts-ignore
import { AbstractDialogTab } from '../../../base/dialog';
// @ts-ignore
import type { Props as AbstractDialogTabProps } from '../../../base/dialog';
2022-08-08 09:36:06 +00:00
import { translate } from '../../../base/i18n/functions';
import Checkbox from '../../../base/ui/components/web/Checkbox';
/**
* The type of the React {@code Component} props of {@link SoundsTab}.
*/
2022-08-08 09:36:06 +00:00
export type Props = AbstractDialogTabProps & WithTranslation & {
/**
* Whether or not the reactions feature is enabled.
*/
enableReactions: Boolean,
/**
* Whether or not moderator muted the sounds.
*/
moderatorMutedSoundsReactions: Boolean,
/**
* Whether or not the sound for the incoming message should play.
*/
soundsIncomingMessage: Boolean,
/**
* Whether or not the sound for the participant joined should play.
*/
soundsParticipantJoined: Boolean,
/**
* Whether or not the sound for the participant entering the lobby should play.
*/
soundsParticipantKnocking: Boolean,
/**
* Whether or not the sound for the participant left should play.
*/
soundsParticipantLeft: Boolean,
/**
* Whether or not the sound for reactions should play.
*/
soundsReactions: Boolean,
/**
* Whether or not the sound for the talk while muted notification should play.
*/
soundsTalkWhileMuted: Boolean,
/**
* Invoked to obtain translated strings.
*/
t: Function
}
/**
* React {@code Component} for modifying the local user's sound settings.
*
2021-11-04 21:10:43 +00:00
* @augments Component
*/
class SoundsTab extends AbstractDialogTab<Props> {
/**
* Initializes a new {@code SoundsTab} instance.
*
* @param {Props} props - The React {@code Component} props to initialize
* the new {@code SoundsTab} instance with.
*/
constructor(props: Props) {
super(props);
// Bind event handlers so they are only bound once for every instance.
this._onChange = this._onChange.bind(this);
}
/**
* Changes a sound setting state.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onChange({ target }: React.ChangeEvent<HTMLInputElement>) {
super._onChange({ [target.name]: target.checked });
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const {
soundsIncomingMessage,
soundsParticipantJoined,
soundsParticipantKnocking,
soundsParticipantLeft,
soundsTalkWhileMuted,
soundsReactions,
enableReactions,
moderatorMutedSoundsReactions,
t // @ts-ignore
} = this.props;
return (
<div
className = 'settings-sub-pane-element'
key = 'sounds'>
<h2 className = 'mock-atlaskit-label'>
{t('settings.playSounds')}
</h2>
{enableReactions && <Checkbox
checked = { soundsReactions }
className = 'settings-checkbox'
disabled = { moderatorMutedSoundsReactions }
label = { t('settings.reactions') }
name = 'soundsReactions'
onChange = { this._onChange } />
}
<Checkbox
checked = { soundsIncomingMessage }
className = 'settings-checkbox'
label = { t('settings.incomingMessage') }
name = 'soundsIncomingMessage'
onChange = { this._onChange } />
<Checkbox
checked = { soundsParticipantJoined }
className = 'settings-checkbox'
label = { t('settings.participantJoined') }
name = 'soundsParticipantJoined'
onChange = { this._onChange } />
<Checkbox
checked = { soundsParticipantLeft }
className = 'settings-checkbox'
label = { t('settings.participantLeft') }
name = 'soundsParticipantLeft'
onChange = { this._onChange } />
<Checkbox
checked = { soundsTalkWhileMuted }
className = 'settings-checkbox'
label = { t('settings.talkWhileMuted') }
name = 'soundsTalkWhileMuted'
onChange = { this._onChange } />
<Checkbox
checked = { soundsParticipantKnocking }
className = 'settings-checkbox'
label = { t('settings.participantKnocking') }
name = 'soundsParticipantKnocking'
onChange = { this._onChange } />
</div>
);
}
}
2022-08-08 09:36:06 +00:00
// @ts-ignore
export default translate(SoundsTab);