[MV-341] Add preview screen (#61)

Add preview screen and standard button opacity animations.
fishjam-dev · Mar 23, 2023 · 23f33a4 · 23f33a4
1 parent 6a7f2d7
commit 23f33a4
Show file tree

Hide file tree

Showing 10 changed files with 270 additions and 68 deletions.
diff --git a/example/babel.config.js b/example/babel.config.js
@@ -16,6 +16,7 @@ module.exports = {
           '@colors': './src/shared/colors.ts',
           '@screens': './src/screens/',
           '@model': './src/model/',
+          '@utils': './src/shared/utils.ts',
         },
       },
     ],

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -10,6 +10,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { CreateRoom } from '@screens/CreateRoom';
 import { InitialScreen } from '@screens/InitialScreen';
 import { JoinRoomStub } from '@screens/JoinRoomStub';
+import { Preview } from '@screens/Preview';
 import { Room } from '@screens/Room';
 import { useFonts } from 'expo-font';
 import * as SplashScreen from 'expo-splash-screen';
@@ -73,6 +74,7 @@ export default function App() {
           />
           <Stack.Screen name="Room" component={Room} />
           <Stack.Screen name="JoinRoom" component={JoinRoomStub} />
+          <Stack.Screen name="Preview" component={Preview} />
         </Stack.Navigator>
       </NavigationContainer>
     </VideoroomContextProvider>

diff --git a/example/src/VideoroomContext.tsx b/example/src/VideoroomContext.tsx
@@ -5,13 +5,16 @@ const VideoroomContext = React.createContext<
   | {
       roomName: string;
       setRoomName: React.Dispatch<React.SetStateAction<string>>;
+      username: string;
+      setUsername: React.Dispatch<React.SetStateAction<string>>;
     }
   | undefined
 >(undefined);
 
 const VideoroomContextProvider = (props) => {
   const [roomName, setRoomName] = useState('');
-  const value = { roomName, setRoomName };
+  const [username, setUsername] = useState('');
+  const value = { roomName, setRoomName, username, setUsername };
 
   return (
     <VideoroomContext.Provider value={value}>

diff --git a/example/src/components/BackgroundWrapper.tsx b/example/src/components/BackgroundWrapper.tsx
@@ -40,7 +40,6 @@ const styles = StyleSheet.create({
     width: 75,
     height: 282,
     position: 'absolute',
-    top: 24,
   },
   rightImage: {
     width: 120,

diff --git a/example/src/components/buttons/StandardButton.tsx b/example/src/components/buttons/StandardButton.tsx
@@ -1,7 +1,7 @@
 import { AdditionalColors, BrandColors, TextColors } from '@colors';
 import { Typo } from '@components/Typo';
 import React, { ReactNode } from 'react';
-import { StyleSheet, View, Pressable } from 'react-native';
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
 
 const StandardButtonStyles = StyleSheet.create({
   common: {
@@ -82,7 +82,7 @@ export const StandardButton = ({
   };
 
   return (
-    <Pressable onPress={onPress} disabled={!isEnabled}>
+    <TouchableOpacity onPress={onPress} disabled={!isEnabled}>
       <View style={GetStylesForButtonType(type)}>
         <Typo
           variant="button"
@@ -91,6 +91,6 @@ export const StandardButton = ({
           {children}
         </Typo>
       </View>
-    </Pressable>
+    </TouchableOpacity>
   );
 };
diff --git a/example/src/model/NavigationTypes.ts b/example/src/model/NavigationTypes.ts
@@ -1,6 +1,9 @@
+export type PreviewTitle = 'New meeting' | 'Join meeting';
+
 export type RootStack = {
   Room: undefined;
   CreateRoom: { roomName: string } | undefined;
   InitialScreen: undefined;
   JoinRoom: undefined;
+  Preview: { title: PreviewTitle };
 };
diff --git a/example/src/screens/CreateRoom.tsx b/example/src/screens/CreateRoom.tsx
@@ -3,15 +3,12 @@ import { Modal } from '@components/Modal';
 import { TextInput } from '@components/TextInput';
 import { Typo } from '@components/Typo';
 import { StandardButton } from '@components/buttons/StandardButton';
-import { SERVER_URL } from '@env';
-import * as Membrane from '@jellyfish-dev/react-native-membrane-webrtc';
 import { RootStack } from '@model/NavigationTypes';
 import { useHeaderHeight } from '@react-navigation/elements';
 import type { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { isEmpty } from 'lodash';
 import React, { useEffect, useState, useCallback, useRef } from 'react';
 import {
-  Alert,
   View,
   StyleSheet,
   KeyboardAvoidingView,
@@ -31,24 +28,9 @@ type GoBackAction = Readonly<{
 
 export const CreateRoom = ({ navigation, route }: Props) => {
   const height = useHeaderHeight();
-  const [username, setUsername] = useState('');
   const [isModalVisible, setIsModalVisible] = useState(false);
   const modalAction = useRef<GoBackAction>();
-  const { roomName, setRoomName } = useVideoroomState();
-  const isSimulcastOn = true;
-
-  const { connect: mbConnect, joinRoom, error } = Membrane.useMembraneServer();
-
-  const params = {
-    token: 'NOW_YOU_CAN_SEND_PARAMS',
-  };
-
-  useEffect(() => {
-    if (error) {
-      console.log(error);
-      Alert.alert('Error when connecting to server:', error);
-    }
-  }, [error]);
+  const { roomName, setRoomName, username, setUsername } = useVideoroomState();
 
   useEffect(() => {
     if (route.params?.roomName) {
@@ -77,8 +59,15 @@ export const CreateRoom = ({ navigation, route }: Props) => {
     return !isEmpty(username) && !isEmpty(roomName);
   };
 
-  const requestPermissions = useCallback(async () => {
-    if (Platform.OS === 'ios') return;
+  const openPreview = () => {
+    navigation.push('Preview', { title: 'New meeting' });
+  };
+
+  const requestPermissionsAndOpenPreview = useCallback(async () => {
+    if (Platform.OS === 'ios') {
+      openPreview();
+      return;
+    }
     try {
       const granted = await PermissionsAndroid.requestMultiple([
         PermissionsAndroid.PERMISSIONS.CAMERA,
@@ -94,51 +83,12 @@ export const CreateRoom = ({ navigation, route }: Props) => {
       } else {
         console.log('Camera permission denied');
       }
+      openPreview();
     } catch (err) {
       console.warn(err);
     }
   }, []);
 
-  const connect = useCallback(async () => {
-    const validRoomName = roomName.trimEnd();
-    const validUserName = username.trimEnd();
-
-    setRoomName(validRoomName);
-    setUsername(validUserName);
-
-    await requestPermissions();
-    try {
-      await mbConnect(SERVER_URL, validRoomName, {
-        userMetadata: { displayName: validUserName },
-        connectionParams: params,
-        socketChannelParams: {
-          isSimulcastOn,
-        },
-        simulcastConfig: {
-          enabled: isSimulcastOn,
-          activeEncodings: ['l', 'm', 'h'],
-        },
-        quality: Membrane.VideoQuality.HD_169,
-        maxBandwidth: { l: 150, m: 500, h: 1500 },
-        videoTrackMetadata: { active: true, type: 'camera' },
-        audioTrackMetadata: { active: true, type: 'audio' },
-        isSpeakerphoneOn: false,
-      });
-      await joinRoom();
-      navigation.navigate('Room');
-    } catch (err) {
-      console.warn(err);
-    }
-  }, [
-    requestPermissions,
-    mbConnect,
-    joinRoom,
-    roomName,
-    isSimulcastOn,
-    username,
-    SERVER_URL,
-  ]);
-
   return (
     <BackgroundWrapper hasHeader>
       <ScrollView
@@ -206,7 +156,7 @@ export const CreateRoom = ({ navigation, route }: Props) => {
             </View>
             <View style={styles.createRoomButton}>
               <StandardButton
-                onPress={connect}
+                onPress={requestPermissionsAndOpenPreview}
                 isEnabled={shouldEnableCreateRoomButton()}
               >
                 Create a room