agora-appbuilder-core 3.0.10 → 3.0.11

package/template/src/pages/Join.tsx

@@ -9,14 +9,12 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useState, useContext} from 'react';
+// @ts-nocheck
+import React, {useState} from 'react';
 import {View, Text, StyleSheet, ScrollView} from 'react-native';
 import {useHistory} from '../components/Router';
-//import Logo from '../subComponents/Logo';
-import Logo from '../components/common/Logo';
-import Spacer from '../atoms/Spacer';
+import Logo from '../subComponents/Logo';
 import {
-  isMobileUA,
   isValidReactComponent,
   shouldAuthenticate,
   useHasBrandLogo,
@@ -31,16 +29,6 @@ import {useString} from '../utils/useString';
 import {useCustomization} from 'customization-implementation';
 import {useSetMeetingInfo} from '../components/meeting-info/useSetMeetingInfo';
 import {MeetingInfoDefaultValue} from '../components/meeting-info/useMeetingInfo';
-import Card from '../atoms/Card';
-import Input from '../atoms/Input';
-import LinkButton from '../atoms/LinkButton';
-import Toast from '../../react-native-toast-message';
-import useJoinMeeting from '../utils/useJoinMeeting';
-import isMobileOrTablet from '../utils/isMobileOrTablet';
-import ThemeConfig from '../theme';
-
-const isLiveStream = $config.EVENT_MODE;
-const mobileOrTablet = isMobileOrTablet();
 
 const Join = () => {
   const hasBrandLogo = useHasBrandLogo();
@@ -48,46 +36,22 @@ const Join = () => {
   // const meetingIdInputPlaceholder = useString('meetingIdInputPlaceholder')();
   // const enterMeetingButton = useString('enterMeetingButton')();
   // const createMeetingButton = useString('createMeetingButton')();
-  const meetingIdInputPlaceholder = isLiveStream
-    ? 'Enter Stream ID'
-    : 'Enter Meeting ID';
-  const enterMeetingButton = isLiveStream ? 'Join Stream' : 'Join Meeting';
-  const createMeetingButton = isLiveStream
-    ? 'Create a Stream'
-    : 'Create a meeting';
+  const meetingIdInputPlaceholder = 'Enter Meeting ID';
+  const enterMeetingButton = 'Enter Meeting';
+  const createMeetingButton = 'Create Meeting';
   const history = useHistory();
   const [phrase, setPhrase] = useState('');
   const [error, setError] = useState<null | {name: string; message: string}>(
     null,
   );
-
-  const useJoin = useJoinMeeting();
   const {setMeetingInfo} = useSetMeetingInfo();
   const createMeeting = () => {
     history.push('/create');
   };
 
   const startCall = async () => {
-    useJoin(phrase)
-      .then(() => {
-        setMeetingInfo(MeetingInfoDefaultValue);
-        history.push(phrase);
-      })
-
-      .catch((error) => {
-        const isInvalidUrl =
-          error?.message.toLowerCase().trim() === 'invalid url' || false;
-        Toast.show({
-          type: 'error',
-          text1: isInvalidUrl ? 'Meeting ID Invalid.' : 'Some Error Occured.',
-          text2: isInvalidUrl
-            ? 'Please enter a valid Meeting ID'
-            : 'Please try again',
-          visibilityTime: 3000,
-          primaryBtn: null,
-          secondaryBtn: null,
-        });
-      });
+    setMeetingInfo(MeetingInfoDefaultValue);
+    history.push(phrase);
   };
   const {JoinComponent} = useCustomization((data) => {
     let components: {
@@ -107,83 +71,93 @@ const Join = () => {
   return JoinComponent ? (
     <JoinComponent />
   ) : (
-    <View style={style.root}>
-      <ScrollView contentContainerStyle={style.main}>
+    <ScrollView contentContainerStyle={style.main}>
+      <View style={style.nav}>
+        {hasBrandLogo() && <Logo />}
         {error ? <Error error={error} /> : <></>}
-        <Card>
-          <View>
-            <Logo />
-            <Spacer size={20} />
-            <Text style={style.heading}>
-              {isLiveStream ? 'Join a Stream' : 'Join a Meeting'}
-            </Text>
-            <Spacer size={40} />
-            <Input
-              labelStyle={style.labelStyle}
-              label={isLiveStream ? 'Stream ID' : 'Meeting ID'}
-              autoFocus
+      </View>
+      <View style={style.content}>
+        <View style={style.leftContent}>
+          <Text style={style.heading}>{$config.APP_NAME}</Text>
+          <Text style={style.headline}>{$config.LANDING_SUB_HEADING}</Text>
+          <View style={style.inputs}>
+            <TextInput
               value={phrase}
-              helpText={
-                isLiveStream
-                  ? 'Enter the stream ID here for the meeting you’d like to join'
-                  : 'Enter the meeting ID here for the meeting you’d like to join'
-              }
-              placeholder={meetingIdInputPlaceholder}
               onChangeText={(text) => setPhrase(text)}
               onSubmitEditing={() => startCall()}
+              placeholder={meetingIdInputPlaceholder}
             />
-            <Spacer size={60} />
-          </View>
-          <View style={style.btnContainer}>
+            <View style={{height: 10}} />
             <PrimaryButton
-              iconName="video-on"
               disabled={phrase === ''}
               onPress={() => startCall()}
               text={enterMeetingButton}
-              containerStyle={isMobileUA() && {width: '100%'}}
             />
-            <Spacer size={16} />
-            <LinkButton
-              text={createMeetingButton}
+            <HorizontalRule />
+            <SecondaryButton
               onPress={() => createMeeting()}
+              text={createMeetingButton}
             />
             {shouldAuthenticate ? (
-              <LogoutButton
-                //@ts-ignore
-                setError={setError}
-              /> //setError not available in logout?
+              <LogoutButton setError={setError} /> //setError not available in logout?
             ) : (
               <></>
             )}
           </View>
-        </Card>
-      </ScrollView>
-    </View>
+        </View>
+      </View>
+    </ScrollView>
   );
 };
 
 const style = StyleSheet.create({
-  btnContainer: {
-    width: '100%',
-    alignItems: 'center',
-  },
-  labelStyle: {
-    paddingLeft: 8,
-  },
-  root: {
-    flex: 1,
-  },
+  illustration: {flex: 1, alignSelf: 'flex-end'},
   main: {
+    paddingVertical: '8%',
+    marginHorizontal: '8%',
+    display: 'flex',
+    justifyContent: 'space-evenly',
     flexGrow: 1,
+  },
+  nav: {
+    flex: 1,
+    width: '100%',
     flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'center',
     justifyContent: 'center',
   },
+  content: {flex: 6, flexDirection: 'row'},
+  leftContent: {
+    width: '100%',
+    minHeight: 300,
+    flex: 1,
+    justifyContent: 'space-evenly',
+    marginBottom: '15%',
+    marginTop: '8%',
+    // marginRight: '5%',
+    marginHorizontal: 'auto',
+  },
   heading: {
-    fontSize: ThemeConfig.FontSize.extraLarge,
+    fontSize: 32,
     fontWeight: '700',
-    lineHeight: ThemeConfig.FontSize.extraLarge,
-    color: $config.FONT_COLOR,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
+    textAlign: 'center',
+    color: $config.PRIMARY_FONT_COLOR,
+    marginBottom: 20,
+  },
+  headline: {
+    fontSize: 18,
+    fontWeight: '400',
+    textAlign: 'center',
+    color: $config.PRIMARY_FONT_COLOR,
+    marginBottom: 20,
+  },
+  inputs: {
+    flex: 1,
+    width: '100%',
+    alignSelf: 'flex-start',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
   },
 });
 

package/template/src/pages/VideoCall.tsx

@@ -11,7 +11,7 @@
 */
 // @ts-nocheck
 import React, {useState, useContext, useEffect} from 'react';
-import {View, StyleSheet, Text, useWindowDimensions} from 'react-native';
+import {View, StyleSheet, Text} from 'react-native';
 import {
   RtcConfigure,
   PropsProvider,
@@ -24,7 +24,7 @@ import {useParams, useHistory} from '../components/Router';
 import RtmConfigure from '../components/RTMConfigure';
 import DeviceConfigure from '../components/DeviceConfigure';
 import Logo from '../subComponents/Logo';
-import {useHasBrandLogo, isArray, isMobileUA} from '../utils/common';
+import {useHasBrandLogo, isArray} from '../utils/common';
 import {SidePanelType} from '../subComponents/SidePanelEnum';
 import {videoView} from '../../theme.json';
 import {LiveStreamContextProvider} from '../components/livestream';
@@ -54,9 +54,6 @@ import {useWakeLock} from '../components/useWakeLock';
 import SDKEvents from '../utils/SdkEvents';
 import {UserPreferenceProvider} from '../components/useUserPreference';
 import EventsConfigure from '../components/EventsConfigure';
-import PermissionHelper from '../components/precall/PermissionHelper';
-import {currentFocus, FocusProvider} from '../utils/useFocus';
-import {VideoCallProvider} from '../components/useVideoCall';
 
 enum RnEncryptionEnum {
   /**
@@ -102,9 +99,6 @@ const VideoCall: React.FC = () => {
   const [isRecordingActive, setRecordingActive] = useState(false);
   const [queryComplete, setQueryComplete] = useState(false);
   const [sidePanel, setSidePanel] = useState<SidePanelType>(SidePanelType.None);
-  const [currentFocus, setFocus] = useState<currentFocus>({
-    editName: false,
-  });
   const {phrase} = useParams<{phrase: string}>();
   // commented for v1 release
   //const lifecycle = useCustomization((data) => data.lifecycle);
@@ -142,7 +136,6 @@ const VideoCall: React.FC = () => {
       .then(() => {})
       .catch((error) => {
         setGlobalErrorMessage(error);
-        history.push('/');
       });
   }, []);
 
@@ -188,10 +181,7 @@ const VideoCall: React.FC = () => {
         history.push('/');
       }, 0),
   };
-  const [isCameraAvailable, setCameraAvailable] = useState(false);
-  const [isMicAvailable, setMicAvailable] = useState(false);
-  const [isSpeakerAvailable, setSpeakerAvailable] = useState(false);
-  const [isPermissionRequested, setIsPermissionRequested] = useState(false);
+
   return (
     <>
       {queryComplete ? (
@@ -220,80 +210,65 @@ const VideoCall: React.FC = () => {
                           currentLayout,
                           setLayout,
                         }}>
-                        <FocusProvider value={{currentFocus, setFocus}}>
-                          <SidePanelProvider
-                            value={{
-                              sidePanel,
-                              setSidePanel,
-                            }}>
-                            <ChatMessagesProvider>
-                              <ScreenShareProvider>
-                                <RtmConfigure
-                                  setRecordingActive={setRecordingActive}
-                                  callActive={callActive}>
-                                  <UserPreferenceProvider>
-                                    <EventsConfigure>
-                                      <WhiteboardProvider>
-                                        <RecordingProvider
-                                          value={{
-                                            setRecordingActive,
-                                            isRecordingActive,
-                                          }}>
-                                          <ScreenshareConfigure>
-                                            <LiveStreamContextProvider
-                                              value={{
-                                                setRtcProps,
-                                                rtcProps,
-                                                callActive,
-                                              }}>
-                                              <LiveStreamDataProvider>
-                                                <LocalUserContext
-                                                  localUid={rtcProps?.uid}>
-                                                  <CustomUserContextHolder>
-                                                    <NetworkQualityProvider>
-                                                      {!isMobileUA() && (
-                                                        <PermissionHelper />
-                                                      )}
-                                                      {callActive ? (
-                                                        <VideoMeetingDataProvider>
-                                                          <VideoCallProvider>
-                                                            <VideoCallScreen />
-                                                          </VideoCallProvider>
-                                                        </VideoMeetingDataProvider>
-                                                      ) : $config.PRECALL ? (
-                                                        <PreCallProvider
-                                                          value={{
-                                                            callActive,
-                                                            setCallActive,
-                                                            isCameraAvailable,
-                                                            isMicAvailable,
-                                                            setCameraAvailable,
-                                                            setMicAvailable,
-                                                            isPermissionRequested,
-                                                            setIsPermissionRequested,
-                                                            isSpeakerAvailable,
-                                                            setSpeakerAvailable,
-                                                          }}>
-                                                          <Precall />
-                                                        </PreCallProvider>
-                                                      ) : (
-                                                        <></>
-                                                      )}
-                                                    </NetworkQualityProvider>
-                                                  </CustomUserContextHolder>
-                                                </LocalUserContext>
-                                              </LiveStreamDataProvider>
-                                            </LiveStreamContextProvider>
-                                          </ScreenshareConfigure>
-                                        </RecordingProvider>
-                                      </WhiteboardProvider>
-                                    </EventsConfigure>
-                                  </UserPreferenceProvider>
-                                </RtmConfigure>
-                              </ScreenShareProvider>
-                            </ChatMessagesProvider>
-                          </SidePanelProvider>
-                        </FocusProvider>
+                        <SidePanelProvider
+                          value={{
+                            sidePanel,
+                            setSidePanel,
+                          }}>
+                          <ChatMessagesProvider>
+                            <ScreenShareProvider>
+                              <RtmConfigure
+                                setRecordingActive={setRecordingActive}
+                                callActive={callActive}>
+                                <UserPreferenceProvider>
+                                  <EventsConfigure>
+                                    <WhiteboardProvider>
+                                      <RecordingProvider
+                                        value={{
+                                          setRecordingActive,
+                                          isRecordingActive,
+                                        }}>
+                                        <ScreenshareConfigure>
+                                          <LiveStreamContextProvider
+                                            value={{
+                                              setRtcProps,
+                                              rtcProps,
+                                              callActive,
+                                            }}>
+                                            <LiveStreamDataProvider>
+                                              <LocalUserContext
+                                                localUid={rtcProps?.uid || 0}>
+                                                <CustomUserContextHolder>
+                                                  <NetworkQualityProvider>
+                                                    {callActive ? (
+                                                      <VideoMeetingDataProvider>
+                                                        <VideoCallScreen />
+                                                      </VideoMeetingDataProvider>
+                                                    ) : $config.PRECALL ? (
+                                                      <PreCallProvider
+                                                        value={{
+                                                          callActive,
+                                                          setCallActive,
+                                                        }}>
+                                                        <Precall />
+                                                      </PreCallProvider>
+                                                    ) : (
+                                                      <></>
+                                                    )}
+                                                  </NetworkQualityProvider>
+                                                </CustomUserContextHolder>
+                                              </LocalUserContext>
+                                            </LiveStreamDataProvider>
+                                          </LiveStreamContextProvider>
+                                        </ScreenshareConfigure>
+                                      </RecordingProvider>
+                                    </WhiteboardProvider>
+                                  </EventsConfigure>
+                                </UserPreferenceProvider>
+                              </RtmConfigure>
+                            </ScreenShareProvider>
+                          </ChatMessagesProvider>
+                        </SidePanelProvider>
                       </LayoutProvider>
                     </ChatNotificationProvider>
                   </ChatUIControlProvider>
@@ -327,7 +302,7 @@ const styleProps = {
     recording: styles.localButton,
     screenshare: styles.localButton,
   },
-  theme: $config.PRIMARY_ACTION_BRAND_COLOR,
+  theme: $config.PRIMARY_COLOR,
   remoteBtnStyles: {
     muteRemoteAudio: styles.remoteButton,
     muteRemoteVideo: styles.remoteButton,
@@ -355,7 +330,7 @@ const style = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: 30,
   },
-  loaderText: {fontWeight: '500', color: $config.FONT_COLOR},
+  loaderText: {fontWeight: '500', color: $config.PRIMARY_FONT_COLOR},
 });
 
 export default VideoCall;

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -7,14 +7,14 @@ import {useLayout} from '../../utils/useLayout';
 export const DefaultLayouts: layoutObjectType[] = [
   {
     name: 'grid',
-    label: 'Grid',
-    iconName: 'grid',
+    label: 'Grid Layout',
+    iconName: 'gridLayoutIcon',
     component: GridVideo,
   },
   {
     name: 'pinned',
-    label: 'Pinned',
-    iconName: 'pinned',
+    label: 'Pinned Layout',
+    iconName: 'pinnedLayoutIcon',
     component: PinnedVideo,
   },
 ];

package/template/src/pages/video-call/NameWithMicIcon.tsx

@@ -1,144 +1,68 @@
-import React, {useContext, useEffect} from 'react';
-import {View, StyleSheet, useWindowDimensions, Text} from 'react-native';
+import React, {useContext} from 'react';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
 import {RFValue} from 'react-native-responsive-fontsize';
-import ThemeConfig from '../../theme';
-import {RenderInterface} from '../../../agora-rn-uikit';
-import ImageIcon from '../../atoms/ImageIcon';
+import {ImageIcon, RenderInterface} from '../../../agora-rn-uikit';
 import TextWithTooltip from '../../subComponents/TextWithTooltip';
+import ColorContext from '../../components/ColorContext';
 import {useString} from '../../utils/useString';
-import {useLayout, useRender} from 'customization-api';
-import useIsActiveSpeaker from '../../utils/useIsActiveSpeaker';
-import {isMobileUA, isWeb, isWebInternal, useIsSmall} from '../../utils/common';
-import AnimatedActiveSpeaker from '../../atoms/AnimatedActiveSpeaker';
-import {getGridLayoutName, getPinnedLayoutName} from './DefaultLayouts';
 
 interface NameWithMicIconProps {
   user: RenderInterface;
-  isMax: boolean;
-  videoTileWidth: number;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
-  const {activeUids} = useRender();
-  const {currentLayout} = useLayout();
-  const reduceSpace =
-    isMobileUA() &&
-    activeUids.length > 4 &&
-    currentLayout === getGridLayoutName();
   const {user} = props;
+  const {primaryColor} = useContext(ColorContext);
   const {height, width} = useWindowDimensions();
-  const isActiveSpeaker = useIsActiveSpeaker();
-  const isSpeaking = isActiveSpeaker(user.uid);
   //commented for v1 release
   //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
   const remoteUserDefaultLabel = 'User';
-  const isSmall = useIsSmall();
   return (
-    <View
-      style={[
-        style.container,
-        {
-          maxWidth:
-            props.videoTileWidth * 0.6 > 180 ? 180 : props.videoTileWidth * 0.6,
-        },
-        reduceSpace ? {left: 2, bottom: 2} : {},
-        reduceSpace && activeUids.length > 12 ? {padding: 2} : {},
-      ]}>
-      {/* {user.audio ? (
-          <AnimatedActiveSpeaker isSpeaking={isSpeaking} />
-        ) : ( */}
-      <ImageIcon
-        iconType="plain"
-        name={
-          user.audio && isSpeaking
-            ? 'active-speaker'
-            : user.audio
-            ? 'mic-on'
-            : 'mic-off'
-        }
-        tintColor={
-          user.audio
-            ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_ERROR
-        }
-        iconSize={20}
-      />
-      {/* )} */}
-      {/* <ImageIcon
-          name={
-            isSpeaking ? 'active-speaker' : user.audio ? 'mic-on' : 'mic-off'
-          }
-          tintColor={
-            isSpeaking
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : user.audio
-              ? $config.PRIMARY_ACTION_BRAND_COLOR
-              : $config.SEMANTIC_ERROR
-          }
-          iconSize={'small'}
-        /> */}
-      {(isMobileUA() || (!isMobileUA() && isSmall())) &&
-      currentLayout === getGridLayoutName() &&
-      activeUids.length > 6 ? (
-        //  ||  (isMobileUA() &&
-        //     currentLayout !== getPinnedLayoutName() &&
-        //     !props?.isMax)
-        <></>
-      ) : (
-        <PlatformWrapper>
-          <Text
-            numberOfLines={1}
-            textBreakStrategy="simple"
-            ellipsizeMode="tail"
-            style={style.name}>
-            {user.name || remoteUserDefaultLabel}
-          </Text>
-        </PlatformWrapper>
-      )}
-    </View>
-  );
-};
-const PlatformWrapper = ({children}) => {
-  return isWeb() ? (
-    <div
-      style={{
-        userSelect: 'none',
-        MozUserSelect: 'none',
-        WebkitUserSelect: 'none',
-        msUserSelect: 'none',
-        alignSelf: 'center',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-      }}>
-      {children}
-    </div>
-  ) : (
-    <>{children}</>
+    <>
+      <View style={[style.MicBackdrop]}>
+        <ImageIcon
+          name={user.audio ? 'mic' : 'micOff'}
+          color={user.audio ? primaryColor : 'red'}
+          style={style.MicIcon}
+        />
+      </View>
+      <View style={{flex: 1}}>
+        <TextWithTooltip
+          value={user.name || remoteUserDefaultLabel}
+          style={[
+            style.name,
+            {
+              fontSize: RFValue(14, height > width ? height : width),
+            },
+          ]}
+        />
+      </View>
+    </>
   );
 };
 
 const style = StyleSheet.create({
-  container: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
-    position: 'absolute',
-    alignItems: 'center',
-    padding: 8,
-    // height: 34,
-    left: 8,
-    bottom: 8,
-    borderRadius: 4,
-    flexDirection: 'row',
-    zIndex: 5,
-  },
   name: {
-    color: $config.VIDEO_AUDIO_TILE_TEXT_COLOR,
-    fontSize: ThemeConfig.FontSize.small,
-    fontWeight: '600',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
+    color: $config.PRIMARY_FONT_COLOR,
+    lineHeight: 25,
+    fontWeight: '700',
     flexShrink: 1,
-    marginLeft: 4,
-    marginRight: 2,
+  },
+  MicBackdrop: {
+    width: 20,
+    height: 20,
+    borderRadius: 15,
+    marginHorizontal: 10,
+    backgroundColor: $config.SECONDARY_FONT_COLOR,
+    display: 'flex',
+    alignSelf: 'center',
+    justifyContent: 'center',
+  },
+  MicIcon: {
+    width: '80%',
+    height: '80%',
+    alignSelf: 'center',
+    resizeMode: 'contain',
   },
 });