jiti-meet/react/features/conference/components/native/carmode/MicrophoneButton.tsx

97 lines
3.2 KiB
TypeScript

/* eslint-disable lines-around-comment */
import React, { useCallback, useState } from 'react';
import { View, TouchableOpacity } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import {
createShortcutEvent,
sendAnalytics,
ACTION_SHORTCUT_PRESSED as PRESSED,
ACTION_SHORTCUT_RELEASED as RELEASED
// @ts-ignore
} from '../../../../analytics';
// @ts-ignore
import { getFeatureFlag, AUDIO_MUTE_BUTTON_ENABLED } from '../../../../base/flags';
import Icon from '../../../../base/icons/components/Icon';
import { IconMicrophone, IconMicrophoneEmptySlash } from '../../../../base/icons/svg/index';
// @ts-ignore
import { MEDIA_TYPE } from '../../../../base/media';
// @ts-ignore
import { isLocalTrackMuted } from '../../../../base/tracks';
// @ts-ignore
import { isAudioMuteButtonDisabled } from '../../../../toolbox/functions.any';
// @ts-ignore
import { muteLocal } from '../../../../video-menu/actions';
// @ts-ignore
import styles from './styles';
const LONG_PRESS = 'long.press';
/**
* Implements a round audio mute/unmute button of a custom size.
*
* @returns {JSX.Element} - The audio mute round button.
*/
const MicrophoneButton = () : JSX.Element|null => {
const dispatch = useDispatch();
const audioMuted = useSelector((state: any) => isLocalTrackMuted(state['features/base/tracks'], MEDIA_TYPE.AUDIO));
const disabled = useSelector(isAudioMuteButtonDisabled);
const enabledFlag = useSelector(state => getFeatureFlag(state, AUDIO_MUTE_BUTTON_ENABLED, true));
const [ longPress, setLongPress ] = useState(false);
if (!enabledFlag) {
return null;
}
const onPressIn = useCallback(() => {
!disabled && dispatch(muteLocal(!audioMuted, MEDIA_TYPE.AUDIO));
}, [ audioMuted, disabled ]);
const onLongPress = useCallback(() => {
if (!disabled && !audioMuted) {
sendAnalytics(createShortcutEvent(
'push.to.talk',
PRESSED,
{},
LONG_PRESS));
setLongPress(true);
}
}, [ audioMuted, disabled, setLongPress ]);
const onPressOut = useCallback(() => {
if (longPress) {
setLongPress(false);
sendAnalytics(createShortcutEvent(
'push.to.talk',
RELEASED,
{},
LONG_PRESS
));
dispatch(muteLocal(true, MEDIA_TYPE.AUDIO));
}
}, [ longPress, setLongPress ]);
return (
<TouchableOpacity
onLongPress = { onLongPress }
onPressIn = { onPressIn }
onPressOut = { onPressOut } >
<View
style = { [
styles.microphoneStyles.container,
!audioMuted && styles.microphoneStyles.unmuted
] }>
<View
style = { styles.microphoneStyles.iconContainer }>
<Icon
src = { audioMuted ? IconMicrophoneEmptySlash : IconMicrophone }
style = { styles.microphoneStyles.icon } />
</View>
</View>
</TouchableOpacity>
);
};
export default MicrophoneButton;