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

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

@@ -0,0 +1,132 @@
+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 hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useString} from '../../utils/useString';
+import {sttSettingSpokenLanguageText} from '../../language/default-labels/videoCallScreenLabels';
+
+type WebStreamMessageArgs = [number, Uint8Array];
+type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
+type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
+
+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: StreamMessageArgs) => {
+    setIsSTTListenerAdded(true);
+    if (isWebInternal()) {
+      const [uid, data] = args as WebStreamMessageArgs;
+      streamMessageCallback([uid, data]);
+    } else {
+      const [, uid, , data] = args as NativeStreamMessageArgs;
+      streamMessageCallback([uid, data]);
+    }
+  };
+
+  React.useEffect(() => {
+    !isSTTListenerAdded &&
+      RtcEngineUnsafe.addListener(
+        'onStreamMessage',
+        handleStreamMessageCallback,
+      );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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,331 @@
+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';
+import {logger, LogSource} from '../../logger/AppBuilderLogger';
+
+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()
+              ? $config.ICON_TEXT
+                ? 32
+                : 0
+              : 10,
+            paddingRight: isMobileUA()
+              ? 0
+              : isDesktop()
+              ? globalWidth > 1700 && isCaptionNotFullWidth
+                ? $config.ICON_TEXT
+                  ? 20
+                  : 0
+                : $config.ICON_TEXT
+                ? 32
+                : 0
+              : 10,
+          },
+          //@ts-ignore
+          isCaptionNotFullWidth && {
+            maxWidth: `calc(100% - ${SIDE_PANEL_MAX_WIDTH} - ${
+              SIDE_PANEL_GAP + 1
+            }px )`,
+            width: `calc(100% - ${SIDE_PANEL_MIN_WIDTH}px - ${
+              SIDE_PANEL_GAP + 1
+            }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,
+      onPress: () => {
+        setActionMenuVisible(false);
+        setLanguagePopup(true);
+      },
+    });
+
+  actionMenuitems.push({
+    icon: 'captions-off',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: hideCaptionLabel,
+    onPress: () => {
+      setActionMenuVisible(false);
+      setIsCaptionON(false);
+    },
+  });
+
+  const onLanguageChange = (langChanged = false, language: LanguageType[]) => {
+    setLanguagePopup(false);
+    if (langChanged) {
+      logger.log(
+        LogSource.Internals,
+        'STT',
+        `Language changed to  ${language}. Restarting STT`,
+      );
+      restart(language)
+        .then(() => {
+          logger.debug(
+            LogSource.Internals,
+            'STT',
+            'stt restarted successfully',
+          );
+        })
+        .catch(error => {
+          logger.error(
+            LogSource.Internals,
+            'STT',
+            '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: $config.ICON_TEXT ? 8 : 0,
+  },
+  mobileContainer: {
+    paddingVertical: 4,
+    paddingHorizontal: 8,
+    height: MOBILE_CAPTION_CONTAINER_HEIGHT,
+    backgroundColor: $config.CARD_LAYER_1_COLOR,
+    borderRadius: ThemeConfig.BorderRadius.small,
+    marginTop: 8,
+  },
+});

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

@@ -0,0 +1,115 @@
+import {View} from 'react-native';
+import React from 'react';
+import IconButton, {IconButtonProps} from '../../atoms/IconButton';
+import {useCaption} from './useCaption';
+import LanguageSelectorPopup from './LanguageSelectorPopup';
+import useSTTAPI from './useSTTAPI';
+import {useString} from '../../utils/useString';
+import {toolbarItemCaptionText} from '../../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../../atoms/ToolbarItem';
+
+interface CaptionIconProps {
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  showLabel?: boolean;
+  disabled?: boolean;
+  isOnActionSheet?: boolean;
+  isMobileView?: boolean;
+  closeActionSheet?: () => void;
+}
+
+const CaptionIcon = (props: CaptionIconProps) => {
+  const {label: labelCustom = null, onPress: onPressCustom = null} =
+    useToolbarProps();
+  const {
+    showLabel = $config.ICON_TEXT,
+    isOnActionSheet = false,
+    closeActionSheet,
+  } = props;
+  const {isCaptionON, setIsCaptionON, isSTTActive, isSTTError} = useCaption();
+
+  const [isLanguagePopupOpen, setLanguagePopup] =
+    React.useState<boolean>(false);
+
+  const isFirstTimePopupOpen = React.useRef(false);
+  const {start, restart, isAuthorizedSTTUser} = useSTTAPI();
+  const isDisabled = !isAuthorizedSTTUser();
+  const captionLabel = useString<boolean>(toolbarItemCaptionText);
+  const label = captionLabel(isCaptionON);
+  const onPress = () => {
+    if (isSTTError) {
+      setIsCaptionON(prev => !prev);
+      closeActionSheet();
+      return;
+    }
+    if (isSTTActive) {
+      // is lang popup has been shown once for any user in meeting
+      setIsCaptionON(prev => !prev);
+      closeActionSheet();
+    } else {
+      isFirstTimePopupOpen.current = true;
+      setLanguagePopup(true);
+    }
+  };
+  const iconButtonProps: IconButtonProps = {
+    onPress: onPressCustom || onPress,
+    disabled: isDisabled,
+    iconProps: {
+      name: isCaptionON ? 'captions-off' : 'captions',
+      iconBackgroundColor: isCaptionON
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+      tintColor: isDisabled
+        ? $config.SEMANTIC_NEUTRAL
+        : isCaptionON
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+    },
+    btnTextProps: {
+      text: showLabel
+        ? isOnActionSheet
+          ? labelCustom || label?.replace(' ', '\n')
+          : labelCustom || label
+        : '',
+      textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (!isOnActionSheet) {
+    iconButtonProps.toolTipMessage = label;
+  }
+
+  const onConfirm = async (langChanged, language) => {
+    setLanguagePopup(false);
+    closeActionSheet();
+    isFirstTimePopupOpen.current = false;
+    const method = isCaptionON ? 'stop' : 'start';
+    if (method === 'stop') return; // not closing the stt service as it will stop for whole channel
+    if (method === 'start' && isSTTActive === true) return; // not triggering the start service if STT Service already started by anyone else in the channel
+    setIsCaptionON(prev => !prev);
+    try {
+      const res = await start(language);
+      if (res?.message.includes('STARTED')) {
+        // channel is already started now restart
+        await restart(language);
+      }
+    } catch (error) {
+      console.log('eror in starting stt', error);
+    }
+  };
+
+  return (
+    <View>
+      <IconButton {...iconButtonProps} />
+      <LanguageSelectorPopup
+        modalVisible={isLanguagePopupOpen}
+        setModalVisible={setLanguagePopup}
+        onConfirm={onConfirm}
+        isFirstTimePopupOpen={isFirstTimePopupOpen.current}
+      />
+    </View>
+  );
+};
+
+export default CaptionIcon;