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

package/src/components/AnimatedFooter.tsx

@@ -6,6 +6,8 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useFooterHeight } from './Footer';
+
 interface AnimatedFooterProps {
   offset: SharedValue<number>;
 }
@@ -14,12 +16,16 @@ export const AnimatedFooter: React.FC<AnimatedFooterProps> = ({
   offset,
   children,
 }) => {
+  const footerHeight = useFooterHeight();
+
   const animatedStyles = useAnimatedStyle(() => {
     return {
-      opacity: interpolate(offset.value, [0, 0.7, 1], [0, 0.5, 1]),
-      transform: [{ translateY: interpolate(offset.value, [0, 1], [10, 0]) }],
+      opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
+      transform: [
+        { translateY: interpolate(offset.value, [0, 1], [footerHeight, 0]) },
+      ],
     };
-  }, []);
+  }, [footerHeight]);
 
   const animatedProps = useAnimatedProps((): {
     pointerEvents: 'none' | 'auto';

package/src/components/AnimatedHLSFooter.tsx

@@ -2,11 +2,12 @@ import * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
   interpolate,
-  useAnimatedProps,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useFooterHeight } from './Footer';
+
 interface AnimatedHLSFooterProps {
   offset: SharedValue<number>;
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
@@ -17,27 +18,17 @@ export const AnimatedHLSFooter: React.FC<AnimatedHLSFooterProps> = ({
   children,
   style,
 }) => {
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(offset.value, [0, 0.7, 1], [0, 0.5, 1]),
-      transform: [{ translateY: interpolate(offset.value, [0, 1], [10, 0]) }],
-    };
-  }, []);
+  const footerHeight = useFooterHeight();
 
-  const animatedProps = useAnimatedProps((): {
-    pointerEvents: 'none' | 'auto';
-  } => {
+  const animatedStyles = useAnimatedStyle(() => {
     return {
-      pointerEvents: offset.value === 0 ? 'none' : 'auto',
+      transform: [
+        { translateY: interpolate(offset.value, [0, 1], [footerHeight, 0]) },
+      ],
     };
   }, []);
 
   return (
-    <Animated.View
-      style={[animatedStyles, style]}
-      animatedProps={animatedProps}
-    >
-      {children}
-    </Animated.View>
+    <Animated.View style={[animatedStyles, style]}>{children}</Animated.View>
   );
 };

package/src/components/AnimatedHeader.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import Animated, {
+  interpolate,
   useAnimatedProps,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useHeaderHeight } from './Header';
 import { useIsHLSViewer } from '../hooks-util';
 
 export interface AnimatedHeaderProps {
@@ -17,13 +19,22 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
   offset,
 }) => {
   const isHLSViewer = useIsHLSViewer();
+  const headerHeight = useHeaderHeight();
 
   const animatedStyles = useAnimatedStyle(() => {
+    if (isHLSViewer) {
+      return {
+        opacity: offset.value,
+        transform: [{ translateY: 0 }],
+      };
+    }
     return {
-      opacity: offset.value,
-      // transform: [{ translateY: interpolate(offset.value, [0, 1], [-10, 0]) }]
+      opacity: interpolate(offset.value, [0, 0.3, 1], [0, 0.7, 1]),
+      transform: [
+        { translateY: interpolate(offset.value, [0, 1], [-headerHeight, 0]) },
+      ],
     };
-  }, []);
+  }, [headerHeight, isHLSViewer]);
 
   const animatedProps = useAnimatedProps((): {
     pointerEvents: 'none' | 'auto';
@@ -35,7 +46,7 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
 
   return (
     <Animated.View
-      style={[isHLSViewer ? styles.hlsContainer : null, animatedStyles]}
+      style={[styles.container, animatedStyles]}
       animatedProps={animatedProps}
     >
       {children}
@@ -44,7 +55,7 @@ export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
 };
 
 const styles = StyleSheet.create({
-  hlsContainer: {
+  container: {
     position: 'absolute',
     top: 0,
     width: '100%',

package/src/components/BottomSheet.tsx

@@ -1,8 +1,13 @@
 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 type { StyleProp, TextProps, TouchableOpacityProps, ViewStyle } from 'react-native';
+import { KeyboardAvoidingView, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type {
+  StyleProp,
+  TextProps,
+  TouchableOpacityProps,
+  ViewStyle,
+} from 'react-native';
 
 import { CloseIcon } from '../Icons';
 import {
@@ -10,6 +15,7 @@ import {
   useHMSRoomStyle,
   useHMSRoomStyleSheet,
 } from '../hooks-util';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
@@ -20,12 +26,22 @@ 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;
 };
 
 export const BottomSheet: React.FC<BottomSheetProps> & {
   Header: React.FC<HeaderProps>;
   Divider: React.FC<BottomSheetDividerProps>;
-} = ({ dismissModal, style, children, containerStyle, ...resetProps }) => {
+} = ({
+  dismissModal,
+  fullWidth = false,
+  style,
+  children,
+  containerStyle,
+  bottomOffsetSpace = 32,
+  ...resetProps
+}) => {
   const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
 
   const containerStyles = useHMSRoomStyle((theme) => ({
@@ -34,6 +50,10 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
 
   const { handleModalHideAction } = useBottomSheetActionHandlers();
 
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  const Container = resetProps.avoidKeyboard && Platform.OS === 'android' ? KeyboardAvoidingView : View;
+
   return (
     <Modal
       {...resetProps}
@@ -53,11 +73,23 @@ export const BottomSheet: React.FC<BottomSheetProps> & {
       supportedOrientations={
         resetProps.supportedOrientations ?? ['portrait', 'landscape']
       }
-      // coverScreen={true}
+      statusBarTranslucent={true}
     >
-      <View style={[styles.container, containerStyles, containerStyle]}>
+      <Container
+        behavior='padding'
+        style={[
+          isLandscapeOrientation && !fullWidth
+            ? styles.landscapeContainer
+            : styles.container,
+          containerStyles,
+          containerStyle,
+        ]}
+      >
         {children}
-      </View>
+        {typeof bottomOffsetSpace === 'number' && bottomOffsetSpace > 0 ? (
+          <View style={{ height: bottomOffsetSpace, width: '100%' }} />
+        ) : null}
+      </Container>
     </Modal>
   );
 };
@@ -93,12 +125,18 @@ const BottomSheetHeader: React.FC<HeaderProps> = ({
   return (
     <View style={styles.header}>
       <View>
-        <Text testID={headingTestID} style={[styles.headerText, hmsRoomStyles.headerText]}>
+        <Text
+          testID={headingTestID}
+          style={[styles.headerText, hmsRoomStyles.headerText]}
+        >
           {heading}
         </Text>
 
         {subheading ? (
-          <Text testID={subheadingTestID} style={[styles.subheadingText, hmsRoomStyles.subheadingText]}>
+          <Text
+            testID={subheadingTestID}
+            style={[styles.subheadingText, hmsRoomStyles.subheadingText]}
+          >
             {subheading}
           </Text>
         ) : null}
@@ -168,7 +206,12 @@ const styles = StyleSheet.create({
   container: {
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
-    paddingBottom: 32,
+  },
+  landscapeContainer: {
+    borderRadius: 16,
+    width: '60%',
+    alignSelf: 'center',
+    marginBottom: 12,
   },
   header: {
     flexDirection: 'row',

package/src/components/Chat/ChatBanner.tsx

@@ -2,8 +2,11 @@ import * as React from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 
 import { useHMSRoomStyleSheet } from '../../hooks-util';
+import { useIsLandscapeOrientation } from '../../utils/dimension';
 
 export const ChatBanner = () => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     title: {
       color: theme.palette.on_surface_high,
@@ -19,6 +22,7 @@ export const ChatBanner = () => {
     <View style={styles.container}>
       <Image
         source={require('../../assets/empty-chat-illustration/empty-chat.png')}
+        style={isLandscapeOrientation ? styles.landscapeCoverImage : null}
       />
       <Text style={[styles.title, hmsRoomStyles.title]}>
         Start a Conversation
@@ -36,8 +40,13 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    overflow: 'hidden',
     // transform: [Platform.OS === 'android' ? { scale: -1 } : { scaleY: -1 }],
   },
+  landscapeCoverImage: {
+    flexShrink: 1,
+    resizeMode: 'contain',
+  },
   title: {
     fontSize: 20,
     lineHeight: 24,

package/src/components/Chat/ChatFilterBottomSheetView.tsx

@@ -8,6 +8,7 @@ import { ChatFilterView } from './ChatFilterView';
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import type { RootState } from '../../redux';
 import { setChatFilterSheetVisible } from '../../redux/actions';
+import { useIsLandscapeOrientation } from '../../utils/dimension';
 
 interface ChatFilterBottomSheetViewProps {}
 
@@ -15,6 +16,7 @@ const _ChatFilterBottomSheetView: React.FC<
   ChatFilterBottomSheetViewProps
 > = ({}) => {
   const dispatch = useDispatch();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
   const chatFilterSheetVisible = useSelector(
     (state: RootState) => state.app.chatFilterSheetVisible
   );
@@ -48,7 +50,11 @@ const _ChatFilterBottomSheetView: React.FC<
       <Animated.View
         entering={SlideInDown}
         exiting={SlideOutDown}
-        style={[styles.contentContainer, hmsRoomStyles.contentContainer]}
+        style={[
+          styles.contentContainer,
+          hmsRoomStyles.contentContainer,
+          isLandscapeOrientation ? { maxHeight: '88%' } : null,
+        ]}
       >
         <ChatFilterView />
       </Animated.View>
@@ -63,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,28 +1,40 @@
 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 (
     <BottomSheet
+      fullWidth={true}
       dismissModal={closeChatWindow}
       isVisible={modalVisible}
       avoidKeyboard={true}
       containerStyle={[
         styles.bottomSheet,
-        { marginTop: topSafeArea + HEADER_HEIGHT },
+        hmsRoomStyles.contentContainer,
+        {
+          marginTop: isLandscapeOrientation ? 0 : headerHeight,
+        },
       ]}
+      bottomOffsetSpace={0}
     >
       <ChatAndParticipantsView />
     </BottomSheet>
@@ -32,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/DefaultModal.tsx

@@ -8,6 +8,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { COLORS } from '../utils/theme';
 import { CustomButton } from './CustomButton';
 import { CloseIcon } from '../Icons';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 
 export interface DefaultModalProps {
   modalVisible: boolean;
@@ -32,6 +33,8 @@ export const DefaultModal: React.FC<DefaultModalProps> = ({
   modalStyle,
 }) => {
   const { left, right } = useSafeAreaInsets();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
   return (
     <Modal
       useNativeDriver={true}
@@ -51,7 +54,9 @@ export const DefaultModal: React.FC<DefaultModalProps> = ({
     >
       <View
         style={[
-          styles.contentContainer,
+          isLandscapeOrientation
+            ? styles.landscapeContentContainer
+            : styles.contentContainer,
           modalPosiion === 'flex-end' ? styles.end : styles.center,
           viewStyle,
           { marginLeft: left, marginRight: right },
@@ -80,6 +85,12 @@ const styles = StyleSheet.create({
     // minHeight: '20%',
     backgroundColor: COLORS.SURFACE.DEFAULT,
   },
+  landscapeContentContainer: {
+    maxHeight: '80%',
+    maxWidth: '60%',
+    // minHeight: '20%',
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+  },
   end: {
     flex: 1,
     borderTopLeftRadius: 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

@@ -32,6 +32,7 @@ export const _Footer: React.FC<FooterProps> = () => {
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
+  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 
@@ -52,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 = [];
@@ -66,7 +73,7 @@ export const _Footer: React.FC<FooterProps> = () => {
       actions.push('chat');
     }
 
-    if (!isOnStage && isViewer) {
+    if (canShowHandRaiseInFooter) {
       actions.unshift('hand-raise');
     }
 
@@ -86,10 +93,9 @@ export const _Footer: React.FC<FooterProps> = () => {
 
     return actions;
   }, [
-    isOnStage,
+    canShowHandRaiseInFooter,
     canShowOptions,
     canShowChat,
-    isViewer,
     canPublishAudio,
     canPublishVideo,
   ]);
@@ -101,7 +107,7 @@ export const _Footer: React.FC<FooterProps> = () => {
   return (
     <SafeAreaView
       style={isHLSViewer ? null : containerStyles}
-      edges={['bottom']}
+      edges={['bottom', 'left', 'right']}
     >
       <View
         style={[
@@ -136,12 +142,15 @@ export const _Footer: React.FC<FooterProps> = () => {
   );
 };
 
-export const useFooterHeight = () => {
+export const useFooterHeight = (excludeSafeArea: boolean = false) => {
   const isHLSViewer = useIsHLSViewer();
   const { bottom } = useSafeAreaInsets();
 
   return (
-    bottom + (isHLSViewer ? 8 : 16) + (Platform.OS === 'android' ? 16 : 0) + 40
+    (excludeSafeArea ? 0 : bottom) +
+    (isHLSViewer ? 8 : 16) +
+    (Platform.OS === 'android' ? 16 : 0) +
+    40
   ); // bottomSafeArea + paddingTop + marginBottom + content
 };
 
@@ -152,7 +161,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide aimation offsets because of this change
+    marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide animation offsets because of this change
   },
   hlsContainer: {
     paddingTop: 8,