agora-appbuilder-core 3.0.13 → 3.0.28-beta-9

package/template/src/subComponents/CopyJoinInfo.tsx

@@ -9,81 +9,71 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect} from 'react';
-import {StyleSheet} from 'react-native';
-import {useParams} from '../components/Router';
-import {BtnTemplate, BtnTemplateInterface} from '../../agora-rn-uikit';
+import React from 'react';
+import TertiaryButton from '../atoms/TertiaryButton';
+import IconButton, {IconButtonProps} from '../atoms/IconButton';
+import {useVideoCall} from '../components/useVideoCall';
+import {useToolbarMenu} from '../utils/useMenu';
+import ToolbarMenuItem from '../atoms/ToolbarMenuItem';
+import {useActionSheet} from '../utils/useActionSheet';
 import {useString} from '../utils/useString';
-import useGetMeetingPhrase from '../utils/useGetMeetingPhrase';
-import {
-  SHARE_LINK_CONTENT_TYPE,
-  useShareLink,
-} from '../components/useShareLink';
-import {
-  ButtonTemplateName,
-  useButtonTemplate,
-} from '../utils/useButtonTemplate';
-import Styles from '../components/styles';
+import {toolbarItemInviteText} from '../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../atoms/ToolbarItem';
 
 export interface CopyJoinInfoProps {
-  showText?: boolean;
-  buttonTemplateName?: ButtonTemplateName;
-  render?: (
-    onPress: () => void,
-    buttonTemplateName?: ButtonTemplateName,
-  ) => JSX.Element;
+  showTeritaryButton?: boolean;
+  render?: (onPress: () => void) => JSX.Element;
 }
 
 const CopyJoinInfo = (props: CopyJoinInfoProps) => {
-  const {phrase} = useParams<{phrase: string}>();
-  const getMeeting = useGetMeetingPhrase();
-  const {copyShareLinkToClipboard} = useShareLink();
-  //commented for v1 release
-  //const copyMeetingInviteButton = useString('copyMeetingInviteButton')();
-  const copyMeetingInviteButton = 'Copy Meeting Invite';
-  const defaultTemplateValue = useButtonTemplate().buttonTemplateName;
-  const {buttonTemplateName = defaultTemplateValue} = props;
-  useEffect(() => {
-    getMeeting(phrase);
-  }, [phrase]);
+  const {label = null, onPress: onPressCustom = null} = useToolbarProps();
+  const {isOnActionSheet, showLabel} = useActionSheet();
+  const {isToolbarMenuItem} = useToolbarMenu();
 
-  const onPress = () =>
-    copyShareLinkToClipboard(SHARE_LINK_CONTENT_TYPE.MEETING_INVITE);
-  let btnTemplateProps: BtnTemplateInterface = {
-    onPress: onPress,
-    name: 'clipboard',
+  const {showTeritaryButton = false} = props;
+  const copyMeetingInviteButton = useString(toolbarItemInviteText)();
+  const {setShowInvitePopup} = useVideoCall();
+
+  const onPress = () => {
+    setShowInvitePopup(true);
+  };
+  let iconButtonProps: IconButtonProps = {
+    onPress: onPressCustom || onPress,
+    iconProps: {
+      name: 'share',
+      tintColor: $config.SECONDARY_ACTION_COLOR,
+    },
+    btnTextProps: {
+      textColor: $config.FONT_COLOR,
+      text: showLabel ? label || copyMeetingInviteButton : '',
+    },
   };
-  if (buttonTemplateName === ButtonTemplateName.bottomBar) {
-    btnTemplateProps.btnText = copyMeetingInviteButton;
-    btnTemplateProps.style = Styles.localButtonWithoutBG as Object;
-  } else {
-    btnTemplateProps.color = $config.PRIMARY_FONT_COLOR;
-    btnTemplateProps.style = style.backButton;
-    btnTemplateProps.btnText = props.showText ? copyMeetingInviteButton : '';
+
+  if (isOnActionSheet) {
+    iconButtonProps.btnTextProps.textStyle = {
+      color: $config.FONT_COLOR,
+      marginTop: 8,
+      fontSize: 12,
+      fontWeight: '400',
+      fontFamily: 'Source Sans Pro',
+      textAlign: 'center',
+    };
   }
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
 
   return props?.render ? (
-    props.render(onPress, buttonTemplateName)
+    props.render(onPress)
   ) : (
-    <BtnTemplate {...btnTemplateProps} />
+    <>
+      {showTeritaryButton ? (
+        <TertiaryButton text={copyMeetingInviteButton} onPress={onPress} />
+      ) : isToolbarMenuItem ? (
+        <ToolbarMenuItem {...iconButtonProps} />
+      ) : (
+        <IconButton {...iconButtonProps} />
+      )}
+    </>
   );
 };
 
-const style = StyleSheet.create({
-  backButton: {
-    // marginLeft: 5,
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignSelf: 'center',
-    width: 28,
-    height: 20,
-  },
-  backIcon: {
-    width: 28,
-    height: 20,
-    alignSelf: 'center',
-    justifyContent: 'center',
-  },
-});
-
 export default CopyJoinInfo;

package/template/src/subComponents/EndcallPopup.tsx

@@ -0,0 +1,182 @@
+import React, {SetStateAction, useContext, useState} 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';
+import DownloadTranscriptBtn from './caption/DownloadTranscriptBtn';
+import ImageIcon from '../atoms/ImageIcon';
+import {useCaption} from './caption/useCaption';
+import {useString} from '../utils/useString';
+import {
+  leavePopupHeading,
+  leavePopupPrimaryBtnText,
+  leavePopupSubHeading,
+  sttDownloadBtnText,
+  sttTranscriptPanelHeaderText,
+} from '../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../language/default-labels/commonLabels';
+
+interface EndcallPopupProps {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  endCall: () => void;
+}
+
+const DownloadTranscript = () => {
+  const label = useString(sttTranscriptPanelHeaderText)();
+  const downloadLabel = useString(sttDownloadBtnText)();
+  return (
+    <View style={[styles.btnDownloadContainer, styles.row]}>
+      <View style={styles.row}>
+        <ImageIcon
+          iconType="plain"
+          name={'transcript-mode'}
+          tintColor={$config.FONT_COLOR}
+          iconSize={20}
+        />
+        <Spacer size={4} horizontal />
+        <Text style={styles.label}>{label}</Text>
+      </View>
+      <DownloadTranscriptBtn
+        textStyle={[styles.label, styles.downloadBtnText] as Object}
+        containerStyle={styles.downloadBtn}
+        iconName=""
+        text={downloadLabel}
+      />
+    </View>
+  );
+};
+
+const EndcallPopup = (props: EndcallPopupProps) => {
+  const isDesktop = useIsDesktop()('popup');
+  const leaveMeetingLabelHeading = useString(leavePopupHeading)();
+  const leaveMeetingLabelSubHeading = useString<boolean>(leavePopupSubHeading);
+  const leaveMeetingPopupActionButton = useString(leavePopupPrimaryBtnText)();
+  const cancelLabel = useString(cancelText)();
+  const {isSTTActive} = useCaption();
+  const isTranscriptAvailable =
+    $config.ENABLE_STT &&
+    $config.ENABLE_CAPTION &&
+    $config.ENABLE_MEETING_TRANSCRIPT &&
+    isSTTActive;
+
+  const stayBtnLabel = cancelLabel;
+  const leaveBtnLabel = leaveMeetingPopupActionButton;
+  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(isTranscriptAvailable)}
+      </Text>
+      {isTranscriptAvailable ? <DownloadTranscript /> : <></>}
+      <Spacer size={40} />
+      <View style={isDesktop ? styles.btnContainer : styles.btnContainerMobile}>
+        <View style={isDesktop && {flex: 1}}>
+          <TertiaryButton
+            containerStyle={{
+              width: '100%',
+              height: 48,
+              paddingVertical: 8,
+              paddingHorizontal: 40,
+              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: 8,
+              paddingHorizontal: 36,
+            }}
+            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,
+    maxWidth: 336,
+  },
+  downloadBtn: {
+    minWidth: 'auto',
+  },
+  btnDownloadContainer: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: $config.CARD_LAYER_2_COLOR,
+
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderRadius: 6,
+    marginTop: 20,
+  },
+  downloadBtnText: {
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  label: {
+    color: $config.FONT_COLOR,
+    fontSize: ThemeConfig.FontSize.tiny,
+    lineHeight: 20,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+  },
+  row: {
+    flexDirection: 'row',
+  },
+});

package/template/src/subComponents/FallbackLogo.tsx

@@ -10,48 +10,130 @@
 *********************************************
 */
 import React from 'react';
-import {Image, Text, View} from 'react-native';
+import {View, StyleSheet, useWindowDimensions} from 'react-native';
+import UserAvatar from '../atoms/UserAvatar';
+//import AnimatedRings from '../atoms/AnimatedRings';
+import {useLayout, useContent} from 'customization-api';
+import {BREAKPOINTS, isMobileUA} from '../utils/common';
+import {
+  getGridLayoutName,
+  getPinnedLayoutName,
+} from '../pages/video-call/DefaultLayouts';
 
-export default function FallbackLogo(name: string) {
-  // console.log('!', name);
+export default function FallbackLogo(
+  name: string,
+  isActiveSpeaker?: boolean,
+  hideAvatar?: boolean,
+  isMax?: boolean,
+  avatarSize?: number,
+) {
+  const {activeUids} = useContent();
+  const {currentLayout} = useLayout();
+  const {width} = useWindowDimensions();
+  const isSmall = width < BREAKPOINTS.xl;
+  const iconSize = Math.min(avatarSize, 100);
+  const textSize = Math.min(avatarSize * 0.35, 32);
   return (
-    <View
-      style={{
-        flex: 1,
-        backgroundColor: '#000',
-        justifyContent: 'center',
-        alignContent: 'center',
-        borderRadius: 15,
-      }}>
-      {/* <Image
-        source={{uri: $config.LOGO}}
-        style={{
-          height: '15%',
-        }}
-        resizeMode="contain"
-      /> */}
-      <View
-        style={{
-          width: 80,
-          height: 80,
-          backgroundColor: $config.PRIMARY_COLOR,
-          alignSelf: 'center',
-          alignContent: 'center',
-          justifyContent: 'center',
-          borderRadius: 10,
-          shadowColor: $config.PRIMARY_COLOR,
-          shadowRadius: 20,
-        }}>
-        <Text
-          style={{
-            color: $config.SECONDARY_FONT_COLOR,
-            fontSize: 20,
-            alignSelf: 'center',
-            textAlign: 'center',
-          }}>
-          {name ? name[0]?.toUpperCase() : 'U'}
-        </Text>
-      </View>
+    <View style={[styles.container]}>
+      {!hideAvatar ? (
+        // <View
+        //   style={[
+        //     styles.activeSpeakerBg,
+        //     (currentLayout === getGridLayoutName() && activeUids.length > 9) ||
+        //     (currentLayout === getPinnedLayoutName() && !isMax)
+        //       ? styles.activeSpeakerBgSmall
+        //       : {},
+        //     {
+        //       backgroundColor: isActiveSpeaker
+        //         ? $config.PRIMARY_ACTION_BRAND_COLOR +
+        //           hexadecimalTransparency['15%']
+        //         : 'transparent',
+        //     },
+        //   ]}>
+        <UserAvatar
+          name={name}
+          //name={avatarSize}
+          containerStyle={[
+            //  styles.avatarBg,
+            {
+              width: iconSize,
+              height: iconSize,
+              borderRadius: iconSize / 2,
+            },
+
+            // currentLayout === getPinnedLayoutName() && !isMax
+            //   ? styles.avatarBgSmall
+            //   : {},
+            // (!isMobileUA() &&
+            //   currentLayout === getGridLayoutName() &&
+            //   isSmall &&
+            //   activeUids.length > 9) ||
+            // (!isMobileUA() &&
+            //   currentLayout === getPinnedLayoutName() &&
+            //   isSmall &&
+            //   !isMax)
+            //   ? styles.avatarBgMobileUA
+            //   : {},
+            // isMobileUA() &&
+            // (activeUids.length > 4 ||
+            //   (currentLayout === getPinnedLayoutName() && !isMax))
+            //   ? styles.avatarBgMobileUA
+            //   : {},
+
+            {
+              backgroundColor: isActiveSpeaker
+                ? $config.PRIMARY_ACTION_BRAND_COLOR
+                : $config.VIDEO_AUDIO_TILE_AVATAR_COLOR,
+            },
+          ]}
+          textStyle={[
+            styles.textStyle,
+            {fontSize: textSize, lineHeight: textSize},
+          ]}
+        />
+      ) : (
+        //</View>
+        <></>
+      )}
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: $config.VIDEO_AUDIO_TILE_COLOR,
+    justifyContent: 'center',
+  },
+  // activeSpeakerBg: {
+  //   width: 140,
+  //   height: 140,
+  //   borderRadius: 80,
+  //   alignSelf: 'center',
+  //   justifyContent: 'center',
+  //   color: $config.VIDEO_AUDIO_TILE_COLOR,
+  // },
+  // activeSpeakerBgSmall: {
+  //   width: 80,
+  //   height: 80,
+  // },
+  avatarBg: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+  },
+  avatarBgSmall: {
+    width: 60,
+    height: 60,
+  },
+  avatarBgMobileUA: {
+    width: 45,
+    height: 45,
+  },
+  textStyle: {
+    fontSize: 32,
+    lineHeight: 32,
+    fontWeight: '600',
+    color: $config.CARD_LAYER_1_COLOR,
+  },
+});

package/template/src/subComponents/LanguageSelector.tsx

@@ -10,20 +10,20 @@
 *********************************************
 */
 import React, {useContext} from 'react';
-import {Picker, StyleSheet, Text} from 'react-native';
+import {StyleSheet, Text, View} from 'react-native';
 import ColorContext from '../components/ColorContext';
 import {useLanguage} from '../language/useLanguage';
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import {DEFAULT_I18_DATA} from '../language';
+import ThemeConfig from '../theme';
+import Dropdown from '../atoms/Dropdown';
+import {settingsPanelLanguageLabel} from '../language/default-labels/precallScreenLabels';
 
 const LanguageSelector = () => {
-  const {primaryColor} = useContext(ColorContext);
   const {languageCode, setLanguageCode} = useLanguage();
-  const languageData = useCustomization((data) => data?.i18n);
-  //commented for v1 release
-  //const languageText = useString('language')();
-  const languageText = 'Language';
+  const languageData = useCustomization(data => data?.i18n);
+  const languageText = useString(settingsPanelLanguageLabel)();
   if (!languageData || !languageData.length) {
     return <></>;
   }
@@ -35,40 +35,44 @@ const LanguageSelector = () => {
     return <></>;
   }
 
+  const data = [];
+
+  languageData.forEach(element => {
+    data.push({
+      label: element.label || element.locale,
+      value: element.locale,
+    });
+  });
+
   return (
-    <>
-      <Text style={style.heading}>{languageText}</Text>
-      <Picker
+    <View>
+      <Text style={style.label}>{languageText}</Text>
+      <Dropdown
+        icon={'lang-select'}
+        enabled={true}
         selectedValue={languageCode}
-        style={[{borderColor: primaryColor}, style.popupPicker]}
-        onValueChange={(itemValue) => setLanguageCode(itemValue)}>
-        {languageData.map((item) => {
-          return (
-            <Picker.Item
-              label={item.label || item.locale}
-              value={item.locale}
-              key={item.locale}
-            />
-          );
-        })}
-        {!languageData.filter((i) => i.locale === DEFAULT_I18_DATA.locale)
-          .length ? (
-          <Picker.Item
-            label={DEFAULT_I18_DATA.label || DEFAULT_I18_DATA.locale}
-            value={DEFAULT_I18_DATA.locale}
-            key={DEFAULT_I18_DATA.locale}
-          />
-        ) : null}
-      </Picker>
-    </>
+        label={''}
+        data={data}
+        onSelect={({value}) => {
+          setLanguageCode(value);
+        }}
+      />
+    </View>
   );
 };
 
 const style = StyleSheet.create({
+  label: {
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    marginBottom: 12,
+  },
   heading: {
     fontSize: 20,
     fontWeight: '700',
-    color: $config.PRIMARY_FONT_COLOR,
+    color: $config.FONT_COLOR,
     // marginBottom: 20,
     alignSelf: 'center',
   },