agora-appbuilder-core 4.0.0-beta.24 → 4.0.0-beta.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.0.0-beta.24",
+  "version": "4.0.0-beta.25",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/src/components/Controls.tsx

@@ -77,13 +77,11 @@ const MoreButton = () => {
   const {currentLayout, setLayout} = useLayout();
   const layout = layouts.findIndex(item => item.name === currentLayout);
   const {setSidePanel, sidePanel} = useSidePanel();
-  const username = useGetName();
   const {
     isCaptionON,
-    isSTTActive,
     setIsCaptionON,
-    setLanguage,
     language: prevLang,
+    isSTTActive,
   } = useCaption();
 
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
@@ -93,10 +91,11 @@ const MoreButton = () => {
   const isFirstTimePopupOpen = React.useRef(false);
   const STT_clicked = React.useRef(null);
 
-  const {start, restart, isAuthorizedSTTUser} = useSTTAPI();
+  const {start, restart} = useSTTAPI();
   const {
     data: {isHost},
   } = useMeetingInfo();
+
   const {
     showLayoutOption,
     setShowInvitePopup,
@@ -115,7 +114,7 @@ const MoreButton = () => {
     icon: `${isCaptionON ? 'captions-off' : 'captions'}`,
     iconColor: $config.SECONDARY_ACTION_COLOR,
     textColor: $config.FONT_COLOR,
-    disabled: !isAuthorizedSTTUser(),
+    disabled: !($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))),
     title: `${isCaptionON ? 'Hide Caption' : 'Show Caption'}`,
     callback: () => {
       setActionMenuVisible(false);
@@ -134,7 +133,7 @@ const MoreButton = () => {
     icon: 'transcript',
     iconColor: $config.SECONDARY_ACTION_COLOR,
     textColor: $config.FONT_COLOR,
-    disabled: !isAuthorizedSTTUser(),
+    disabled: !($config.ENABLE_STT && (isHost || (!isHost && isSTTActive))),
     title: `${isTranscriptON ? 'Hide Transcript' : 'Show Transcript'}`,
     callback: () => {
       setActionMenuVisible(false);
@@ -352,8 +351,7 @@ const MoreButton = () => {
         }}
         onMouseLeave={() => {
           setIsHovered(false);
-        }}
-      >
+        }}>
         {/** placeholder to hovering */}
         <View
           style={{
@@ -389,7 +387,6 @@ const Controls = () => {
   const {rtcProps} = useContext(PropsContext);
   const isDesktop = useIsDesktop();
   // attendee can view option if any host has started STT
-  const {isAuthorizedSTTUser} = useSTTAPI();
   const {renderList} = useRender();
   const {
     data: {isHost},
@@ -402,14 +399,16 @@ const Controls = () => {
     renderListRef.current = renderList;
   }, [renderList]);
 
+  React.useEffect(() => {
+    events.on(EventNames.STT_ACTIVE, data => {
+      const payload = JSON.parse(data?.payload);
+      setIsSTTActive(payload.active);
+    });
+  }, []);
+
   React.useEffect(() => {
     // for native events are set in ActionSheetContent as this action is action sheet
     if (isWebInternal()) {
-      events.on(EventNames.STT_ACTIVE, data => {
-        const payload = JSON.parse(data?.payload);
-        setIsSTTActive(payload.active);
-      });
-
       events.on(EventNames.STT_LANGUAGE, data => {
         const {username, prevLang, newLang, uid} = JSON.parse(data?.payload);
         const actionText =
@@ -465,15 +464,13 @@ const Controls = () => {
         {
           paddingHorizontal: isDesktop('toolbar') ? 32 : 16,
         },
-      ]}
-    >
+      ]}>
       {width >= BREAKPOINTS.md && (
         <View style={style.leftContent}>
           <View
             testID="layout-btn"
             style={{marginRight: 10}}
-            collapsable={false}
-          >
+            collapsable={false}>
             {/**
              * .measure returns undefined on Android unless collapsable=false or onLayout are specified
              * so added collapsable property
@@ -517,8 +514,7 @@ const Controls = () => {
               testID="localVideo-btn"
               style={{
                 marginHorizontal: 10,
-              }}
-            >
+              }}>
               <LocalVideoMute showToolTip={true} />
             </View>
           )}
@@ -527,8 +523,7 @@ const Controls = () => {
               testID="switchCamera-btn"
               style={{
                 marginHorizontal: 10,
-              }}
-            >
+              }}>
               <LocalSwitchCamera />
             </View>
           )}
@@ -539,8 +534,7 @@ const Controls = () => {
                 testID="screenShare-btn"
                 style={{
                   marginHorizontal: 10,
-                }}
-              >
+                }}>
                 <ScreenshareButton />
               </View>
             )}
@@ -549,8 +543,7 @@ const Controls = () => {
               testID="recording-btn"
               style={{
                 marginHorizontal: 10,
-              }}
-            >
+              }}>
               <Recording />
             </View>
           )}

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

@@ -280,9 +280,15 @@ interface CaptionIconBtnProps {
 
 const CaptionIconBtn = (props: CaptionIconBtnProps) => {
   const {showLabel = $config.ICON_TEXT, onPress} = props;
-  const {isAuthorizedSTTUser} = useSTTAPI();
-  const {isCaptionON} = useCaption();
-  const isDisabled = !isAuthorizedSTTUser();
+  const {isCaptionON, isSTTActive} = useCaption();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+
+  const isDisabled = !(
+    $config.ENABLE_STT &&
+    (isHost || (!isHost && isSTTActive))
+  );
   return (
     <View style={styles.iconWithText}>
       <View style={styles.iconContainer}>
@@ -329,10 +335,18 @@ interface TranscriptIconProps {
 
 const TranscriptIconBtn = (props: TranscriptIconProps) => {
   const {showLabel = $config.ICON_TEXT} = props;
-  const {isAuthorizedSTTUser} = useSTTAPI();
   const {sidePanel} = useSidePanel();
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
-  const isDisabled = !isAuthorizedSTTUser();
+  const {isSTTActive} = useCaption();
+  const {
+    data: {isHost},
+  } = useMeetingInfo();
+
+  const isDisabled = !(
+    $config.ENABLE_STT &&
+    (isHost || (!isHost && isSTTActive))
+  );
+
   return (
     <View style={styles.iconWithText}>
       <View style={styles.iconContainer}>
@@ -419,12 +433,16 @@ const ActionSheetContent = props => {
   const {renderList} = useRender();
 
   //STT events on mount
+
   React.useEffect(() => {
+    if (native) return;
     events.on(EventNames.STT_ACTIVE, data => {
       const payload = JSON.parse(data?.payload);
       setIsSTTActive(payload.active);
     });
-
+  }, []);
+  React.useEffect(() => {
+    if (native) return;
     events.on(EventNames.STT_LANGUAGE, data => {
       const {username, prevLang, newLang, uid} = JSON.parse(data?.payload);
       const actionText =

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

@@ -121,8 +121,8 @@ const Transcript = (props: TranscriptProps) => {
     //   animated: false,
     // });
     if (flatListRef.current) {
-      flatListRef.current.scrollToEnd({animated: false});
       setShowButton(false);
+      flatListRef.current.scrollToEnd({animated: false});
       isScrolledToEnd.current = true;
     }
   };
@@ -266,7 +266,11 @@ const Transcript = (props: TranscriptProps) => {
               renderItem={renderItem}
               keyExtractor={item => item.uid + '-' + item.time}
               onContentSizeChange={handleContentSizeChange}
-              onScroll={handleScroll}
+              onScroll={
+                isWebInternal()
+                  ? debounceFn(handleScroll, isMobileUA() ? 500 : 300)
+                  : handleScroll
+              }
               onLayout={handleLayout}
               ListEmptyComponent={searchQuery && <NoResultsMsg />}
               ListFooterComponent={DownloadTranscriptBtn}
@@ -281,7 +285,9 @@ const Transcript = (props: TranscriptProps) => {
               keyExtractor={item => item.uid + '-' + item.time}
               onContentSizeChange={handleContentSizeChange}
               onScroll={
-                isWebInternal() ? debounceFn(handleScroll, 200) : handleScroll
+                isWebInternal()
+                  ? debounceFn(handleScroll, isMobileUA() ? 500 : 300)
+                  : handleScroll
               }
               onLayout={handleLayout}
               ListEmptyComponent={searchQuery && <NoResultsMsg />}