@100mslive/react-native-room-kit 1.0.6 → 1.0.8

package/src/components/MeetingScreenContent.tsx

@@ -1,26 +1,27 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { StyleSheet, Pressable, View } from 'react-native';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
+import { StyleSheet, View, Keyboard } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   Easing,
+  KeyboardState,
   cancelAnimation,
   runOnJS,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { PipModes } from '../utils/types';
+import { HeaderFooterHideDelayMs, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useIsHLSViewer } from '../hooks-util';
+import { useIsHLSViewer, useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { HLSFooter } from './HLSFooter';
 import { AnimatedHeader } from './AnimatedHeader';
-import { useIsLandscapeOrientation } from '../utils/dimension';
 // import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
@@ -37,80 +38,85 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
-  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const { keyboardState } = useKeyboardState();
 
-  const toggleControls = useCallback(() => {
-    'worklet';
-    if (timerIdRef.current) {
+  const dismissKeyboard = useCallback(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const clearTimer = useCallback(() => {
+    if (timerIdRef.current !== null) {
       clearTimeout(timerIdRef.current);
       timerIdRef.current = null;
     }
-    cancelAnimation(offset);
-    offset.value = withTiming(
-      offset.value === 1 ? 0 : 1,
-      { duration: 200, easing: Easing.ease },
-      (finished) => {
-        if (finished) {
-          runOnJS(setControlsHidden)(offset.value === 0);
-        }
-      }
-    );
   }, []);
 
+  const toggleControls = useCallback(
+    (fromTimeout: boolean = false) => {
+      'worklet';
+      if (
+        fromTimeout !== true &&
+        (keyboardState.value === KeyboardState.OPEN ||
+          keyboardState.value === KeyboardState.OPENING)
+      ) {
+        runOnJS(dismissKeyboard)();
+      } else {
+        runOnJS(clearTimer)();
+        cancelAnimation(offset);
+        offset.value = withTiming(
+          offset.value === 1 ? 0 : 1,
+          { duration: 200, easing: Easing.ease },
+          (finished) => {
+            if (finished) {
+              runOnJS(setControlsHidden)(offset.value === 0);
+            }
+          }
+        );
+      }
+    },
+    [dismissKeyboard, clearTimer]
+  );
+
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable
-  // useEffect(() => {
-  //   if (false && !isHLSViewer) {
-  //     if (timerIdRef.current) {
-  //       clearTimeout(timerIdRef.current);
-  //     }
-  //     timerIdRef.current = setTimeout(() => {
-  //       timerIdRef.current = null;
-  //       toggleControls();
-  //     }, 3000); d
+  useEffect(() => {
+    clearTimer();
+    timerIdRef.current = setTimeout(() => {
+      timerIdRef.current = null;
+      toggleControls(true);
+    }, HeaderFooterHideDelayMs);
 
-  //     return () => {
-  //       if (timerIdRef.current) {
-  //         clearTimeout(timerIdRef.current);
-  //       }
-  //     };
-  //   }
-  // }, [isHLSViewer]);
+    return clearTimer;
+  }, [clearTimer, toggleControls]);
+
+  const tapGesture = Gesture.Tap()
+    .onEnd(() => toggleControls())
+    .requireExternalGestureToFail();
 
-  /**
-   * TODO: disbaled Expended View animation in Webrtc flow
-   *
-   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
-   * Solution: Try using Tab Gesture detector instead on Pressable component
-   */
   return (
-    <Pressable
-      onPress={toggleControls}
-      style={styles.container}
-      disabled={isHLSViewer || true}
-    >
+    <View style={styles.container}>
       <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
-      <View style={styles.reconnectionWrapper}>
-        {isPipModeActive || isLandscapeOrientation ? null : (
-          <AnimatedHeader offset={offset}>
-            <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
-          </AnimatedHeader>
-        )}
-
-        <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
+      <GestureDetector gesture={tapGesture}>
+        <View collapsable={false} style={styles.container}>
+          {isPipModeActive ? null : (
+            <AnimatedHeader offset={offset}>
+              <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
+            </AnimatedHeader>
+          )}
 
-        {/* <ReconnectionView /> */}
-      </View>
+          <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-      {isPipModeActive ? null : isHLSViewer ? (
-        <HLSFooter offset={offset} />
-      ) : (
-        <AnimatedFooter offset={offset}>
-          <Footer />
-        </AnimatedFooter>
-      )}
-    </Pressable>
+          {isPipModeActive ? null : isHLSViewer ? (
+            <HLSFooter offset={offset} />
+          ) : (
+            <AnimatedFooter offset={offset}>
+              <Footer />
+            </AnimatedFooter>
+          )}
+        </View>
+      </GestureDetector>
+    </View>
   );
 };
 

package/src/components/MiniView.tsx

@@ -56,8 +56,8 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
     usePeerMinimizedViewDimensions();
 
   const size = {
-    width: minimized ? minimizedViewWidth : (isLandscapeOrientation ? 178 : 104),
-    height: minimized ? minimizedViewHeigth : (isLandscapeOrientation ? 98 : 186),
+    width: minimized ? minimizedViewWidth : isLandscapeOrientation ? 178 : 104,
+    height: minimized ? minimizedViewHeigth : isLandscapeOrientation ? 98 : 186,
   };
 
   const dimensionStyles = {
@@ -86,7 +86,7 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       cornerOffset.x,
       cornerOffset.topY,
       boundingBoxWidth,
-      boundingBoxHeight,
+      boundingBoxHeight
     );
 
     const finalX = snapPointX;
@@ -199,7 +199,7 @@ const getSnappingPoints = (
   xCornerOffset: number,
   yCornerOffset: number,
   boundingBoxWidth: number | null,
-  boundingBoxHeight: number | null,
+  boundingBoxHeight: number | null
 ) => {
   'worklet';
   if (!boundingBoxWidth || !boundingBoxHeight) {

package/src/components/Modals.tsx

@@ -40,7 +40,7 @@ import { ModalTypes, SUPPORTED_ASPECT_RATIOS } from '../utils/types';
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { SwitchRow } from './SwitchRow';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSConferencingScreenConfig, useHMSInstance } from '../hooks-util';
 
 export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
   const instance = useHMSInstance();
@@ -48,16 +48,31 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
   const roles = useSelector((state: RootState) => state.hmsStates.roles);
 
   const [newRole, setNewRole] = useState<HMSRole>(peer?.role!);
-  const [request, setRequest] = useState<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
 
+  const skipPreviewForRoleChange = useHMSConferencingScreenConfig(
+    (conferencingScreenConfig) => {
+      if (
+        conferencingScreenConfig?.elements &&
+        'on_stage_exp' in conferencingScreenConfig.elements
+      ) {
+        return (
+          conferencingScreenConfig.elements.on_stage_exp
+            ?.skip_preview_for_role_change || false
+        );
+      }
+      return false;
+    }
+  );
   const hideMenu = () => setVisible(false);
   const showMenu = () => setVisible(true);
   const changeRole = () => {
-    instance?.changeRoleOfPeer(peer!, newRole, !request).catch((e) => {
-      console.log('Change Role of Peer Error: ', e);
-      Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
-    });
+    instance
+      ?.changeRoleOfPeer(peer!, newRole, skipPreviewForRoleChange)
+      .catch((e) => {
+        console.log('Change Role of Peer Error: ', e);
+        Toast.showWithGravity((e as Error).message, Toast.LONG, Toast.TOP);
+      });
     cancelModal();
   };
 
@@ -100,23 +115,6 @@ export const ChangeRoleModal = ({ cancelModal }: { cancelModal: Function }) => {
           );
         })}
       </Menu>
-      {!peer?.isLocal && (
-        <TouchableOpacity
-          style={styles.roleChangeModalPermissionContainer}
-          onPress={() => {
-            setRequest(!request);
-          }}
-        >
-          <Text
-            style={[
-              styles.roleChangeModalPermission,
-              request ? { color: COLORS.PRIMARY.DEFAULT } : null,
-            ]}
-          >
-            Request permission from the user
-          </Text>
-        </TouchableOpacity>
-      )}
       <View style={styles.roleChangeModalPermissionContainer}>
         <CustomButton
           title="Cancel"
@@ -347,8 +345,8 @@ export const RtcStatsModal = () => {
                                       value?.width ?? 0
                                     }`
                                   : key === 'qualityLimitationReasons'
-                                  ? value.reason
-                                  : value}
+                                    ? value.reason
+                                    : value}
                               </Text>
                             </View>
                           );

package/src/components/OverlayedViews.tsx

@@ -1,18 +1,21 @@
 import * as React from 'react';
+import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
 import { HLSChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
-export type OverlayedViewsProps = {};
+export type OverlayedViewsProps = {
+  offset: SharedValue<number>;
+};
 
-const _OverlayedViews: React.FC<OverlayedViewsProps> = () => {
+const _OverlayedViews: React.FC<OverlayedViewsProps> = ({ offset }) => {
   const { overlayChatVisible } = useShowChatAndParticipants();
 
   return (
     <OverlayContainer.Overlay>
-      {overlayChatVisible ? <HLSChatView /> : null}
+      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />
     </OverlayContainer.Overlay>

package/src/components/Participants/ParticipantsItemOptions.tsx

@@ -67,6 +67,12 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     return roles.find((role) => role.name === offStageRoleStr);
   });
 
+  const skipPreviewForRoleChange = useHMSLayoutConfig(
+    (layoutConfig) =>
+      layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
+        ?.skip_preview_for_role_change
+  );
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     divider: {
       backgroundColor: theme.palette.border_bright,
@@ -79,7 +85,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
   const handleBringOnStagePress = () => {
     if (onStageRole) {
       hmsInstance
-        .changeRoleOfPeer(peer, onStageRole)
+        .changeRoleOfPeer(peer, onStageRole, skipPreviewForRoleChange || false)
         .then((d) => console.log('Bring on Stage Success: ', d))
         .catch((e) => console.log('Bring on Stage Error: ', e));
     } else {
@@ -95,7 +101,9 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
         .then((d) => console.log('Lower Remote Peer hand Success: ', d))
         .catch((e) => console.log('Lower Remote Peer hand Error: ', e));
     } else {
-      console.warn(`peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`);
+      console.warn(
+        `peer.isHandRaised = ${peer.isHandRaised} | peer's hand is not raised`
+      );
     }
     onItemPress();
   };
@@ -169,8 +177,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
     peer.videoTrack?.isMute();
 
   const showBringOnStageOptions =
-    offStageRoles &&
-    offStageRoles.includes(peer.role?.name || '');
+    offStageRoles && offStageRoles.includes(peer.role?.name || '');
 
   const showLowerHandOption = peer.isHandRaised;
 
@@ -189,9 +196,7 @@ const _ParticipantsItemOptions: React.FC<ParticipantsItemOptionsProps> = ({
         },
         {
           id: 'lower-hand',
-          icon: (
-            <HandIcon type="off" style={{ width: 20, height: 20 }} />
-          ),
+          icon: <HandIcon type="off" style={{ width: 20, height: 20 }} />,
           label: 'Lower Hand',
           pressHandler: handleLowerHandPress,
           isActive: false,

package/src/components/PeerSettingsModalContent.tsx

@@ -47,6 +47,9 @@ export const PeerSettingsModalContent: React.FC<
     const mininode = state.app.miniviewPeerTrackNode;
     return mininode && mininode.id === peerTrackNode.id;
   });
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const removeTextStyle = useHMSRoomStyle((theme) => ({
     color: theme.palette.alert_error_default,
@@ -123,7 +126,7 @@ export const PeerSettingsModalContent: React.FC<
 
       {/* Content */}
       <View style={styles.contentContainer}>
-        {peer.isLocal ? (
+        {peer.isLocal && !editUsernameDisabled ? (
           <SettingItem
             testID={TestIds.tile_modal_change_name_btn}
             text={'Change Name'}

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -52,6 +52,9 @@ export const _PeerVideoTileView = React.forwardRef<
     const isPipModeActive = useSelector(
       (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
     );
+    const editUsernameDisabled = useSelector(
+      (state: RootState) => state.app.editUsernameDisabled
+    );
 
     const onSpotlight = useSelector((state: RootState) => {
       const { onSpotlight } = isTileOnSpotlight(state.user.spotlightTrackId, {
@@ -101,7 +104,7 @@ export const _PeerVideoTileView = React.forwardRef<
 
     const canTakeActionOnPeer = useSelector((state: RootState) => {
       if (peer.isLocal) {
-        return true;
+        return !editUsernameDisabled || insetMode;
       }
 
       const permissions = state.hmsStates.localPeer?.role?.permissions;

package/src/components/PressableIcon.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
 import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { hexToRgbA } from '../utils/theme';
@@ -41,24 +42,28 @@ export const PressableIcon: React.FC<PressableIconProps> = ({
     [isHLSViewer]
   );
 
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
   return (
-    <TouchableOpacity
-      style={[
-        styles.pressable,
-        hmsRoomStyles.pressable,
-        {
-          borderRadius: rounded ? 20 : 8,
-          ...(border && !isHLSViewer
-            ? { ...styles.withBorder, ...hmsRoomStyles.border }
-            : undefined),
-          ...(active ? hmsRoomStyles.active : undefined),
-        },
-        style,
-      ]}
-      {...restProps}
-    >
-      {children}
-    </TouchableOpacity>
+    <GestureDetector gesture={tapGesture}>
+      <TouchableOpacity
+        style={[
+          styles.pressable,
+          hmsRoomStyles.pressable,
+          {
+            borderRadius: rounded ? 20 : 8,
+            ...(border && !isHLSViewer
+              ? { ...styles.withBorder, ...hmsRoomStyles.border }
+              : undefined),
+            ...(active ? hmsRoomStyles.active : undefined),
+          },
+          style,
+        ]}
+        {...restProps}
+      >
+        {children}
+      </TouchableOpacity>
+    </GestureDetector>
   );
 };
 

package/src/components/Preview.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
   Keyboard,
   StyleSheet,
@@ -20,7 +20,7 @@ import { HMSPreviewTile } from './HMSPreviewTile';
 import { HMSPreviewTitle } from './HMSPreviewTitle';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSPreviewNetworkQuality } from './HMSPreviewNetworkQuality';
-import { useCanPublishVideo } from '../hooks-sdk';
+import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
 import { HMSPreviewHLSLiveIndicator } from './HMSPreviewHLSLiveIndicator';
 import { CompanyLogo } from './CompanyLogo';
 import {
@@ -75,6 +75,19 @@ export const Preview = ({
     []
   );
 
+  const hmsActions = useHMSActions();
+
+  useEffect(() => {
+    async function setupAudioVideoOnPreview() {
+      // TODO: rectify the below issue,
+      // false means audio/video is enabled, true means audio/video is disabled
+      // it should have been true means audio/video is enabled, false means audio/video is disabled
+      await hmsActions.setLocalAudioEnabled(false);
+      await hmsActions.setLocalVideoEnabled(false);
+    }
+    setupAudioVideoOnPreview().then((r) => console.log(r));
+  }, []);
+
   return (
     <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
       <View style={[styles.container, hmsRoomStyles.container]}>

package/src/components/PreviewForRoleChangeModal.tsx

@@ -124,8 +124,9 @@ const _PreviewForRoleChangeModal = () => {
           track.type === HMSTrackType.VIDEO
       ) as HMSLocalVideoTrack;
       if (localVideoTrack) {
+        localVideoTrack.setMute(false);
         setLocalVideoTrack(localVideoTrack);
-        setIsLocalVideoMuted(localVideoTrack.isMute());
+        setIsLocalVideoMuted(false);
       }
 
       const localAudioTrack = previewForRoleTracks.find(
@@ -133,8 +134,9 @@ const _PreviewForRoleChangeModal = () => {
           track.type === HMSTrackType.AUDIO
       ) as HMSLocalAudioTrack;
       if (localAudioTrack) {
+        localAudioTrack.setMute(false);
         setLocalAudioTrack(localAudioTrack);
-        setIsLocalAudioMuted(localAudioTrack.isMute());
+        setIsLocalAudioMuted(false);
       }
 
       // lower hand
@@ -362,7 +364,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: 'silver',
   },
   header: {
     position: 'absolute',