agora-appbuilder-core 3.0.10 → 3.0.11

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

@@ -1,190 +0,0 @@
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
-import React, {useContext} from 'react';
-import SidePanelHeader, {
-  SidePanelStyles,
-} from '../../subComponents/SidePanelHeader';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import ThemeConfig from '../../theme';
-import {useChatNotification} from '../../components/chat-notification/useChatNotification';
-import {useSidePanel} from '../../utils/useSidePanel';
-import {SidePanelType} from '../../subComponents/SidePanelEnum';
-import {useChatUIControl} from '../../components/chat-ui/useChatUIControl';
-import {numFormatter} from '../../utils';
-import ChatContext from '../../components/ChatContext';
-
-export const SettingsHeader = (props) => {
-  const {setSidePanel} = useSidePanel();
-  const settingsLabel = 'Settings';
-  return (
-    <SidePanelHeader
-      centerComponent={
-        <Text style={SidePanelStyles.heading}>{settingsLabel}</Text>
-      }
-      trailingIconName="close"
-      trailingIconOnPress={() => {
-        props.handleClose && props.handleClose();
-        setSidePanel(SidePanelType.None);
-      }}
-    />
-  );
-};
-
-export const PeopleHeader = () => {
-  const {onlineUsersCount} = useContext(ChatContext);
-  const participantsLabel = `People (${numFormatter(onlineUsersCount)})`;
-  const {setSidePanel} = useSidePanel();
-  return (
-    <SidePanelHeader
-      centerComponent={
-        <Text style={SidePanelStyles.heading}>{participantsLabel}</Text>
-      }
-      trailingIconName="close"
-      trailingIconOnPress={() => {
-        setSidePanel(SidePanelType.None);
-      }}
-    />
-  );
-};
-
-export const ChatHeader = () => {
-  const {
-    unreadGroupMessageCount,
-    setUnreadGroupMessageCount,
-    unreadPrivateMessageCount,
-    setUnreadPrivateMessageCount,
-    setUnreadIndividualMessageCount,
-    unreadIndividualMessageCount,
-  } = useChatNotification();
-
-  const {setSidePanel} = useSidePanel();
-  const groupChatLabel = 'Group';
-  const privateChatLabel = 'Private';
-
-  const {
-    groupActive,
-    setGroupActive,
-    privateActive,
-    setPrivateActive,
-    setSelectedChatUserId: setSelectedUser,
-  } = useChatUIControl();
-
-  const selectGroup = () => {
-    setPrivateActive(false);
-    setGroupActive(true);
-    //move this logic into ChatContainer
-    //setUnreadGroupMessageCount(0);
-    setSelectedUser(0);
-  };
-  const selectPrivate = () => {
-    setGroupActive(false);
-    setSelectedUser(0);
-    setPrivateActive(false);
-  };
-
-  return (
-    <SidePanelHeader
-      isChat={true}
-      leadingIconName={privateActive ? 'back-btn' : null}
-      leadingIconOnPress={
-        privateActive
-          ? () => {
-              setSelectedUser(0);
-              setPrivateActive(false);
-            }
-          : () => {}
-      }
-      centerComponent={
-        <View style={styles.buttonHolder}>
-          <TouchableOpacity
-            onPress={selectGroup}
-            style={
-              groupActive ? styles.activeContainer : styles.nonActiveContainer
-            }>
-            {unreadGroupMessageCount !== 0 ? (
-              <View style={styles.chatNotification} />
-            ) : null}
-            <Text
-              style={groupActive ? styles.activeText : styles.nonActiveText}>
-              {groupChatLabel}
-            </Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            onPress={selectPrivate}
-            style={
-              !groupActive
-                ? [styles.activeContainer]
-                : [styles.nonActiveContainer]
-            }>
-            {unreadPrivateMessageCount !== 0 ? (
-              <View style={styles.chatNotification} />
-            ) : null}
-            <Text
-              style={!groupActive ? styles.activeText : styles.nonActiveText}>
-              {privateChatLabel}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      }
-      trailingIconName="close"
-      trailingIconOnPress={() => {
-        setSidePanel(SidePanelType.None);
-      }}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  buttonHolder: {
-    backgroundColor:
-      $config.HARD_CODED_BLACK_COLOR + hexadecimalTransparency['30%'],
-    borderRadius: 12,
-    flexDirection: 'row',
-  },
-  chatViewNative: {
-    zIndex: 5,
-    width: '100%',
-    height: '100%',
-    right: 0,
-    bottom: 0,
-  },
-  chatInputContainer: {
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  activeContainer: {
-    margin: 2,
-    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-    borderRadius: 11,
-    alignSelf: 'center',
-  },
-  nonActiveContainer: {
-    alignSelf: 'center',
-  },
-  activeText: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 12,
-    color: $config.PRIMARY_ACTION_TEXT_COLOR,
-  },
-  nonActiveText: {
-    paddingHorizontal: 24,
-    paddingVertical: 10,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 12,
-    color: $config.FONT_COLOR,
-  },
-  chatNotification: {
-    width: 8,
-    height: 8,
-    backgroundColor: $config.SEMANTIC_ERROR,
-    borderRadius: 30,
-    position: 'absolute',
-    right: 8,
-    top: 4,
-  },
-});

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

@@ -1,139 +0,0 @@
-import {StyleSheet, Text, View, AppState} from 'react-native';
-import React, {useRef, useContext, useState, useEffect} from 'react';
-import VideoComponent from './VideoComponent';
-import ActionSheet from './ActionSheet';
-import ThemeConfig from '../../theme';
-import Spacer from '../../atoms/Spacer';
-import {useMeetingInfo} from '../../components/meeting-info/useMeetingInfo';
-
-import {useRecording} from '../../subComponents/recording/useRecording';
-import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
-import ParticipantsCount from '../../atoms/ParticipantsCount';
-import RecordingInfo from '../../atoms/RecordingInfo';
-import {isAndroid, isWebInternal, trimText} from '../../utils/common';
-import {RtcContext, ToggleState, useLocalUid} from '../../../agora-rn-uikit';
-import {useLocalUserInfo, useRender} from 'customization-api';
-
-const VideoCallMobileView = () => {
-  const {
-    data: {meetingTitle},
-  } = useMeetingInfo();
-  const {isRecordingActive} = useRecording();
-  const recordingLabel = 'Recording';
-
-  const appState = useRef(AppState.currentState);
-  const [appStateVisible, setAppStateVisible] = useState(appState.current);
-  const {RtcEngine, dispatch} = useContext(RtcContext);
-  const local = useLocalUserInfo();
-
-  const isCamON = useRef(local.video);
-
-  // moved below logic to useMuteToggleLocal
-  // useEffect(() => {
-  //   if ($config.AUDIO_ROOM) return;
-  //   const subscription = AppState.addEventListener(
-  //     'change',
-  //     async (nextAppState) => {
-  //       if (nextAppState === 'background') {
-  //         // check if cam was on before app goes to background
-  //         isCamON.current = isAndroid()
-  //           ? local.video === ToggleState.enabled
-  //           : RtcEngine?.isVideoEnabled;
-
-  //         if (isCamON.current || 1) {
-  //           isWebInternal()
-  //             ? await RtcEngine.muteLocalVideoStream(true)
-  //             : await RtcEngine.enableLocalVideo(false);
-
-  //           // dispatch({
-  //           //   type: 'LocalMuteVideo',
-  //           //   value: [0],
-  //           // });
-  //         }
-  //       }
-  //       if (nextAppState === 'active') {
-  //         // enable cam only if cam was on before app goes to background
-  //         console.log('active state 111111 ==>', isCamON.current);
-  //         if (local.video) {
-  //           isWebInternal()
-  //             ? await RtcEngine.muteLocalVideoStream(false)
-  //             : await RtcEngine.enableLocalVideo(true);
-  //           dispatch({
-  //             type: 'LocalMuteVideo',
-  //             value: [1],
-  //           });
-  //         }
-  //       }
-  //       appState.current = nextAppState;
-  //     },
-  //   );
-
-  //   return () => {
-  //     subscription?.remove();
-  //   };
-  // }, []);
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.titleBar}>
-        <Text style={styles.title}>{trimText(meetingTitle)}</Text>
-        <Spacer size={8} horizontal={false} />
-        <View style={styles.countView}>
-          <View
-            style={{
-              width: 45,
-              height: 35,
-              justifyContent: 'center',
-              alignItems: 'center',
-              alignSelf: 'center',
-              zIndex: isWebInternal() ? 3 : 0,
-
-              //flex: 1,
-            }}>
-            <ParticipantsCount />
-          </View>
-          {isRecordingActive ? (
-            <RecordingInfo recordingLabel={recordingLabel} />
-          ) : (
-            <></>
-          )}
-        </View>
-      </View>
-      <Spacer size={16} />
-      <View style={styles.videoView}>
-        <VideoComponent />
-      </View>
-      <ActionSheet />
-    </View>
-  );
-};
-
-export default VideoCallMobileView;
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-    paddingVertical: 20,
-    flex: 1,
-  },
-  title: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: ThemeConfig.FontSize.normal,
-    color: $config.FONT_COLOR,
-    fontWeight: '600',
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    paddingVertical: 2,
-  },
-  videoView: {
-    flex: 0.85,
-    zIndex: 0,
-    elevation: 0,
-  },
-  titleBar: {
-    flexDirection: 'column',
-    alignItems: 'flex-start',
-  },
-  countView: {
-    flexDirection: 'row',
-  },
-});

package/template/src/pages/video-call/VideoCallScreen.native.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
-import VideoCallMobileView from './VideoCallMobileView';
-import ReactNativeForegroundService from '@supersami/rn-foreground-service';
-import {AppRegistry, Platform} from 'react-native';
-
-const VideoCallleScreen = () => {
-  React.useEffect(() => {
-    if (Platform.OS === 'android') {
-      ReactNativeForegroundService.register();
-      AppRegistry.registerComponent($config.APP_NAME, () => VideoCallleScreen);
-      ReactNativeForegroundService.add_task(
-        () => {
-          //console.log('App is active!')
-        },
-        {
-          delay: 1000,
-          onLoop: true,
-          taskId: 'taskid',
-          onError: (e) => console.log(`Error logging:`, e),
-        },
-      );
-      ReactNativeForegroundService.start({
-        id: 145,
-        title: $config.APP_NAME,
-        message: 'Call is active',
-      });
-    }
-  }, []);
-  return (
-    <GestureHandlerRootView style={{flex: 1}}>
-      <VideoCallMobileView />
-    </GestureHandlerRootView>
-  );
-};
-
-export default VideoCallleScreen;

package/template/src/subComponents/ChatInput.ios.tsx

@@ -1,237 +0,0 @@
-/*
-********************************************
- Copyright © 2021 Agora Lab, Inc., all rights reserved.
- AppBuilder and all associated components, source code, APIs, services, and documentation 
- (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
- accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
- Use without a license or in violation of any license terms and conditions (including use for 
- any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
- information visit https://appbuilder.agora.io. 
-*********************************************
-*/
-import React, {useContext, useEffect, useRef} from 'react';
-import {View, TouchableOpacity, StyleSheet, Image} from 'react-native';
-import ColorContext from '../components/ColorContext';
-import TextInput from '../atoms/TextInput';
-import {useString} from '../utils/useString';
-import {useChatMessages} from '../components/chat-messages/useChatMessages';
-import {isIOS, isValidReactComponent, isWebInternal} from '../utils/common';
-import {useCustomization} from 'customization-implementation';
-import {useChatUIControl} from '../components/chat-ui/useChatUIControl';
-import {useRender, useUserName} from 'customization-api';
-import ImageIcon from '../atoms/ImageIcon';
-import ThemeConfig from '../theme';
-import {BottomSheetTextInput} from '@gorhom/bottom-sheet';
-
-export interface ChatSendButtonProps {
-  render?: (onPress: () => void) => JSX.Element;
-}
-
-export const ChatSendButton = (props: ChatSendButtonProps) => {
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-    inputActive,
-  } = useChatUIControl();
-  const {sendChatMessage} = useChatMessages();
-  const onPress = () => {
-    if (!selectedUserId) {
-      sendChatMessage(message);
-      setMessage && setMessage('');
-    } else {
-      sendChatMessage(message, selectedUserId);
-      setMessage && setMessage('');
-    }
-  };
-  return props?.render ? (
-    props.render(onPress)
-  ) : (
-    <TouchableOpacity style={[style.chatInputButton]} onPress={onPress}>
-      <ImageIcon
-        iconType="plain"
-        tintColor={
-          inputActive
-            ? $config.PRIMARY_ACTION_BRAND_COLOR
-            : $config.SEMANTIC_NEUTRAL
-        }
-        name={'send'}
-      />
-    </TouchableOpacity>
-  );
-};
-export interface ChatTextInputProps {
-  render?: (
-    message: string,
-    onChangeText: (text: string) => void,
-    onSubmitEditing: () => void,
-    chatMessageInputPlaceholder: string,
-  ) => JSX.Element;
-}
-export const ChatTextInput = (props: ChatTextInputProps) => {
-  let chatInputRef = useRef(null);
-  const {
-    selectedChatUserId: selectedUserId,
-    message,
-    setMessage,
-    inputActive,
-    privateActive,
-  } = useChatUIControl();
-  const {sendChatMessage} = useChatMessages();
-  const {renderList} = useRender();
-  //commented for v1 release
-  // const chatMessageInputPlaceholder = useString(
-  //   'chatMessageInputPlaceholder',
-  // )();
-  const [name] = useUserName();
-  const chatMessageInputPlaceholder = privateActive
-    ? `Private Message to ${renderList[selectedUserId].name}`
-    : `Chat publicly as ${name}...`;
-  const onChangeText = (text: string) => setMessage(text);
-  const onSubmitEditing = () => {
-    if (!selectedUserId) {
-      sendChatMessage(message);
-      setMessage('');
-    } else {
-      sendChatMessage(message, selectedUserId);
-      setMessage('');
-    }
-  };
-  const {setInputActive} = useChatUIControl();
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (isWebInternal()) {
-        chatInputRef?.current?.focus();
-      }
-    });
-  }, []);
-
-  return props?.render ? (
-    props.render(
-      message,
-      onChangeText,
-      onSubmitEditing,
-      chatMessageInputPlaceholder,
-    )
-  ) : (
-    <BottomSheetTextInput
-      onFocus={() => setInputActive(true)}
-      onBlur={() => setInputActive(false)}
-      value={message}
-      onChangeText={onChangeText}
-      style={{
-        minHeight: 56,
-        borderRadius: 0,
-        borderBottomLeftRadius: 12,
-        borderWidth: 0,
-        color: $config.FONT_COLOR,
-        textAlign: 'left',
-        paddingVertical: 21,
-        paddingLeft: 20,
-        flex: 1,
-        alignSelf: 'center',
-        fontFamily: ThemeConfig.FontFamily.sansPro,
-        fontWeight: '400',
-      }}
-      blurOnSubmit={false}
-      onSubmitEditing={onSubmitEditing}
-      placeholder={chatMessageInputPlaceholder}
-      placeholderTextColor={
-        $config.FONT_COLOR + ThemeConfig.EmphasisPlus.disabled
-      }
-      autoCorrect={false}
-    />
-  );
-};
-
-/**
- * Input component for the Chat interface
- */
-const ChatInput = (props: {
-  chatInput?: React.ComponentType<ChatTextInputProps>;
-  chatSendButton?: React.ComponentType<ChatSendButtonProps>;
-}) => {
-  const {primaryColor} = useContext(ColorContext);
-  const {ChatInputComponent, ChatSendButtonComponent} = useCustomization(
-    (data) => {
-      let components: {
-        ChatInputComponent: React.ComponentType<ChatTextInputProps>;
-        ChatSendButtonComponent: React.ComponentType<ChatSendButtonProps>;
-      } = {
-        ChatInputComponent: ChatTextInput,
-        ChatSendButtonComponent: ChatSendButton,
-      };
-      if (
-        data?.components?.videoCall &&
-        typeof data?.components?.videoCall === 'object'
-      ) {
-        if (
-          data?.components?.videoCall?.chat &&
-          typeof data?.components?.videoCall?.chat === 'object'
-        ) {
-          if (
-            data?.components?.videoCall?.chat?.chatInput &&
-            typeof data?.components?.videoCall?.chat?.chatInput !== 'object' &&
-            isValidReactComponent(data?.components?.videoCall?.chat?.chatInput)
-          ) {
-            components.ChatInputComponent =
-              data?.components?.videoCall?.chat?.chatInput;
-          }
-          if (
-            data?.components?.videoCall?.chat?.chatSendButton &&
-            typeof data?.components?.videoCall?.chat?.chatSendButton !==
-              'object' &&
-            isValidReactComponent(
-              data?.components?.videoCall?.chat?.chatSendButton,
-            )
-          ) {
-            components.ChatSendButtonComponent =
-              data?.components?.videoCall?.chat?.chatSendButton;
-          }
-        }
-      } else {
-        if (props?.chatInput && isValidReactComponent(props.chatInput)) {
-          components.ChatInputComponent = props.chatInput;
-        }
-        if (
-          props?.chatSendButton &&
-          isValidReactComponent(props.chatSendButton)
-        ) {
-          components.ChatSendButtonComponent = props.chatSendButton;
-        }
-      }
-      return components;
-    },
-  );
-
-  const {inputActive} = useChatUIControl();
-
-  return (
-    <View style={[style.inputView, inputActive ? style.inputActiveView : {}]}>
-      <ChatInputComponent />
-      <ChatSendButtonComponent />
-    </View>
-  );
-};
-
-const style = StyleSheet.create({
-  inputActiveView: {
-    borderTopWidth: 1,
-    borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
-  },
-  inputView: {
-    flex: 1,
-    flexDirection: 'row',
-    backgroundColor: $config.CARD_LAYER_2_COLOR,
-    borderTopWidth: 1,
-    borderTopColor: 'transparent',
-  },
-  chatInputButton: {
-    flex: 0.1,
-    borderBottomRightRadius: 12,
-    alignSelf: 'center',
-    marginRight: 16,
-  },
-});
-export default ChatInput;

package/template/src/subComponents/EndcallPopup.tsx

@@ -1,107 +0,0 @@
-import React, {SetStateAction, useContext} from 'react';
-import {StyleSheet, Text, View} from 'react-native';
-import Spacer from '../atoms/Spacer';
-import Popup from '../atoms/Popup';
-import TertiaryButton from '../atoms/TertiaryButton';
-import PrimaryButton from '../atoms/PrimaryButton';
-import ThemeConfig from '../theme';
-import {useIsDesktop} from '../utils/common';
-
-interface EndcallPopupProps {
-  modalVisible: boolean;
-  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
-  endCall: () => void;
-}
-const EndcallPopup = (props: EndcallPopupProps) => {
-  const isDesktop = useIsDesktop()('popup');
-  const leaveMeetingLabelHeading = 'Leave Meeting?';
-  const leaveMeetingLabelSubHeading =
-    'Are you sure you want to leave this meeting?';
-
-  const stayBtnLabel = 'CANCEL';
-  const leaveBtnLabel = 'LEAVE';
-  return (
-    <Popup
-      modalVisible={props.modalVisible}
-      setModalVisible={props.setModalVisible}
-      showCloseIcon={false}
-      contentContainerStyle={styles.contentContainer}>
-      <Text style={styles.heading}>{leaveMeetingLabelHeading}</Text>
-      <Spacer size={8} />
-      <Text style={styles.subHeading}>{leaveMeetingLabelSubHeading}</Text>
-      <Spacer size={32} />
-      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
-        <View style={isDesktop && {flex: 1}}>
-          <TertiaryButton
-            containerStyle={{
-              width: '100%',
-              height: 48,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-              borderRadius: ThemeConfig.BorderRadius.medium,
-            }}
-            text={stayBtnLabel}
-            textStyle={styles.btnText}
-            onPress={() => props.setModalVisible(false)}
-          />
-        </View>
-        <Spacer
-          size={isDesktop ? 10 : 20}
-          horizontal={isDesktop ? true : false}
-        />
-        <View style={isDesktop && {flex: 1}}>
-          <PrimaryButton
-            containerStyle={{
-              minWidth: 'auto',
-              width: '100%',
-              borderRadius: ThemeConfig.BorderRadius.medium,
-              height: 48,
-              backgroundColor: $config.SEMANTIC_ERROR,
-              paddingVertical: 12,
-              paddingHorizontal: 12,
-            }}
-            text={leaveBtnLabel}
-            textStyle={styles.btnText}
-            onPress={props.endCall}
-          />
-        </View>
-      </View>
-    </Popup>
-  );
-};
-
-export default EndcallPopup;
-
-const styles = StyleSheet.create({
-  btnContainer: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  btnText: {
-    fontWeight: '600',
-    fontSize: 16,
-    lineHeight: 24,
-  },
-
-  btnContainerMobile: {
-    flexDirection: 'column-reverse',
-  },
-  contentContainer: {
-    padding: 24,
-    minWidth: 342,
-  },
-  heading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
-    fontSize: 22,
-    color: $config.SEMANTIC_ERROR,
-  },
-  subHeading: {
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
-    fontSize: ThemeConfig.FontSize.small,
-    color: $config.FONT_COLOR,
-  },
-});