agora-appbuilder-core 4.0.0-api.5 → 4.0.0-api.6

package/template/src/subComponents/ToastConfig.tsx

@@ -21,24 +21,33 @@ import {IconsInterface} from 'src/atoms/CustomIcon';
 import {autoUpdater} from 'electron';
 
 const trailingIcon = (
-  <TouchableOpacity
-    onPress={() => Toast.hide()}
-    style={{alignSelf: 'flex-end'}}>
-    <View style={{width: 26, height: 26}}>
+  <TouchableOpacity onPress={() => Toast.hide()} style={{}}>
+    <ImageIcon
+      iconType="plain"
+      tintColor={$config.SECONDARY_ACTION_COLOR}
+      name="close"
+      iconSize={24}
+    />
+  </TouchableOpacity>
+);
+
+const leadingIcon = (iconName: keyof IconsInterface, color: string) => {
+  return (
+    <View style={{marginRight: 4, alignSelf: 'center'}}>
       <ImageIcon
         iconType="plain"
-        tintColor={$config.SECONDARY_ACTION_COLOR}
-        name="close"
-        iconSize={26}
+        tintColor={color}
+        name={iconName}
+        iconSize={20}
       />
     </View>
-  </TouchableOpacity>
-);
+  );
+};
 
-const leadingIcon = (iconName: keyof IconsInterface, color: string) => {
+const warnIcon = () => {
   return (
     <View style={{marginRight: 4, alignSelf: 'center', width: 26, height: 26}}>
-      <ImageIcon iconType="plain" tintColor={color} name={iconName} />
+      <ImageIcon base64={true} iconType="plain" name={'warning'} />
     </View>
   );
 };
@@ -48,21 +57,18 @@ const ToastConfig = {
       overwrite 'success' type, 
       modifying the existing `BaseToast` component
     */
-  success: ({text1, text2, props, ...rest}) => (
+  success: ({text1, text2, leadingIconName, props, ...rest}) => (
     <BaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
-      leadingIcon={leadingIcon('tick-fill', $config.SEMANTIC_SUCCESS)}
+      leadingIcon={leadingIcon(
+        leadingIconName ? leadingIconName : 'tick-fill',
+        $config.SEMANTIC_SUCCESS,
+      )}
       trailingIcon={trailingIcon}
       style={{
-        borderRadius: 4,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        //width: !isMobileOrTablet() ? '40%' : '95%',
-        width: '100%',
         borderTopColor: $config.SEMANTIC_SUCCESS,
       }}
-      contentContainerStyle={styles.contentContainerStyle}
       text1Style={styles.text1Style}
       text2Style={styles.text2Style}
       text1={text1}
@@ -71,21 +77,18 @@ const ToastConfig = {
       secondaryBtn={null}
     />
   ),
-  error: ({text1, text2, props, ...rest}) => (
+  error: ({text1, text2, leadingIconName, props, ...rest}) => (
     <BaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
-      leadingIcon={leadingIcon('alert', $config.SEMANTIC_ERROR)}
+      leadingIcon={leadingIcon(
+        leadingIconName ? leadingIconName : 'alert',
+        $config.SEMANTIC_ERROR,
+      )}
       trailingIcon={trailingIcon}
       style={{
-        borderRadius: 4,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        //width: !isMobileOrTablet() ? '40%' : '95%',
-        width: '100%',
         borderTopColor: $config.SEMANTIC_ERROR,
       }}
-      contentContainerStyle={styles.contentContainerStyle}
       text1Style={styles.text1Style}
       text2Style={styles.text2Style}
       text1={text1}
@@ -94,28 +97,54 @@ const ToastConfig = {
       secondaryBtn={null}
     />
   ),
-  info: ({text1, text2, props, primaryBtn, secondaryBtn, ...rest}) => (
+  warn: ({text1, text2, props, ...rest}) => (
     <BaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
+      leadingIcon={warnIcon()}
       trailingIcon={trailingIcon}
       style={{
-        height: 'auto', //primaryBtn || secondaryBtn ? 185 : text1 && text2 ? 105 : 70,
-        borderRadius: ThemeConfig.BorderRadius.small,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        width: '100%',
-        borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+        borderTopColor: '#FFAB00',
       }}
       contentContainerStyle={styles.contentContainerStyle}
       text1Style={styles.text1Style}
       text2Style={styles.text2Style}
       text1={text1}
       text2={text2}
-      primaryBtn={primaryBtn ? primaryBtn : null}
-      secondaryBtn={secondaryBtn ? secondaryBtn : null}
+      primaryBtn={null}
+      secondaryBtn={null}
     />
   ),
+  info: ({
+    text1,
+    text2,
+    props,
+    primaryBtn,
+    leadingIconName,
+    secondaryBtn,
+    ...rest
+  }) => {
+    return (
+      <BaseToast
+        {...rest}
+        //BaseToast is modified to have zIndex: 100
+        leadingIcon={leadingIcon(
+          leadingIconName ? leadingIconName : 'info',
+          $config.FONT_COLOR,
+        )}
+        trailingIcon={trailingIcon}
+        style={{
+          borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+        }}
+        text1Style={styles.text1Style}
+        text2Style={styles.text2Style}
+        text1={text1}
+        text2={text2}
+        primaryBtn={primaryBtn ? primaryBtn : null}
+        secondaryBtn={secondaryBtn ? secondaryBtn : null}
+      />
+    );
+  },
   checked: ({
     text1,
     text2,
@@ -123,21 +152,20 @@ const ToastConfig = {
     primaryBtn,
     secondaryBtn,
     checkbox,
+    leadingIconName,
     ...rest
   }) => (
     <CheckBoxBaseToast
       {...rest}
       //BaseToast is modified to have zIndex: 100
+      leadingIcon={leadingIcon(
+        leadingIconName ? leadingIconName : 'info',
+        $config.FONT_COLOR,
+      )}
       trailingIcon={trailingIcon}
       style={{
-        height: primaryBtn || secondaryBtn ? 185 : text1 && text2 ? 105 : 70,
-        borderRadius: 4,
-        borderTopWidth: 6,
-        backgroundColor: $config.CARD_LAYER_4_COLOR,
-        width: '100%',
         borderTopColor: $config.PRIMARY_ACTION_BRAND_COLOR,
       }}
-      contentContainerStyle={styles.contentContainerStyle}
       text1Style={styles.text1Style}
       text2Style={styles.text2Style}
       subTextStyle={styles.subTextStyle}
@@ -154,32 +182,13 @@ export default ToastConfig;
 
 const styles = StyleSheet.create({
   text1Style: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: 22,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '600',
     color: $config.FONT_COLOR,
     alignSelf: 'center',
   },
   text2Style: {
-    fontSize: ThemeConfig.FontSize.normal,
-    lineHeight: 22,
-    fontFamily: ThemeConfig.FontFamily.sansPro,
-    fontWeight: '400',
     color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
-    marginTop: 11,
-    alignSelf: 'center',
   },
   subTextStyle: {
     color: $config.FONT_COLOR + ThemeConfig.EmphasisPlus.medium,
   },
-  contentContainerStyle: {
-    paddingHorizontal: 15,
-    paddingTop: 20,
-    paddingBottom: 25,
-    overflow: 'hidden',
-    flexDirection: 'column',
-    justifyContent: 'flex-start',
-  },
-  containerStyle: {},
 });

package/template/src/subComponents/caption/Caption.tsx

@@ -0,0 +1,130 @@
+import {StyleSheet, View} from 'react-native';
+import React from 'react';
+import {useContent, useRtc} from 'customization-api';
+import {useCaption} from './useCaption';
+import CaptionText from './CaptionText';
+import Loading from '../Loading';
+import {isWebInternal} from '../../utils/common';
+import useStreamMessageUtils from './useStreamMessageUtils';
+import {StreamMessageCallback} from 'react-native-agora/lib/typescript/common/RtcEvents';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useString} from '../../utils/useString';
+import {sttSettingSpokenLanguageText} from '../../language/default-labels/videoCallScreenLabels';
+
+const Caption: React.FC = () => {
+  const {RtcEngineUnsafe} = useRtc();
+  const {
+    isLangChangeInProgress,
+    captionObj, //state for current live caption for all users
+    isSTTListenerAdded,
+    setIsSTTListenerAdded,
+    activeSpeakerRef,
+    prevSpeakerRef,
+  } = useCaption();
+  const ssLabel = useString(sttSettingSpokenLanguageText)();
+  const {streamMessageCallback} = useStreamMessageUtils();
+  const {defaultContent} = useContent();
+
+  const [activelinesAvailable, setActiveLinesAvailable] = React.useState(0);
+  const [inActiveLinesAvailable, setInActiveLinesAvaialble] = React.useState(0);
+
+  const handleStreamMessageCallback = (
+    ...args: [number, Uint8Array] | [number, string, Uint8Array]
+  ) => {
+    setIsSTTListenerAdded(true);
+    if (isWebInternal()) {
+      streamMessageCallback(args as [number, Uint8Array]);
+    } else {
+      const [uid, , data] = args;
+      const streamBuffer = Object.values(data);
+      streamMessageCallback([uid, new Uint8Array(streamBuffer)]);
+    }
+  };
+
+  React.useEffect(() => {
+    !isSTTListenerAdded &&
+      RtcEngineUnsafe.addListener(
+        'StreamMessage',
+        handleStreamMessageCallback as unknown as StreamMessageCallback,
+      );
+  }, []);
+
+  if (isLangChangeInProgress)
+    return (
+      <Loading
+        text={ssLabel}
+        background="transparent"
+        indicatorColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
+        textColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
+      />
+    );
+
+  console.log('current speaker uid', activeSpeakerRef.current);
+  console.log('prev current uid ', prevSpeakerRef.current);
+
+  const speakerCount = prevSpeakerRef.current === '' ? 1 : 2;
+
+  return (
+    <View style={styles.captionContainer}>
+      {
+        <>
+          {/* <Text
+            style={{
+              color: 'yellow',
+              position: 'absolute',
+              top: -25,
+              left: 180,
+            }}>
+            Active: {defaultContent[activeSpeakerRef.current]?.name || ''} Line :{' '}
+            {activelinesAvailable}
+          </Text>
+          <Text
+            style={{color: 'white', position: 'absolute', top: -25, left: 0}}>
+            Prev: {defaultContent[prevSpeakerRef.current]?.name || ' '} Line :
+            {Math.min(inActiveLinesAvailable, 3 - activelinesAvailable)}
+          </Text> */}
+
+          {captionObj[prevSpeakerRef.current] &&
+          captionObj[prevSpeakerRef.current].text ? (
+            <CaptionText
+              user={defaultContent[prevSpeakerRef.current].name || 'Speaker'}
+              value={captionObj[prevSpeakerRef.current].text}
+              activeSpeakersCount={speakerCount}
+              isActiveSpeaker={false}
+              activelinesAvailable={activelinesAvailable}
+              setActiveLinesAvailable={setActiveLinesAvailable}
+              inActiveLinesAvailable={inActiveLinesAvailable}
+              setInActiveLinesAvaialble={setInActiveLinesAvaialble}
+            />
+          ) : (
+            <></>
+          )}
+          {captionObj[activeSpeakerRef.current] &&
+          captionObj[activeSpeakerRef.current].text ? (
+            <CaptionText
+              user={defaultContent[activeSpeakerRef.current].name || 'Speaker'}
+              value={captionObj[activeSpeakerRef.current].text}
+              activeSpeakersCount={speakerCount}
+              isActiveSpeaker={true}
+              activelinesAvailable={activelinesAvailable}
+              setActiveLinesAvailable={setActiveLinesAvailable}
+              inActiveLinesAvailable={inActiveLinesAvailable}
+              setInActiveLinesAvaialble={setInActiveLinesAvaialble}
+            />
+          ) : (
+            <></>
+          )}
+        </>
+      }
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  captionContainer: {
+    width: '100%',
+    height: '100%',
+  },
+});
+
+export default React.memo(Caption);

package/template/src/subComponents/caption/CaptionContainer.tsx

@@ -0,0 +1,302 @@
+import {StyleSheet, Text, useWindowDimensions, View} from 'react-native';
+import React from 'react';
+
+import Caption from './Caption';
+import {useCaption} from './useCaption';
+import ThemeConfig from '../../../src/theme';
+import {
+  calculatePosition,
+  isMobileUA,
+  isWeb,
+  isWebInternal,
+  useIsDesktop,
+  useIsSmall,
+} from '../../utils/common';
+import IconButton from '../../../src/atoms/IconButton';
+
+import ActionMenu, {ActionMenuItem} from '../../../src/atoms/ActionMenu';
+
+import LanguageSelectorPopup from './LanguageSelectorPopup';
+import useSTTAPI from './useSTTAPI';
+import useGetName from '../../utils/useGetName';
+import {useRoomInfo} from 'customization-api';
+import {
+  SIDE_PANEL_MAX_WIDTH,
+  SIDE_PANEL_GAP,
+  SIDE_PANEL_MIN_WIDTH,
+  CAPTION_CONTAINER_HEIGHT,
+  MOBILE_CAPTION_CONTAINER_HEIGHT,
+} from '../../../src/components/CommonStyles';
+import useCaptionWidth from './useCaptionWidth';
+import {LanguageType} from './utils';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useString} from '../../utils/useString';
+import {
+  sttChangeSpokenLanguageText,
+  toolbarItemCaptionText,
+} from '../../language/default-labels/videoCallScreenLabels';
+
+const CaptionContainer = () => {
+  const moreIconRef = React.useRef<View>(null);
+  const [actionMenuVisible, setActionMenuVisible] =
+    React.useState<boolean>(false);
+  const [isHovered, setIsHovered] = React.useState<boolean>(false);
+  const isDesktop = useIsDesktop();
+  const isSmall = useIsSmall();
+  const {isLangChangeInProgress, isCaptionON} = useCaption();
+
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+
+  const {isCaptionNotFullWidth} = useCaptionWidth();
+  if (!isCaptionON) return <></>;
+
+  return (
+    <PlatformWrapper isHovered={isHovered} setIsHovered={setIsHovered}>
+      <View
+        style={[
+          {
+            paddingLeft: isMobileUA() ? 0 : isDesktop() ? 32 : 10,
+            paddingRight: isMobileUA()
+              ? 0
+              : isDesktop()
+              ? globalWidth > 1700 && isCaptionNotFullWidth
+                ? 20
+                : 32
+              : 10,
+          },
+          //@ts-ignore
+          isCaptionNotFullWidth && {
+            maxWidth: `calc(100% - ${SIDE_PANEL_MAX_WIDTH} - ${SIDE_PANEL_GAP}px )`,
+            width: `calc(100% - ${SIDE_PANEL_MIN_WIDTH}px - ${SIDE_PANEL_GAP}px )`,
+          },
+        ]}>
+        <View
+          style={[
+            isMobileUA() ? styles.mobileContainer : styles.container,
+            isMobileUA() && {marginHorizontal: 0},
+            !isMobileUA() && isSmall() && {marginTop: 0},
+          ]}>
+          <CaptionsActionMenu
+            actionMenuVisible={actionMenuVisible}
+            setActionMenuVisible={setActionMenuVisible}
+            btnRef={moreIconRef}
+          />
+
+          {(isHovered || isMobileUA()) && !isLangChangeInProgress && (
+            <MoreMenu
+              ref={moreIconRef}
+              setActionMenuVisible={setActionMenuVisible}
+            />
+          )}
+
+          <Caption />
+        </View>
+      </View>
+    </PlatformWrapper>
+  );
+};
+
+const PlatformWrapper = ({children, setIsHovered, isHovered}) => {
+  return isWebInternal() && !isMobileUA() ? (
+    <div
+      onMouseOver={() => {
+        !isHovered && setIsHovered(true);
+      }}
+      onMouseLeave={() => {
+        setIsHovered(false);
+      }}>
+      {children}
+    </div>
+  ) : (
+    <>{children}</>
+  );
+};
+
+interface MoreMenuProps {
+  setActionMenuVisible: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MoreMenu = React.forwardRef<View, MoreMenuProps>((props, ref) => {
+  const {setActionMenuVisible} = props;
+  const isMobile = isMobileUA();
+  return (
+    <View
+      ref={ref}
+      collapsable={false}
+      style={{
+        width: 32,
+        height: 32,
+        alignSelf: 'center',
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 20,
+        position: 'absolute',
+        right: isMobile ? 3 : 8,
+        top: isMobile ? 3 : 8,
+        zIndex: 999,
+      }}>
+      <IconButton
+        hoverEffect={true}
+        hoverEffectStyle={{
+          backgroundColor:
+            $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%'],
+          borderRadius: 20,
+        }}
+        iconProps={{
+          iconType: 'plain',
+          name: 'more-menu',
+          iconSize: isMobile ? 18 : 20,
+          tintColor: $config.SECONDARY_ACTION_COLOR,
+          iconContainerStyle: {
+            padding: isMobile ? 6 : 8,
+            borderRadius: 20,
+            backgroundColor: isMobile
+              ? $config.CARD_LAYER_5_COLOR + hexadecimalTransparency['25%']
+              : 'transparent',
+          },
+        }}
+        onPress={() => {
+          setActionMenuVisible(true);
+        }}
+      />
+    </View>
+  );
+});
+
+interface CaptionsActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: (actionMenuVisible: boolean) => void;
+  btnRef: React.RefObject<View>;
+}
+
+const CaptionsActionMenu = (props: CaptionsActionMenuProps) => {
+  const {actionMenuVisible, setActionMenuVisible, btnRef} = props;
+  const {
+    setIsCaptionON,
+    language: prevLang,
+    isLangChangeInProgress,
+    setLanguage,
+  } = useCaption();
+  const actionMenuitems: ActionMenuItem[] = [];
+  const [modalPosition, setModalPosition] = React.useState({});
+  const [isPosCalculated, setIsPosCalculated] = React.useState(false);
+  const {width: globalWidth, height: globalHeight} = useWindowDimensions();
+  const [isLanguagePopupOpen, setLanguagePopup] =
+    React.useState<boolean>(false);
+  const {restart} = useSTTAPI();
+  const username = useGetName();
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const changeSpokenLangLabel = useString<boolean>(
+    sttChangeSpokenLanguageText,
+  )();
+
+  const hideCaptionLabel = useString<boolean>(toolbarItemCaptionText)(true);
+
+  // only Host is authorized to start/stop stt
+  isHost &&
+    actionMenuitems.push({
+      icon: 'lang-select',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: changeSpokenLangLabel + ' ',
+      disabled: isLangChangeInProgress,
+      callback: () => {
+        setActionMenuVisible(false);
+        setLanguagePopup(true);
+      },
+    });
+
+  actionMenuitems.push({
+    icon: 'captions-off',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: hideCaptionLabel,
+    callback: () => {
+      setActionMenuVisible(false);
+      setIsCaptionON(false);
+    },
+  });
+
+  const onLanguageChange = (langChanged = false, language: LanguageType[]) => {
+    setLanguagePopup(false);
+    if (langChanged) {
+      restart(language)
+        .then(() => {
+          console.log('stt restarted successfully');
+        })
+        .catch(error => {
+          console.log('Error in restarting', error);
+          // Handle the error case
+        });
+    }
+  };
+
+  React.useEffect(() => {
+    if (actionMenuVisible) {
+      //getting btnRef x,y
+      btnRef?.current?.measure(
+        (
+          _fx: number,
+          _fy: number,
+          localWidth: number,
+          localHeight: number,
+          px: number,
+          py: number,
+        ) => {
+          const data = calculatePosition({
+            px,
+            py,
+            localWidth,
+            localHeight,
+            globalHeight,
+            globalWidth,
+          });
+          setModalPosition(data);
+          setIsPosCalculated(true);
+        },
+      );
+    }
+  }, [actionMenuVisible]);
+  return (
+    <>
+      <ActionMenu
+        from={'caption'}
+        actionMenuVisible={actionMenuVisible && isPosCalculated}
+        setActionMenuVisible={setActionMenuVisible}
+        modalPosition={modalPosition}
+        items={actionMenuitems}
+      />
+      <LanguageSelectorPopup
+        modalVisible={isLanguagePopupOpen}
+        setModalVisible={setLanguagePopup}
+        onConfirm={onLanguageChange}
+      />
+    </>
+  );
+};
+
+export default CaptionContainer;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    paddingHorizontal: 20,
+    height: CAPTION_CONTAINER_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    marginTop: 8,
+  },
+  mobileContainer: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    height: MOBILE_CAPTION_CONTAINER_HEIGHT,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    marginTop: 8,
+  },
+});