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

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

@@ -0,0 +1,452 @@
+import {
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Text,
+  Platform,
+  NativeSyntheticEvent,
+  NativeScrollEvent,
+  VirtualizedList,
+} from 'react-native';
+import React from 'react';
+import CommonStyles from '../../components/CommonStyles';
+import {getGridLayoutName} from '../../pages/video-call/DefaultLayouts';
+import {useLayout} from '../../utils/useLayout';
+import {
+  calculatePosition,
+  debounceFn,
+  isMobileUA,
+  isWebInternal,
+  useIsSmall,
+} from '../../utils/common';
+import {TranscriptHeader} from '../../pages/video-call/SidePanelHeader';
+import {useRtc, useContent} from 'customization-api';
+import {useCaption} from './useCaption';
+import {TranscriptText} from './TranscriptText';
+import PrimaryButton from '../../atoms/PrimaryButton';
+import ThemeConfig from '../../theme';
+import Loading from '../Loading';
+import ImageIcon from '../../atoms/ImageIcon';
+import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
+import Spacer from '../../atoms/Spacer';
+import useStreamMessageUtils from './useStreamMessageUtils';
+import useCaptionWidth from './useCaptionWidth';
+import DownloadTranscriptBtn from './DownloadTranscriptBtn';
+import {useString} from '../../../src/utils/useString';
+import {
+  sttSettingSpokenLanguageText,
+  sttTranscriptPanelNoSearchResultsFoundText,
+  sttTranscriptPanelSearchText,
+  sttTranscriptPanelViewLatestText,
+} from '../../../src/language/default-labels/videoCallScreenLabels';
+
+export interface TranscriptProps {
+  showHeader?: boolean;
+}
+
+type WebStreamMessageArgs = [number, Uint8Array];
+type NativeStreamMessageArgs = [{}, number, number, Uint8Array, number, number];
+type StreamMessageArgs = WebStreamMessageArgs | NativeStreamMessageArgs;
+
+const Transcript = (props: TranscriptProps) => {
+  const settingSpokenLanguageLabel = useString(sttSettingSpokenLanguageText)();
+  const searchText = useString(sttTranscriptPanelSearchText)();
+  const noresults = useString(sttTranscriptPanelNoSearchResultsFoundText)();
+  const viewlatest = useString(sttTranscriptPanelViewLatestText)();
+
+  const isSmall = useIsSmall();
+  const {currentLayout} = useLayout();
+  const {showHeader = true} = props;
+  const {
+    meetingTranscript,
+    isLangChangeInProgress,
+    isSTTListenerAdded,
+    setIsSTTListenerAdded,
+  } = useCaption();
+
+  const data = meetingTranscript; // Object.entries(transcript);
+
+  const [showButton, setShowButton] = React.useState(false);
+
+  const contentHeightRef = React.useRef(0);
+  const flatListRef = React.useRef(null);
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [searchResults, setSearchResults] = React.useState([]);
+  const {RtcEngineUnsafe} = useRtc();
+  const {defaultContent} = useContent();
+  const {streamMessageCallback} = useStreamMessageUtils();
+
+  const [isFocused, setIsFocused] = React.useState(false);
+
+  const {transcriptHeight} = useCaptionWidth();
+  const isScrolledToEnd = React.useRef(false);
+
+  const handleFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  const handleLayout = () => {
+    if (flatListRef.current && !isWebInternal()) {
+      flatListRef.current.scrollToOffset({
+        offset: contentHeightRef.current,
+        animated: false,
+      });
+
+      isScrolledToEnd.current = true;
+    }
+  };
+
+  const renderItem = ({item}) => {
+    return item.uid.toString().indexOf('langUpdate') !== -1 ? (
+      <View style={styles.langChangeContainer}>
+        <ImageIcon
+          iconType="plain"
+          iconSize={20}
+          tintColor={$config.PRIMARY_ACTION_BRAND_COLOR}
+          name={'lang-select'}
+        />
+
+        <Text style={styles.langChange}>
+          {defaultContent[item?.uid?.split('-')[1]].name + ' ' + item.text}
+        </Text>
+      </View>
+    ) : (
+      <TranscriptText
+        user={defaultContent[item.uid].name}
+        time={item?.time}
+        value={item.text}
+        searchQuery={searchQuery}
+      />
+    );
+  };
+
+  const handleViewLatest = () => {
+    // flatListRef.current.scrollToOffset({
+    //   offset: contentHeightRef.current,
+    //   animated: false,
+    // });
+    if (flatListRef.current) {
+      flatListRef.current.scrollToEnd({animated: false});
+      setShowButton(false);
+      isScrolledToEnd.current = true;
+    }
+  };
+
+  const handleContentSizeChange = (contentWidth, contentHeight) => {
+    contentHeightRef.current = contentHeight;
+    if (!showButton && searchQuery.length === 0) {
+      flatListRef.current.scrollToOffset({
+        offset: contentHeightRef.current,
+        animated: false,
+      });
+
+      isScrolledToEnd.current = true;
+    }
+  };
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    if (isScrolledToEnd.current) {
+      isScrolledToEnd.current = false;
+      return;
+    }
+
+    const {contentOffset, contentSize, layoutMeasurement} = event.nativeEvent;
+    const isAtBottom =
+      contentOffset.y + layoutMeasurement.height >= contentSize.height - 1; // -1 threshold when the exact bottom position not calcualted , diff ~.5
+    setShowButton(!isAtBottom);
+  };
+
+  const handleSearch = (text: string) => {
+    setSearchQuery(text);
+    // Filter the data based on the search query
+    const filteredResults = meetingTranscript.filter(item =>
+      item.text.toLowerCase().includes(text.toLowerCase()),
+    );
+    setShowButton(false);
+    setSearchResults(filteredResults);
+    // Scroll to the top of the FlatList when searching
+    flatListRef.current.scrollToOffset({offset: 0, animated: false});
+  };
+
+  const renderedData = searchQuery ? searchResults : data;
+
+  const NoResultsMsg = () => {
+    return <Text style={styles.emptyMsg}>{noresults}</Text>;
+  };
+
+  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(() => {
+    if (!isSTTListenerAdded) {
+      RtcEngineUnsafe.addListener(
+        'onStreamMessage',
+        handleStreamMessageCallback,
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <View
+      // onLayout={handleLayout}
+      style={[
+        isMobileUA()
+          ? //mobile and mobile web
+            CommonStyles.sidePanelContainerNative
+          : isSmall()
+          ? // desktop minimized
+            CommonStyles.sidePanelContainerWebMinimzed
+          : // desktop maximized
+            CommonStyles.sidePanelContainerWeb,
+        isWebInternal() && !isSmall() && currentLayout === getGridLayoutName()
+          ? {marginVertical: 4}
+          : {},
+        //@ts-ignore
+        transcriptHeight && !isMobileUA() && {height: transcriptHeight},
+        {paddingBottom: 20},
+      ]}>
+      {showHeader && <TranscriptHeader />}
+      <View style={[styles.searchContainer, isFocused && styles.inputFocused]}>
+        {!searchQuery && (
+          <>
+            <ImageIcon
+              name="search"
+              iconSize={20}
+              iconType="plain"
+              tintColor={$config.FONT_COLOR + hexadecimalTransparency['30%']}
+            />
+            <Spacer size={4} horizontal />
+          </>
+        )}
+        <TextInput
+          style={styles.searchInput}
+          placeholder={searchText}
+          value={searchQuery}
+          onChangeText={handleSearch}
+          placeholderTextColor={
+            $config.FONT_COLOR + hexadecimalTransparency['30%']
+          }
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {searchQuery ? (
+          <TouchableOpacity
+            onPress={() => {
+              setSearchQuery('');
+            }}>
+            <ImageIcon
+              name="close"
+              iconSize={20}
+              iconType="plain"
+              tintColor={$config.FONT_COLOR + hexadecimalTransparency['30%']}
+            />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+      {isLangChangeInProgress ? (
+        <View style={{flex: 1}}>
+          <Loading
+            text={settingSpokenLanguageLabel}
+            background="transparent"
+            indicatorColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
+            textColor={$config.FONT_COLOR + hexadecimalTransparency['70%']}
+          />
+        </View>
+      ) : (
+        <>
+          <View style={{flex: 1}}>
+            {/* <FlatList
+              ref={flatListRef}
+              style={styles.contentContainer}
+              data={renderedData}
+              renderItem={renderItem}
+              keyExtractor={item => item.uid + '-' + item.time}
+              onContentSizeChange={handleContentSizeChange}
+              onScroll={handleScroll}
+              onLayout={handleLayout}
+              ListEmptyComponent={searchQuery && <NoResultsMsg />}
+              ListFooterComponent={DownloadTranscriptBtn}
+              ListFooterComponentStyle={styles.footer}
+              contentContainerStyle={styles.content}
+            /> */}
+            <VirtualizedList
+              ref={flatListRef}
+              style={styles.contentContainer}
+              data={renderedData}
+              renderItem={renderItem}
+              keyExtractor={item => item.uid + '-' + item?.time}
+              onContentSizeChange={handleContentSizeChange}
+              onScroll={
+                isWebInternal()
+                  ? debounceFn(handleScroll, isMobileUA() ? 500 : 300)
+                  : handleScroll
+              }
+              onLayout={handleLayout}
+              ListEmptyComponent={searchQuery && <NoResultsMsg />}
+              ListFooterComponent={DownloadTranscriptBtn}
+              ListFooterComponentStyle={styles.footer}
+              contentContainerStyle={styles.content}
+              getItemCount={() => renderedData.length}
+              getItem={(data, index) => renderedData[index]}
+            />
+
+            {showButton ? (
+              <View
+                style={{
+                  position: 'absolute',
+                  bottom: 0,
+                  left: 0,
+                  right: 0,
+                  alignItems: 'center',
+                  zIndex: 9999,
+                }}>
+                <PrimaryButton
+                  iconName={'view-last'}
+                  containerStyle={styles.showLatestBtn}
+                  textStyle={styles.textStyleBtn}
+                  onPress={handleViewLatest}
+                  iconSize={20}
+                  text={viewlatest}
+                />
+              </View>
+            ) : null}
+          </View>
+        </>
+      )}
+    </View>
+  );
+};
+
+export default Transcript;
+
+export const styles = StyleSheet.create({
+  contentContainer: {
+    paddingHorizontal: 20,
+  },
+  container: {
+    alignItems: 'flex-start',
+  },
+  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',
+  },
+
+  showLatestBtn: {
+    backgroundColor: $config.CARD_LAYER_5_COLOR,
+    paddingVertical: 8,
+    paddingLeft: 12,
+    paddingRight: 16,
+    minWidth: 'auto',
+    borderRadius: 28,
+  },
+  textStyleBtn: {
+    color: $config.SECONDARY_ACTION_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: 19,
+    fontWeight: '400',
+    textTransform: 'capitalize',
+  },
+  /* search results*/
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 10,
+
+    marginHorizontal: 20,
+    marginVertical: 16,
+    borderRadius: 4,
+    height: 40,
+    borderWidth: 1,
+
+    borderColor: $config.INPUT_FIELD_BORDER_COLOR,
+    backgroundColor: $config.INPUT_FIELD_BACKGROUND_COLOR,
+  },
+  searchInput: {
+    flex: 1,
+    height: 40,
+    borderRadius: 4,
+    marginRight: 10,
+    color: $config.FONT_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: ThemeConfig.FontSize.small,
+    lineHeight: ThemeConfig.FontSize.medium,
+    width: '100%',
+    borderWidth: 0,
+
+    ...Platform.select({
+      web: {
+        outlineStyle: 'none',
+      },
+    }),
+  },
+  inputFocused: {
+    borderColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+  },
+  searchButton: {
+    backgroundColor: $config.PRIMARY_ACTION_BRAND_COLOR,
+    borderRadius: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+  },
+  searchButtonText: {
+    color: $config.FONT_COLOR,
+    fontSize: 14,
+  },
+  emptyMsg: {
+    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+    alignSelf: 'center',
+    fontSize: 14,
+    fontStyle: 'italic',
+  },
+  langChange: {
+    marginLeft: 4,
+    color: $config.PRIMARY_ACTION_BRAND_COLOR,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    fontSize: 12,
+    lineHeight: 16,
+    fontStyle: 'italic',
+  },
+  langChangeContainer: {
+    marginBottom: 20,
+    flexDirection: 'row',
+  },
+  footer: {
+    borderWidth: 1,
+    paddingVertical: 8,
+    borderColor: $config.SECONDARY_ACTION_COLOR,
+    borderRadius: 4,
+    marginTop: 'auto',
+  },
+  content: {
+    flexGrow: 1,
+  },
+});

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

@@ -0,0 +1,126 @@
+import {StyleSheet, View} from 'react-native';
+import React from 'react';
+import {SidePanelType, useSidePanel} from 'customization-api';
+import IconButton, {IconButtonProps} from '../../atoms/IconButton';
+import LanguageSelectorPopup from './LanguageSelectorPopup';
+import {useCaption} from './useCaption';
+import useSTTAPI from './useSTTAPI';
+import {useString} from '../../utils/useString';
+import {toolbarItemTranscriptText} from '../../language/default-labels/videoCallScreenLabels';
+import {useToolbarProps} from '../../atoms/ToolbarItem';
+
+interface TranscriptIconProps {
+  plainIconHoverEffect?: boolean;
+  showToolTip?: boolean;
+  showLabel?: boolean;
+  disabled?: boolean;
+  isOnActionSheet?: boolean;
+  isMobileView?: boolean;
+}
+
+const TranscriptIcon = (props: TranscriptIconProps) => {
+  const {label: labelCustom = null, onPress: onPressCustom = null} =
+    useToolbarProps();
+  const {setSidePanel, sidePanel} = useSidePanel();
+  const {
+    showToolTip = false,
+    showLabel = $config.ICON_TEXT,
+    disabled = false,
+    isOnActionSheet = false,
+    isMobileView = false,
+  } = props;
+
+  const {start, restart, isAuthorizedTranscriptUser} = useSTTAPI();
+  const {isSTTActive, language: prevLang, isSTTError} = useCaption();
+  const isDisabled = !isAuthorizedTranscriptUser();
+  const [isLanguagePopupOpen, setLanguagePopup] =
+    React.useState<boolean>(false);
+  const isFirstTimePopupOpen = React.useRef(false);
+
+  const isTranscriptON = sidePanel === SidePanelType.Transcript;
+  const onPress = () => {
+    if (isSTTError) {
+      setSidePanel(
+        isTranscriptON ? SidePanelType.None : SidePanelType.Transcript,
+      );
+      return;
+    }
+    if (isSTTActive) {
+      setSidePanel(
+        isTranscriptON ? SidePanelType.None : SidePanelType.Transcript,
+      );
+    } else {
+      isFirstTimePopupOpen.current = true;
+      setLanguagePopup(true);
+    }
+  };
+
+  const label = useString<boolean>(toolbarItemTranscriptText);
+  const iconButtonProps: IconButtonProps = {
+    onPress: onPressCustom || onPress,
+    iconProps: {
+      name: 'transcript',
+      iconBackgroundColor: isTranscriptON
+        ? $config.PRIMARY_ACTION_BRAND_COLOR
+        : '',
+      tintColor: isDisabled
+        ? $config.SEMANTIC_NEUTRAL
+        : isTranscriptON
+        ? $config.PRIMARY_ACTION_TEXT_COLOR
+        : $config.SECONDARY_ACTION_COLOR,
+    },
+    disabled: isDisabled,
+    btnTextProps: {
+      text: showLabel
+        ? isOnActionSheet
+          ? labelCustom || label(isTranscriptON)?.replace(' ', '\n')
+          : labelCustom || label(isTranscriptON)
+        : '',
+      textColor: $config.FONT_COLOR,
+      numberOfLines: 2,
+    },
+  };
+  iconButtonProps.isOnActionSheet = isOnActionSheet;
+  if (!isOnActionSheet) {
+    iconButtonProps.toolTipMessage = label(isTranscriptON);
+  }
+
+  const onConfirm = async (langChanged, language) => {
+    setLanguagePopup(false);
+
+    isFirstTimePopupOpen.current = false;
+    const method = isTranscriptON ? '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
+    if (!isTranscriptON) {
+      setSidePanel(SidePanelType.Transcript);
+    } else {
+      setSidePanel(SidePanelType.None);
+    }
+    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 TranscriptIcon;
+
+const styles = StyleSheet.create({});

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

@@ -0,0 +1,98 @@
+import {Text, View, StyleSheet} from 'react-native';
+import React from 'react';
+
+import ThemeConfig from '../../../src/theme';
+import hexadecimalTransparency from '../../../src/utils/hexadecimalTransparency';
+import {formatTime} from './utils';
+
+interface TranscriptTextProps {
+  user: string;
+  time: number;
+  value: string;
+  searchQuery?: string;
+}
+
+export const TranscriptText = ({
+  user,
+  time,
+  value,
+  searchQuery = '',
+}: TranscriptTextProps) => {
+  const t = time ? formatTime(Number(time)) : '';
+  const regex = searchQuery ? new RegExp(`(${searchQuery})`, 'gi') : ' ';
+  const parts = value.split(regex);
+
+  return (
+    <View key={user} style={styles.transcriptTextContainer}>
+      <View style={styles.nameTimeContainer}>
+        <Text
+          numberOfLines={1}
+          textBreakStrategy="simple"
+          ellipsizeMode="tail"
+          style={[styles.transcriptName]}>
+          {user}
+        </Text>
+        <Text style={styles.timestamp}>{t}</Text>
+      </View>
+
+      <View>
+        <Text style={[styles.transciptText]}>
+          {/* If substring matches search query then highlight it */}
+          {parts.map((part, index) =>
+            part.toLowerCase() === searchQuery.toLowerCase() &&
+            searchQuery !== '' ? (
+              <Text key={index} style={styles.highlightedText}>
+                {searchQuery ? part : part + ' '}
+              </Text>
+            ) : (
+              <Text key={index}>{searchQuery ? part : part + ' '}</Text>
+            ),
+          )}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  nameTimeContainer: {
+    flexDirection: 'row',
+    alignItems: 'baseline',
+    marginBottom: 4,
+    justifyContent: 'flex-start',
+  },
+
+  transcriptTextContainer: {
+    alignItems: 'flex-start',
+    marginBottom: 20,
+  },
+
+  transciptText: {
+    fontSize: 16,
+    lineHeight: 22,
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+    color: $config.FONT_COLOR + hexadecimalTransparency['70%'],
+  },
+
+  transcriptName: {
+    fontSize: 16,
+    lineHeight: 19,
+    fontWeight: '600',
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    color: $config.FONT_COLOR,
+    maxWidth: 160,
+  },
+
+  timestamp: {
+    fontSize: 12,
+    lineHeight: 16,
+    marginLeft: 8,
+    color: $config.FONT_COLOR + hexadecimalTransparency['40%'],
+    fontFamily: ThemeConfig.FontFamily.sansPro,
+    fontWeight: '400',
+  },
+  highlightedText: {
+    backgroundColor: $config.SEMANTIC_NEUTRAL,
+  },
+});

package/template/src/subComponents/caption/index.ts

@@ -0,0 +1,3 @@
+import CaptionButton from './CaptionButton';
+
+export {CaptionButton};