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

package/src/components/EndRoomModalContent.tsx

@@ -1,7 +1,6 @@
 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';
@@ -9,6 +8,7 @@ import { HMSDangerButton } from './HMSDangerButton';
 import type { RootState } from '../redux';
 import { OnLeaveReason } from '../utils/types';
 import { TestIds } from '../utils/constants';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export interface EndRoomModalContentProps {
   dismissModal(): void;
@@ -39,10 +39,7 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
       state.hmsStates.localPeer?.role?.permissions?.hlsStreaming
   );
 
-  const isStreaming = useSelector(
-    (state: RootState) =>
-      state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED ?? false
-  );
+  const isHLSStreaming = useIsHLSStreamingOn();
 
   return (
     <View style={styles.container}>
@@ -54,11 +51,11 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
             testID={TestIds.end_confirmation_heading}
             style={[styles.headerText, hmsRoomStyles.headerText]}
           >
-            {canStream && isStreaming
+            {canStream && isHLSStreaming
               ? 'End Stream'
               : canEndRoom
-              ? 'End Session'
-              : 'Leave'}
+                ? 'End Session'
+                : 'Leave'}
           </Text>
         </View>
 
@@ -75,23 +72,23 @@ export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
         testID={TestIds.end_confirmation_description}
         style={[styles.text, hmsRoomStyles.text]}
       >
-        {canStream && isStreaming
+        {canStream && isHLSStreaming
           ? 'The stream will end for everyone after they’ve watched it.'
           : canEndRoom
-          ? 'The session will end for everyone in the room immediately. '
-          : 'Others will continue after you leave. You can join the session again.'}
+            ? 'The session will end for everyone in the room immediately. '
+            : 'Others will continue after you leave. You can join the session again.'}
       </Text>
       <HMSDangerButton
         testID={TestIds.end_confirmation_cta}
         loading={false}
         onPress={() => {
-          if (canStream && isStreaming) {
-            leave(OnLeaveReason.LEAVE, true)
+          if (canStream && isHLSStreaming) {
+            leave(OnLeaveReason.LEAVE, true);
           } else {
             endRoom(OnLeaveReason.ROOM_END);
           }
         }}
-        title={canStream && isStreaming ? 'End Stream' : 'End Session'}
+        title={canStream && isHLSStreaming ? 'End Stream' : 'End Session'}
       />
     </View>
   );

package/src/components/Footer.tsx

@@ -32,7 +32,9 @@ export const _Footer: React.FC<FooterProps> = () => {
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
-  const editUsernameDisabled = useSelector((state: RootState) => state.app.editUsernameDisabled);
+  const editUsernameDisabled = useSelector(
+    (state: RootState) => state.app.editUsernameDisabled
+  );
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 

package/src/components/GridView.tsx

@@ -1,11 +1,14 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import { View, FlatList, StyleSheet, useWindowDimensions, Platform } from 'react-native';
-import { useDispatch, useSelector } from 'react-redux';
-import type {
-  LayoutChangeEvent,
-  ViewToken,
+import {
+  View,
+  FlatList,
+  StyleSheet,
+  useWindowDimensions,
+  Platform,
 } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import type { LayoutChangeEvent, ViewToken } from 'react-native';
 import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
 
 import { DefaultModal } from './DefaultModal';
@@ -62,14 +65,20 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     // On Orientation change, scroll to first page of list
     React.useEffect(() => {
       if (screenshareTilesAvailable) {
-        screenshareTilesFlatlistRef.current?.scrollToOffset({ offset: 0, animated: false });
+        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 });
+        regularTilesFlatlistRef.current?.scrollToOffset({
+          offset: 0,
+          animated: false,
+        });
       }
     }, [regularTilesAvailable, isLandscapeOrientation]);
 
@@ -249,7 +258,7 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
-        style={Platform.OS === 'ios' ? {maxHeight: (safeHeight - 16)} : null}
+        style={Platform.OS === 'ios' ? { maxHeight: safeHeight - 16 } : null}
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}

package/src/components/HLSView.tsx

@@ -6,7 +6,6 @@ import {
   HMSHLSPlayer,
   HMSHLSPlayerPlaybackState,
   useHMSHLSPlayerPlaybackState,
-  HMSStreamingState,
 } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -18,10 +17,15 @@ import { COLORS, hexToRgbA } from '../utils/theme';
 import { HMSHLSNotStarted } from './HMSHLSNotStarted';
 import { CrossCircleIcon } from '../Icons';
 import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
 
 export const _HLSView: React.FC = () => {
   const dispatch = useDispatch();
-  const room = useSelector((state: RootState) => state.hmsStates.room);
+  const isHLSStreaming = useIsHLSStreamingOn();
+  const isStreamUrlPresent = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
+  );
   const hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
   const showHLSStats = useSelector(
     (state: RootState) => state.app.joinConfig.showHLSStats
@@ -129,49 +133,45 @@ export const _HLSView: React.FC = () => {
 
   return (
     <View style={styles.hlsView}>
-      {room?.hlsStreamingState?.state === HMSStreamingState.STARTED ? (
-        room?.hlsStreamingState?.variants?.slice(0, 1)?.map((variant, index) =>
-          variant?.hlsStreamUrl ? (
-            <View key={index} style={styles.hlsPlayerContainer}>
-              <HMSHLSPlayer
-                key={playerKey}
-                ref={hmsHlsPlayerRef}
-                enableStats={showHLSStats}
-                enableControls={enableHLSPlayerControls}
-              />
-
-              <HLSPlayerEmoticons />
-
-              {showHLSStats ? (
-                <HLSPlayerStatsView onClosePress={handleClosePress} />
-              ) : null}
-
-              {showCustomHLSPlayerControls ? (
-                <CustomControls handleControlPress={hlsPlayerActions} />
-              ) : null}
-
-              {isPlaybackFailed ? (
-                <View
-                  style={[
-                    styles.playbackFailedContainer,
-                    hmsRoomStyles.failedContainer,
-                  ]}
-                >
-                  <CrossCircleIcon />
-
-                  <Text
-                    style={[styles.playbackFailed, hmsRoomStyles.failedText]}
-                  >
-                    Playback Failed
-                  </Text>
-                </View>
-              ) : null}
-            </View>
-          ) : (
-            <View key={index} style={styles.textContainer}>
-              <Text style={styles.warningSubtitle}>Stream URL not found!</Text>
-            </View>
-          )
+      {isHLSStreaming ? (
+        isStreamUrlPresent ? (
+          <View style={styles.hlsPlayerContainer}>
+            <HMSHLSPlayer
+              key={playerKey}
+              ref={hmsHlsPlayerRef}
+              enableStats={showHLSStats}
+              enableControls={enableHLSPlayerControls}
+            />
+
+            <HLSPlayerEmoticons />
+
+            {showHLSStats ? (
+              <HLSPlayerStatsView onClosePress={handleClosePress} />
+            ) : null}
+
+            {showCustomHLSPlayerControls ? (
+              <CustomControls handleControlPress={hlsPlayerActions} />
+            ) : null}
+
+            {isPlaybackFailed ? (
+              <View
+                style={[
+                  styles.playbackFailedContainer,
+                  hmsRoomStyles.failedContainer,
+                ]}
+              >
+                <CrossCircleIcon />
+
+                <Text style={[styles.playbackFailed, hmsRoomStyles.failedText]}>
+                  Playback Failed
+                </Text>
+              </View>
+            ) : null}
+          </View>
+        ) : (
+          <View style={styles.textContainer}>
+            <Text style={styles.warningSubtitle}>Stream URL not found!</Text>
+          </View>
         )
       ) : (
         <HMSHLSNotStarted />

package/src/components/HMSBaseButton.tsx

@@ -6,12 +6,20 @@ import {
   TouchableHighlight,
   View,
 } from 'react-native';
-import type { StyleProp, ViewStyle, TextStyle, ColorValue, TouchableHighlightProps } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import type {
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+  ColorValue,
+  TouchableHighlightProps,
+} from 'react-native';
 
 export interface HMSBaseButtonProps {
   title: string;
   loading: boolean;
   onPress(): void;
+  wrapWithGestureDetector?: boolean;
   testID?: TouchableHighlightProps['testID'];
   underlayColor?: ColorValue | undefined;
   loaderColor?: ColorValue | undefined;
@@ -32,8 +40,9 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
   textStyle,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
-  return (
+  const button = (
     <TouchableHighlight
       testID={testID}
       underlayColor={underlayColor}
@@ -63,6 +72,12 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
       </>
     </TouchableHighlight>
   );
+
+  if (wrapWithGestureDetector) {
+    return <GestureDetector gesture={Gesture.Tap()}>{button}</GestureDetector>;
+  }
+
+  return button;
 };
 
 const styles = StyleSheet.create({

package/src/components/HMSDangerButton.tsx

@@ -14,6 +14,7 @@ export interface HMSDangerButtonProps {
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
 }
 
 export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
@@ -24,6 +25,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
   style,
   disabled,
   leftComponent,
+  wrapWithGestureDetector,
 }) => {
   const {
     alert_error_dim: alertErrorDimColor,
@@ -65,6 +67,7 @@ export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
         hmsRoomStyles.buttonText,
         disabled ? hmsRoomStyles.disabledText : null,
       ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
     />
   );
 };

package/src/components/HMSHLSMessage.tsx

@@ -1,14 +1,51 @@
 import * as React from 'react';
-import { View, Text, StyleSheet, Platform } from 'react-native';
-import { HMSMessage } from '@100mslive/react-native-hms';
+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 { useHMSRoomStyleSheet } from '../hooks-util';
+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 HMSHLSMessageProps {
   message: HMSMessage;
 }
 
 const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ 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(
@@ -23,22 +60,70 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
         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}>
-      <Text
-        style={[styles.senderName, hmsRoomStyles.senderName]}
-        numberOfLines={1}
-      >
-        {messageSender
-          ? messageSender.isLocal
-            ? 'You'
-            : messageSender.name
-          : 'Anonymous'}
-      </Text>
+      {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}
@@ -54,7 +139,12 @@ const styles = StyleSheet.create({
     marginTop: 8,
     width: '100%',
   },
+  nameWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
   senderName: {
+    flexGrow: 1,
     fontSize: 14,
     lineHeight: Platform.OS === 'android' ? 20 : undefined,
     letterSpacing: 0.1,
@@ -69,4 +159,31 @@ const styles = StyleSheet.create({
     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/HMSHLSMessageList.tsx

@@ -26,7 +26,7 @@ export const HMSHLSMessageList: React.FC = () => {
     return null;
   }
 
-  const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.45 : 0.2;
+  const HEIGHT_MULTIPLIER = isLandscapeOrientation ? 0.42 : 0.25;
 
   return (
     <View
@@ -37,7 +37,7 @@ export const HMSHLSMessageList: React.FC = () => {
           height:
             messages.length > 3
               ? windowHeight * HEIGHT_MULTIPLIER
-              : messages.length * 54,
+              : messages.length * 66,
         },
       ]}
     >

package/src/components/HMSHandRaiseNotification.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { StyleSheet, Text, TouchableHighlight } from 'react-native';
 import type { HMSPeer } from '@100mslive/react-native-hms';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 
 import { HandIcon } from '../Icons';
 import {
@@ -61,7 +62,11 @@ export const HMSHandRaiseNotification: React.FC<
       );
     }
     dispatch(removeNotification(id));
-    await hmsInstance.changeRoleOfPeer(peer, onStageRole, false);
+    await hmsInstance.changeRoleOfPeer(
+      peer,
+      onStageRole,
+      onStageExpData?.skip_preview_for_role_change || false
+    );
   };
 
   return (
@@ -72,15 +77,17 @@ export const HMSHandRaiseNotification: React.FC<
       dismissDelay={dismissDelay}
       autoDismiss={autoDismiss}
       cta={
-        <TouchableHighlight
-          underlayColor={secondaryDimColor}
-          style={[styles.button, hmsRoomStyles.button]}
-          onPress={bringPeerToStage}
-        >
-          <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
-            {onStageExpData?.bring_to_stage_label || 'Bring to Stage'}
-          </Text>
-        </TouchableHighlight>
+        <GestureDetector gesture={Gesture.Tap()}>
+          <TouchableHighlight
+            underlayColor={secondaryDimColor}
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={bringPeerToStage}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              {onStageExpData?.bring_to_stage_label || 'Bring to Stage'}
+            </Text>
+          </TouchableHighlight>
+        </GestureDetector>
       }
     />
   );

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated, {
+  KeyboardState,
   useAnimatedKeyboard,
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
+import { useKeyboardState } from '../hooks-util';
+
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
   bottomOffset?: number | SharedValue<number>;
@@ -16,6 +19,7 @@ export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
 > = ({ children, style, bottomOffset = 0 }) => {
   const animatedKeyboard = useAnimatedKeyboard();
+  const { keyboardState } = useKeyboardState();
 
   const initialPageY = useDerivedValue(() => {
     return typeof bottomOffset === 'number' ? bottomOffset : bottomOffset.value;
@@ -27,7 +31,8 @@ export const HMSKeyboardAvoidingView: React.FC<
       transform: [
         {
           translateY:
-            keyboardHeight <= initialPageY.value
+            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),
         },

package/src/components/HMSLiveIndicator.tsx

@@ -1,22 +1,13 @@
 import * as React from 'react';
-import {
-  StyleSheet,
-  View,
-  Text,
-  Platform,
-} from 'react-native';
-import { useSelector } from 'react-redux';
-import { HMSStreamingState } from '@100mslive/react-native-hms';
+import { StyleSheet, View, Text, Platform } from 'react-native';
 
 import { useHMSRoomStyleSheet } from '../hooks-util';
 import { COLORS } from '../utils/theme';
-import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
+import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveIndicator = () => {
-  const live = useSelector(
-    (state: RootState) => state.hmsStates.room?.hlsStreamingState?.state === HMSStreamingState.STARTED
-  );
+  const live = useIsAnyStreamingOn();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     live: {
@@ -34,7 +25,12 @@ const _HMSLiveIndicator = () => {
 
   return (
     <View style={[styles.live, hmsRoomStyles.live]}>
-      <Text testID={TestIds.live_text} style={[styles.liveText, hmsRoomStyles.liveText]}>LIVE</Text>
+      <Text
+        testID={TestIds.live_text}
+        style={[styles.liveText, hmsRoomStyles.liveText]}
+      >
+        LIVE
+      </Text>
     </View>
   );
 };