41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { defineMessages, useIntl } from 'react-intl';
|
|
import { useDispatch } from 'react-redux';
|
|
import Toggle from 'react-toggle';
|
|
|
|
import { changeSetting, getSettings } from 'soapbox/actions/settings';
|
|
import { useAppSelector } from 'soapbox/hooks';
|
|
|
|
const messages = defineMessages({
|
|
switchOn: { id: 'chats.audio_toggle_on', defaultMessage: 'Audio notification on' },
|
|
switchOff: { id: 'chats.audio_toggle_off', defaultMessage: 'Audio notification off' },
|
|
});
|
|
|
|
const AudioToggle: React.FC = () => {
|
|
const dispatch = useDispatch();
|
|
const intl = useIntl();
|
|
|
|
const checked = useAppSelector(state => !!getSettings(state).getIn(['chats', 'sound']));
|
|
|
|
const handleToggleAudio = () => {
|
|
dispatch(changeSetting(['chats', 'sound'], !checked));
|
|
};
|
|
|
|
const id = 'chats-audio-toggle';
|
|
const label = intl.formatMessage(checked ? messages.switchOff : messages.switchOn);
|
|
|
|
return (
|
|
<div className='audio-toggle react-toggle--mini'>
|
|
<div className='setting-toggle' aria-label={label}>
|
|
<Toggle
|
|
id={id}
|
|
checked={checked}
|
|
onChange={handleToggleAudio}
|
|
// onKeyDown={this.onKeyDown}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AudioToggle;
|