"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7555/react/features/settings/components/native/SettingsView.tsx" (28 Sep 2023, 5831 Bytes) of package /linux/misc/jitsi-meet-7555.tar.gz:

    1 import React, { Component } from 'react';
    2 import { WithTranslation } from 'react-i18next';
    3 import {
    4     ScrollView,
    5     Text,
    6     TouchableHighlight,
    7     View,
    8     ViewStyle
    9 } from 'react-native';
   10 import { Divider } from 'react-native-paper';
   11 import { connect } from 'react-redux';
   12 
   13 import { IReduxState, IStore } from '../../../app/types';
   14 import Avatar from '../../../base/avatar/components/Avatar';
   15 import { translate } from '../../../base/i18n/functions';
   16 import Icon from '../../../base/icons/components/Icon';
   17 import { IconArrowRight } from '../../../base/icons/svg';
   18 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
   19 import { getLocalParticipant } from '../../../base/participants/functions';
   20 import { navigate } from '../../../mobile/navigation/components/settings/SettingsNavigationContainerRef';
   21 import { screen } from '../../../mobile/navigation/routes';
   22 import { shouldShowModeratorSettings } from '../../functions.native';
   23 
   24 import AdvancedSection from './AdvancedSection';
   25 import ConferenceSection from './ConferenceSection';
   26 import GeneralSection from './GeneralSection';
   27 import LinksSection from './LinksSection';
   28 import ModeratorSection from './ModeratorSection';
   29 import NotificationsSection from './NotificationsSection';
   30 import { AVATAR_SIZE } from './constants';
   31 import styles from './styles';
   32 
   33 /**
   34  * The type of the React {@code Component} props of
   35  * {@link SettingsView}.
   36  */
   37 interface IProps extends WithTranslation {
   38 
   39     _displayName?: string;
   40 
   41     /**
   42      * The ID of the local participant.
   43      */
   44     _localParticipantId?: string;
   45 
   46     /**
   47      * Flag indicating whether the moderator settings are available.
   48      */
   49     _showModeratorSettings: boolean;
   50 
   51     /**
   52      * Whether {@link SettingsView} is visible.
   53      *
   54      * @protected
   55      */
   56     _visible?: boolean;
   57 
   58     /**
   59      * Redux store dispatch function.
   60      */
   61     dispatch: IStore['dispatch'];
   62 
   63     /**
   64      * Flag indicating whether the settings is launched inside welcome page.
   65      */
   66     isInWelcomePage?: boolean;
   67 
   68     /**
   69      * Default prop for navigating between screen components(React Navigation).
   70      */
   71     navigation?: Object;
   72 }
   73 
   74 /**
   75  * The native container rendering the app settings page.
   76  */
   77 class SettingsView extends Component<IProps> {
   78     _urlField: Object;
   79 
   80     /**
   81      * Opens the profile settings screen.
   82      *
   83      * @returns {void}
   84      */
   85     _onPressProfile() {
   86         navigate(screen.settings.profile);
   87     }
   88 
   89     /**
   90      * Implements React's {@link Component#render()}, renders the settings page.
   91      *
   92      * @inheritdoc
   93      * @returns {ReactElement}
   94      */
   95     render() {
   96         const {
   97             _displayName
   98         } = this.props;
   99 
  100         const {
  101             isInWelcomePage,
  102             _showModeratorSettings
  103         } = this.props;
  104 
  105         const addBottomInset = !isInWelcomePage;
  106         const scrollBounces = Boolean(isInWelcomePage);
  107 
  108         return (
  109             <JitsiScreen
  110                 disableForcedKeyboardDismiss = { true }
  111 
  112                 // @ts-ignore
  113                 safeAreaInsets = { [ addBottomInset && 'bottom', 'left', 'right' ].filter(Boolean) }
  114                 style = { styles.settingsViewContainer }>
  115                 <ScrollView bounces = { scrollBounces }>
  116                     <View style = { styles.profileContainerWrapper }>
  117                         <TouchableHighlight onPress = { this._onPressProfile }>
  118                             <View
  119                                 style = { styles.profileContainer as ViewStyle }>
  120                                 <Avatar
  121                                     participantId = { this.props._localParticipantId }
  122                                     size = { AVATAR_SIZE } />
  123                                 <Text style = { styles.displayName }>
  124                                     { _displayName }
  125                                 </Text>
  126                                 <Icon
  127                                     size = { 24 }
  128                                     src = { IconArrowRight }
  129                                     style = { styles.profileViewArrow } />
  130                             </View>
  131                         </TouchableHighlight>
  132                     </View>
  133                     <GeneralSection />
  134                     { isInWelcomePage && <>
  135                         {/* @ts-ignore */}
  136                         <Divider style = { styles.fieldSeparator } />
  137                         <ConferenceSection />
  138                     </> }
  139                     {/* @ts-ignore */}
  140                     <Divider style = { styles.fieldSeparator } />
  141                     <NotificationsSection />
  142 
  143                     { _showModeratorSettings
  144                         && <>
  145                             {/* @ts-ignore */}
  146                             <Divider style = { styles.fieldSeparator } />
  147                             <ModeratorSection />
  148                         </> }
  149                     {/* @ts-ignore */}
  150                     <Divider style = { styles.fieldSeparator } />
  151                     <AdvancedSection />
  152                     {/* @ts-ignore */}
  153                     <Divider style = { styles.fieldSeparator } />
  154                     <LinksSection />
  155                 </ScrollView>
  156             </JitsiScreen>
  157         );
  158     }
  159 }
  160 
  161 /**
  162  * Maps part of the Redux state to the props of this component.
  163  *
  164  * @param {Object} state - The Redux state.
  165  * @returns {IProps}
  166  */
  167 function _mapStateToProps(state: IReduxState) {
  168     const localParticipant = getLocalParticipant(state);
  169 
  170     return {
  171         _localParticipantId: localParticipant?.id,
  172         _displayName: state['features/base/settings'].displayName,
  173         _visible: state['features/settings'].visible,
  174         _showModeratorSettings: shouldShowModeratorSettings(state)
  175     };
  176 }
  177 
  178 export default translate(connect(_mapStateToProps)(SettingsView));