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

package/src/components/BottomSheet.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Modal from 'react-native-modal';
 import type { ReactNativeModal } from 'react-native-modal';
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { KeyboardAvoidingView, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type {
   StyleProp,
   TextProps,
@@ -26,6 +26,7 @@ export type BottomSheetProps = WithRequired<
   // closes modal and no action will be taken after modal has been closed
   dismissModal(): void;
   containerStyle?: StyleProp<ViewStyle>;
+  bottomOffsetSpace?: number;
   fullWidth?: boolean;
 };
 
@@ -38,6 +39,7 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
   style,
   children,
   containerStyle,
+  bottomOffsetSpace = 32,
   ...resetProps
 }) => {
   const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
@@ -50,6 +52,8 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
 
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
+  const Container = resetProps.avoidKeyboard && Platform.OS === 'android' ? KeyboardAvoidingView : View;
+
   return (
     <Modal
       {...resetProps}
@@ -71,7 +75,8 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
       }
       statusBarTranslucent={true}
     >
-      <View
+      <Container
+        behavior='padding'
         style={[
           isLandscapeOrientation && !fullWidth
             ? styles.landscapeContainer
@@ -81,7 +86,10 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
         ]}
       >
         {children}
-      </View>
+        {typeof bottomOffsetSpace === 'number' && bottomOffsetSpace > 0 ? (
+          <View style={{ height: bottomOffsetSpace, width: '100%' }} />
+        ) : null}
+      </Container>
     </Modal>
   );
 };
@@ -198,11 +206,9 @@ const styles = StyleSheet.create({
   container: {
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
-    paddingBottom: 32,
   },
   landscapeContainer: {
     borderRadius: 16,
-    paddingBottom: 32,
     width: '60%',
     alignSelf: 'center',
     marginBottom: 12,

package/src/components/Chat/ChatFilterBottomSheetView.tsx

@@ -69,6 +69,7 @@ const styles = StyleSheet.create({
     height: '100%',
     zIndex: 1,
     justifyContent: 'flex-end',
+    alignSelf: 'center',
   },
   backdrop: {
     position: 'absolute',

package/src/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.tsx

@@ -1,19 +1,24 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BottomSheet } from '../BottomSheet';
-import { useShowChatAndParticipants } from '../../hooks-util';
+import { useHMSRoomStyleSheet, useShowChatAndParticipants } from '../../hooks-util';
 import { ChatAndParticipantsView } from './ChatAndParticipantsView';
-import { HEADER_HEIGHT } from '../Header';
+import { useHeaderHeight } from '../Header';
 import { useIsLandscapeOrientation } from '../../utils/dimension';
 
 export const ChatAndParticipantsBottomSheet = () => {
-  const { top: topSafeArea } = useSafeAreaInsets();
+  const headerHeight = useHeaderHeight();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const { modalVisible, hide } = useShowChatAndParticipants();
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
   const closeChatWindow = () => hide('modal');
 
   return (
@@ -24,10 +29,12 @@ export const ChatAndParticipantsBottomSheet = () => {
       avoidKeyboard={true}
       containerStyle={[
         styles.bottomSheet,
+        hmsRoomStyles.contentContainer,
         {
-          marginTop: topSafeArea + (isLandscapeOrientation ? 0 : HEADER_HEIGHT),
+          marginTop: isLandscapeOrientation ? 0 : headerHeight,
         },
       ]}
+      bottomOffsetSpace={0}
     >
       <ChatAndParticipantsView />
     </BottomSheet>
@@ -37,7 +44,5 @@ export const ChatAndParticipantsBottomSheet = () => {
 const styles = StyleSheet.create({
   bottomSheet: {
     flex: 1,
-    backgroundColor: undefined,
-    paddingBottom: 0,
   },
 });

package/src/components/ChatAndParticipants/ChatAndParticipantsView.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import {
   useHMSRoomStyleSheet,
@@ -35,7 +36,7 @@ const _ChatAndParticipantsView: React.FC = () => {
     activeChatBottomSheetTab === 'Chat' && canShowChat && !overlayChatLayout;
 
   return (
-    <View style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['left', 'right']}>
       <View
         style={[
           styles.contentContainer,
@@ -55,7 +56,7 @@ const _ChatAndParticipantsView: React.FC = () => {
       </View>
 
       <ChatFilterBottomSheetView />
-    </View>
+    </SafeAreaView>
   );
 };
 
@@ -68,7 +69,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 16,
     paddingTop: 12,
-    paddingBottom: 32,
+    paddingBottom: Platform.OS === 'ios' ? 32 : 0,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
   },

package/src/components/DisplayView.tsx

@@ -1,11 +1,7 @@
 import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { InteractionManager } from 'react-native';
+import { InteractionManager, View } from 'react-native';
 import { HMSTrack, HMSCameraControl } from '@100mslive/react-native-hms';
-import Animated, {
-  interpolate,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
 import { DefaultModal } from './DefaultModal';
@@ -132,19 +128,14 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
     setModalVisible(ModalTypes.STREAMING_QUALITY_SETTING, true);
   };
 
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      transform: [{ translateY: interpolate(offset.value, [0, 1], [4, 0]) }],
-    };
-  }, []);
-
   return (
-    <Animated.View style={[{ flex: 1 }, animatedStyles]}>
+    <View style={{ flex: 1 }}>
       {isHLSViewer ? (
         <HLSView />
       ) : (
         <WebrtcView
           ref={gridViewRef}
+          offset={offset}
           peerTrackNodes={peerTrackNodes}
           handlePeerTileMorePress={handlePeerTileMorePress}
         />
@@ -239,6 +230,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
           </DefaultModal>
         </>
       )}
-    </Animated.View>
+    </View>
   );
 };

package/src/components/EndRoomModal.tsx

@@ -16,7 +16,6 @@ export const EndRoomModal: React.FC<EndRoomModalProps> = () => {
     <BottomSheet
       dismissModal={dismissModal}
       isVisible={modalVisibleType === ModalTypes.END_ROOM}
-      animationOutTiming={700}
     >
       <EndRoomModalContent dismissModal={dismissModal} />
     </BottomSheet>

package/src/components/EndRoomModalContent.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 
 import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
 import { AlertTriangleIcon, CloseIcon } from '../Icons';
@@ -40,7 +41,7 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
 
   const isStreaming = useSelector(
     (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.running ?? false
+      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
   );
 
   return (

package/src/components/Footer.tsx

@@ -24,7 +24,6 @@ import {
 } from '../hooks-sdk';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
-import { useIsLandscapeOrientation } from '../utils/dimension';
 
 interface FooterProps {}
 
@@ -33,7 +32,7 @@ export const _Footer: React.FC<FooterProps> = () => {
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
-  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 
@@ -54,12 +53,18 @@ export const _Footer: React.FC<FooterProps> = () => {
       !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
   );
 
+  const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
+
+  const canShowHandRaiseInFooter = !isOnStage && isViewer; // on_stage_exp object undefined && viewer -> show in footer
+  const canShowHandRaiseInRoomModal = !isOnStage && !isViewer; // on_stage_exp object undefined && publisher -> show in room modal
+
   const canShowOptions =
-    isViewer ||
-    canPublishScreen ||
     canShowParticipants ||
+    canPublishScreen ||
     canShowBRB ||
-    canStartRecording;
+    canShowHandRaiseInRoomModal ||
+    canStartRecording ||
+    canEditUsernameFromRoomModal;
 
   const footerActionButtons = useMemo(() => {
     const actions = [];
@@ -68,7 +73,7 @@ export const _Footer: React.FC<FooterProps> = () => {
       actions.push('chat');
     }
 
-    if (!isOnStage && isViewer) {
+    if (canShowHandRaiseInFooter) {
       actions.unshift('hand-raise');
     }
 
@@ -88,10 +93,9 @@ export const _Footer: React.FC<FooterProps> = () => {
 
     return actions;
   }, [
-    isOnStage,
+    canShowHandRaiseInFooter,
     canShowOptions,
     canShowChat,
-    isViewer,
     canPublishAudio,
     canPublishVideo,
   ]);
@@ -103,11 +107,11 @@ export const _Footer: React.FC<FooterProps> = () => {
   return (
     <SafeAreaView
       style={isHLSViewer ? null : containerStyles}
-      edges={['bottom']}
+      edges={['bottom', 'left', 'right']}
     >
       <View
         style={[
-          isLandscapeOrientation ? styles.landscapeContainer : styles.container,
+          styles.container,
           isHLSViewer ? styles.hlsContainer : containerStyles,
         ]}
       >
@@ -138,15 +142,14 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 };
 
-export const useFooterHeight = () => {
+export const useFooterHeight = (excludeSafeArea: boolean = false) => {
   const isHLSViewer = useIsHLSViewer();
-  const isLandscapeOrientation = useIsLandscapeOrientation();
   const { bottom } = useSafeAreaInsets();
 
   return (
-    bottom +
-    (isHLSViewer ? 8 : isLandscapeOrientation ? 4 : 16) +
-    (Platform.OS === 'android' ? (isLandscapeOrientation ? 4 : 16) : 0) +
+    (excludeSafeArea ? 0 : bottom) +
+    (isHLSViewer ? 8 : 16) +
+    (Platform.OS === 'android' ? 16 : 0) +
     40
   ); // bottomSafeArea + paddingTop + marginBottom + content
 };
@@ -160,14 +163,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide animation offsets because of this change
   },
-  landscapeContainer: {
-    paddingTop: 4,
-    paddingHorizontal: 4,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: Platform.OS === 'android' ? 4 : 0,
-  },
   hlsContainer: {
     paddingTop: 8,
   },

package/src/components/GridView.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import { View, FlatList, StyleSheet, useWindowDimensions } from 'react-native';
+import { View, FlatList, StyleSheet, useWindowDimensions, Platform } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import type {
   LayoutChangeEvent,
@@ -18,6 +18,7 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { useSafeAreaFrame } from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -46,12 +47,32 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     const hmsViewRefs = useRef<Record<string, ElementRef<typeof HMSView>>>({});
     const regularTilesFlatlistRef = useRef<FlatList<PeerTrackNode[]>>(null);
     const screenshareTilesFlatlistRef = useRef<FlatList<PeerTrackNode>>(null);
-    const [insetTileBoundingBox, setInsetTileBoundingBox] = useState<{ width: number | null, height: number | null }>({ width: null, height: null });
+    const [insetTileBoundingBox, setInsetTileBoundingBox] = useState<{
+      width: number | null;
+      height: number | null;
+    }>({ width: null, height: null });
 
-    const isLandscapeOrientation = useIsLandscapeOrientation();
     const screenshareTilesAvailable = useSelector(
       (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
     );
+    const regularTilesAvailable = pairedPeers.length > 0;
+
+    const isLandscapeOrientation = useIsLandscapeOrientation();
+
+    // On Orientation change, scroll to first page of list
+    React.useEffect(() => {
+      if (screenshareTilesAvailable) {
+        screenshareTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+      }
+    }, [screenshareTilesAvailable, isLandscapeOrientation]);
+
+    // On Orientation change, scroll to first page of list
+    React.useEffect(() => {
+      if (regularTilesAvailable) {
+        regularTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+      }
+    }, [regularTilesAvailable, isLandscapeOrientation]);
+
     const miniviewPeerTrackNodeExists = useSelector(
       (state: RootState) => !!state.app.miniviewPeerTrackNode
     );
@@ -105,7 +126,10 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
 
     const _handleLayoutChange = React.useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
-        setInsetTileBoundingBox({ width: nativeEvent.layout.width, height: nativeEvent.layout.height });
+        setInsetTileBoundingBox({
+          width: nativeEvent.layout.width,
+          height: nativeEvent.layout.height,
+        });
       },
       []
     );
@@ -180,6 +204,8 @@ const RegularTiles = React.forwardRef<
   RegularTilesProps
 >(({ pairedPeers, onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
   const dispatch = useDispatch();
+  const { height: safeHeight } = useSafeAreaFrame();
+
   const screenshareTilesAvailable = useSelector(
     (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
   );
@@ -223,6 +249,7 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
+        style={Platform.OS === 'ios' ? {maxHeight: (safeHeight - 16)} : null}
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}

package/src/components/HLSFooter.tsx

@@ -17,7 +17,7 @@ export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
 
   return (
     <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
-      {overlayChatVisible ? <HLSChatView /> : null}
+      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />
 

package/src/components/HLSView.tsx

@@ -6,6 +6,7 @@ import {
   HMSHLSPlayer,
   HMSHLSPlayerPlaybackState,
   useHMSHLSPlayerPlaybackState,
+  HMSStreamingState,
 } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -128,7 +129,7 @@ export const _HLSView: React.FC = () => {
 
   return (
     <View style={styles.hlsView}>
-      {room?.hlsStreamingState?.running ? (
+      {room?.hlsStreamingState?.state === HMSStreamingState.STARTED ? (
         room?.hlsStreamingState?.variants?.slice(0, 1)?.map((variant, index) =>
           variant?.hlsStreamUrl ? (
             <View key={index} style={styles.hlsPlayerContainer}>

package/src/components/HMSKeyboardAvoidingView.android.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import Animated, {
-  // useAnimatedKeyboard,
-  // useAnimatedStyle,
-  // useDerivedValue,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated'; // useDerivedValue, // useAnimatedStyle, // useAnimatedKeyboard,
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -5,18 +5,21 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
-  bottomOffset?: number;
+  bottomOffset?: number | SharedValue<number>;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style, bottomOffset=0 }) => {
+> = ({ children, style, bottomOffset = 0 }) => {
   const animatedKeyboard = useAnimatedKeyboard();
 
-  const initialPageY = useDerivedValue(() => bottomOffset, [bottomOffset]);
+  const initialPageY = useDerivedValue(() => {
+    return typeof bottomOffset === 'number' ? bottomOffset : bottomOffset.value;
+  }, [bottomOffset]);
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;

package/src/components/HMSLiveIndicator.tsx

@@ -4,27 +4,18 @@ import {
   View,
   Text,
   Platform,
-  TouchableOpacity,
 } from 'react-native';
 import { useSelector } from 'react-redux';
+import { HMSStreamingState } from '@100mslive/react-native-hms';
 
-import {
-  useHMSRoomStyleSheet,
-  useIsHLSViewer,
-  useShowChatAndParticipants,
-} from '../hooks-util';
-import { EyeIcon } from '../Icons';
-import { COLORS, hexToRgbA } from '../utils/theme';
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
 
 const _HMSLiveIndicator = () => {
-  const isHLSViewer = useIsHLSViewer();
-  const previewPeerCount = useSelector(
-    (state: RootState) => state.hmsStates.room?.peerCount
-  );
   const live = useSelector(
-    (state: RootState) => !!state.hmsStates.room?.hlsStreamingState?.running
+    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
   );
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
@@ -35,51 +26,15 @@ const _HMSLiveIndicator = () => {
       color: COLORS.WHITE,
       fontFamily: `${typograhy.font_family}-SemiBold`,
     },
-    viewers: {
-      backgroundColor: isHLSViewer
-        ? theme.palette.background_dim &&
-          hexToRgbA(theme.palette.background_dim, 0.64)
-        : undefined,
-      borderWidth: isHLSViewer ? 0 : 1,
-      borderColor: theme.palette.border_bright,
-    },
-    count: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typograhy.font_family}-SemiBold`,
-    },
   }));
 
-  const { canShowParticipants, show } = useShowChatAndParticipants();
-
-  const showParticipantsSheet = () => {
-    show('participants');
-  };
-
   if (!live) {
     return null;
   }
 
   return (
-    <View style={styles.container}>
-      {/* Live */}
-      <View style={[styles.live, hmsRoomStyles.live]}>
-        <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
-      </View>
-
-      {/* Viewer Count */}
-      {typeof previewPeerCount === 'number' ? (
-        <TouchableOpacity
-          style={[styles.viewers, hmsRoomStyles.viewers]}
-          onPress={showParticipantsSheet}
-          disabled={!canShowParticipants}
-        >
-          <EyeIcon testID={TestIds.peer_count_icon} />
-
-          <Text testID={TestIds.peer_count} style={[styles.count, hmsRoomStyles.count]}>
-            {previewPeerCount}
-          </Text>
-        </TouchableOpacity>
-      ) : null}
+    <View style={[styles.live, hmsRoomStyles.live]}>
+      <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
     </View>
   );
 };
@@ -87,13 +42,11 @@ const _HMSLiveIndicator = () => {
 export const HMSLiveIndicator = React.memo(_HMSLiveIndicator);
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-  },
   live: {
     paddingHorizontal: 8,
-    paddingVertical: 4,
+    paddingVertical: 6,
     borderRadius: 4,
+    marginRight: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
@@ -104,22 +57,4 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center',
   },
-  viewers: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 4,
-    paddingRight: 8,
-    paddingLeft: 6,
-    marginLeft: 8,
-    borderRadius: 4,
-  },
-  count: {
-    fontSize: 10,
-    lineHeight: Platform.OS === 'android' ? 16 : undefined,
-    letterSpacing: 1.5,
-    textAlign: 'center',
-    textAlignVertical: 'center',
-
-    marginLeft: 4,
-  },
 });