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

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

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

@@ -0,0 +1,192 @@
+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';
+import {useCaption} from './useCaption';
+import DropdownMulti from '../../atoms/DropDownMulti';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import Loading from '../Loading';
+import {LanguageType} from './utils';
+import {useString} from '../../utils/useString';
+import {
+  sttChangeLanguagePopupDropdownError,
+  sttChangeLanguagePopupDropdownInfo,
+  sttChangeLanguagePopupHeading,
+  sttChangeLanguagePopupPrimaryBtnText,
+  sttChangeLanguagePopupSubHeading,
+  sttLanguageChangeInProgress,
+} from '../../language/default-labels/videoCallScreenLabels';
+import {cancelText} from '../../language/default-labels/commonLabels';
+
+interface LanguageSelectorPopup {
+  modalVisible: boolean;
+  setModalVisible: React.Dispatch<SetStateAction<boolean>>;
+  onConfirm: (param: boolean, lang: LanguageType[]) => void;
+  isFirstTimePopupOpen?: boolean;
+}
+
+const LanguageSelectorPopup = (props: LanguageSelectorPopup) => {
+  const {isFirstTimePopupOpen = false} = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const isDesktop = useIsDesktop()('popup');
+  const heading = useString<boolean>(sttChangeLanguagePopupHeading);
+  const subHeading = useString(sttChangeLanguagePopupSubHeading)();
+  const cancelBtnLabel = useString(cancelText)();
+  const ConfirmBtnLabel = useString(sttChangeLanguagePopupPrimaryBtnText)();
+  const ddError = useString(sttChangeLanguagePopupDropdownError)();
+  const ddInfo = useString(sttChangeLanguagePopupDropdownInfo)();
+  const languageChangeInProgress = useString(sttLanguageChangeInProgress)();
+  const {language, setLanguage, isLangChangeInProgress, isSTTActive} =
+    useCaption();
+
+  const [error, setError] = React.useState<boolean>(false);
+  const [selectedValues, setSelectedValues] =
+    React.useState<LanguageType[]>(language);
+  const isNotValidated =
+    isOpen && (selectedValues.length === 0 || selectedValues.length === 2);
+
+  // React.useEffect(() => setSelectedValues(() => language), []);
+
+  return (
+    <Popup
+      modalVisible={props.modalVisible}
+      setModalVisible={props.setModalVisible}
+      showCloseIcon={true}
+      contentContainerStyle={styles.contentContainer}
+      title={heading(isFirstTimePopupOpen)}
+      subtitle={subHeading}>
+      {isLangChangeInProgress ? (
+        <View style={styles.changeInProgress}>
+          <Loading
+            text={languageChangeInProgress}
+            background="transparent"
+            indicatorColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
+            textColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
+          />
+        </View>
+      ) : (
+        <>
+          <View>
+            <DropdownMulti
+              selectedValues={selectedValues}
+              setSelectedValues={setSelectedValues}
+              defaultSelectedValues={
+                language.indexOf('') === -1 ? language : ['en-US']
+              }
+              error={error}
+              setError={setError}
+              isOpen={isOpen}
+              setIsOpen={setIsOpen}
+            />
+          </View>
+          <Spacer size={8} />
+          <Text style={[styles.subHeading, isNotValidated && styles.errorTxt]}>
+            {selectedValues.length === 0 ? ddError : ddInfo}
+          </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={cancelBtnLabel}
+                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,
+                  paddingVertical: 12,
+                  paddingHorizontal: 12,
+                }}
+                disabled={selectedValues.length === 0}
+                text={ConfirmBtnLabel}
+                textStyle={styles.btnText}
+                onPress={() => {
+                  console.log(selectedValues);
+                  console.log(language);
+
+                  if (selectedValues.length === 0) {
+                    // setError(true);
+                    return;
+                  }
+                  const lang1 = language.slice().sort().toString();
+                  const lang2 = selectedValues.slice().sort().toString();
+                  const isLangChanged = lang1 !== lang2 || !isSTTActive;
+                  props.onConfirm(isLangChanged, selectedValues);
+                }}
+              />
+            </View>
+          </View>
+        </>
+      )}
+    </Popup>
+  );
+};
+
+export default LanguageSelectorPopup;
+
+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,
+    maxWidth: 446,
+    width: '100%',
+  },
+  heading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '600',
+    fontSize: 22,
+    lineHeight: 24,
+    color: $config.FONT_COLOR,
+  },
+  subHeading: {
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 20,
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+  },
+
+  errorTxt: {
+    color: $config.SEMANTIC_WARNING,
+    fontWeight: '600',
+  },
+  changeInProgress: {
+    width: '100%',
+    height: 162,
+    alignSelf: 'center',
+  },
+});