"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7307/react/features/conference/components/native/carmode/MicrophoneButton.tsx" (30 May 2023, 3320 Bytes) of package /linux/misc/jitsi-meet-7307.tar.gz:


As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "MicrophoneButton.tsx": 7259_vs_7266.

    1 import React, { useCallback, useState } from 'react';
    2 import { TouchableOpacity, View, ViewStyle } from 'react-native';
    3 import { useDispatch, useSelector } from 'react-redux';
    4 
    5 import {
    6     ACTION_SHORTCUT_PRESSED as PRESSED,
    7     ACTION_SHORTCUT_RELEASED as RELEASED,
    8     createShortcutEvent
    9 } from '../../../../analytics/AnalyticsEvents';
   10 import { sendAnalytics } from '../../../../analytics/functions';
   11 import { IReduxState } from '../../../../app/types';
   12 import { AUDIO_MUTE_BUTTON_ENABLED } from '../../../../base/flags/constants';
   13 import { getFeatureFlag } from '../../../../base/flags/functions';
   14 import Icon from '../../../../base/icons/components/Icon';
   15 import { IconMic, IconMicSlash } from '../../../../base/icons/svg';
   16 import { MEDIA_TYPE } from '../../../../base/media/constants';
   17 import { isLocalTrackMuted } from '../../../../base/tracks/functions';
   18 import { isAudioMuteButtonDisabled } from '../../../../toolbox/functions.any';
   19 import { muteLocal } from '../../../../video-menu/actions';
   20 
   21 import styles from './styles';
   22 
   23 const LONG_PRESS = 'long.press';
   24 
   25 /**
   26  * Implements a round audio mute/unmute button of a custom size.
   27  *
   28  * @returns {JSX.Element} - The audio mute round button.
   29  */
   30 const MicrophoneButton = (): JSX.Element | null => {
   31     const dispatch = useDispatch();
   32     const audioMuted = useSelector((state: IReduxState) => isLocalTrackMuted(state['features/base/tracks'],
   33         MEDIA_TYPE.AUDIO));
   34     const disabled = useSelector(isAudioMuteButtonDisabled);
   35     const enabledFlag = useSelector((state: IReduxState) => getFeatureFlag(state, AUDIO_MUTE_BUTTON_ENABLED, true));
   36     const [ longPress, setLongPress ] = useState(false);
   37 
   38     if (!enabledFlag) {
   39         return null;
   40     }
   41 
   42     const onPressIn = useCallback(() => {
   43         !disabled && dispatch(muteLocal(!audioMuted, MEDIA_TYPE.AUDIO));
   44     }, [ audioMuted, disabled ]);
   45 
   46     const onLongPress = useCallback(() => {
   47         if (!disabled && !audioMuted) {
   48             sendAnalytics(createShortcutEvent(
   49                 'push.to.talk',
   50                 PRESSED,
   51                 {},
   52                 LONG_PRESS));
   53             setLongPress(true);
   54         }
   55     }, [ audioMuted, disabled, setLongPress ]);
   56 
   57     const onPressOut = useCallback(() => {
   58         if (longPress) {
   59             setLongPress(false);
   60             sendAnalytics(createShortcutEvent(
   61                 'push.to.talk',
   62                 RELEASED,
   63                 {},
   64                 LONG_PRESS
   65             ));
   66             dispatch(muteLocal(true, MEDIA_TYPE.AUDIO));
   67         }
   68     }, [ longPress, setLongPress ]);
   69 
   70     return (
   71         <TouchableOpacity
   72             onLongPress = { onLongPress }
   73             onPressIn = { onPressIn }
   74             onPressOut = { onPressOut } >
   75             <View
   76                 style = { [
   77                     styles.microphoneStyles.container,
   78                     !audioMuted && styles.microphoneStyles.unmuted
   79                 ] as ViewStyle[] }>
   80                 <View
   81                     style = { styles.microphoneStyles.iconContainer as ViewStyle }>
   82                     <Icon
   83                         src = { audioMuted ? IconMicSlash : IconMic }
   84                         style = { styles.microphoneStyles.icon } />
   85                 </View>
   86             </View>
   87         </TouchableOpacity>
   88     );
   89 };
   90 
   91 export default MicrophoneButton;