agora-appbuilder-core 4.1.29 → 4.1.30-beta.2

package/template/src/components/meeting-info-invite/MeetingInfo.tsx

@@ -16,6 +16,7 @@ import {isMobileUA} from '../../utils/common';
 import Card from '../../atoms/Card';
 import Spacer from '../../atoms/Spacer';
 import IDPLogoutComponent from '../../auth/IDPLogoutComponent';
+import useIsTablet from '../../utils/useIsTablet';
 
 interface MeetingInfoProps {
   margin?: 'dense' | 'normal';
@@ -25,6 +26,7 @@ interface MeetingInfoProps {
 }
 
 const MeetingInfo = (props: MeetingInfoProps) => {
+  const isTabletView = useIsTablet();
   const {margin, padding, children, cardContainerStyle} = props;
   const {FpeShareComponent} = useCustomization(data => {
     let components: {
@@ -53,9 +55,12 @@ const MeetingInfo = (props: MeetingInfoProps) => {
         <Card
           margin={margin}
           padding={padding}
-          cardContainerStyle={cardContainerStyle}>
-          <View
-            style={{display: 'flex', flex: 1, justifyContent: 'space-between'}}>
+          cardContainerStyle={
+            isTabletView
+              ? {...cardContainerStyle, ...style.tabletCard}
+              : cardContainerStyle
+          }>
+          <View style={[style.content, isTabletView && style.tabletContent]}>
             {children}
           </View>
         </Card>
@@ -74,4 +79,17 @@ export const style = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
   },
+  content: {
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  tabletContent: {
+    flex: 0,
+    justifyContent: 'flex-start',
+  },
+  tabletCard: {
+    flex: 0,
+    alignSelf: 'center',
+  },
 });

package/template/src/components/meeting-info-invite/MeetingInfoGridTile.tsx

@@ -8,6 +8,7 @@ import Spacer from '../../atoms/Spacer';
 import TertiaryButton from '../../atoms/TertiaryButton';
 import {SHARE_LINK_CONTENT_TYPE, useShareLink} from '../useShareLink';
 import useGetName from '../../utils/useGetName';
+import useIsTablet from '../../utils/useIsTablet';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';
 import {isMobileUA, isValidReactComponent} from '../../utils/common';
 import Avatar from '../../atoms/Avatar';
@@ -23,6 +24,7 @@ const waveHandEmoji = '👋';
 
 export default function MeetingInfoGridTile() {
   const isMobile = isMobileUA();
+  const isTabletView = useIsTablet();
   const welcomeLabel = useString(inviteTileWelcomeText)();
   const copyInviteButtonLabel = useString(inviteTileCopyInviteBtnText)();
   const copyInviteButton = copyInviteButtonLabel;
@@ -67,7 +69,11 @@ export default function MeetingInfoGridTile() {
           style.scroll,
           !isMobile && {paddingLeft: 0, paddingRight: 0},
         ]}>
-        <View style={style.inviteContainerTile}>
+        <View
+          style={[
+            style.inviteContainerTile,
+            isTabletView && style.tabletInviteContainerTile,
+          ]}>
           <View style={style.inviteTile}>
             <MeetingInfo
               padding="dense"
@@ -117,7 +123,7 @@ export default function MeetingInfoGridTile() {
               ) : (
                 <>
                   {isMobile ? <Spacer size={20} /> : <Spacer size={30} />}
-                  {!isMobile && (
+                  {(!isMobile || isTabletView) && (
                     <MeetingInfoLinks variant="secondary" size="tiny" />
                   )}
                   <View>
@@ -181,6 +187,9 @@ const style = StyleSheet.create({
     paddingHorizontal: isMobileUA() ? 0 : 35,
     borderRadius: 2,
   },
+  tabletInviteContainerTile: {
+    paddingVertical: 20,
+  },
   flexRow: {
     display: 'flex',
     flexDirection: 'row',

package/template/src/components/useVideoCall.tsx

@@ -51,6 +51,8 @@ import {
 import StorageContext from './StorageContext';
 import {useString} from '../utils/useString';
 import {videoRoomUserFallbackText} from '../language/default-labels/videoCallScreenLabels';
+import LanguageSelectorPopup from '../subComponents/caption/LanguageSelectorPopup';
+import {LanguageType} from '../subComponents/caption/utils';
 
 interface InViewPortState {
   [key: number]: boolean;
@@ -58,6 +60,10 @@ interface InViewPortState {
 export interface VideoCallContextInterface {
   showInvitePopup: boolean;
   setShowInvitePopup: React.Dispatch<SetStateAction<boolean>>;
+  openSpokenLanguagePopup: (
+    onConfirm: (language: LanguageType) => void,
+  ) => void;
+  closeSpokenLanguagePopup: () => void;
   showStopRecordingPopup: boolean;
   setShowStopRecordingPopup: React.Dispatch<SetStateAction<boolean>>;
   showLayoutOption: boolean;
@@ -80,6 +86,8 @@ export interface VideoCallContextInterface {
 const VideoCallContext = React.createContext<VideoCallContextInterface>({
   showInvitePopup: false,
   setShowInvitePopup: () => {},
+  openSpokenLanguagePopup: () => {},
+  closeSpokenLanguagePopup: () => {},
   showStopRecordingPopup: false,
   setShowStopRecordingPopup: () => {},
   showLayoutOption: false,
@@ -108,6 +116,21 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
   const [enablePinForMe, setEnablePinForMe] = useState(true);
   const [showLayoutOption, setShowLayoutOption] = useState(false);
   const [showInvitePopup, setShowInvitePopup] = useState(false);
+  const [showSpokenLanguagePopup, setShowSpokenLanguagePopup] = useState(false);
+  const spokenLanguageConfirmRef = useRef<
+    ((language: LanguageType) => void) | null
+  >(null);
+  const openSpokenLanguagePopup = useCallback(
+    (onConfirm: (language: LanguageType) => void) => {
+      spokenLanguageConfirmRef.current = onConfirm;
+      setShowSpokenLanguagePopup(true);
+    },
+    [],
+  );
+  const closeSpokenLanguagePopup = useCallback(() => {
+    setShowSpokenLanguagePopup(false);
+    spokenLanguageConfirmRef.current = null;
+  }, []);
   const [showStopRecordingPopup, setShowStopRecordingPopup] = useState(false);
   const [showStartScreenSharePopup, setShowStartScreenSharePopup] =
     useState(false);
@@ -260,7 +283,8 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
       const senderDisplayName = getReactionSenderName(String(localUser.uid));
       const tonePreference = store.liveReactionSkinTone ?? 'default';
       const skinTone: SkinToneCode | undefined =
-        tonePreference !== 'default' && reaction.skinToneVariants?.[tonePreference]
+        tonePreference !== 'default' &&
+        reaction.skinToneVariants?.[tonePreference]
           ? tonePreference
           : undefined;
       const emoji = applySkinToneToEmoji(reaction, tonePreference);
@@ -356,6 +380,8 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
       value={{
         showInvitePopup,
         setShowInvitePopup,
+        openSpokenLanguagePopup,
+        closeSpokenLanguagePopup,
         showStopRecordingPopup,
         setShowStopRecordingPopup,
         showLayoutOption,
@@ -379,6 +405,14 @@ const VideoCallProvider = (props: VideoCallProviderProps) => {
       <StopScreenSharePopup />
       <StopRecordingPopup />
       <InvitePopup />
+      {/* Keep toolbar dialogs outside the carousel and its translated pages. */}
+      {showSpokenLanguagePopup && (
+        <LanguageSelectorPopup
+          modalVisible={showSpokenLanguagePopup}
+          setModalVisible={setShowSpokenLanguagePopup}
+          onConfirm={language => spokenLanguageConfirmRef.current?.(language)}
+        />
+      )}
       <WhiteboardClearAllPopup />
       {props.children}
     </VideoCallContext.Provider>

package/template/src/language/default-labels/joinScreenLabels.ts

@@ -23,9 +23,9 @@ export interface I18nJoinScreenLabelsInterface {
 export const JoinScreenLabels: I18nJoinScreenLabelsInterface = {
   [joinRoomHeading]: ({eventMode}) => {
     if (eventMode) {
-      return 'Join a Room';
-    } else {
       return 'Join a Stream';
+    } else {
+      return 'Join a Room';
     }
   },
   [joinRoomInputLabel]: ({eventMode}) => {

package/template/src/pages/Create.tsx

@@ -28,6 +28,7 @@ import {
 import {useCustomization} from 'customization-implementation';
 import {useString} from '../utils/useString';
 import useCreateRoom from '../utils/useCreateRoom';
+import useIsTablet from '../utils/useIsTablet';
 import {CreateProvider} from './create/useCreate';
 import {
   RoomInfoDefaultValue,
@@ -64,6 +65,7 @@ import {LogSource, logger} from '../logger/AppBuilderLogger';
 import SDKEvents from '../utils/SdkEvents';
 
 const Create = () => {
+  const isTabletView = useIsTablet();
   const {CreateComponent, CreateHeaderRightSlotComponent} = useCustomization(
     data => {
       let components: {
@@ -315,8 +317,15 @@ const Create = () => {
             ) : (
               <></>
             )}
-            <ScrollView contentContainerStyle={style.main}>
-              <Card>
+            <ScrollView
+              contentContainerStyle={[
+                style.main,
+                isTabletView && style.tabletMain,
+              ]}>
+              <Card
+                cardContainerStyle={
+                  isTabletView ? style.tabletCard : undefined
+                }>
                 <View>
                   <View style={style.logoContainerStyle}>
                     <Logo />
@@ -435,7 +444,7 @@ const Create = () => {
                   ) : (
                     <></>
                   )}
-                  <Spacer size={isDesktop ? 60 : 125} />
+                  <Spacer size={isDesktop || isTabletView ? 60 : 125} />
                 </View>
                 <View style={[style.btnContainer]}>
                   <PrimaryButton
@@ -499,6 +508,20 @@ const style = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
   },
+  tabletMain: {
+    alignItems: 'center',
+    padding: 24,
+  },
+  tabletCard: {
+    flex: 0,
+    alignSelf: 'center',
+    justifyContent: 'flex-start',
+    paddingHorizontal: 40,
+    paddingVertical: 40,
+    borderRadius: ThemeConfig.BorderRadius.extraLarge,
+    borderWidth: 1,
+    borderColor: $config.CARD_LAYER_3_COLOR,
+  },
   heading: {
     fontSize: ThemeConfig.FontSize.extraLarge,
     fontWeight: '700',

package/template/src/pages/video-call/ActionSheet.native.tsx

@@ -5,6 +5,7 @@ import {
   View,
   Modal,
   TouchableWithoutFeedback,
+  useWindowDimensions,
 } from 'react-native';
 import React, {useCallback, useRef, useState} from 'react';
 import BottomSheet, {
@@ -31,6 +32,7 @@ import {useControlPermissionMatrix} from '../../components/controls/useControlPe
 //topbar btn template is used to show icons without label text (as in desktop : bottomBar)
 
 const ActionSheet = props => {
+  const {width, height} = useWindowDimensions();
   const [showCustomSidePanel, setShowCustomSidePanel] = useState(false);
   const [customSidePanelIndex, setCustomSidePanelIndex] = useState<
     undefined | number
@@ -52,7 +54,7 @@ const ActionSheet = props => {
   const {snapPointsMinMax = [100, 400]} = props;
   const [isExpanded, setIsExpanded] = React.useState(false);
   const {sidePanel, setSidePanel} = useSidePanel();
-  const bottomSheetRef = useRef<BottomSheetModal>(null);
+  const bottomSheetRef = useRef<BottomSheet>(null);
   const chatSheetRef = useRef<BottomSheetModal>(null);
   const participantsSheetRef = useRef<BottomSheetModal>(null);
   const settingsSheetRef = useRef<BottomSheetModal>(null);
@@ -65,10 +67,6 @@ const ActionSheet = props => {
     index === 0 ? setIsExpanded(false) : setIsExpanded(true);
   }, []);
 
-  React.useEffect(() => {
-    bottomSheetRef?.current.present();
-  }, []);
-
   React.useEffect(() => {
     if (showCustomSidePanel) {
       customActionSheetRef?.current?.present();
@@ -117,7 +115,7 @@ const ActionSheet = props => {
               settingsSheetRef?.current?.close();
               transcriptSheetRef?.current?.close();
               customActionSheetRef?.current?.close();
-              bottomSheetRef?.current?.present();
+              bottomSheetRef?.current?.snapToIndex(0);
             }, 200);
           } else {
             // Code to be executed immediately without a timer
@@ -132,7 +130,7 @@ const ActionSheet = props => {
           break;
         }
         default:
-          bottomSheetRef?.current.present();
+          bottomSheetRef?.current?.snapToIndex(0);
       }
     } else {
       setShowCustomSidePanel(true);
@@ -167,14 +165,16 @@ const ActionSheet = props => {
         </TouchableWithoutFeedback>
       )}
       {/* Controls  Action Sheet*/}
-      <BottomSheetModal
+      <BottomSheet
+        // Reinitialize the animated position after rotation or window resizing.
+        key={`${width}-${height}`}
+        index={isExpanded ? 1 : 0}
         snapPoints={snapPointsMinMax}
         ref={bottomSheetRef}
-        onChange={handleSheetChanges}
+        onChange={index => setIsExpanded(index > 0)}
         enablePanDownToClose={false}
         style={styles.container}
         backgroundStyle={styles.backgroundStyle}
-        stackBehavior="push"
         handleComponent={() => (
           <>
             <ActionSheetHandle sidePanel={SidePanelType.None} />
@@ -190,7 +190,7 @@ const ActionSheet = props => {
             {...props}
           />
         </BottomSheetView>
-      </BottomSheetModal>
+      </BottomSheet>
 
       {/* Chat Action Sheet */}
       {canAccessChat && (

package/template/src/pages/video-call/VideoCallScreen.native.tsx

@@ -2,13 +2,34 @@ import React from 'react';
 import {GestureHandlerRootView} from 'react-native-gesture-handler';
 import VideoCallMobileView from './VideoCallMobileView';
 import ReactNativeForegroundService from '@supersami/rn-foreground-service';
-import {AppRegistry, Platform} from 'react-native';
+import {
+  AppRegistry,
+  AppState,
+  PermissionsAndroid,
+  Platform,
+} from 'react-native';
+import {RtcContext} from '../../../agora-rn-uikit';
 import {isValidReactComponent} from '../../utils/common';
 import {useCustomization} from 'customization-implementation';
 
 const VideoCallleScreen = () => {
+  const {rtcTracksReady} = React.useContext(RtcContext);
+
   React.useEffect(() => {
-    if (Platform.OS === 'android') {
+    if (Platform.OS !== 'android' || !rtcTracksReady) {
+      return;
+    }
+
+    let cancelled = false;
+    const startCallService = async () => {
+      // RTC initialization requests microphone access. Android requires it to be
+      // granted before starting a microphone foreground service.
+      const canRecord = await PermissionsAndroid.check(
+        PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+      );
+      if (cancelled || !canRecord || AppState.currentState !== 'active') {
+        return;
+      }
       ReactNativeForegroundService.register();
       AppRegistry.registerComponent($config.APP_NAME, () => VideoCallleScreen);
       ReactNativeForegroundService.add_task(
@@ -22,13 +43,21 @@ const VideoCallleScreen = () => {
           onError: e => console.log(`Error logging:`, e),
         },
       );
-      ReactNativeForegroundService.start({
+      await ReactNativeForegroundService.start({
         id: 145,
         title: $config.APP_NAME,
         message: 'Call is active',
       });
-    }
-  }, []);
+    };
+
+    startCallService().catch(error => {
+      console.warn('Unable to start the call foreground service', error);
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [rtcTracksReady]);
 
   const {VideocallWrapper} = useCustomization(data => {
     let components: {

package/template/src/pages/video-call/__tests__/VideoCallScreen.native.test.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import TestRenderer, {act} from 'react-test-renderer';
+import {AppState, PermissionsAndroid} from 'react-native';
+import ForegroundService from '@supersami/rn-foreground-service';
+import {RtcContext} from '../../../../agora-rn-uikit';
+import VideoCallScreen from '../VideoCallScreen.native';
+
+jest.mock('react-native', () => ({
+  AppRegistry: {registerComponent: jest.fn()},
+  AppState: {currentState: 'active'},
+  Platform: {OS: 'android'},
+  PermissionsAndroid: {
+    PERMISSIONS: {RECORD_AUDIO: 'android.permission.RECORD_AUDIO'},
+    check: jest.fn(),
+  },
+}));
+jest.mock('@supersami/rn-foreground-service', () => ({
+  register: jest.fn(),
+  add_task: jest.fn(),
+  start: jest.fn(async () => undefined),
+}));
+jest.mock('react-native-gesture-handler', () => ({
+  GestureHandlerRootView: ({children}: {children: React.ReactNode}) => children,
+}));
+jest.mock('../../../../agora-rn-uikit', () => ({
+  RtcContext: require('react').createContext({rtcTracksReady: false}),
+}));
+jest.mock('customization-implementation', () => ({
+  useCustomization: () => ({VideocallWrapper: require('react').Fragment}),
+}));
+jest.mock('../../../utils/common', () => ({isValidReactComponent: jest.fn()}));
+jest.mock('../VideoCallMobileView', () => () => null);
+
+const permissionCheck = PermissionsAndroid.check as jest.Mock;
+
+async function renderScreen(ready: boolean) {
+  let renderer!: TestRenderer.ReactTestRenderer;
+  await act(async () => {
+    renderer = TestRenderer.create(
+      <RtcContext.Provider value={{rtcTracksReady: ready} as any}>
+        <VideoCallScreen />
+      </RtcContext.Provider>,
+    );
+  });
+  return renderer;
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  AppState.currentState = 'active';
+  permissionCheck.mockResolvedValue(true);
+});
+
+it('waits for RTC initialization before starting the microphone service', async () => {
+  const renderer = await renderScreen(false);
+  expect(permissionCheck).not.toHaveBeenCalled();
+  expect(ForegroundService.start).not.toHaveBeenCalled();
+  act(() => renderer.unmount());
+});
+
+it('starts the service only after microphone permission has been checked', async () => {
+  const renderer = await renderScreen(true);
+  expect(permissionCheck).toHaveBeenCalledWith(
+    'android.permission.RECORD_AUDIO',
+  );
+  expect(ForegroundService.start).toHaveBeenCalledTimes(1);
+  act(() => renderer.unmount());
+});
+
+it('does not start a microphone service when permission is denied', async () => {
+  permissionCheck.mockResolvedValue(false);
+  const renderer = await renderScreen(true);
+  expect(ForegroundService.start).not.toHaveBeenCalled();
+  act(() => renderer.unmount());
+});
+
+it('does not start a microphone service from the background', async () => {
+  AppState.currentState = 'background';
+  const renderer = await renderScreen(true);
+  expect(ForegroundService.start).not.toHaveBeenCalled();
+  act(() => renderer.unmount());
+});
+
+it('does not start the service after the call screen has unmounted', async () => {
+  let resolvePermission!: (granted: boolean) => void;
+  permissionCheck.mockReturnValue(
+    new Promise(resolve => {
+      resolvePermission = resolve;
+    }),
+  );
+  const renderer = await renderScreen(true);
+  act(() => renderer.unmount());
+  await act(async () => resolvePermission(true));
+  expect(ForegroundService.start).not.toHaveBeenCalled();
+});

package/template/src/subComponents/Clipboard.native.tsx

@@ -13,6 +13,6 @@
  * On mobile, the clipboard is imported from the community module since react-native 
  * has deprecated clipboard API as a part of the lean core effort
  */
-import Clipboard from '@react-native-community/clipboard';
+import Clipboard from '@react-native-clipboard/clipboard';
 
 export default Clipboard;

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

@@ -2,7 +2,7 @@ import {View} from 'react-native';
 import React from 'react';
 import IconButton, {IconButtonProps} from '../../atoms/IconButton';
 import {useCaption} from './useCaption';
-import LanguageSelectorPopup from './LanguageSelectorPopup';
+import {useVideoCall} from '../../components/useVideoCall';
 import {useString} from '../../utils/useString';
 import {toolbarItemCaptionText} from '../../language/default-labels/videoCallScreenLabels';
 import {useToolbarProps} from '../../atoms/ToolbarItem';
@@ -23,6 +23,7 @@ const CaptionIcon = (props: CaptionIconProps) => {
     useToolbarProps();
   const {
     showLabel = $config.ICON_TEXT,
+    disabled = false,
     isOnActionSheet = false,
     closeActionSheet,
   } = props;
@@ -34,8 +35,8 @@ const CaptionIcon = (props: CaptionIconProps) => {
     confirmSpokenLanguageChange,
   } = useCaption();
 
-  const [isLanguagePopupOpen, setLanguagePopup] =
-    React.useState<boolean>(false);
+  const {openSpokenLanguagePopup, closeSpokenLanguagePopup} = useVideoCall();
+  const isDisabled = disabled || !sttDepsReady;
 
   // const isFirstTimePopupOpen = React.useRef(false);
   // const {start, restart, isAuthorizedSTTUser} = useSTTAPI();
@@ -49,7 +50,7 @@ const CaptionIcon = (props: CaptionIconProps) => {
       setIsCaptionON(false);
       closeActionSheet?.();
     } else if (!isSTTActive) {
-      setLanguagePopup(true);
+      openSpokenLanguagePopup(onConfirm);
     } else {
       setIsCaptionON(true);
       closeActionSheet?.();
@@ -65,13 +66,15 @@ const CaptionIcon = (props: CaptionIconProps) => {
   };
   const iconButtonProps: IconButtonProps = {
     onPress: onPressCustom || onPress,
-    disabled: !sttDepsReady,
+    disabled: isDisabled,
     iconProps: {
       name: isCaptionON ? 'captions-off' : 'captions',
       iconBackgroundColor: isCaptionON
         ? $config.PRIMARY_ACTION_BRAND_COLOR
         : '',
-      tintColor: isCaptionON
+      tintColor: isDisabled
+        ? $config.SEMANTIC_NEUTRAL
+        : isCaptionON
         ? $config.PRIMARY_ACTION_TEXT_COLOR
         : $config.SECONDARY_ACTION_COLOR,
     },
@@ -81,7 +84,7 @@ const CaptionIcon = (props: CaptionIconProps) => {
           ? labelCustom || label?.replace(' ', '\n')
           : labelCustom || label
         : '',
-      textColor: $config.FONT_COLOR,
+      textColor: isDisabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
       numberOfLines: 2,
     },
   };
@@ -93,7 +96,7 @@ const CaptionIcon = (props: CaptionIconProps) => {
   const onConfirm = async (newSpokenLang: LanguageType) => {
     try {
       closeActionSheet?.();
-      setLanguagePopup(false);
+      closeSpokenLanguagePopup();
       setIsCaptionON(true);
       await confirmSpokenLanguageChange(newSpokenLang);
     } catch (error) {
@@ -106,12 +109,6 @@ const CaptionIcon = (props: CaptionIconProps) => {
   return (
     <View>
       <IconButton {...iconButtonProps} />
-      <LanguageSelectorPopup
-        modalVisible={isLanguagePopupOpen}
-        setModalVisible={setLanguagePopup}
-        onConfirm={onConfirm}
-        // isFirstTimePopupOpen={isFirstTimePopupOpen.current}
-      />
     </View>
   );
 };

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

@@ -2,7 +2,7 @@ import {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 {useVideoCall} from '../../components/useVideoCall';
 import {useCaption} from './useCaption';
 import {useString} from '../../utils/useString';
 import {toolbarItemTranscriptText} from '../../language/default-labels/videoCallScreenLabels';
@@ -31,8 +31,8 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
   // const {start, restart, isAuthorizedTranscriptUser} = useSTTAPI();
   const {isSTTActive, sttDepsReady, confirmSpokenLanguageChange} = useCaption();
   // const isDisabled = !isAuthorizedTranscriptUser();
-  const [isLanguagePopupOpen, setLanguagePopup] =
-    React.useState<boolean>(false);
+  const {openSpokenLanguagePopup, closeSpokenLanguagePopup} = useVideoCall();
+  const isDisabled = disabled || !sttDepsReady;
   // const isFirstTimePopupOpen = React.useRef(false);
 
   const isTranscriptON = sidePanel === SidePanelType.Transcript;
@@ -42,7 +42,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
     if (isTranscriptON) {
       setSidePanel(SidePanelType.None);
     } else if (!isSTTActive) {
-      setLanguagePopup(true);
+      openSpokenLanguagePopup(onConfirm);
     } else {
       setSidePanel(SidePanelType.Transcript);
     }
@@ -56,18 +56,20 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
       iconBackgroundColor: isTranscriptON
         ? $config.PRIMARY_ACTION_BRAND_COLOR
         : '',
-      tintColor: isTranscriptON
+      tintColor: isDisabled
+        ? $config.SEMANTIC_NEUTRAL
+        : isTranscriptON
         ? $config.PRIMARY_ACTION_TEXT_COLOR
         : $config.SECONDARY_ACTION_COLOR,
     },
-    disabled: disabled || !sttDepsReady,
+    disabled: isDisabled,
     btnTextProps: {
       text: showLabel
         ? isOnActionSheet
           ? labelCustom || label(isTranscriptON)?.replace(' ', '\n')
           : labelCustom || label(isTranscriptON)
         : '',
-      textColor: $config.FONT_COLOR,
+      textColor: isDisabled ? $config.SEMANTIC_NEUTRAL : $config.FONT_COLOR,
       numberOfLines: 2,
     },
   };
@@ -81,7 +83,7 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
     // 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
-    setLanguagePopup(false);
+    closeSpokenLanguagePopup();
     try {
       // const res = await start(language, userOwnLanguages);
       // if (res?.message.includes('STARTED')) {
@@ -98,12 +100,6 @@ const TranscriptIcon = (props: TranscriptIconProps) => {
   return (
     <View>
       <IconButton {...iconButtonProps} />
-      <LanguageSelectorPopup
-        modalVisible={isLanguagePopupOpen}
-        setModalVisible={setLanguagePopup}
-        onConfirm={onConfirm}
-        //  isFirstTimePopupOpen={isFirstTimePopupOpen.current}
-      />
     </View>
   );
 };

package/template/src/utils/useIsTablet.ts

@@ -0,0 +1,10 @@
+import {Platform, useWindowDimensions} from 'react-native';
+
+const TABLET_MIN_DIMENSION = 600;
+
+export default function useIsTablet() {
+  const {width, height} = useWindowDimensions();
+  return (
+    Platform.OS !== 'web' && Math.min(width, height) >= TABLET_MIN_DIMENSION
+  );
+}