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

package/src/components/ChatAndParticipants/ChatAndParticipantsView.tsx

@@ -5,6 +5,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import {
   useHMSRoomStyleSheet,
+  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../../hooks-util';
 import { ChatAndParticipantsHeader } from './ChatAndParticipantsHeader';
@@ -19,6 +20,7 @@ const _ChatAndParticipantsView: React.FC = () => {
   const activeChatBottomSheetTab = useSelector(
     (state: RootState) => state.app.activeChatBottomSheetTab
   );
+  const isHLSViewer = useIsHLSViewer();
 
   const { hide, canShowParticipants, canShowChat, overlayChatLayout } =
     useShowChatAndParticipants();
@@ -35,7 +37,10 @@ const _ChatAndParticipantsView: React.FC = () => {
     activeChatBottomSheetTab === 'Participants' && canShowParticipants;
 
   const showChat =
-    activeChatBottomSheetTab === 'Chat' && canShowChat && !overlayChatLayout;
+    !isHLSViewer &&
+    activeChatBottomSheetTab === 'Chat' &&
+    canShowChat &&
+    !overlayChatLayout;
 
   return (
     <SafeAreaView style={styles.container} edges={['left', 'right']}>

package/src/components/DisplayView.tsx

@@ -9,14 +9,12 @@ import { ModalTypes, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
 import { requestExternalStoragePermission } from '../utils/functions';
 import {
-  ChangeAspectRatio,
   ChangeRoleModal,
   ChangeTrackStateModal,
   SaveScreenshot,
 } from './Modals';
 import type { RootState } from '../redux';
 import { GridView } from './GridView';
-import { HLSView } from './HLSView';
 import { PeerSettingsModalContent } from '../components/PeerSettingsModalContent';
 import { StreamingQualityModalContent } from '../components/StreamingQualityModalContent';
 import {
@@ -24,7 +22,6 @@ import {
   useHMSInstance,
   useHMSRoleChangeRequest,
   useHMSSessionStoreListeners,
-  useIsHLSViewer,
   useModalType,
 } from '../hooks-util';
 import { WebrtcView } from './WebrtcView';
@@ -48,7 +45,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 }) => {
   // --- 100ms SDK Instance ---
   const hmsInstance = useHMSInstance();
-  const isHLSViewer = useIsHLSViewer();
 
   const {
     modalVisibleType: modalVisible,
@@ -130,16 +126,12 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
   return (
     <View style={{ flex: 1 }}>
-      {isHLSViewer ? (
-        <HLSView />
-      ) : (
-        <WebrtcView
-          ref={gridViewRef}
-          offset={offset}
-          peerTrackNodes={peerTrackNodes}
-          handlePeerTileMorePress={handlePeerTileMorePress}
-        />
-      )}
+      <WebrtcView
+        ref={gridViewRef}
+        offset={offset}
+        peerTrackNodes={peerTrackNodes}
+        handlePeerTileMorePress={handlePeerTileMorePress}
+      />
 
       {isPipModeActive ? null : (
         <>
@@ -171,15 +163,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
             ) : null}
           </BottomSheet>
 
-          <DefaultModal
-            modalPosiion="center"
-            modalVisible={modalVisible === ModalTypes.HLS_PLAYER_ASPECT_RATIO}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            <ChangeAspectRatio
-              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
-            />
-          </DefaultModal>
           {/* Save Image Captured from Local Camera */}
           <DefaultModal
             modalPosiion="center"
@@ -193,6 +176,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
+
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.STREAMING_QUALITY_SETTING}
@@ -207,6 +191,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
+
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.CHANGE_TRACK}
@@ -219,6 +204,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               />
             ) : null}
           </DefaultModal>
+
           <DefaultModal
             modalPosiion="center"
             modalVisible={modalVisible === ModalTypes.CHANGE_ROLE}

package/src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import { View, StyleSheet, Platform } from 'react-native';
 import {
   SafeAreaView,
@@ -6,10 +6,10 @@ import {
 } from 'react-native-safe-area-context';
 
 import {
+  useCanShowRoomOptionsButton,
   useHMSConferencingScreenConfig,
   useHMSLayoutConfig,
   useHMSRoomStyle,
-  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { HMSManageLeave } from './HMSManageLeave';
@@ -23,51 +23,18 @@ import {
   useCanPublishScreen,
   useCanPublishVideo,
 } from '../hooks-sdk';
-import { useSelector } from 'react-redux';
-import type { RootState } from '../redux';
 
 interface FooterProps {}
 
 export const _Footer: React.FC<FooterProps> = () => {
-  const isHLSViewer = useIsHLSViewer();
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
   const canPublishScreen = useCanPublishScreen();
-  const editUsernameDisabled = useSelector(
-    (state: RootState) => state.app.editUsernameDisabled
-  );
-  const [isNoiseCancellationAvailable, setIsNoiseCancellationAvailable] =
-    useState(false);
-  const noiseCancellationPlugin = useSelector(
-    (state: RootState) => state.hmsStates.noiseCancellationPlugin
-  );
-  useEffect(() => {
-    if (noiseCancellationPlugin) {
-      let mounted = true;
-
-      noiseCancellationPlugin
-        .isNoiseCancellationAvailable()
-        .then((isAvailable) => {
-          if (mounted) {
-            setIsNoiseCancellationAvailable(isAvailable);
-          }
-        });
-
-      return () => {
-        mounted = false;
-      };
-    }
-  }, [noiseCancellationPlugin]);
+  const canShowOptions = useCanShowRoomOptionsButton();
+  const { canShowChat } = useShowChatAndParticipants();
 
   const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
 
-  const { canShowParticipants, canShowChat } = useShowChatAndParticipants();
-
-  const canShowBRB = useHMSLayoutConfig(
-    (layoutConfig) =>
-      !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
-  );
-
   const isOnStage = useHMSLayoutConfig((layoutConfig) => {
     return !!layoutConfig?.screens?.conferencing?.default?.elements
       ?.on_stage_exp;
@@ -77,29 +44,8 @@ export const _Footer: React.FC<FooterProps> = () => {
     (confScreenConfig) => !!confScreenConfig?.elements?.hand_raise
   );
 
-  const canStartRecording = useSelector(
-    (state: RootState) =>
-      !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
-  );
-
-  const canReadOrWritePoll = useSelector((state: RootState) => {
-    const permissions = state.hmsStates.localPeer?.role?.permissions;
-    return permissions?.pollRead || permissions?.pollWrite;
-  });
-
-  const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
-
   const canShowHandRaiseInFooter = canRaiseHand && !isOnStage && isViewer;
 
-  const canShowOptions =
-    canShowParticipants ||
-    canPublishScreen ||
-    canShowBRB ||
-    canStartRecording ||
-    canEditUsernameFromRoomModal ||
-    canReadOrWritePoll ||
-    isNoiseCancellationAvailable;
-
   const footerActionButtons = useMemo(() => {
     const actions = [];
 
@@ -139,16 +85,8 @@ export const _Footer: React.FC<FooterProps> = () => {
   }));
 
   return (
-    <SafeAreaView
-      style={isHLSViewer ? null : containerStyles}
-      edges={['bottom', 'left', 'right']}
-    >
-      <View
-        style={[
-          styles.container,
-          isHLSViewer ? styles.hlsContainer : containerStyles,
-        ]}
-      >
+    <SafeAreaView style={containerStyles} edges={['bottom', 'left', 'right']}>
+      <View style={[styles.container, containerStyles]}>
         {footerActionButtons.map((actionType, index) => {
           return (
             <View
@@ -177,15 +115,11 @@ export const _Footer: React.FC<FooterProps> = () => {
 };
 
 export const useFooterHeight = (excludeSafeArea: boolean = false) => {
-  const isHLSViewer = useIsHLSViewer();
   const { bottom } = useSafeAreaInsets();
 
   return (
-    (excludeSafeArea ? 0 : bottom) +
-    (isHLSViewer ? 8 : 16) +
-    (Platform.OS === 'android' ? 16 : 0) +
-    40
-  ); // bottomSafeArea + paddingTop + marginBottom + content
+    (excludeSafeArea ? 0 : bottom) + (Platform.OS === 'android' ? 16 : 0) + 40
+  ); // bottomSafeArea + marginBottom + content
 };
 
 const styles = StyleSheet.create({
@@ -197,9 +131,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide animation offsets because of this change
   },
-  hlsContainer: {
-    paddingTop: 8,
-  },
   iconWrapper: {
     marginLeft: 24,
   },

package/src/components/HLSAnimatedDescriptionPane.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import Animated, {
+  interpolate,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+
+export interface HLSAnimatedDescriptionPaneProps {
+  sharedValue: SharedValue<number>;
+  height: number;
+  style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+}
+
+export const HLSAnimatedDescriptionPane: React.FC<
+  HLSAnimatedDescriptionPaneProps
+> = ({ children, style, sharedValue, height }) => {
+  const animatedStyles = useAnimatedStyle(
+    () => ({
+      // opacity: interpolate(sharedValue.value, [0, 0.3, 1], [0, 1, 1]),
+      transform: [
+        {
+          translateY: interpolate(sharedValue.value, [0, 1], [-height, 0]),
+        },
+      ],
+    }),
+    [height]
+  );
+
+  return (
+    <Animated.View style={[{ flex: 1 }, animatedStyles, style]}>
+      {children}
+    </Animated.View>
+  );
+};

package/src/components/HLSChatFooterView.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { HLSHandRaiseButton } from './HLSHandRaiseButton';
+import { HLSRoomOptionsButton } from './HLSRoomOptionsButton';
+import { HLSManageChatTextInput } from './HLSManageChatTextInput';
+
+export const HLSChatFooterView = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+      borderBottomColor: theme.palette.border_bright,
+    },
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.surface_default,
+    },
+  }));
+
+  return (
+    <SafeAreaView
+      edges={['bottom']}
+      style={[styles.container, hmsRoomStyles.container]}
+    >
+      <HLSManageChatTextInput />
+
+      <HLSHandRaiseButton />
+
+      <HLSRoomOptionsButton />
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    // alignItems: 'center',
+    alignItems: 'flex-end',
+  },
+  input: {
+    flex: 0,
+    height: 40,
+    marginHorizontal: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  chatPaused: {
+    flexShrink: 1,
+  },
+});

package/src/components/HLSChatHeaderView.tsx

@@ -0,0 +1,165 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { CompanyLogo } from './CompanyLogo';
+import {
+  useHMSConferencingScreenConfig,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import type { RootState } from '../redux';
+import { HLSRecordingStatusText } from './HLSRecordingStatusText';
+import { useIsHLSStreamingOn } from '../hooks-sdk';
+import { HLSStreamStartedTime } from './HLSStreamStartedTime';
+import { setHlsDescriptionPaneVisible } from '../redux/actions';
+
+export interface HLSChatHeaderViewProps {
+  expanded?: boolean;
+}
+
+export const _HLSChatHeaderView: React.FC<HLSChatHeaderViewProps> = ({
+  expanded = false,
+}) => {
+  const dispatch = useDispatch();
+  const isHLSStreaming = useIsHLSStreamingOn();
+
+  const peerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+  const headerTitle = useHMSConferencingScreenConfig((confScreenConfig) => {
+    return confScreenConfig?.elements?.header?.title;
+  });
+  const isValidHeaderDescription = useHMSConferencingScreenConfig(
+    (confScreenConfig) => {
+      return !!confScreenConfig?.elements?.header?.description;
+    }
+  );
+
+  const showDescriptionPane = () => {
+    dispatch(setHlsDescriptionPaneVisible(true));
+  };
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+      borderBottomColor: theme.palette.border_bright,
+    },
+    semiBoldSecondaryHigh: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: theme.palette.on_secondary_high,
+    },
+    semiBoldSurfaceHigh: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: theme.palette.on_surface_high,
+    },
+    regularSurfaceMedium: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_medium,
+    },
+    regularSurfaceLow: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_low,
+    },
+  }));
+
+  return (
+    <View
+      style={[
+        styles.container,
+        hmsRoomStyles.container,
+        expanded ? { borderBottomWidth: 0 } : null,
+      ]}
+    >
+      <CompanyLogo style={styles.logo} />
+
+      <View style={{ flexShrink: 1 }}>
+        {headerTitle ? (
+          <Text
+            numberOfLines={expanded ? undefined : 2}
+            style={[styles.title, hmsRoomStyles.semiBoldSecondaryHigh]}
+          >
+            {headerTitle}
+          </Text>
+        ) : null}
+
+        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+          <Text style={[styles.subtitle, hmsRoomStyles.regularSurfaceMedium]}>
+            {peerCount} {isHLSStreaming ? 'watching' : 'joined'}
+          </Text>
+
+          {isHLSStreaming ? (
+            <HLSStreamStartedTime
+              prefix={
+                <Text
+                  style={[
+                    styles.subtitleDivider,
+                    hmsRoomStyles.regularSurfaceLow,
+                  ]}
+                >
+                  ●
+                </Text>
+              }
+            />
+          ) : null}
+
+          {isValidHeaderDescription && !expanded ? (
+            <Pressable
+              onPress={showDescriptionPane}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
+              <Text
+                style={[
+                  styles.subtitle,
+                  { marginLeft: 8 },
+                  hmsRoomStyles.semiBoldSurfaceHigh,
+                ]}
+              >
+                ...more
+              </Text>
+            </Pressable>
+          ) : (
+            <HLSRecordingStatusText
+              style={[styles.subtitle, hmsRoomStyles.regularSurfaceMedium]}
+              prefix={
+                <Text
+                  style={[
+                    styles.subtitleDivider,
+                    hmsRoomStyles.regularSurfaceLow,
+                  ]}
+                >
+                  ●
+                </Text>
+              }
+            />
+          )}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export const HLSChatHeaderView = React.memo(_HLSChatHeaderView);
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+  },
+  logo: { marginRight: 12 },
+  title: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 4,
+  },
+  subtitle: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+  subtitleDivider: {
+    fontSize: 6,
+    lineHeight: 16,
+    marginHorizontal: 8,
+  },
+});

package/src/components/HLSChatMessages.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { FlashList } from '@shopify/flash-list';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { HMSHLSMessage } from './HMSHLSMessage';
+import { ChatBanner, PinnedMessages } from './Chat';
+import { MessageOptionsBottomSheet } from './Chat/MessageOptionsBottomSheet';
+
+export const HLSChatMessages = () => {
+  const messages = useSelector((state: RootState) => state.messages.messages);
+
+  const _keyExtractor = React.useCallback(
+    (item: HMSMessage) => item.messageId,
+    []
+  );
+
+  const _renderItem = React.useCallback((data: { item: HMSMessage }) => {
+    return <HMSHLSMessage message={data.item} />;
+  }, []);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        paddingHorizontal: 16,
+      }}
+    >
+      <View style={styles.container}>
+        <PinnedMessages />
+
+        {messages.length > 0 ? (
+          <FlashList
+            data={messages}
+            inverted={true}
+            estimatedItemSize={62}
+            contentContainerStyle={{ paddingBottom: 12 }}
+            showsVerticalScrollIndicator={Platform.OS !== 'android'}
+            // contentContainerStyle={styles.listContentContainer} // Bug: Android inverted flashlist will apply padding on left when `paddingRight: 12` is applied
+            keyboardShouldPersistTaps="always"
+            // ListEmptyComponent={ChatBanner}
+            // ItemSeparatorComponent={() => <View style={{ height: 16 }} />} // TODO: There is a bug related to this: https://github.com/Shopify/flash-list/issues/638
+            renderItem={_renderItem}
+            keyExtractor={_keyExtractor}
+          />
+        ) : (
+          <ChatBanner />
+        )}
+      </View>
+
+      <MessageOptionsBottomSheet />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/components/HLSChatView.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { useHLSViewsConstraints, useHMSRoomStyleSheet } from '../hooks-util';
+import { HLSChatHeaderView } from './HLSChatHeaderView';
+import { HLSChatFooterView } from './HLSChatFooterView';
+import { HLSChatMessages } from './HLSChatMessages';
+import { HLSDescriptionPane } from './HLSDescriptionPane';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import type { RootState } from '../redux';
+import { HLSNotifications } from './HLSNotifications';
+
+export const HLSChatView = () => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const { chatWrapperConstraints } = useHLSViewsConstraints();
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    wrapper: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  if (hlsFullScreen) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: isLandscapeOrientation ? undefined : 0,
+        right: 0,
+        width: chatWrapperConstraints.width,
+        height: chatWrapperConstraints.height,
+      }}
+    >
+      <View style={[{ flex: 1, position: 'relative' }, hmsRoomStyles.wrapper]}>
+        {isLandscapeOrientation ? null : <HLSChatHeaderView />}
+
+        <HLSChatMessages />
+
+        <HLSChatFooterView />
+
+        <HLSNotifications />
+
+        {/* Below is absolute positioned and only visible when state is true */}
+        {isLandscapeOrientation ? null : <HLSDescriptionPane />}
+      </View>
+    </View>
+  );
+};