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

package/template/src/pages/video-call/ActionSheetHandle.tsx

@@ -3,7 +3,12 @@ import React from 'react';
 
 import {SidePanelType} from '../../subComponents/SidePanelEnum';
 
-import {ChatHeader, PeopleHeader, SettingsHeader} from './SidePanelHeader';
+import {
+  ChatHeader,
+  PeopleHeader,
+  SettingsHeader,
+  TranscriptHeader,
+} from './SidePanelHeader';
 
 const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
   const Header = null;
@@ -17,6 +22,7 @@ const ActionSheetHandle = (props: {sidePanel: SidePanelType}) => {
       {sidePanel === SidePanelType.Participants && <PeopleHeader />}
       {sidePanel === SidePanelType.Chat && <ChatHeader />}
       {sidePanel === SidePanelType.Settings && <SettingsHeader />}
+      {sidePanel === SidePanelType.Transcript && <TranscriptHeader />}
     </View>
   );
 };

package/template/src/pages/video-call/DefaultLayouts.ts

@@ -1,21 +1,27 @@
-import {layoutItem} from 'customization-api';
+import {LayoutItem} from 'customization-api';
 import GridVideo from '../../components/GridVideo';
 import PinnedVideo from '../../components/PinnedVideo';
 import useLayoutsData from './useLayoutsData';
 import {useLayout} from '../../utils/useLayout';
 import {isMobileUA} from '../../utils/common';
+import {
+  toolbarItemLayoutOptionGridText,
+  toolbarItemLayoutOptionSidebarText,
+} from '../../language/default-labels/videoCallScreenLabels';
 const isMobileView = isMobileUA();
-export const DefaultLayouts: layoutItem[] = [
+const DefaultLayouts: LayoutItem[] = [
   {
     name: 'grid',
     label: 'Grid',
+    translationKey: toolbarItemLayoutOptionGridText,
     //iconName: 'grid',
     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAYAAABV7bNHAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFOSURBVHgB7drBTcNAEIXhWVeQEkwJVIDohA6gA2iBigIVhA6cEuhgGGNfd1+kZK1x9H/SyidbT0/ry+6YAQBwt9z9EOs91tFv4xTrZW8ZasHGWJP3Mc3fz56hiHBTPEbr5xzrsZTya0kzDLW3fNmCo/U1xnqzxBmG+nv2att4ssQZqr/Y/IPaRmJ7l6wZBkMTBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQQEECBQkUJFCQ0Croy7bxY4kztAr6tm18WuIMrSPXQzxO1vlGIU46HyxxhuoOWq9Bnm25FunhvH7fMme4yHz94stt5C0cY32su2NXGQAAuDPOAFUzGANUIhwDVLW3nAGqfwxQiQwMUIkMnCgKFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgUJFCRQkEBBAgNUIgMDVCIDA1QMUF2X4SLOABUAADv0Bxz9l6sMoGOZAAAAAElFTkSuQmCC',
     component: GridVideo,
   },
   {
     name: 'pinned',
-    label: 'Pinned',
+    label: 'Sidebar',
+    translationKey: toolbarItemLayoutOptionSidebarText,
     //iconName: 'pinned',
     //for mobile view top pinned icon and desktop left pinned icon
     icon: isMobileView
@@ -24,7 +30,7 @@ export const DefaultLayouts: layoutItem[] = [
     component: PinnedVideo,
   },
 ];
-
+export {DefaultLayouts};
 export const getPinnedLayoutName = () => DefaultLayouts[1].name;
 export const getGridLayoutName = () => DefaultLayouts[0].name;
 
@@ -34,7 +40,7 @@ export const useSetPinnedLayout = () => {
   const pinnedLayoutName = getPinnedLayoutName();
   let checkPinnedLayoutExist = false;
   if (layouts && Array.isArray(layouts) && layouts.length) {
-    let data = layouts.filter((item) => item.name === pinnedLayoutName);
+    let data = layouts.filter(item => item.name === pinnedLayoutName);
     if (data && data.length) {
       checkPinnedLayoutExist = true;
     }

package/template/src/pages/video-call/NameWithMicIcon.tsx

@@ -6,25 +6,28 @@ import {useLayout, useContent} from 'customization-api';
 import {isMobileUA, isWeb, useIsSmall} from '../../utils/common';
 import {getGridLayoutName} from './DefaultLayouts';
 import {useVideoContainer} from './VideoRenderer';
+import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
+import {useString} from '../../utils/useString';
+import {videoRoomUserFallbackText} from '../../language/default-labels/videoCallScreenLabels';
 
 export interface NameWithMicIconProps {
   name: string;
   muted?: boolean;
+  customBgColor?: string;
+  customTextColor?: string;
 }
 
 const NameWithMicIcon = (props: NameWithMicIconProps) => {
-  const {activeUids} = useContent();
+  const {activeUids, customContent} = useContent();
   const {videoTileWidth} = useVideoContainer();
   const {currentLayout} = useLayout();
+  const activeUidsLen = activeUids?.filter(i => !customContent[i])?.length;
   const reduceSpace =
     isMobileUA() &&
     activeUids.length > 4 &&
     currentLayout === getGridLayoutName();
   const {name, muted} = props;
-  //const isSpeaking = isActiveSpeaker(user.uid);
-  //commented for v1 release
-  //const remoteUserDefaultLabel = useString('remoteUserDefaultLabel')();
-  const remoteUserDefaultLabel = 'User';
+  const remoteUserDefaultLabel = useString(videoRoomUserFallbackText)();
   const isSmall = useIsSmall();
   return (
     <View
@@ -34,7 +37,8 @@ const NameWithMicIcon = (props: NameWithMicIconProps) => {
           maxWidth: videoTileWidth * 0.6 > 180 ? 180 : videoTileWidth * 0.6,
         },
         reduceSpace ? {left: 2, bottom: 2} : {},
-        reduceSpace && activeUids.length > 12 ? {padding: 2} : {},
+        reduceSpace && activeUidsLen > 12 ? {padding: 2} : {},
+        props?.customBgColor ? {backgroundColor: props?.customBgColor} : {},
       ]}>
       {muted !== undefined ? (
         <ImageIcon
@@ -50,7 +54,7 @@ const NameWithMicIcon = (props: NameWithMicIconProps) => {
       )}
       {(isMobileUA() || (!isMobileUA() && isSmall())) &&
       currentLayout === getGridLayoutName() &&
-      activeUids.length > 6 ? (
+      activeUidsLen > 6 ? (
         <></>
       ) : (
         <PlatformWrapper>
@@ -58,7 +62,10 @@ const NameWithMicIcon = (props: NameWithMicIconProps) => {
             numberOfLines={1}
             textBreakStrategy="simple"
             ellipsizeMode="tail"
-            style={style.name}>
+            style={[
+              style.name,
+              props?.customTextColor ? {color: props?.customTextColor} : {},
+            ]}>
             {name || remoteUserDefaultLabel}
           </Text>
         </PlatformWrapper>
@@ -88,7 +95,8 @@ const PlatformWrapper = ({children}) => {
 
 const style = StyleSheet.create({
   container: {
-    backgroundColor: $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR,
+    backgroundColor:
+      $config.VIDEO_AUDIO_TILE_OVERLAY_COLOR + hexadecimalTransparency['25%'],
     position: 'absolute',
     alignItems: 'center',
     padding: 8,

package/template/src/pages/video-call/PinchableView.tsx

@@ -0,0 +1,119 @@
+import React, {createRef} from 'react';
+import {Animated, StyleSheet, View} from 'react-native';
+import {
+  PanGestureHandler,
+  PanGestureHandlerStateChangeEvent,
+  PinchGestureHandler,
+  State,
+} from 'react-native-gesture-handler';
+const USE_NATIVE_DRIVER = false;
+//nesting touch handler with native animated driver is not supported yet.
+export class PinchableView extends React.Component {
+  _pinchRef = createRef();
+  _panRef = createRef();
+
+  //pan
+  _translateX = new Animated.Value(0);
+  _translateY = new Animated.Value(0);
+  _lastOffset = {x: 0, y: 0};
+  _onGestureEvent = Animated.event(
+    [
+      {
+        nativeEvent: {
+          translationX: this._translateX,
+          translationY: this._translateY,
+        },
+      },
+    ],
+    {useNativeDriver: USE_NATIVE_DRIVER},
+  );
+  _onHandlerStateChange = (event: PanGestureHandlerStateChangeEvent) => {
+    if (event.nativeEvent.oldState === State.ACTIVE) {
+      this._lastOffset.x += event.nativeEvent.translationX;
+      this._lastOffset.y += event.nativeEvent.translationY;
+      this._translateX.setOffset(this._lastOffset.x);
+      this._translateX.setValue(0);
+      this._translateY.setOffset(this._lastOffset.y);
+      this._translateY.setValue(0);
+    }
+  };
+  //pan
+
+  //pinch
+  _baseScale = new Animated.Value(1);
+  _pinchScale = new Animated.Value(1);
+  _scale = Animated.multiply(this._baseScale, this._pinchScale);
+  _lastScale = 1;
+  _onPinchGestureEvent = Animated.event(
+    [{nativeEvent: {scale: this._pinchScale}}],
+    {
+      useNativeDriver: USE_NATIVE_DRIVER,
+    },
+  );
+  _onPinchHandlerStateChange = (event) => {
+    if (event.nativeEvent.oldState === State.ACTIVE) {
+      this._lastScale *= event.nativeEvent.scale;
+      this._baseScale.setValue(this._lastScale);
+      this._pinchScale.setValue(1);
+    }
+  };
+  //pinch
+
+  render() {
+    return (
+      <View style={styles.mainContainer}>
+        <PanGestureHandler
+          ref={this._panRef}
+          onGestureEvent={this._onGestureEvent}
+          onHandlerStateChange={this._onHandlerStateChange}>
+          <View style={styles.wrapper}>
+            <PinchGestureHandler
+              ref={this._pinchRef}
+              simultaneousHandlers={this._panRef}
+              onGestureEvent={this._onPinchGestureEvent}
+              onHandlerStateChange={this._onPinchHandlerStateChange}>
+              <Animated.View style={styles.viewContainer} collapsable={false}>
+                <Animated.View
+                  style={[
+                    styles.pinchableView,
+                    {
+                      transform: [
+                        {perspective: 200},
+                        {scale: this._scale},
+                        {translateX: this._translateX},
+                        {translateY: this._translateY},
+                      ],
+                    },
+                  ]}>
+                  {this.props.children}
+                </Animated.View>
+              </Animated.View>
+            </PinchGestureHandler>
+          </View>
+        </PanGestureHandler>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    width: '100%',
+    height: '100%',
+  },
+  viewContainer: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'black',
+    overflow: 'hidden',
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  pinchableView: {
+    width: '100%',
+    height: '100%',
+  },
+  wrapper: {
+    flex: 1,
+  },
+});

package/template/src/pages/video-call/RenderComponent.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import VideoRenderer from './VideoRenderer';
 import {UidType} from '../../../agora-rn-uikit';
 import {useContent} from 'customization-api';
@@ -16,10 +16,19 @@ interface RenderComponentProps {
   isMax?: boolean;
 }
 const RenderComponent = ({uid, isMax = false}: RenderComponentProps) => {
-  const {defaultContent} = useContent();
+  const {defaultContent, customContent, activeUids} = useContent();
   const RenderComp = DefaultRenderComponent['rtc'];
 
-  return <RenderComp user={defaultContent[uid]} isMax={isMax} />;
+  if (customContent && customContent[uid] && customContent[uid]?.component) {
+    const CustomComponent = customContent[uid]?.component;
+    const CustomComponentProps = customContent[uid]?.props;
+    //@ts-ignore
+    return <CustomComponent {...CustomComponentProps} />;
+  } else if (defaultContent[uid]) {
+    return <RenderComp user={defaultContent[uid]} isMax={isMax} />;
+  } else {
+    return null;
+  }
 };
 
 export default RenderComponent;

package/template/src/pages/video-call/SidePanelHeader.tsx

@@ -1,4 +1,10 @@
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  useWindowDimensions,
+  View,
+} from 'react-native';
 import React, {useContext} from 'react';
 import SidePanelHeader, {
   SidePanelStyles,
@@ -14,10 +20,36 @@ import {
 } from '../../components/chat-ui/useChatUIControls';
 import {numFormatter} from '../../utils';
 import ChatContext from '../../components/ChatContext';
+import {useCaption} from '../../subComponents/caption/useCaption';
+import ActionMenu, {ActionMenuItem} from '../../atoms/ActionMenu';
+import {calculatePosition} from '../../utils/common';
+import LanguageSelectorPopup from '../../subComponents/caption/LanguageSelectorPopup';
+import useSTTAPI from '../../subComponents/caption/useSTTAPI';
+import useGetName from '../../utils/useGetName';
+import {LanguageType} from '../../subComponents/caption/utils';
+import {useRoomInfo, usePreCall} from 'customization-api';
+import useTranscriptDownload from '../../subComponents/caption/useTranscriptDownload';
+import {useVB} from '../../components/virtual-background/useVB';
+import {PropsContext} from '../../../agora-rn-uikit';
+import useLiveStreamingUids from '../../utils/useLiveStreamingUids';
+import {useString} from '../../utils/useString';
+import {
+  settingsPanelHeading,
+  vbPanelHeading,
+} from '../../language/default-labels/precallScreenLabels';
+import {
+  chatPanelGroupTabText,
+  chatPanelPrivateTabText,
+  peoplePanelHeaderText,
+  sttChangeSpokenLanguageText,
+  sttDownloadTranscriptBtnText,
+  sttTranscriptPanelHeaderText,
+} from '../../language/default-labels/videoCallScreenLabels';
 
-export const SettingsHeader = (props) => {
+export const SettingsHeader = props => {
   const {setSidePanel} = useSidePanel();
-  const settingsLabel = 'Settings';
+  const settingsLabel = useString(settingsPanelHeading)();
+
   return (
     <SidePanelHeader
       centerComponent={
@@ -34,7 +66,12 @@ export const SettingsHeader = (props) => {
 
 export const PeopleHeader = () => {
   const {onlineUsersCount} = useContext(ChatContext);
-  const participantsLabel = `People (${numFormatter(onlineUsersCount)})`;
+  const {hostUids, audienceUids} = useLiveStreamingUids();
+  const count = $config.EVENT_MODE
+    ? hostUids.length + audienceUids.length
+    : onlineUsersCount;
+  const participantsLabel = useString(peoplePanelHeaderText)();
+
   const {setSidePanel} = useSidePanel();
   return (
     <SidePanelHeader
@@ -60,8 +97,8 @@ export const ChatHeader = () => {
   } = useChatNotification();
 
   const {setSidePanel} = useSidePanel();
-  const groupChatLabel = 'Group';
-  const privateChatLabel = 'Private';
+  const groupChatLabel = useString(chatPanelGroupTabText)();
+  const privateChatLabel = useString(chatPanelPrivateTabText)();
 
   const {chatType, setChatType, setPrivateChatUser} = useChatUIControls();
 
@@ -129,6 +166,171 @@ export const ChatHeader = () => {
   );
 };
 
+export const VBHeader = () => {
+  const label = useString(vbPanelHeading)();
+  const {setSidePanel} = useSidePanel();
+  const {setIsVBActive} = useVB();
+
+  const {
+    rtcProps: {callActive},
+  } = useContext(PropsContext);
+  const trailingIconName = 'close';
+  return (
+    <SidePanelHeader
+      centerComponent={<Text style={SidePanelStyles.heading}>{label}</Text>}
+      trailingIconName={trailingIconName}
+      trailingIconOnPress={() => {
+        setSidePanel(SidePanelType.None);
+        setIsVBActive(false);
+      }}
+    />
+  );
+};
+
+export const TranscriptHeader = props => {
+  const {setSidePanel} = useSidePanel();
+  const moreIconRef = React.useRef<View>(null);
+  const [actionMenuVisible, setActionMenuVisible] =
+    React.useState<boolean>(false);
+
+  const label = useString(sttTranscriptPanelHeaderText)();
+
+  return (
+    <SidePanelHeader
+      centerComponent={<Text style={SidePanelStyles.heading}>{label}</Text>}
+      trailingIconName={'more-menu'}
+      ref={moreIconRef}
+      trailingIconOnPress={() => {
+        setActionMenuVisible(true);
+      }}
+      trailingIconName2={'close'}
+      trailingIconOnPress2={() => {
+        setSidePanel(SidePanelType.None);
+      }}>
+      <TranscriptHeaderActionMenu
+        actionMenuVisible={actionMenuVisible}
+        setActionMenuVisible={setActionMenuVisible}
+        btnRef={moreIconRef}
+      />
+    </SidePanelHeader>
+  );
+};
+
+interface TranscriptHeaderActionMenuProps {
+  actionMenuVisible: boolean;
+  setActionMenuVisible: (actionMenuVisible: boolean) => void;
+  btnRef: React.RefObject<View>;
+}
+
+const TranscriptHeaderActionMenu = (props: TranscriptHeaderActionMenuProps) => {
+  const {actionMenuVisible, setActionMenuVisible, btnRef} = props;
+  const {
+    language: prevLang,
+    meetingTranscript,
+    isLangChangeInProgress,
+    setLanguage,
+  } = useCaption();
+  const {downloadTranscript} = useTranscriptDownload();
+  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 actionMenuitems: ActionMenuItem[] = [];
+  const {
+    data: {isHost},
+  } = useRoomInfo();
+
+  const downloadTranscriptLabel = useString(sttDownloadTranscriptBtnText)();
+  const changeSpokenLanguage = useString<boolean>(
+    sttChangeSpokenLanguageText,
+  )();
+  isHost &&
+    actionMenuitems.push({
+      icon: 'lang-select',
+      iconColor: $config.SECONDARY_ACTION_COLOR,
+      textColor: $config.FONT_COLOR,
+      title: changeSpokenLanguage + ' ',
+      disabled: isLangChangeInProgress,
+      callback: () => {
+        setActionMenuVisible(false);
+        setLanguagePopup(true);
+      },
+    });
+
+  actionMenuitems.push({
+    icon: 'download',
+    iconColor: $config.SECONDARY_ACTION_COLOR,
+    textColor: $config.FONT_COLOR,
+    title: downloadTranscriptLabel,
+    disabled: meetingTranscript.length === 0,
+    callback: () => {
+      downloadTranscript();
+      setActionMenuVisible(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={'transcript-header'}
+        actionMenuVisible={actionMenuVisible && isPosCalculated}
+        setActionMenuVisible={setActionMenuVisible}
+        modalPosition={modalPosition}
+        items={actionMenuitems}
+      />
+
+      <LanguageSelectorPopup
+        modalVisible={isLanguagePopupOpen}
+        setModalVisible={setLanguagePopup}
+        onConfirm={onLanguageChange}
+      />
+    </>
+  );
+};
+
 const styles = StyleSheet.create({
   buttonHolder: {
     backgroundColor: