agora-appbuilder-core 4.0.0 → 4.0.1

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,
+  },
+});

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

@@ -0,0 +1,111 @@
+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';
+
+interface CaptionIconProps {
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  showLabel?: boolean;
+  disabled?: boolean;
+  isOnActionSheet?: boolean;
+  isMobileView?: boolean;
+  closeActionSheet?: () => void;
+}
+
+const CaptionIcon = (props: CaptionIconProps) => {
+  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 iconButtonProps: IconButtonProps = {
+    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);
+      }
+    },
+    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
+          ? label?.replace(' ', '\n')
+          : 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;

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

@@ -0,0 +1,182 @@
+import {Text, View, StyleSheet, LayoutChangeEvent} from 'react-native';
+import React from 'react';
+
+import ThemeConfig from '../../../src/theme';
+import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
+import {isAndroid, isMobileUA} from '../../utils/common';
+
+interface CaptionTextProps {
+  user: string;
+  value: string;
+  activeSpeakersCount: number;
+  isActiveSpeaker?: boolean;
+  activelinesAvailable?: number;
+  setActiveLinesAvailable?: React.Dispatch<React.SetStateAction<number>>;
+  inActiveLinesAvailable?: number;
+  setInActiveLinesAvaialble?: React.Dispatch<React.SetStateAction<number>>;
+}
+
+const DESKTOP_LINE_HEIGHT = 28;
+const MOBILE_LINE_HEIGHT = 21;
+const MAX_CAPTIONS_LINES_ALLOWED = 3;
+
+const CaptionText = ({
+  user,
+  value,
+  activeSpeakersCount,
+  isActiveSpeaker = false,
+  activelinesAvailable,
+  setActiveLinesAvailable,
+  inActiveLinesAvailable,
+  setInActiveLinesAvaialble,
+}: CaptionTextProps) => {
+  const isMobile = isMobileUA();
+
+  const LINE_HEIGHT = isMobile ? MOBILE_LINE_HEIGHT : DESKTOP_LINE_HEIGHT;
+
+  // callback triggers whenevere captions reaches next line
+  const handleTextLayout = (event: LayoutChangeEvent) => {
+    let textHeight = event.nativeEvent.layout.height; // height of the <Text>
+
+    /* safari at only zoom level 85% gives value as 27,54,81... for lineHeight instead of 28,56,84... */
+    /* IOS,Androis gives 21.33 instead of 21 */
+    /* so added the threshold of 1 in isDiffLineHeight */
+
+    const lineHeightOffset = textHeight % LINE_HEIGHT;
+    const isDiffLineHeight = lineHeightOffset > 1;
+    const isLineHeightGreater = lineHeightOffset < 15;
+    const delta = isDiffLineHeight
+      ? isLineHeightGreater
+        ? -lineHeightOffset
+        : LINE_HEIGHT - lineHeightOffset
+      : 0;
+
+    const currentLines = Math.floor((textHeight + delta) / LINE_HEIGHT); // calculate numberOfLines
+    const currentAllowedLines = Math.min(
+      currentLines,
+      MAX_CAPTIONS_LINES_ALLOWED,
+    );
+
+    if (isActiveSpeaker) {
+      setActiveLinesAvailable(currentAllowedLines);
+    } else {
+      setInActiveLinesAvaialble(currentAllowedLines);
+    }
+  };
+
+  /**
+   * Total 5 lines (2-nameTags, MAX_CAPTIONS_LINES_ALLOWED-captions) => 1/5 = 0.2 flex for 1 line
+   * activeSpeaker Container will take flex depending on number of lines taken + 1 (name tag)
+   * prevSpeaker Conatiner will take 1 - flex , calculated in prev step
+   * If activeSpaker has three lines , then it will take entire space with flex:1 and preSpeaker flex:0
+   *
+   */
+
+  return (
+    <View
+      style={[
+        styles.captionContainer,
+        {borderColor: isActiveSpeaker ? 'yellow' : 'white'},
+        {
+          flex:
+            activeSpeakersCount === 1
+              ? 1
+              : isActiveSpeaker
+              ? activelinesAvailable === MAX_CAPTIONS_LINES_ALLOWED
+                ? 1
+                : (activelinesAvailable + 1) * 0.2
+              : activelinesAvailable === MAX_CAPTIONS_LINES_ALLOWED
+              ? 0
+              : 1 - (activelinesAvailable + 1) * 0.2,
+        },
+        !isActiveSpeaker && activelinesAvailable === 3 && {height: 0},
+      ]}>
+      <Text
+        style={[
+          styles.captionUserName,
+          isMobile ? styles.mobileNameFontSize : styles.desktopNameFontSize,
+        ]}
+        numberOfLines={1}
+        textBreakStrategy="simple"
+        ellipsizeMode="tail">
+        {user}
+      </Text>
+      <View
+        style={[
+          styles.captionTextContainerStyle,
+          {
+            height:
+              (isActiveSpeaker
+                ? activelinesAvailable
+                : Math.min(
+                    inActiveLinesAvailable,
+                    MAX_CAPTIONS_LINES_ALLOWED - activelinesAvailable,
+                  )) * LINE_HEIGHT,
+          },
+        ]}>
+        <Text
+          onLayout={handleTextLayout}
+          style={[
+            styles.captionText,
+            isMobile
+              ? styles.mobileCaptionFontSize
+              : styles.desktopCaptionFontSize,
+            isAndroid() && {lineHeight: MOBILE_LINE_HEIGHT - 2},
+          ]}>
+          {value}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+export default CaptionText;
+
+const styles = StyleSheet.create({
+  captionContainer: {
+    alignItems: 'flex-start',
+    alignSelf: 'center',
+    width: '100%',
+    maxWidth: 620,
+    justifyContent: 'flex-end',
+    borderStyle: 'dotted',
+  },
+
+  captionTextContainerStyle: {
+    overflow: 'hidden',
+    width: '100%',
+    position: 'relative',
+  },
+
+  captionText: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    color: $config.FONT_COLOR,
+    position: 'absolute',
+    bottom: 0,
+  },
+
+  captionUserName: {
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+    fontSize: ThemeConfig.FontSize.medium,
+    maxWidth: 200,
+  },
+  mobileNameFontSize: {
+    fontSize: 16,
+    lineHeight: 19,
+  },
+  desktopNameFontSize: {
+    fontSize: 18,
+    lineHeight: 22,
+  },
+  mobileCaptionFontSize: {
+    fontSize: 16,
+    lineHeight: MOBILE_LINE_HEIGHT,
+  },
+  desktopCaptionFontSize: {
+    fontSize: 24,
+    lineHeight: DESKTOP_LINE_HEIGHT,
+  },
+});

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

@@ -0,0 +1,65 @@
+import {StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
+import React from 'react';
+import {useCaption} from './useCaption';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import useTranscriptDownload from './useTranscriptDownload';
+import ThemeConfig from '../../../src/theme';
+import {IconsInterface} from '../../../src/atoms/CustomIcon';
+import {useString} from '../../../src/utils/useString';
+import {sttDownloadTranscriptBtnText} from '../../../src/language/default-labels/videoCallScreenLabels';
+
+interface DownloadTranscriptBtn {
+  textStyle?: TextStyle;
+  containerStyle?: ViewStyle;
+  iconName?: keyof IconsInterface;
+  text?: string;
+}
+
+const DownloadTranscriptBtn = (props: DownloadTranscriptBtn) => {
+  const downloadTranscriptLabel = useString(sttDownloadTranscriptBtnText)();
+  const {
+    textStyle = {},
+    containerStyle = {},
+    iconName = 'download',
+    text = downloadTranscriptLabel,
+  } = props;
+  const {isSTTActive} = useCaption();
+  const {downloadTranscript} = useTranscriptDownload();
+  return (
+    <View style={styles.btnContainer}>
+      <PrimaryButton
+        iconSize={20}
+        iconColor={$config.FONT_COLOR}
+        iconName={iconName}
+        containerStyle={[styles.btnContainerStyle, containerStyle] as Object}
+        textStyle={[styles.btnTxtStyle, textStyle] as Object}
+        onPress={() => {
+          downloadTranscript();
+        }}
+        text={text}
+      />
+    </View>
+  );
+};
+
+export default DownloadTranscriptBtn;
+
+const styles = StyleSheet.create({
+  btnContainerStyle: {
+    paddingVertical: 0,
+    paddingHorizontal: 0,
+    backgroundColor: 'transparent',
+    borderRadius: 4,
+  },
+  btnContainer: {
+    // margin: 20,
+  },
+
+  btnTxtStyle: {
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: ThemeConfig.FontSize.small,
+    fontWeight: '600',
+    textTransform: 'capitalize',
+    color: $config.FONT_COLOR,
+  },
+});