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

package/src/components/Chat/PinnedMessages.tsx

@@ -0,0 +1,422 @@
+import * as React from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Platform,
+} from 'react-native';
+import type { ViewabilityConfig } from 'react-native';
+import { useSelector } from 'react-redux';
+import { FlashList } from '@shopify/flash-list';
+import type { ViewToken } from '@shopify/flash-list';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import type { RootState } from '../../redux';
+import {
+  useAllowPinningMessage,
+  useHMSMessagePinningActions,
+  useHMSRoomStyleSheet,
+} from '../../hooks-util';
+import { PinIcon } from '../../Icons';
+import type { PinnedMessage } from 'src/types';
+import { hexToRgbA } from '../../utils/theme';
+
+const FLATLIST_VIEWABILITY_CONFIG: ViewabilityConfig = {
+  waitForInteraction: true,
+  itemVisiblePercentThreshold: 90,
+};
+
+interface PinnedMessagesProps {
+  insetMode?: boolean;
+}
+
+const LINE_HEIGHT = 20;
+
+enum NumOfLines {
+  EXPANDED = 6,
+  COLLAPSED = 3,
+}
+
+const Heights = {
+  EXAPANDED: NumOfLines.EXPANDED * LINE_HEIGHT + 2,
+  COLLAPSED: NumOfLines.COLLAPSED * LINE_HEIGHT + 2,
+};
+
+export const _PinnedMessages: React.FC<PinnedMessagesProps> = ({
+  insetMode = false,
+}) => {
+  const listRef = React.useRef<null | React.ElementRef<
+    typeof FlashList<PinnedMessage>
+  >>(null);
+
+  const [numOfLinesInText, setNumOfLinesInText] = React.useState<
+    Record<string, number>
+  >({});
+  const numOfLinesInTextRef = React.useRef(numOfLinesInText);
+
+  const [listHeight, setListHeight] = React.useState(Heights.COLLAPSED);
+  const listHeightRef = React.useRef(Heights.COLLAPSED);
+
+  const [selectedPinnedMessageIndex, setSelectedMessageIndex] =
+    React.useState(0);
+  const selectedPinnedMessageIndexRef = React.useRef(0);
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const { unpinMessage } = useHMSMessagePinningActions();
+
+  const pinnedMessages = useSelector(
+    (state: RootState) => state.messages.pinnedMessages
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    insetContainer: {
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.64),
+    },
+    pinContainer: {
+      backgroundColor: theme.palette.surface_default,
+    },
+    activeMessageContainer: {
+      backgroundColor: theme.palette.on_surface_high,
+    },
+    inactiveMessageContainer: {
+      backgroundColor: theme.palette.on_surface_low,
+    },
+    closeIcon: {
+      tintColor: theme.palette.on_surface_medium,
+    },
+    highlightedText: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: theme.palette.on_surface_high,
+    },
+    text: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_high,
+    },
+    ellipsis: {
+      backgroundColor:
+        theme.palette.background_dim &&
+        hexToRgbA(theme.palette.background_dim, 0.64),
+    },
+  }));
+
+  const handleTapOnPinnedMessage = React.useCallback(() => {
+    setListHeight((prevListHeight) => {
+      let updated =
+        prevListHeight > Heights.COLLAPSED
+          ? Heights.COLLAPSED
+          : Heights.EXAPANDED;
+
+      listHeightRef.current = updated;
+      return updated;
+    });
+  }, []);
+
+  const handleUnpinMessagePress = React.useCallback(() => {
+    const visiblePinnedMessage =
+      pinnedMessages[selectedPinnedMessageIndexRef.current];
+    if (visiblePinnedMessage) {
+      if (listHeight > Heights.COLLAPSED) {
+        setListHeight(Heights.COLLAPSED);
+        listHeightRef.current = Heights.COLLAPSED;
+      }
+      unpinMessage(visiblePinnedMessage);
+    }
+  }, [listHeight, pinnedMessages]);
+
+  const _handleViewableItemsChanged = React.useCallback(
+    (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
+      const firstViewable = info.viewableItems[0];
+      if (
+        firstViewable?.isViewable &&
+        typeof firstViewable.index === 'number'
+      ) {
+        let viewableIndexChanged = false;
+
+        setSelectedMessageIndex((currIndex) => {
+          if (currIndex !== firstViewable.index) {
+            viewableIndexChanged = true;
+          }
+          if (firstViewable.index !== null) {
+            return firstViewable.index;
+          }
+          return currIndex;
+        });
+        selectedPinnedMessageIndexRef.current = firstViewable.index;
+
+        const visiblePinnedMessage =
+          pinnedMessages[selectedPinnedMessageIndexRef.current];
+
+        if (
+          viewableIndexChanged &&
+          listHeightRef.current > Heights.COLLAPSED &&
+          visiblePinnedMessage
+        ) {
+          const visibleMessageExpandable =
+            numOfLinesInTextRef.current[visiblePinnedMessage.id];
+          if (!visibleMessageExpandable) {
+            setListHeight(Heights.COLLAPSED);
+            listHeightRef.current = Heights.COLLAPSED;
+          }
+        }
+      }
+    },
+    [pinnedMessages]
+  );
+
+  const _renderItem = React.useCallback(
+    (data: { item: PinnedMessage }) => {
+      const numOfLines = numOfLinesInText[data.item.id];
+      const [sender, text] = data.item.text.split(':');
+
+      return (
+        <TouchableOpacity
+          activeOpacity={0.8}
+          disabled={typeof numOfLines !== 'number'}
+          onPress={
+            typeof numOfLines === 'number'
+              ? handleTapOnPinnedMessage
+              : undefined
+          }
+          style={{
+            height: listHeight,
+            justifyContent: 'center',
+            overflow:
+              Platform.OS === 'ios' && typeof numOfLines !== 'number'
+                ? 'scroll'
+                : 'hidden',
+          }}
+        >
+          {listHeight >= Heights.EXAPANDED &&
+          typeof numOfLines === 'number' &&
+          numOfLines > NumOfLines.EXPANDED ? (
+            <ScrollView
+              nestedScrollEnabled={true}
+              contentContainerStyle={{ paddingBottom: 12 }}
+            >
+              <TouchableOpacity
+                activeOpacity={0.8}
+                onPress={handleTapOnPinnedMessage}
+              >
+                <Text
+                  onTextLayout={({ nativeEvent }) => {
+                    if (nativeEvent.lines.length > NumOfLines.COLLAPSED) {
+                      setNumOfLinesInText((prev) => {
+                        const currentValue = prev[data.item.id];
+                        let updated;
+                        if (
+                          typeof currentValue === 'number' &&
+                          currentValue === nativeEvent.lines.length
+                        ) {
+                          updated = prev;
+                        } else {
+                          updated = {
+                            ...prev,
+                            [data.item.id]: nativeEvent.lines.length,
+                          };
+                        }
+                        numOfLinesInTextRef.current = updated;
+                        return updated;
+                      });
+                    }
+                  }}
+                  style={[styles.text, hmsRoomStyles.text]}
+                  numberOfLines={
+                    listHeight === Heights.COLLAPSED &&
+                    typeof numOfLines === 'number'
+                      ? 3
+                      : undefined
+                  }
+                >
+                  {text ? (
+                    <Text style={hmsRoomStyles.highlightedText}>
+                      {sender}:{' '}
+                    </Text>
+                  ) : null}
+                  {text ?? sender}
+                </Text>
+              </TouchableOpacity>
+            </ScrollView>
+          ) : (
+            <Text
+              onTextLayout={({ nativeEvent }) => {
+                if (nativeEvent.lines.length > NumOfLines.COLLAPSED) {
+                  setNumOfLinesInText((prev) => {
+                    const currentValue = prev[data.item.id];
+                    let updated;
+                    if (
+                      typeof currentValue === 'number' &&
+                      currentValue === nativeEvent.lines.length
+                    ) {
+                      updated = prev;
+                    } else {
+                      updated = {
+                        ...prev,
+                        [data.item.id]: nativeEvent.lines.length,
+                      };
+                    }
+                    numOfLinesInTextRef.current = updated;
+                    return updated;
+                  });
+                }
+              }}
+              style={[styles.text, hmsRoomStyles.text]}
+              numberOfLines={
+                listHeight === Heights.COLLAPSED &&
+                typeof numOfLines === 'number'
+                  ? 3
+                  : undefined
+              }
+            >
+              {text ? (
+                <Text style={hmsRoomStyles.highlightedText}>{sender}: </Text>
+              ) : null}
+              {text ?? sender}
+            </Text>
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [listHeight, numOfLinesInText, handleTapOnPinnedMessage]
+  );
+
+  const _keyExtractor = React.useCallback((item: PinnedMessage) => item.id, []);
+
+  const _onContentSizeChange = React.useCallback(
+    (_w, _h) => {
+      listRef.current?.scrollToOffset({
+        offset: listHeight * selectedPinnedMessageIndexRef.current,
+        animated: false,
+      });
+    },
+    [listHeight]
+  );
+
+  const tapGesture = React.useMemo(() => Gesture.Tap(), []);
+
+  const extraData = React.useMemo(
+    () => [listHeight, numOfLinesInText, pinnedMessages],
+    [listHeight, numOfLinesInText, pinnedMessages]
+  );
+
+  if (pinnedMessages.length <= 0) {
+    return null;
+  }
+
+  return (
+    <GestureDetector gesture={tapGesture}>
+      <View
+        style={[
+          insetMode ? styles.insetContainer : styles.container,
+          insetMode ? hmsRoomStyles.insetContainer : null,
+        ]}
+      >
+        <View
+          style={[
+            styles.pinContainer,
+            insetMode ? { paddingRight: 0 } : hmsRoomStyles.pinContainer,
+            { height: listHeight + 16 },
+          ]}
+        >
+          {pinnedMessages.length > 1 ? (
+            <View style={{ marginRight: 8, flexDirection: 'column' }}>
+              {pinnedMessages.map((message, idx) => {
+                const isFirst = idx === 0;
+                const isSelected = selectedPinnedMessageIndex === idx;
+                return (
+                  <React.Fragment key={message.id}>
+                    {isFirst ? null : (
+                      <View style={[{ height: 3, width: 2 }]} />
+                    )}
+
+                    <View
+                      style={[
+                        { width: 2, flexGrow: 1, borderRadius: 16 },
+                        isSelected
+                          ? hmsRoomStyles.activeMessageContainer
+                          : hmsRoomStyles.inactiveMessageContainer,
+                      ]}
+                    />
+                  </React.Fragment>
+                );
+              })}
+            </View>
+          ) : null}
+
+          <FlashList
+            ref={listRef}
+            data={pinnedMessages}
+            extraData={extraData}
+            showsVerticalScrollIndicator={false}
+            pagingEnabled={true}
+            nestedScrollEnabled={true}
+            keyboardShouldPersistTaps="always"
+            renderItem={_renderItem}
+            keyExtractor={_keyExtractor}
+            onContentSizeChange={_onContentSizeChange}
+            estimatedItemSize={40}
+            onViewableItemsChanged={_handleViewableItemsChanged}
+            viewabilityConfig={FLATLIST_VIEWABILITY_CONFIG}
+          />
+        </View>
+
+        {allowPinningMessage ? (
+          <TouchableOpacity
+            style={{ marginLeft: 8 }}
+            onPress={handleUnpinMessagePress}
+          >
+            <PinIcon
+              type="unpin"
+              style={[styles.icon, hmsRoomStyles.closeIcon]}
+            />
+          </TouchableOpacity>
+        ) : null}
+      </View>
+    </GestureDetector>
+  );
+};
+
+export const PinnedMessages = React.memo(_PinnedMessages);
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  insetContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginTop: 8,
+    marginHorizontal: 8,
+    marginBottom: 4,
+    borderRadius: 8,
+    paddingRight: 8,
+  },
+  pinContainer: {
+    flexDirection: 'row',
+    flexGrow: 1,
+    flexShrink: 1,
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingRight: 8,
+    paddingLeft: 8,
+  },
+  textWrapper: {
+    maxHeight: 50,
+    marginHorizontal: 8,
+  },
+  icon: {
+    width: 20,
+    height: 20,
+    // marginTop: 8,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/Chat/index.ts

@@ -1,4 +1,4 @@
 export * from './ChatBanner';
 export * from './ChatList';
 export * from './ChatMessage';
-export * from './PinnedMessage';
+export * from './PinnedMessages';

package/src/components/ChatAndParticipants/ChatAndParticipantsBottomSheet.tsx

@@ -1,19 +1,27 @@
 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 +32,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 +47,5 @@ export const ChatAndParticipantsBottomSheet = () => {
 const styles = StyleSheet.create({
   bottomSheet: {
     flex: 1,
-    backgroundColor: undefined,
-    paddingBottom: 0,
   },
 });

package/src/components/ChatAndParticipants/ChatAndParticipantsHeader.tsx

@@ -2,14 +2,18 @@ import * as React from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { CloseIcon } from '../../Icons';
+import { CloseIcon, SettingsIcon } from '../../Icons';
 import {
+  useHMSCanDisableChat,
   useHMSRoomStyleSheet,
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import type { RootState } from '../../redux';
 import { ChatBottomSheetTabs } from '../../utils/types';
-import { setActiveChatBottomSheetTab } from '../../redux/actions';
+import {
+  setActiveChatBottomSheetTab,
+  setChatMoreActionsSheetVisible,
+} from '../../redux/actions';
 import { TestIds } from '../../utils/constants';
 
 interface WebrtcChatHeaderProps {
@@ -23,6 +27,7 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
   const peersCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
+  const canDisableChat = useHMSCanDisableChat();
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     headerTitleWrapper: {
@@ -53,6 +58,15 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
     return true;
   });
 
+  const onSettingsPress = () => {
+    dispatch(setChatMoreActionsSheetVisible(true));
+  };
+
+  const hideSettigsButton =
+    !canDisableChat || // can't disable chat, OR
+    (visibleChatBottomSheetTabs.length === 1 &&
+      visibleChatBottomSheetTabs[0] === 'Participants'); // Only Participants Header is visible
+
   return (
     <View
       style={
@@ -67,8 +81,8 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
             visibleChatBottomSheetTabs[0] === 'Participants'
               ? TestIds.participants_heading
               : visibleChatBottomSheetTabs[0] === 'Chat'
-              ? TestIds.chat_heading
-              : undefined
+                ? TestIds.chat_heading
+                : undefined
           }
           style={[styles.headerTitle, hmsRoomStyles.activeHeaderTitle]}
         >
@@ -90,8 +104,8 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
                 key={tab}
                 testID={
                   tab === 'Participants'
-                      ? TestIds.participants_heading_btn
-                      : tab === 'Chat'
+                    ? TestIds.participants_heading_btn
+                    : tab === 'Chat'
                       ? TestIds.chat_heading_btn
                       : undefined
                 }
@@ -101,10 +115,14 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
                 <Text
                   testID={
                     tab === 'Participants'
-                      ? (isActive ? TestIds.participants_heading_active : TestIds.participants_heading)
+                      ? isActive
+                        ? TestIds.participants_heading_active
+                        : TestIds.participants_heading
                       : tab === 'Chat'
-                      ? (isActive ? TestIds.chat_heading_active : TestIds.chat_heading)
-                      : undefined
+                        ? isActive
+                          ? TestIds.chat_heading_active
+                          : TestIds.chat_heading
+                        : undefined
                   }
                   style={[
                     styles.headerTitle,
@@ -123,9 +141,27 @@ const _ChatAndParticipantsHeader: React.FC<WebrtcChatHeaderProps> = ({
         </View>
       )}
 
-      <TouchableOpacity testID={TestIds.participants_close_btn} onPress={onClosePress}>
-        <CloseIcon />
-      </TouchableOpacity>
+      <View style={{ flexDirection: 'row' }}>
+        {hideSettigsButton ? null : (
+          <TouchableOpacity
+            disabled={activeChatBottomSheetTab === 'Participants'}
+            onPress={onSettingsPress}
+            style={{
+              marginRight: 16,
+              opacity: activeChatBottomSheetTab === 'Participants' ? 0.5 : 1,
+            }}
+          >
+            <SettingsIcon />
+          </TouchableOpacity>
+        )}
+
+        <TouchableOpacity
+          testID={TestIds.participants_close_btn}
+          onPress={onClosePress}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
     </View>
   );
 };

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,
@@ -11,6 +12,8 @@ import { ChatFilterBottomSheetView } from '../Chat/ChatFilterBottomSheetView';
 import type { RootState } from '../../redux';
 import { ParticipantsView } from './ParticipantsView';
 import { ChatView } from './ChatView';
+import { ChatMoreActionsSheetView } from '../Chat/ChatMoreActionsSheetView';
+import { MessageOptionsBottomSheetView } from '../Chat/MessageOptionsBottomSheetView';
 
 const _ChatAndParticipantsView: React.FC = () => {
   const activeChatBottomSheetTab = useSelector(
@@ -35,7 +38,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,
@@ -54,8 +57,14 @@ const _ChatAndParticipantsView: React.FC = () => {
         ) : null}
       </View>
 
-      <ChatFilterBottomSheetView />
-    </View>
+      {canShowChat && !overlayChatLayout ? (
+        <>
+          <MessageOptionsBottomSheetView />
+          <ChatFilterBottomSheetView />
+          <ChatMoreActionsSheetView />
+        </>
+      ) : null}
+    </SafeAreaView>
   );
 };
 
@@ -68,7 +77,7 @@ const styles = StyleSheet.create({
     flex: 1,
     paddingHorizontal: 16,
     paddingTop: 12,
-    paddingBottom: 32,
+    paddingBottom: Platform.OS === 'ios' ? 32 : 0,
     borderTopLeftRadius: 16,
     borderTopRightRadius: 16,
   },