diff --git a/.gitignore b/.gitignore index ad572e6..ea996c5 100644 --- a/.gitignore +++ b/.gitignore @@ -57,3 +57,6 @@ buck-out/ # CocoaPods /ios/Pods/ + +# Environment Variables +.env \ No newline at end of file diff --git a/babel.config.js b/babel.config.js index f842b77..13caf64 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,4 @@ module.exports = { - presets: ['module:metro-react-native-babel-preset'], + presets: ["module:metro-react-native-babel-preset"], + plugins: [["module:react-native-dotenv"]], }; diff --git a/components/ChatHeader/ChatHeader.js b/components/ChatHeader/ChatHeader.js index 88ed168..a6f763c 100644 --- a/components/ChatHeader/ChatHeader.js +++ b/components/ChatHeader/ChatHeader.js @@ -33,7 +33,7 @@ const ChatHeader = ({ navigation }) => { icon="video-wireless-outline" size={28} color="white" - onPress={() => console.log("Pressed")} + onPress={() => navigation.navigate("Video Call")} style={styles.actionIcon} /> = 4.5.0" } }, + "node_modules/axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "dependencies": { + "follow-redirects": "^1.10.0" + } + }, "node_modules/babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -4543,6 +4553,14 @@ "node": ">=8" } }, + "node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -5707,6 +5725,25 @@ "node": ">=0.4.0" } }, + "node_modules/follow-redirects": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -10442,6 +10479,14 @@ "nullthrows": "^1.1.1" } }, + "node_modules/react-native-dotenv": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.0.0.tgz", + "integrity": "sha512-qVw1Vjmg5HMHf8FK+9ta5NdQKcBi1PBnaqumBSYK+8TTbXtxhr8TEod2hLvEVCh4g8V5prjsk4yP4M3cy7Q1Rg==", + "dependencies": { + "dotenv": "^10.0.0" + } + }, "node_modules/react-native-gesture-handler": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz", @@ -15207,6 +15252,14 @@ "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz", "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==" }, + "axios": { + "version": "0.21.1", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz", + "integrity": "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==", + "requires": { + "follow-redirects": "^1.10.0" + } + }, "babel-core": { "version": "7.0.0-bridge.0", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz", @@ -16114,6 +16167,11 @@ } } }, + "dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", @@ -16944,6 +17002,11 @@ "resolved": "https://registry.npmjs.org/flow-parser/-/flow-parser-0.121.0.tgz", "integrity": "sha512-1gIBiWJNR0tKUNv8gZuk7l9rVX06OuLzY9AoGio7y/JT4V1IZErEMEq2TJS+PFcw/y0RshZ1J/27VfK1UQzYVg==" }, + "follow-redirects": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz", + "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + }, "for-in": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz", @@ -20391,6 +20454,14 @@ "nullthrows": "^1.1.1" } }, + "react-native-dotenv": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.0.0.tgz", + "integrity": "sha512-qVw1Vjmg5HMHf8FK+9ta5NdQKcBi1PBnaqumBSYK+8TTbXtxhr8TEod2hLvEVCh4g8V5prjsk4yP4M3cy7Q1Rg==", + "requires": { + "dotenv": "^10.0.0" + } + }, "react-native-gesture-handler": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz", diff --git a/package.json b/package.json index fd7758d..03663a5 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,11 @@ "@react-navigation/bottom-tabs": "^5.11.11", "@react-navigation/native": "^5.9.4", "@react-navigation/stack": "^5.14.5", + "axios": "^0.21.1", "react": "17.0.1", "react-native": "0.64.2", "react-native-agora": "^3.4.2", + "react-native-dotenv": "^3.0.0", "react-native-gesture-handler": "^1.10.3", "react-native-paper": "^4.9.2", "react-native-popup-menu": "^0.15.11", diff --git a/screens/VideoCall/VideoCall.js b/screens/VideoCall/VideoCall.js index 7257318..c27938c 100644 --- a/screens/VideoCall/VideoCall.js +++ b/screens/VideoCall/VideoCall.js @@ -8,7 +8,9 @@ import RtcEngine, { RtcRemoteView, VideoRenderMode, } from "react-native-agora"; -import { FAB } from "react-native-paper"; +import { ActivityIndicator, FAB } from "react-native-paper"; +import { BACKEND_URL } from "@env"; +import axios from "axios"; const VideoCall = ({ navigation }) => { /** @@ -19,9 +21,7 @@ const VideoCall = ({ navigation }) => { "9d33f38e53854576820ce55fa91c7cf8", ); const [channelName, setChannelName] = useState("SkypeClone Sarthak"); - const [token, setToken] = useState( - "006bc353855fafe40108ad901b667e95d12IAB0RPnJILWcFnOPbBs+OUfOecWL4ip0mRSwK4+euhh/7R8E5EsAAAAAEABsKo0tBZroYAEAAQAFmuhg", - ); + const [token, setToken] = useState(""); const [joinSucceeded, setJoinSuccess] = useState(false); const [peerIds, setPeerIds] = useState([]); const [engineObj, setEngineObj] = useState(); @@ -31,6 +31,22 @@ const VideoCall = ({ navigation }) => { let engine; + const getToken = async () => { + const url = `${BACKEND_URL}/generateToken`; + const data = { + appId, + appCertificate, + channelName, + }; + + try { + const res = await axios.post(url, data); + return res.data; + } catch (error) { + console.log(error); + } + }; + const setup = async () => { // const token = generateToken(appId, appCertificate, channelName); // setToken(token); @@ -57,16 +73,19 @@ const VideoCall = ({ navigation }) => { }); engine.addListener("JoinChannelSuccess", (channel, uid, elapsed) => { + console.log("Joined"); setJoinSuccess(true); }); engine.addListener("Error", err => console.log(err)); - await engine.joinChannel(token, channelName, null, 0); + const { token, uid } = await getToken(); + console.log(token, uid); + await engine.joinChannel(token, channelName, null, uid); }; const leaveChannel = async () => { - await engine.leaveChannel(); + if (engine) await engine.leaveChannel(); console.log("Left"); }; @@ -92,8 +111,12 @@ const VideoCall = ({ navigation }) => { if (!joinSucceeded) { return ( - - Joining... + + ); } @@ -144,6 +167,10 @@ const VideoCall = ({ navigation }) => { export default VideoCall; const styles = StyleSheet.create({ + center: { + justifyContent: "center", + alignItems: "center", + }, localView: { flex: 1, // zIndex: 100, diff --git a/yarn.lock b/yarn.lock index bdfe44c..9cd64f9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1718,6 +1718,13 @@ "resolved" "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz" "version" "2.1.2" +"axios@^0.21.1": + "integrity" "sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==" + "resolved" "https://registry.npmjs.org/axios/-/axios-0.21.1.tgz" + "version" "0.21.1" + dependencies: + "follow-redirects" "^1.10.0" + "babel-core@^7.0.0-bridge.0": "integrity" "sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==" "resolved" "https://registry.npmjs.org/babel-core/-/babel-core-7.0.0-bridge.0.tgz" @@ -2554,6 +2561,11 @@ dependencies: "webidl-conversions" "^5.0.0" +"dotenv@^10.0.0": + "integrity" "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz" + "version" "10.0.0" + "ee-first@1.1.1": "integrity" "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" "resolved" "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz" @@ -3141,6 +3153,11 @@ "resolved" "https://registry.npmjs.org/flow-parser/-/flow-parser-0.154.0.tgz" "version" "0.154.0" +"follow-redirects@^1.10.0": + "integrity" "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==" + "resolved" "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz" + "version" "1.14.1" + "for-in@^1.0.2": "integrity" "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=" "resolved" "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz" @@ -5724,6 +5741,13 @@ "jscodeshift" "^0.11.0" "nullthrows" "^1.1.1" +"react-native-dotenv@^3.0.0": + "integrity" "sha512-qVw1Vjmg5HMHf8FK+9ta5NdQKcBi1PBnaqumBSYK+8TTbXtxhr8TEod2hLvEVCh4g8V5prjsk4yP4M3cy7Q1Rg==" + "resolved" "https://registry.npmjs.org/react-native-dotenv/-/react-native-dotenv-3.0.0.tgz" + "version" "3.0.0" + dependencies: + "dotenv" "^10.0.0" + "react-native-gesture-handler@*", "react-native-gesture-handler@^1.10.3", "react-native-gesture-handler@>= 1.0.0": "integrity" "sha512-cBGMi1IEsIVMgoox4RvMx7V2r6bNKw0uR1Mu1o7NbuHS6BRSVLq0dP34l2ecnPlC+jpWd3le6Yg1nrdCjby2Mw==" "resolved" "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.3.tgz"