@100mslive/react-native-room-kit 1.1.5 → 1.1.7

package/src/components/HMSHLSMessage.tsx

@@ -8,7 +8,6 @@ import {
   TouchableOpacity,
 } from 'react-native';
 import type { HMSMessage } from '@100mslive/react-native-hms';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import {
   useAllowBlockingPeerFromChat,
@@ -49,16 +48,14 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
   const messageSender = message.sender;
 
   const hmsRoomStyles = useHMSRoomStyleSheet(
-    (_theme, typography) => ({
-      senderName: {
-        color: '#ffffff',
-        fontFamily: `${typography.font_family}-SemiBold`,
-        textShadowColor: 'rgba(0, 0, 0, 0.5)',
-      },
-      message: {
-        color: '#ffffff',
+    (theme, typography) => ({
+      regularSurfaceHigh: {
         fontFamily: `${typography.font_family}-Regular`,
-        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+        color: theme.palette.on_surface_high,
+      },
+      semiBoldSurfaceLow: {
+        fontFamily: `${typography.font_family}-SemiBold`,
+        color: theme.palette.on_surface_low,
       },
       threeDots: {
         tintColor: '#ffffff',
@@ -98,36 +95,32 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
         </View>
       ) : null}
 
-      <View style={styles.nameWrapper}>
-        <Text
-          style={[styles.senderName, hmsRoomStyles.senderName]}
-          numberOfLines={1}
-        >
-          {messageSender
-            ? messageSender.isLocal
-              ? 'You'
-              : messageSender.name
-            : 'Anonymous'}
+      <View style={styles.messageWrapper}>
+        <Text style={[styles.message, hmsRoomStyles.regularSurfaceHigh]}>
+          <Text style={hmsRoomStyles.semiBoldSurfaceLow}>
+            {messageSender
+              ? messageSender.isLocal
+                ? 'You'
+                : messageSender.name
+              : 'Anonymous'}
+            {'   '}
+          </Text>
+
+          {message.message}
         </Text>
 
         {canTakeAction ? (
-          <GestureDetector gesture={Gesture.Tap()}>
-            <TouchableOpacity
-              hitSlop={styles.threeDotsHitSlop}
-              onPress={onThreeDotsPress}
-            >
-              <ThreeDotsIcon
-                stack="vertical"
-                style={[styles.threeDots, hmsRoomStyles.threeDots]}
-              />
-            </TouchableOpacity>
-          </GestureDetector>
+          <TouchableOpacity
+            hitSlop={styles.threeDotsHitSlop}
+            onPress={onThreeDotsPress}
+          >
+            <ThreeDotsIcon
+              stack="vertical"
+              style={[styles.threeDots, hmsRoomStyles.threeDots]}
+            />
+          </TouchableOpacity>
         ) : null}
       </View>
-
-      <Text style={[styles.message, hmsRoomStyles.message]}>
-        {message.message}
-      </Text>
     </View>
   );
 };
@@ -136,28 +129,18 @@ export const HMSHLSMessage = React.memo(_HMSHLSMessage);
 
 const styles = StyleSheet.create({
   container: {
-    marginTop: 8,
+    marginTop: 16,
     width: '100%',
   },
-  nameWrapper: {
+  messageWrapper: {
+    flex: 1,
     flexDirection: 'row',
-    alignItems: 'center',
-  },
-  senderName: {
-    flexGrow: 1,
-    fontSize: 14,
-    lineHeight: Platform.OS === 'android' ? 20 : undefined,
-    letterSpacing: 0.1,
-    textShadowOffset: { height: 1, width: 1 },
-    textShadowRadius: 2,
   },
   message: {
+    flexShrink: 1,
     fontSize: 14,
     lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.25,
-    marginTop: 2,
-    textShadowOffset: { height: 0.5, width: 0.5 },
-    textShadowRadius: 2,
   },
   threeDots: {
     width: 20,

package/src/components/HMSHLSMessageList.tsx

@@ -5,8 +5,8 @@ import { FlashList } from '@shopify/flash-list';
 import type { HMSMessage } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
-import { HMSHLSMessage } from './HMSHLSMessage';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { HMSOverlayMessageView } from './HMSOverlayMessageView';
 
 export const HMSHLSMessageList: React.FC = () => {
   const { height: windowHeight } = useWindowDimensions();
@@ -19,7 +19,7 @@ export const HMSHLSMessageList: React.FC = () => {
   );
 
   const _renderItem = React.useCallback((data: { item: HMSMessage }) => {
-    return <HMSHLSMessage message={data.item} />;
+    return <HMSOverlayMessageView message={data.item} />;
   }, []);
 
   if (messages.length <= 0) {

package/src/components/HMSHLSNotStarted.tsx

@@ -18,7 +18,11 @@ export const HMSHLSNotStarted = () => {
 
   return (
     <View style={styles.container}>
-      <RadioIcon size="extra-large" containerStyle={styles.icon} />
+      <RadioIcon
+        size="extra-large"
+        containerStyle={styles.iconWrapper}
+        style={styles.icon}
+      />
       <Text style={[styles.title, hmsRoomStyles.title]}>
         Stream yet to start
       </Text>
@@ -36,20 +40,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
+  iconWrapper: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     marginBottom: 24,
   },
+  icon: {
+    width: 24,
+    height: 24,
+  },
   title: {
-    fontSize: 24,
-    lineHeight: 32,
+    fontSize: 16,
+    lineHeight: 20,
     textAlign: 'center',
   },
   description: {
-    fontSize: 16,
-    lineHeight: 24,
+    fontSize: 14,
+    lineHeight: 20,
     letterSpacing: 0.5,
     textAlign: 'center',
-    marginTop: 8,
+    marginTop: 4,
   },
   taleLessSpaceAsYouCan: {
     flex: 0,

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -12,12 +12,20 @@ import { useKeyboardState } from '../hooks-util';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  styleWhenInactive?: ViewStyle;
+  styleWhenActive?: ViewStyle;
   bottomOffset?: number | SharedValue<number>;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style, bottomOffset = 0 }) => {
+> = ({
+  children,
+  style,
+  styleWhenInactive,
+  styleWhenActive,
+  bottomOffset = 0,
+}) => {
   const animatedKeyboard = useAnimatedKeyboard();
   const { keyboardState } = useKeyboardState();
 
@@ -27,14 +35,16 @@ export const HMSKeyboardAvoidingView: React.FC<
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;
+    const keyboardHidden =
+      keyboardHeight <= initialPageY.value ||
+      keyboardState.value === KeyboardState.CLOSED;
     return {
+      ...(keyboardHidden ? styleWhenInactive : styleWhenActive),
       transform: [
         {
-          translateY:
-            keyboardHeight <= initialPageY.value ||
-            keyboardState.value === KeyboardState.CLOSED
-              ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
-              : -(keyboardHeight - initialPageY.value),
+          translateY: keyboardHidden
+            ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
+            : -(keyboardHeight - initialPageY.value),
         },
       ],
     };

package/src/components/HMSLiveViewerCount.tsx

@@ -5,17 +5,14 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import {
   useHMSRoomStyleSheet,
-  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { EyeIcon } from '../Icons';
-import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
 import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveViewerCount = () => {
-  const isHLSViewer = useIsHLSViewer();
   const previewPeerCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
@@ -23,11 +20,8 @@ const _HMSLiveViewerCount = () => {
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     viewers: {
-      backgroundColor: isHLSViewer
-        ? theme.palette.background_dim &&
-          hexToRgbA(theme.palette.background_dim, 0.64)
-        : undefined,
-      borderWidth: isHLSViewer ? 0 : 1,
+      backgroundColor: undefined,
+      borderWidth: 1,
       borderColor: theme.palette.border_bright,
     },
     count: {

package/src/components/HMSNotification.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { ChatIcon, CloseIcon } from '../Icons';
 import { UnmountAfterDelay } from './UnmountAfterDelay';
 import { removeNotification } from '../redux/actions';
@@ -39,20 +39,26 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
   dismissable = false,
 }) => {
   const dispatch = useDispatch();
+  const isHLSViewer = useIsHLSViewer();
 
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    container: {
-      backgroundColor: theme.palette.surface_dim,
-    },
-    text: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-SemiBold`,
-    },
-    description: {
-      color: theme.palette.on_surface_medium,
-      fontFamily: `${typography.font_family}-Regular`,
-    },
-  }));
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor: isHLSViewer
+          ? theme.palette.surface_default
+          : theme.palette.surface_dim,
+      },
+      text: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      description: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+    }),
+    [isHLSViewer]
+  );
 
   const dismissNotification =
     onDismiss ||

package/src/components/HMSNotifications.tsx

@@ -13,6 +13,7 @@ import { AlertTriangleIcon } from '../Icons';
 import { HMSReconnectingNotification } from './HMSReconnectingNotification';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { HMSPollsQuizzesNotification } from './HMSPollsQuizzesNotification';
+import { useIsHLSViewer } from '../hooks-util';
 
 export interface HMSNotificationsProps {}
 
@@ -25,6 +26,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   const isLocalScreenShared = useSelector(
     (state: RootState) => state.hmsStates.isLocalScreenShared
   );
+  const isHLSViewer = useIsHLSViewer();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   // notifications is a stack, first will appear last
@@ -84,7 +86,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   return (
     <View
       style={[
-        isLandscapeOrientation
+        isLandscapeOrientation && !isHLSViewer
           ? styles.absoluteLandscapeContainer
           : styles.absoluteContainer,
         { paddingTop: (notifications.length - 1) * 16 },

package/src/components/HMSOverlayChatView.tsx

@@ -32,11 +32,13 @@ const colors = [
 ];
 const colorLocations = [0, 0.4, 1];
 
-export interface HLSChatViewProps {
+export interface HMSOverlayChatViewProps {
   offset?: SharedValue<number>;
 }
 
-export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
+export const HMSOverlayChatView: React.FC<HMSOverlayChatViewProps> = ({
+  offset,
+}) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
   const { chatState } = useHMSChatState();
@@ -77,7 +79,12 @@ export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
         {chatState.enabled ? (
           <>
             <View style={styles.filterSheetWrapper}>
-              <ChatFilterBottomSheetOpener insetMode={true} />
+              <ChatFilterBottomSheetOpener
+                overlay={true}
+                useFilterModal={true}
+                showActionBtn={true}
+                useActionModal={true}
+              />
             </View>
 
             {isLocalPeerBlockedFromChat ? (

package/src/components/HMSOverlayMessageView.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import {
+  useAllowBlockingPeerFromChat,
+  useAllowPinningMessage,
+  useHMSRoomStyleSheet,
+  useModalType,
+} from '../hooks-util';
+import { PinIcon, ThreeDotsIcon } from '../Icons';
+import { setSelectedMessageForAction } from '../redux/actions';
+import { ModalTypes } from '../utils/types';
+import type { RootState } from '../redux';
+
+interface HMSMessageProps {
+  message: HMSMessage;
+}
+
+const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
+  const dispatch = useDispatch();
+  const { handleModalVisibleType } = useModalType();
+  const localPeerId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.peerID
+  );
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const allowPeerBlocking = useAllowBlockingPeerFromChat();
+  const canRemoveOthers = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.removeOthers
+  );
+
+  const isPinned = useSelector(
+    (state: RootState) =>
+      state.messages.pinnedMessages.findIndex(
+        (pinnedMessage) => pinnedMessage.id === message.messageId
+      ) >= 0
+  );
+
+  const messageSender = message.sender;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (_theme, typography) => ({
+      senderName: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-SemiBold`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      message: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-Regular`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      threeDots: {
+        tintColor: '#ffffff',
+      },
+      pinnedLabel: {
+        color: '#ffffff',
+      },
+    }),
+    []
+  );
+
+  const onThreeDotsPress = () => {
+    dispatch(setSelectedMessageForAction(message));
+    handleModalVisibleType(ModalTypes.MESSAGE_OPTIONS);
+  };
+
+  const canTakeAction =
+    allowPinningMessage || // can pin message, OR
+    (allowPeerBlocking &&
+      message.sender &&
+      message.sender.peerID !== localPeerId) || // can block peers, OR
+    (canRemoveOthers &&
+      message.sender &&
+      message.sender.peerID !== localPeerId); // can remove participants
+
+  return (
+    <View style={styles.container}>
+      {isPinned ? (
+        <View style={styles.pinLabelContainer}>
+          <PinIcon
+            type="pin"
+            style={[styles.pinIcon, hmsRoomStyles.threeDots]}
+          />
+          <Text style={[styles.pinnedLabel, hmsRoomStyles.pinnedLabel]}>
+            PINNED
+          </Text>
+        </View>
+      ) : null}
+
+      <View style={styles.nameWrapper}>
+        <Text
+          style={[styles.senderName, hmsRoomStyles.senderName]}
+          numberOfLines={1}
+        >
+          {messageSender
+            ? messageSender.isLocal
+              ? 'You'
+              : messageSender.name
+            : 'Anonymous'}
+        </Text>
+
+        {canTakeAction ? (
+          <GestureDetector gesture={Gesture.Tap()}>
+            <TouchableOpacity
+              hitSlop={styles.threeDotsHitSlop}
+              onPress={onThreeDotsPress}
+            >
+              <ThreeDotsIcon
+                stack="vertical"
+                style={[styles.threeDots, hmsRoomStyles.threeDots]}
+              />
+            </TouchableOpacity>
+          </GestureDetector>
+        ) : null}
+      </View>
+
+      <Text style={[styles.message, hmsRoomStyles.message]}>
+        {message.message}
+      </Text>
+    </View>
+  );
+};
+
+export const HMSOverlayMessageView = React.memo(_HMSOverlayMessageView);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    width: '100%',
+  },
+  nameWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  senderName: {
+    flexGrow: 1,
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.1,
+    textShadowOffset: { height: 1, width: 1 },
+    textShadowRadius: 2,
+  },
+  message: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+    marginTop: 2,
+    textShadowOffset: { height: 0.5, width: 0.5 },
+    textShadowRadius: 2,
+  },
+  threeDots: {
+    width: 20,
+    height: 20,
+    marginLeft: 4,
+  },
+  threeDotsHitSlop: {
+    left: 12,
+    right: 12,
+    top: 12,
+    bottom: 12,
+  },
+  pinLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  pinIcon: {
+    width: 12,
+    height: 12,
+    marginRight: 4,
+  },
+  pinnedLabel: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+});

package/src/components/Meeting.tsx

@@ -15,6 +15,7 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
+  useIsHLSViewer,
   useLandscapeImmersiveMode,
   usePIPListener,
   useSetDefaultChatRecipient,
@@ -22,6 +23,7 @@ import {
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
 import type { RootState } from '../redux';
+import { HLSViewerScreenContent } from './HLSViewerScreenContent';
 
 interface MeetingProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -32,6 +34,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
+  const isHLSViewer = useIsHLSViewer();
+
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
@@ -81,7 +85,11 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
 
   return (
     <View style={[styles.container, containerStyles]}>
-      <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+      {isHLSViewer ? (
+        <HLSViewerScreenContent />
+      ) : (
+        <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+      )}
     </View>
   );
 };

package/src/components/MeetingScreenContent.tsx

@@ -17,10 +17,9 @@ import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useIsHLSViewer, useKeyboardState } from '../hooks-util';
+import { useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
-import { HLSFooter } from './HLSFooter';
 import { AnimatedHeader } from './AnimatedHeader';
 // import { ReconnectionView } from './ReconnectionView';
 
@@ -32,7 +31,6 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   peerTrackNodes,
 }) => {
   const offset = useSharedValue(1);
-  const isHLSViewer = useIsHLSViewer();
   const timerIdRef = useRef<NodeJS.Timeout | null>(null);
   const [controlsHidden, setControlsHidden] = useState(false);
   const isPipModeActive = useSelector(
@@ -101,15 +99,13 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
         <View collapsable={false} style={styles.container}>
           {isPipModeActive ? null : (
             <AnimatedHeader offset={offset}>
-              <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
+              <Header />
             </AnimatedHeader>
           )}
 
           <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-          {isPipModeActive ? null : isHLSViewer ? (
-            <HLSFooter offset={offset} />
-          ) : (
+          {isPipModeActive ? null : (
             <AnimatedFooter offset={offset}>
               <Footer />
             </AnimatedFooter>

package/src/components/OverlayedViews.tsx

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
 import type { OverlayProps } from './OverlayContainer';
-import { HLSChatView } from './HMSOverlayChatView';
+import { HMSOverlayChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
 export type OverlayedViewsProps = {
@@ -19,7 +19,7 @@ const _OverlayedViews: React.FC<OverlayedViewsProps> = ({
 
   return (
     <OverlayContainer.Overlay animatedStyle={animatedStyle}>
-      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
+      {overlayChatVisible ? <HMSOverlayChatView offset={offset} /> : null}
 
       <HMSNotifications />
     </OverlayContainer.Overlay>