Merge branch 'master' of https://github.com/AgoraIO-Community/app-bui…

…lder-core
AgoraIO-Community · Oct 1, 2020 · a82be34 · a82be34
2 parents dc52ea4 + ed9edde
commit a82be34
Show file tree

Hide file tree

Showing 14 changed files with 146 additions and 66 deletions.
diff --git a/electron/main/index.js b/electron/main/index.js
@@ -2,7 +2,7 @@ const {app, BrowserWindow, session} = require('electron');
 const path = require('path');
 const isDevelopment = process.env.NODE_ENV === 'development';
 const {format} = require('url');
-const {devServer: {port} = {}} = require('../../webpack.renderer.config');
+const port = 9002;
 
 // isDevelopment && require('react-devtools-electron');
 // Handle creating/removing shortcuts on Windows when installing/uninstalling.

diff --git a/src/components/ParticipantsView.tsx b/src/components/ParticipantsView.tsx
@@ -21,6 +21,7 @@ import ColorContext from '../components/ColorContext';
 import {useParams} from './Router';
 import {gql, useQuery} from '@apollo/client';
 import icons from '../assets/icons';
+import platform from '../subComponents/Platform';
 
 const SHARE = gql`
   query share($passphrase: String!) {
@@ -47,21 +48,26 @@ const ParticipantView = (props: any) => {
     variables: {passphrase: phrase},
   });
   const copyToClipboard = () => {
-    console.log(data, loading, error);
     if (data && !loading) {
-      console.log(data.share);
-      Clipboard.setString(
-        data.share.pstn
-          ? `Meeting - ${data.share.title}
+      let stringToCopy = '';
+      $config.frontEndURL
+        ? (stringToCopy += `Meeting - ${data.share.title}
 URL for Attendee: ${$config.frontEndURL}/${data.share.passphrase.view}
-URL for Host: ${$config.frontEndURL}/${data.share.passphrase.host}
+URL for Host: ${$config.frontEndURL}/${data.share.passphrase.host}`)
+        : platform === 'web'
+        ? (stringToCopy += `Meeting - ${data.share.title}
+URL for Attendee: ${window.location.origin}/${data.share.passphrase.view}
+URL for Host: ${window.location.origin}/${data.share.passphrase.host}`)
+        : (stringToCopy += `Meeting - ${data.share.title}
+Attendee Meeting ID: ${data.share.passphrase.view}
+Host Meeting ID: ${data.share.passphrase.host}`);
 
-PSTN Number: ${data.share.pstn.number}
-PSTN Pin: ${data.share.pstn.dtmf}`
-          : `Meeting - ${data.share.title}
-URL for Attendee: ${$config.frontEndURL}/${data.share.passphrase.view}
-URL for Host: ${$config.frontEndURL}/${data.share.passphrase.host}`,
-      );
+      data.share.pstn
+        ? (stringToCopy += `PSTN Number: ${data.share.pstn.number}
+PSTN Pin: ${data.share.pstn.dtmf}`)
+        : '';
+      console.log(stringToCopy);
+      Clipboard.setString(stringToCopy);
     }
   };
 

diff --git a/src/components/Precall.native.tsx b/src/components/Precall.native.tsx
@@ -17,13 +17,15 @@ import {
 import LocalUserContext from '../../agora-rn-uikit/src/LocalUserContext';
 import RtcContext from '../../agora-rn-uikit/src/RtcContext';
 import ColorContext from '../components/ColorContext';
+import {useHistory} from './Router';
 
 const Precall = (props: any) => {
+  const history = useHistory();
   const {primaryColor} = useContext(ColorContext);
   const maxUsers = useContext(MaxUidContext);
   const rtc = useContext(RtcContext);
   rtc.RtcEngine.startPreview();
-  const {setCallActive, queryComplete, username, setUsername} = props;
+  const {setCallActive, queryComplete, username, setUsername, error} = props;
   return (
     <ImageBackground
       source={{uri: $config.bg}}
@@ -32,6 +34,50 @@ const Precall = (props: any) => {
       <View style={style.heading}>
         <Text style={style.headingText}>Precall </Text>
       </View>
+      {error ? (
+        <View
+          style={{
+            position: 'absolute',
+            borderWidth: 2,
+            borderColor: '#ff0000',
+            backgroundColor: '#ffffff80',
+            paddingHorizontal: 10,
+            paddingVertical: 2,
+            maxWidth: 250,
+            width: '65%',
+            left: 0,
+            right: 0,
+            top: '10%',
+            marginHorizontal: 'auto',
+            left: '20%',
+            zIndex: 55,
+          }}>
+          <Text style={{alignSelf: 'center'}}>
+            <Text
+              style={{
+                fontWeight: '500',
+                textAlign: 'center',
+                fontSize: 16,
+              }}>
+              {error.name + ' - '}
+            </Text>
+            <Text style={{}}>{error.message}</Text>
+          </Text>
+          <TouchableOpacity
+            style={{alignSelf: 'center'}}
+            onPress={() => history.replace('./')}>
+            <Text
+              style={{
+                fontWeight: '500',
+                textDecorationLine: 'underline',
+              }}>
+              {'Go back '}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ) : (
+        <></>
+      )}
       <View style={style.full}>
         <MaxVideoView user={maxUsers[0]} key={maxUsers[0].uid} />
       </View>

diff --git a/src/components/Precall.tsx b/src/components/Precall.tsx
@@ -77,14 +77,14 @@ const Precall = (props: any) => {
                     textAlign: 'center',
                     textDecorationLine: 'underline',
                   }}>
-                  Try Again
+                  Go back
                 </Text>
               </TouchableOpacity>
             </View>
           ) : (
             <></>
           )}
-          <OpenInNativeButton />
+          {/* <OpenInNativeButton /> */}
         </View>
         <View style={style.content}>
           <View style={style.leftContent}>

diff --git a/src/components/Share.tsx b/src/components/Share.tsx
@@ -10,7 +10,7 @@ import ColorContext from '../components/ColorContext';
 import {useHistory} from './Router';
 import Clipboard from '../subComponents/Clipboard';
 import Illustration from '../subComponents/Illustration';
-
+import platform from '../subComponents/Platform';
 const Share = (props: any) => {
   const history = useHistory();
   const {
@@ -30,27 +30,34 @@ const Share = (props: any) => {
   };
 
   const copyToClipboard = () => {
-    Clipboard.setString(
-      pstn
-        ? hostControlCheckbox
-          ? `Meeting - ${roomTitle}
-URL for Attendee: ${urlView}
-URL for Host: ${urlHost}
+    let stringToCopy = '';
 
-PSTN Number: ${pstn.number}
-PSTN Pin: ${pstn.dtmf}`
-          : `Meeting - ${roomTitle}
-Meeting URL: ${urlHost}
+    $config.frontEndURL
+      ? hostControlCheckbox
+        ? (stringToCopy += `Meeting - ${roomTitle}
+URL for Attendee: ${$config.frontEndURL}/${urlView}
+URL for Host: ${$config.frontEndURL}/${urlHost}`)
+        : (stringToCopy += `Meeting - ${roomTitle}
+Meeting URL: ${$config.frontEndURL}/${urlHost}`)
+      : platform === 'web'
+      ? hostControlCheckbox
+        ? (stringToCopy += `Meeting - ${roomTitle}
+URL for Attendee: ${window.location.origin}/${urlView}
+URL for Host: ${window.location.origin}/${urlHost}`)
+        : (stringToCopy += `Meeting - ${roomTitle}
+Meeting URL: ${window.location.origin}/${urlHost}`)
+      : hostControlCheckbox
+      ? (stringToCopy += `Meeting - ${roomTitle}
+Attendee Meeting ID: ${urlView}
+Host Meeting ID: ${urlHost}`)
+      : (stringToCopy += `Meeting - ${roomTitle}
+Meeting URL: ${urlHost}`);
 
-PSTN Number: ${pstn.number}
-PSTN Pin: ${pstn.dtmf}`
-        : hostControlCheckbox
-        ? `Meeting - ${roomTitle}
-URL for Attendee: ${urlView}
-URL for Host: ${urlHost}`
-        : `Meeting - ${roomTitle}
-Meeting URL: ${urlHost}`,
-    );
+    pstn
+      ? (stringToCopy += `PSTN Number: ${pstn.number}
+PSTN Pin: ${pstn.dtmf}`)
+      : '';
+    Clipboard.setString(stringToCopy);
   };
 
   const [dim, setDim] = useState([
@@ -68,19 +75,39 @@ Meeting URL: ${urlHost}`,
         <Text style={style.heading}>Meeting Created</Text>
         {hostControlCheckbox ? (
           <>
-            <Text style={style.urlTitle}>URL for Attendee:</Text>
+            <Text style={style.urlTitle}>
+              {!$config.frontEndURL && platform !== 'web'
+                ? 'Attendee Meeting ID:'
+                : 'URL for Attendee:'}
+            </Text>
             <View style={style.urlHolder}>
-              <Text style={style.url}>{urlView}</Text>
+              <Text style={style.url}>
+                {$config.frontEndURL
+                  ? `${$config.frontEndURL}/${urlView}`
+                  : platform === 'web'
+                  ? `${window.location.origin}/${urlView}`
+                  : urlView}
+              </Text>
             </View>
           </>
         ) : (
           <></>
         )}
         <Text style={style.urlTitle}>
-          {hostControlCheckbox ? 'URL for Host:' : 'Meeting URL'}
+          {hostControlCheckbox
+            ? !$config.frontEndURL && platform !== 'web'
+              ? 'Host Meeting ID:'
+              : 'URL for Host:'
+            : 'Meeting URL'}
         </Text>
         <View style={style.urlHolder}>
-          <Text style={style.url}>{urlHost}</Text>
+          <Text style={style.url}>
+            {$config.frontEndURL
+              ? `${$config.frontEndURL}/${urlHost}`
+              : platform === 'web'
+              ? `${window.location.origin}/${urlHost}`
+              : urlHost}
+          </Text>
         </View>
         {pstn ? (
           <View style={style.pstnHolder}>

diff --git a/src/components/styles.ts b/src/components/styles.ts
@@ -1,6 +1,4 @@
-import {Platform, Dimensions} from 'react-native';
-
-const {width} = Dimensions.get('window');
+import {Platform} from 'react-native';
 
 const styles = {
   temp: {
@@ -19,7 +17,7 @@ const styles = {
     bottom: 0,
   },
   localButton: {
-    backgroundColor: '#fff',
+    backgroundColor: '#ffffff00',
     borderRadius: 2,
     borderColor: $config.primaryColor,
     borderWidth: 0,
@@ -31,7 +29,7 @@ const styles = {
     justifyContent: 'center',
   },
   endCall: {
-    backgroundColor: '#fff',
+    backgroundColor: '#ffffff00',
     borderRadius: 2,
     borderColor: $config.primaryColor,
     borderWidth: 0,

diff --git a/src/pages/Create.tsx b/src/pages/Create.tsx
@@ -64,12 +64,8 @@ const Create = () => {
       })
         .then((res: any) => {
           console.log('promise data', res);
-          setUrlView(
-            `${$config.frontEndURL}/${res.data.createChannel.passphrase.view}`,
-          );
-          setUrlHost(
-            `${$config.frontEndURL}/${res.data.createChannel.passphrase.host}`,
-          );
+          setUrlView(res.data.createChannel.passphrase.view);
+          setUrlHost(res.data.createChannel.passphrase.host);
           setPstn(res.data.createChannel.pstn);
           setJoinPhrase(res.data.createChannel.passphrase.host);
           // setPstnPin(res.data.createChannel.pstn.)
@@ -126,7 +122,7 @@ const Create = () => {
           ) : (
             <></>
           )}
-          <OpenInNativeButton />
+          {/* <OpenInNativeButton /> */}
         </View>
         {!roomCreated ? (
           <View style={style.content} onLayout={onLayout}>

diff --git a/src/pages/Join.tsx b/src/pages/Join.tsx
@@ -84,7 +84,7 @@ const Join = (props: joinProps) => {
           ) : (
             <></>
           )}
-          <OpenInNativeButton />
+          {/* <OpenInNativeButton /> */}
         </View>
         <View style={style.content}>
           <View style={style.leftContent}>

diff --git a/src/subComponents/Logo.tsx b/src/subComponents/Logo.tsx
@@ -1,11 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import {Image, TouchableOpacity} from 'react-native';
 import {useHistory} from '../components/Router';
-import colorContext from '../components/ColorContext';
 
 export default function Logo() {
   const history = useHistory();
-  const {primaryColor} = useContext(colorContext);
 
   return (
     <TouchableOpacity onPress={() => history.replace('/')}>
@@ -14,7 +12,6 @@ export default function Logo() {
         style={{
           width: 90,
           height: 30,
-          tintColor: primaryColor,
         }}
         resizeMode="contain"
       />

diff --git a/src/subComponents/LogoutButton.tsx b/src/subComponents/LogoutButton.tsx
@@ -18,14 +18,11 @@ const LogoutButton = (props: any) => {
   const [logoutQuery] = useMutation(LOGOUT);
 
   const logout = () => {
-    logoutQuery({variables: {token}})
-      .then(() => {
-        setStore({token: null});
-      })
-      .catch((e) => {
-        setError(e);
-        console.log(e);
-      });
+    setStore({token: null});
+    logoutQuery({variables: {token}}).catch((e) => {
+      // setError(e);
+      console.log(e);
+    });
   };
 
   const login = () => {

diff --git a/src/subComponents/Platform.electron.ts b/src/subComponents/Platform.electron.ts
@@ -0,0 +1,2 @@
+const platform = 'electron';
+export default platform;
diff --git a/src/subComponents/Platform.native.ts b/src/subComponents/Platform.native.ts
@@ -0,0 +1,2 @@
+const platform = 'native';
+export default platform;
diff --git a/src/subComponents/Platform.ts b/src/subComponents/Platform.ts
@@ -0,0 +1,2 @@
+const platform = 'web';
+export default platform;
diff --git a/webpack.commons.js b/webpack.commons.js
@@ -74,7 +74,14 @@ module.exports = {
                   isTSX: true,
                 },
               ],
-              '@babel/preset-env', // smartly transforms js into es5-es6
+              [
+                '@babel/preset-env', // smartly transforms js into es5-es6
+                isElectron && {
+                  targets: {
+                    node: 'current',
+                  },
+                },
+              ].filter(Boolean),
             ],
             plugins: [
               // Adds support for class properties