haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(base/modal): enable scroll for jitsi screen component

This commit is contained in:
Calin-Teodor 2022-10-06 16:52:45 +03:00 committed by Calinteodor
parent 66769136ed
commit f2b2b02029
2 changed files with 170 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
react/features/base/modal/components/JitsiScreen.js
View File

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react'; import React from 'react';
import { View } from 'react-native'; import { ScrollView, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context'; import { SafeAreaView } from 'react-native-safe-area-context';
import { StyleType } from '../../styles'; import { StyleType } from '../../styles';
@ -47,6 +47,11 @@ type Props = {
*/ */
safeAreaInsets?: Array, safeAreaInsets?: Array,
/**
* Enable scroll for JitsiScreen.
*/
scrollEnabled?: boolean,
/** /**
* Additional style to be appended to the KeyboardAvoidingView containing the content of the modal. * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
*/ */
@ -61,10 +66,10 @@ const JitsiScreen = ({
hasBottomTextInput = false, hasBottomTextInput = false,
disableForcedKeyboardDismiss = false, disableForcedKeyboardDismiss = false,
safeAreaInsets = [ 'left', 'right' ], safeAreaInsets = [ 'left', 'right' ],
scrollEnabled = false,
style style
}: Props) => ( }: Props) => {
<View const renderContent = () => (
style = { styles.jitsiScreenContainer }>
<JitsiKeyboardAvoidingView <JitsiKeyboardAvoidingView
contentContainerStyle = { contentContainerStyle } contentContainerStyle = { contentContainerStyle }
disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss } disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }
@ -74,12 +79,28 @@ const JitsiScreen = ({
<SafeAreaView <SafeAreaView
edges = { safeAreaInsets } edges = { safeAreaInsets }
style = { styles.safeArea }> style = { styles.safeArea }>
{children} { children }
</SafeAreaView> </SafeAreaView>
{ footerComponent && footerComponent() } { footerComponent && footerComponent() }
</JitsiKeyboardAvoidingView> </JitsiKeyboardAvoidingView>
</View> );
);
if (scrollEnabled) {
return (
<ScrollView
bounces = { false }
style = { styles.jitsiScreenContainer }>
{ renderContent() }
</ScrollView>
);
}
return (
<View style = { styles.jitsiScreenContainer }>
{ renderContent() }
</View>
);
};
export default JitsiScreen; export default JitsiScreen;

286
react/features/settings/components/native/SettingsView.tsx
View File

@ -8,7 +8,6 @@ import {
Alert, Alert,
NativeModules, NativeModules,
Platform, Platform,
ScrollView,
Text, Text,
View View
} from 'react-native'; } from 'react-native';
@ -275,157 +274,156 @@ class SettingsView extends Component<Props, State> {
return ( return (
<JitsiScreen <JitsiScreen
safeAreaInsets = { [ 'bottom', 'left', 'right' ] } safeAreaInsets = { [ 'bottom', 'left', 'right' ] }
scrollEnabled = { true }
style = { styles.settingsViewContainer }> style = { styles.settingsViewContainer }>
<ScrollView> <View style = { styles.avatarContainer }>
<View style = { styles.avatarContainer }> <Avatar
<Avatar participantId = { this.props._localParticipantId }
participantId = { this.props._localParticipantId } size = { AVATAR_SIZE } />
size = { AVATAR_SIZE } /> </View>
</View> <FormSectionAccordion
<FormSectionAccordion label = 'settingsView.profileSection'>
label = 'settingsView.profileSection'> <TextInput
<TextInput autoCorrect = { false }
autoCorrect = { false } label = { t('settingsView.displayName') }
label = { t('settingsView.displayName') } mode = 'outlined'
mode = 'outlined' onChangeText = { this._onChangeDisplayName }
onChangeText = { this._onChangeDisplayName } placeholder = { t('settingsView.displayNamePlaceholderText') }
placeholder = { t('settingsView.displayNamePlaceholderText') } placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR } spellCheck = { false }
spellCheck = { false } style = { styles.textInputContainer }
style = { styles.textInputContainer } textContentType = { 'name' } // iOS only
textContentType = { 'name' } // iOS only theme = { textInputTheme }
theme = { textInputTheme } value = { displayName } />
value = { displayName } /> <Divider style = { styles.fieldSeparator } />
<Divider style = { styles.fieldSeparator } /> <TextInput
<TextInput autoCapitalize = 'none'
autoCapitalize = 'none' autoCorrect = { false }
autoCorrect = { false } keyboardType = { 'email-address' }
keyboardType = { 'email-address' } label = { t('settingsView.email') }
label = { t('settingsView.email') } mode = 'outlined'
mode = 'outlined' onChangeText = { this._onChangeEmail }
onChangeText = { this._onChangeEmail } placeholder = 'email@example.com'
placeholder = 'email@example.com' placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR } spellCheck = { false }
spellCheck = { false } style = { styles.textInputContainer }
style = { styles.textInputContainer } textContentType = { 'emailAddress' } // iOS only
textContentType = { 'emailAddress' } // iOS only theme = { textInputTheme }
theme = { textInputTheme } value = { email } />
value = { email } /> </FormSectionAccordion>
</FormSectionAccordion> <FormSectionAccordion
<FormSectionAccordion label = 'settingsView.conferenceSection'>
label = 'settingsView.conferenceSection'> <TextInput
<TextInput autoCapitalize = 'none'
autoCapitalize = 'none' autoCorrect = { false }
autoCorrect = { false } editable = { this.props._serverURLChangeEnabled }
editable = { this.props._serverURLChangeEnabled } keyboardType = { 'url' }
keyboardType = { 'url' } label = { t('settingsView.serverURL') }
label = { t('settingsView.serverURL') } mode = 'outlined'
mode = 'outlined' onBlur = { this._onBlurServerURL }
onBlur = { this._onBlurServerURL } onChangeText = { this._onChangeServerURL }
onChangeText = { this._onChangeServerURL } placeholder = { this.props._serverURL }
placeholder = { this.props._serverURL } placeholderTextColor = { PLACEHOLDER_TEXT_COLOR }
placeholderTextColor = { PLACEHOLDER_TEXT_COLOR } spellCheck = { false }
spellCheck = { false } style = { styles.textInputContainer }
style = { styles.textInputContainer } textContentType = { 'URL' } // iOS only
textContentType = { 'URL' } // iOS only theme = { textInputTheme }
theme = { textInputTheme } value = { serverURL } />
value = { serverURL } /> <Divider style = { styles.fieldSeparator } />
<Divider style = { styles.fieldSeparator } /> <FormRow label = 'settingsView.startCarModeInLowBandwidthMode'>
<FormRow label = 'settingsView.startCarModeInLowBandwidthMode'> <Switch
<Switch checked = { startCarMode }
checked = { startCarMode }
// @ts-ignore
onChange = { this._onStartCarmodeInLowBandwidthMode } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow
label = 'settingsView.startWithAudioMuted'>
<Switch
checked = { startWithAudioMuted }
// @ts-ignore
onChange = { this._onStartAudioMutedChange } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'settingsView.startWithVideoMuted'>
<Switch
checked = { startWithVideoMuted }
// @ts-ignore
onChange = { this._onStartVideoMutedChange } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
<FormRow label = 'videothumbnail.hideSelfView'>
<Switch
checked = { disableSelfView }
// @ts-ignore
onChange = { this._onDisableSelfView } />
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.links'>
<Link
style = { styles.sectionLink }
// @ts-ignore // @ts-ignore
to = {{ screen: screen.settings.links.help }}> onChange = { this._onStartCarmodeInLowBandwidthMode } />
{ t('settingsView.help') } </FormRow>
</Link> <Divider style = { styles.fieldSeparator } />
<Divider style = { styles.fieldSeparator } /> <FormRow
<Link label = 'settingsView.startWithAudioMuted'>
style = { styles.sectionLink } <Switch
checked = { startWithAudioMuted }
// @ts-ignore // @ts-ignore
to = {{ screen: screen.settings.links.terms }}> onChange = { this._onStartAudioMutedChange } />
{ t('settingsView.terms') } </FormRow>
</Link> <Divider style = { styles.fieldSeparator } />
<Divider style = { styles.fieldSeparator } /> <FormRow label = 'settingsView.startWithVideoMuted'>
<Link <Switch
style = { styles.sectionLink } checked = { startWithVideoMuted }
// @ts-ignore // @ts-ignore
to = {{ screen: screen.settings.links.privacy }}> onChange = { this._onStartVideoMutedChange } />
{ t('settingsView.privacy') } </FormRow>
</Link> <Divider style = { styles.fieldSeparator } />
</FormSectionAccordion> <FormRow label = 'videothumbnail.hideSelfView'>
<FormSectionAccordion <Switch
label = 'settingsView.buildInfoSection'> checked = { disableSelfView }
<FormRow // @ts-ignore
label = 'settingsView.version'> onChange = { this._onDisableSelfView } />
<Text style = { styles.text }> </FormRow>
{`${AppInfo.version} build ${AppInfo.buildNumber}`} </FormSectionAccordion>
</Text> <FormSectionAccordion
</FormRow> label = 'settingsView.links'>
</FormSectionAccordion> <Link
<FormSectionAccordion style = { styles.sectionLink }
label = 'settingsView.advanced'> // @ts-ignore
{ Platform.OS === 'android' && ( to = {{ screen: screen.settings.links.help }}>
<> { t('settingsView.help') }
<FormRow </Link>
label = 'settingsView.disableCallIntegration'> <Divider style = { styles.fieldSeparator } />
<Switch <Link
checked = { disableCallIntegration } style = { styles.sectionLink }
// @ts-ignore // @ts-ignore
onChange = { this._onDisableCallIntegration } /> to = {{ screen: screen.settings.links.terms }}>
</FormRow> { t('settingsView.terms') }
<Divider style = { styles.fieldSeparator } /> </Link>
</> <Divider style = { styles.fieldSeparator } />
)} <Link
<FormRow style = { styles.sectionLink }
label = 'settingsView.disableP2P'> // @ts-ignore
<Switch to = {{ screen: screen.settings.links.privacy }}>
checked = { disableP2P } { t('settingsView.privacy') }
// @ts-ignore </Link>
onChange = { this._onDisableP2P } /> </FormSectionAccordion>
</FormRow> <FormSectionAccordion
<Divider style = { styles.fieldSeparator } /> label = 'settingsView.buildInfoSection'>
{AppInfo.GOOGLE_SERVICES_ENABLED && ( <FormRow
label = 'settingsView.version'>
<Text style = { styles.text }>
{`${AppInfo.version} build ${AppInfo.buildNumber}`}
</Text>
</FormRow>
</FormSectionAccordion>
<FormSectionAccordion
label = 'settingsView.advanced'>
{ Platform.OS === 'android' && (
<>
<FormRow <FormRow
fieldSeparator = { true } label = 'settingsView.disableCallIntegration'>
label = 'settingsView.disableCrashReporting'>
<Switch <Switch
checked = { disableCrashReporting } checked = { disableCallIntegration }
// @ts-ignore // @ts-ignore
onChange = { this._onDisableCrashReporting } /> onChange = { this._onDisableCallIntegration } />
</FormRow> </FormRow>
)} <Divider style = { styles.fieldSeparator } />
</FormSectionAccordion> </>
</ScrollView> )}
<FormRow
label = 'settingsView.disableP2P'>
<Switch
checked = { disableP2P }
// @ts-ignore
onChange = { this._onDisableP2P } />
</FormRow>
<Divider style = { styles.fieldSeparator } />
{AppInfo.GOOGLE_SERVICES_ENABLED && (
<FormRow
fieldSeparator = { true }
label = 'settingsView.disableCrashReporting'>
<Switch
checked = { disableCrashReporting }
// @ts-ignore
onChange = { this._onDisableCrashReporting } />
</FormRow>
)}
</FormSectionAccordion>
</JitsiScreen> </JitsiScreen>
); );
} }