@placetime/corptime-conference 0.0.6 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@placetime/corptime-conference",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "React Native SDK from Corptime-Conference",
     "main": "index.tsx",
     "license": "Apache-2.0",

package/react/features/base/modal/components/JitsiKeyboardAvoidingView.tsx

@@ -5,7 +5,8 @@ import {
     KeyboardAvoidingView,
     Platform,
     StatusBar,
-    ViewStyle
+    View,
+    ViewStyle,
 } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
@@ -47,6 +48,10 @@ interface IProps {
      * Additional style to be appended to the KeyboardAvoidingView.
      */
     style?: StyleType;
+    /**
+     * Prevent default avoiding keyboard behavior if use BottomSheet
+     */
+    useBottomSheet?: boolean;
 }
 
 const JitsiKeyboardAvoidingView = (
@@ -57,7 +62,8 @@ const JitsiKeyboardAvoidingView = (
             disableForcedKeyboardDismiss,
             hasBottomTextInput,
             hasExtraHeaderHeight,
-            style
+            style,
+            useBottomSheet,
         }: IProps) => {
     const headerHeight = useHeaderHeight();
     const insets = useSafeAreaInsets();
@@ -84,6 +90,14 @@ const JitsiKeyboardAvoidingView = (
     const shouldSetResponse = useCallback(() => !disableForcedKeyboardDismiss, []);
     const onRelease = useCallback(() => Keyboard.dismiss(), []);
 
+    if (useBottomSheet) {
+        return (
+            <View style = { style as ViewStyle }>
+                { children }
+            </View>
+        );
+    }
+
     return (
         <KeyboardAvoidingView
             behavior = { Platform.OS === 'ios' ? 'padding' : 'height' }

package/react/features/base/modal/components/JitsiScreen.tsx

@@ -53,6 +53,10 @@ interface IProps {
      * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
      */
     style?: StyleType;
+    /**
+     * Prevent default avoiding keyboard behavior if use BottomSheet
+     */
+    useBottomSheet?: boolean;
 }
 
 const JitsiScreen = ({
@@ -64,10 +68,12 @@ const JitsiScreen = ({
     hasBottomTextInput = false,
     hasExtraHeaderHeight = false,
     safeAreaInsets = [ 'left', 'right' ],
-    style
+    style,
+    useBottomSheet,
 }: IProps) => {
     const renderContent = () => (
         <JitsiKeyboardAvoidingView
+            useBottomSheet = { useBottomSheet }
             addBottomPadding = { addBottomPadding }
             contentContainerStyle = { contentContainerStyle }
             disableForcedKeyboardDismiss = { disableForcedKeyboardDismiss }

package/react/features/base/ui/components/native/Input.tsx

@@ -15,6 +15,7 @@ import {
     View,
     ViewStyle
 } from 'react-native';
+import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
 
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
@@ -51,6 +52,10 @@ interface IProps extends IInputProps {
     returnKeyType?: ReturnKeyTypeOptions | undefined;
     secureTextEntry?: boolean | undefined;
     textContentType?: any;
+    /**
+     * Use BottomSheetInput
+     */
+    useBottomSheetInput?: boolean;
 }
 
 interface ICustomStyles {
@@ -86,7 +91,8 @@ const Input = forwardRef<TextInput, IProps>(({
     returnKeyType,
     secureTextEntry,
     textContentType,
-    value
+    value,
+    useBottomSheetInput,
 }: IProps, ref) => {
     const [ focused, setFocused ] = useState(false);
     const handleChange = useCallback((e: NativeSyntheticEvent<TextInputChangeEventData>) => {
@@ -119,6 +125,8 @@ const Input = forwardRef<TextInput, IProps>(({
         onSubmitEditing?.(text);
     }, [ onSubmitEditing ]);
 
+    const InputComponent = useBottomSheetInput ? BottomSheetTextInput : TextInput;
+
     return (<View style = { [ styles.inputContainer, customStyles?.container ] as StyleProp<ViewStyle> }>
         {label && <Text style = { styles.label }>{ label }</Text>}
         <View style = { styles.fieldContainer as StyleProp<ViewStyle> }>
@@ -126,7 +134,7 @@ const Input = forwardRef<TextInput, IProps>(({
                 size = { 22 }
                 src = { icon }
                 style = { styles.icon } />}
-            <TextInput
+            <InputComponent
                 accessibilityLabel = { accessibilityLabel }
                 autoCapitalize = { autoCapitalize }
                 autoComplete = { 'off' }

package/react/features/chat/components/native/Chat.tsx

@@ -75,11 +75,12 @@ class Chat extends Component<IProps> {
 
         return (
             <JitsiScreen
+                useBottomSheet={ true }
                 disableForcedKeyboardDismiss = { true }
 
                 /* eslint-disable react/jsx-no-bind */
                 footerComponent = { () =>
-                    <ChatInputBar onSend = { this._onSendMessage } />
+                    <ChatInputBar onSend = { this._onSendMessage } useBottomSheetInput={ true } />
                 }
                 hasBottomTextInput = { true }
                 hasExtraHeaderHeight = { true }

package/react/features/chat/components/native/ChatInputBar.tsx

@@ -36,6 +36,10 @@ interface IProps extends WithTranslation {
      * Callback to invoke on message send.
      */
     onSend: Function;
+    /**
+     * Use BottomSheetInput
+     */
+    useBottomSheetInput?: boolean;
 }
 
 interface IState {
@@ -110,10 +114,10 @@ class ChatInputBar extends Component<IProps, IState> {
                 id = 'chat-input'
                 style = { [
                     inputBarStyles,
-                    this.state.addPadding ? styles.extraBarPadding : null
                 ] as ViewStyle[] }>
                 <Input
                     blurOnSubmit = { false }
+                    useBottomSheetInput={ this.props.useBottomSheetInput }
                     customStyles = {{ container: styles.customInputContainer }}
                     id = 'chat-input-messagebox'
                     multiline = { false }

package/react/features/chat/components/native/styles.ts

@@ -138,7 +138,7 @@ export default {
 
     inputBarNarrow: {
         ...inputBar,
-        height: 112,
+        height: 98,
         marginHorizontal: BaseTheme.spacing[3]
     },
 

package/react/features/conference/components/native/TitleBar.tsx

@@ -96,16 +96,6 @@ const TitleBar = (props: IProps) => {
                         <ConferenceTimer textStyle = { styles.roomTimer } />
                     </View>
                 }
-                {
-                    props._roomNameEnabled
-                    && <View style = { styles.roomNameView as ViewStyle }>
-                        <Text
-                            numberOfLines = { 1 }
-                            style = { styles.roomName }>
-                            { props._meetingName }
-                        </Text>
-                    </View>
-                }
                 {/* eslint-disable-next-line react/jsx-no-bind */}
                 <Labels createOnPress = { props._createOnPress } />
             </View>

package/react/features/conference/components/native/styles.ts

@@ -57,17 +57,17 @@ export default {
 
     titleBarButtonContainer: {
         borderRadius: 3,
-        height: BaseTheme.spacing[7],
+        height: BaseTheme.spacing[6],
         marginTop: BaseTheme.spacing[1],
         marginRight: BaseTheme.spacing[1],
         zIndex: 1,
-        width: BaseTheme.spacing[7]
+        width: BaseTheme.spacing[6]
     },
 
     titleBarButton: {
         iconStyle: {
             color: BaseTheme.palette.icon01,
-            padding: 12,
+            padding: 8,
             fontSize: TITLE_BAR_BUTTON_SIZE
         },
         underlayColor: 'transparent'
@@ -169,10 +169,11 @@ export default {
 
     roomNameWrapper: {
         flexDirection: 'row',
-        marginRight: 10,
-        marginLeft: 8,
+        marginRight: 0,
+        marginLeft: 0,
         flexShrink: 1,
-        flexGrow: 1
+        flexGrow: 1,
+        height: 32
     },
 
     /**

package/react/features/filmstrip/components/native/Filmstrip.tsx

@@ -1,7 +1,8 @@
 import React, { PureComponent } from 'react';
-import { FlatList, ViewStyle, ViewToken } from 'react-native';
+import { ViewStyle, ViewToken } from 'react-native';
 import { SafeAreaView, withSafeAreaInsets } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
+import { FlatList } from 'react-native-gesture-handler';
 
 import { IReduxState, IStore } from '../../../app/types';
 import { getLocalParticipant } from '../../../base/participants/functions';

package/react/features/settings/components/native/SettingsView.tsx

@@ -57,10 +57,7 @@ const SettingsView = ({ isInWelcomePage }: IProps) => {
             style = { styles.settingsViewContainer }>
             <ScrollView bounces = { scrollBounces }>
                 <View style = { styles.profileContainerWrapper as ViewStyle }>
-                    <TouchableHighlight
-
-                        /* eslint-disable react/jsx-no-bind */
-                        onPress = { () => navigate(screen.settings.profile) }>
+                    <View>
                         <View
                             style = { styles.profileContainer as ViewStyle }>
                             <Avatar
@@ -69,12 +66,8 @@ const SettingsView = ({ isInWelcomePage }: IProps) => {
                             <Text style = { styles.displayName as TextStyle }>
                                 { displayName }
                             </Text>
-                            <Icon
-                                size = { 24 }
-                                src = { IconArrowRight }
-                                style = { styles.profileViewArrow } />
                         </View>
-                    </TouchableHighlight>
+                    </View>
                 </View>
                 <GeneralSection />
                 { isInWelcomePage && <>