Feat/UI video call

example/App.tsx

@@ -1,72 +1,132 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { SafeAreaView, StatusBar, StyleSheet, View } from "react-native";
+import Ionicons from "@expo/vector-icons/Ionicons";
 
-import { VideoCallContext, AppButton, GettingCall, Video } from "rn-video-call";
 import {
+  VideoCallContext,
   createWebRTCFirbaseProxy,
-  MediaStream,
-  // VideoComponent
-} from "packages/webrtc-firebase";
+  IncomingCall,
+  OutgoingCall,
+  VideoCallContent,
+} from "rn-video-call";
 
-import VideoComponent from './Component'
+import { Video, AppButton, GettingCall } from "./components";
 
 import { Colors } from "react-native/Libraries/NewAppScreen";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+import { ParticipantsItems } from "rn-video-call/components/CallParticipantsList";
+
+const AVT_URL =
+  "https://th.bing.com/th/id/OIP.qGopEgGmQzEVMtTdh5HZDQAAAA?w=222&h=180&c=7&r=0&o=5&dpr=2&pid=1.7";
+
+const PARTICIPANTS_LIST: ParticipantsItems[] = [
+  { id: "1", name: "Anya", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "2", name: "Danil", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "3", name: "Vlad", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "4", name: "Vlad", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "5s", name: "Vlad", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "5s", name: "Vlad", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "5s", name: "Vlad", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+  { id: "5s", name: "Vlad", avtUrl: AVT_URL, isMicro: true, isCamera: false },
+];
 
 export default function App() {
   const client = useRef(createWebRTCFirbaseProxy({}));
 
-  const [localStream, setLocalStream] = useState<MediaStream | null>();
-  const [remoteStream, setRemoteStream] = useState<MediaStream | null>();
+  const [localStream, setLocalStream] = useState<any>();
+  const [remoteStream, setRemoteStream] = useState<any>();
   const [gettingCall, setGettingCall] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isFrontCamera, setIsFrontCamera] = useState(true);
+  const [localCameraEnabled, setLocalCameraEnabled] = useState(true);
+  const [remoteCameraEnabled, setRemoteCameraEnabled] = useState(true);
+  const connecting = useRef(false);
 
   useEffect(() => {
-    client.current.setupCallbacks(
-      async (stream:any) => {
-        console.log("setLocalStream", stream);
-        setLocalStream(stream);
-      },
-      async (stream: any) => {
-        console.log("setRemoteStream", stream);
-        setRemoteStream(stream);
-      },
-      async (gettingCall: boolean) => {
-        console.log("setGettingCall", gettingCall);
-        setGettingCall(gettingCall);
-      }
-    );
+    client.current.setupCallbacks({
+      setLocalStream,
+      setRemoteStream,
+      setGettingCall,
+      setIsMuted,
+      setIsFrontCamera,
+      setLocalCameraEnabled,
+      setRemoteCameraEnabled,
+    });
   }, []);
 
-  // Displays the gettingCall Component
-  if (gettingCall) {
-    console.log("gettingCall");
-    return (
-      <GettingCall hangup={client.current.hangup} join={client.current.join} />
-    );
-  }
-
-  // Displays local stream on calling
-  // Displays both local and remote stream once call is connected
-  if (localStream) {
-    return (
-      <Video
-        hangup={client.current.hangup}
-        localStreamURL={localStream?.toURL()}
-        remoteStreamURL={remoteStream?.toURL()}
-        VideoComponent={VideoComponent}
-      />
-    );
-  }
+  const onCreate = useCallback(() => {
+    client.current.create();
+  }, []);
+  const onJoin = useCallback(() => {
+    client.current.join();
+  }, []);
+  const onHangup = useCallback(() => {
+    client.current.hangup();
+  }, []);
+  const onToggleIsMuted = useCallback(() => {
+    client.current.toggleActiveMicrophone();
+  }, []);
+  const onToggleIsFrontCamera = useCallback(() => {
+    client.current.switchingCamera();
+  }, []);
+  const onToggleCamera = useCallback(() => {
+    client.current.toggleCameraEnabled();
+  }, []);
 
   return (
-    <SafeAreaView style={{ flex: 1 }}>
-      <VideoCallContext.Provider value={client.current}>
-        <StatusBar barStyle="dark-content" />
-        <View style={styles.container}>
-          <AppButton backgroundColor="grey" onPress={client.current.create} />
-        </View>
-      </VideoCallContext.Provider>
-    </SafeAreaView>
+    <SafeAreaProvider>
+      {/* <IncomingCall
+        infoProps={{
+          name: "Van Loi",
+          desc: "Voice call",
+        }}
+      /> */}
+      {/* <OutgoingCall
+        infoProps={{
+          name: "Van Loi",
+          desc: "Waiting...",
+        }}
+      /> */}
+      <VideoCallContent data={PARTICIPANTS_LIST} />
+    </SafeAreaProvider>
   );
+
+  // Displays both local and remote stream once call is connected
+  // if (localStream) {
+  //   return (
+  //     <Video
+  //       localStream={localStream}
+  //       remoteStream={remoteStream}
+  //       hangup={onHangup}
+  //       isMuted={isMuted}
+  //       isFrontCam={isFrontCamera}
+  //       localCameraEnabled={localCameraEnabled}
+  //       remoteCameraEnabled={remoteCameraEnabled}
+  //       toggleIsMuted={onToggleIsMuted}
+  //       toggleIsFrontCam={onToggleIsFrontCamera}
+  //       toggleCam={onToggleCamera}
+  //     />
+  //   );
+  // }
+
+  // // Displays the gettingCall Component
+  // if (gettingCall) {
+  //   return <GettingCall hangup={onHangup} join={onJoin} />;
+  // }
+
+  // // Displays local stream on calling
+  // return (
+  //   <SafeAreaView style={{ flex: 1 }}>
+  //     <VideoCallContext.Provider value={client.current}>
+  //       <StatusBar barStyle="dark-content" />
+  //       <View style={styles.container}>
+  //         <AppButton backgroundColor="blue" onPress={onCreate}>
+  //           <Ionicons name="call" color="white" size={24} />
+  //         </AppButton>
+  //       </View>
+  //     </VideoCallContext.Provider>
+  //   </SafeAreaView>
+  // );
 }
 
 const styles = StyleSheet.create({

example/android/app/build.gradle

@@ -86,7 +86,7 @@ android {
 
     namespace 'expo.modules.rnvideocall.example'
     defaultConfig {
-        applicationId 'expo.modules.rnvideocall.example'
+        applicationId 'com.sts.rnvideocall'
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1

example/android/app/google-services.json

@@ -1,99 +1,29 @@
 {
   "project_info": {
-    "project_number": "345546077716",
-    "firebase_url": "https://rn-firebase-chat-demo-default-rtdb.asia-southeast1.firebasedatabase.app",
-    "project_id": "rn-firebase-chat-demo",
-    "storage_bucket": "rn-firebase-chat-demo.appspot.com"
+    "project_number": "839327219669",
+    "project_id": "rn-video-chat-4960c",
+    "storage_bucket": "rn-video-chat-4960c.appspot.com"
   },
   "client": [
     {
       "client_info": {
-        "mobilesdk_app_id": "1:345546077716:android:2285bad2f3aaea6caf9901",
+        "mobilesdk_app_id": "1:839327219669:android:72d9e2d030a57f3432475c",
         "android_client_info": {
-          "package_name": "com.sts.rnfirebasechat"
+          "package_name": "com.sts.rnvideocall"
         }
       },
-      "oauth_client": [
-        {
-          "client_id": "345546077716-i9ulbkea28j9bjeh8kq73h38m7vs6em1.apps.googleusercontent.com",
-          "client_type": 1,
-          "android_info": {
-            "package_name": "com.sts.rnfirebasechat",
-            "certificate_hash": "5e8f16062ea3cd2c4a0d547876baa6f38cabf625"
-          }
-        },
-        {
-          "client_id": "345546077716-easu305uf7445358jq4tklk77lhlgumr.apps.googleusercontent.com",
-          "client_type": 3
-        }
-      ],
-      "api_key": [
-        {
-          "current_key": "AIzaSyBxUbIrZjKnJqRp0X_PspOe_MnhIrHoelU"
-        }
-      ],
-      "services": {
-        "appinvite_service": {
-          "other_platform_oauth_client": [
-            {
-              "client_id": "345546077716-easu305uf7445358jq4tklk77lhlgumr.apps.googleusercontent.com",
-              "client_type": 3
-            },
-            {
-              "client_id": "345546077716-c48ti2od1s8vv6vqptit51u3ok2v2vj0.apps.googleusercontent.com",
-              "client_type": 2,
-              "ios_info": {
-                "bundle_id": "com.sts.rnfirebasechat"
-              }
-            }
-          ]
-        }
-      }
-    },
-    {
-      "client_info": {
-        "mobilesdk_app_id": "1:345546077716:android:e99a067be34de009af9901",
-        "android_client_info": {
-          "package_name": "expo.modules.rnvideocall.example"
-        }
-      },
-      "oauth_client": [
-        {
-          "client_id": "345546077716-7hg0vg9j79fra30f2c46tb0vh4rgd3f4.apps.googleusercontent.com",
-          "client_type": 1,
-          "android_info": {
-            "package_name": "expo.modules.rnvideocall.example",
-            "certificate_hash": "5e8f16062ea3cd2c4a0d547876baa6f38cabf625"
-          }
-        },
-        {
-          "client_id": "345546077716-easu305uf7445358jq4tklk77lhlgumr.apps.googleusercontent.com",
-          "client_type": 3
-        }
-      ],
+      "oauth_client": [],
       "api_key": [
         {
-          "current_key": "AIzaSyBxUbIrZjKnJqRp0X_PspOe_MnhIrHoelU"
+          "current_key": "AIzaSyBSiwKkpuFWuvWnMBuFm9pufZSGpNyhcdQ"
         }
       ],
       "services": {
         "appinvite_service": {
-          "other_platform_oauth_client": [
-            {
-              "client_id": "345546077716-easu305uf7445358jq4tklk77lhlgumr.apps.googleusercontent.com",
-              "client_type": 3
-            },
-            {
-              "client_id": "345546077716-c48ti2od1s8vv6vqptit51u3ok2v2vj0.apps.googleusercontent.com",
-              "client_type": 2,
-              "ios_info": {
-                "bundle_id": "com.sts.rnfirebasechat"
-              }
-            }
-          ]
+          "other_platform_oauth_client": []
         }
       }
     }
   ],
   "configuration_version": "1"
-}
+}

example/android/app/proguard-rules.pro

@@ -12,3 +12,5 @@
 -keep class com.facebook.react.turbomodule.** { *; }
 
 # Add any project specific keep options here:
+
+-keep class org.webrtc.** { *; }

example/android/app/src/main/AndroidManifest.xml

@@ -39,7 +39,7 @@
         <action android:name="android.intent.action.VIEW"/>
         <category android:name="android.intent.category.DEFAULT"/>
         <category android:name="android.intent.category.BROWSABLE"/>
-        <data android:scheme="expo.modules.rnvideocall.example"/>
+        <data android:scheme="com.sts.rnvideocall"/>
       </intent-filter>
     </activity>
     <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false"/>

example/app.json

@@ -13,14 +13,14 @@
     },
     "ios": {
       "supportsTablet": true,
-      "bundleIdentifier": "expo.modules.rnvideocall.example"
+      "bundleIdentifier": "com.sts.rnvideocall"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
       },
-      "package": "expo.modules.rnvideocall.example"
+      "package": "com.sts.rnvideocall"
     },
     "web": {
       "favicon": "./assets/favicon.png"

example/components/AppButton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+    StyleSheet,
+    TouchableOpacity,
+    StyleProp,
+    ViewStyle,
+} from "react-native";
+
+type AppButtonProps = {
+    backgroundColor: string;
+    onPress?: () => void;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+};
+
+const AppButton = ({
+    backgroundColor,
+    onPress,
+    style,
+    children,
+}: AppButtonProps) => {
+    return (
+        <TouchableOpacity
+            onPress={onPress}
+            style={[styles.button, style, { backgroundColor: backgroundColor }]}
+        >
+            {children}
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    button: {
+        width: 60,
+        height: 60,
+        padding: 10,
+        elevation: 10,
+        justifyContent: "center",
+        alignItems: "center",
+        borderRadius: 100,
+    },
+});
+
+export default AppButton;