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

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>
+  );
+};

package/src/components/HLSDescriptionPane.tsx

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Linking, ScrollView, StyleSheet, Text, View } from 'react-native';
+import { runOnJS, useSharedValue, withTiming } from 'react-native-reanimated';
+
+import {
+  useHLSViewsConstraints,
+  useHMSConferencingScreenConfig,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+import { HLSChatHeaderView } from './HLSChatHeaderView';
+import {
+  HLSDescriptionPaneHeader,
+  HLSDescriptionPaneHeaderHeight,
+} from './HLSDescriptionPaneHeader';
+import { HLSAnimatedDescriptionPane } from './HLSAnimatedDescriptionPane';
+import { setHlsDescriptionPaneVisible } from '../redux/actions';
+import type { RootState } from '../redux';
+
+interface HLSDescriptionPaneProps {}
+
+export const HLSDescriptionPane: React.FC<HLSDescriptionPaneProps> = () => {
+  const dispatch = useDispatch();
+  const paneVisible = useSelector(
+    (state: RootState) => state.app.hlsDescriptionPaneVisible
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    wrapper: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+    regularSurfaceMedium: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_medium,
+    },
+    link: {
+      color: theme.palette.primary_bright,
+    },
+  }));
+
+  const { descriptionPaneConstraints } = useHLSViewsConstraints();
+
+  const descriptionPaneContentHeight =
+    descriptionPaneConstraints.height - HLSDescriptionPaneHeaderHeight;
+
+  const desPaneTranslationValue = useSharedValue(0);
+
+  const _closeDescriptionPane = () => {
+    dispatch(setHlsDescriptionPaneVisible(false));
+  };
+
+  const hideDescriptionPane = () => {
+    if (paneVisible) {
+      desPaneTranslationValue.value = withTiming(0, { duration: 280 }, () => {
+        runOnJS(_closeDescriptionPane)();
+      });
+    }
+  };
+
+  React.useEffect(() => {
+    if (!paneVisible) {
+      return;
+    }
+    desPaneTranslationValue.value = withTiming(1, { duration: 280 });
+    return () => {
+      cancelAnimationFrame(desPaneTranslationValue.value);
+    };
+  }, [paneVisible]);
+
+  const description = useHMSConferencingScreenConfig((confScreenConfig) => {
+    return confScreenConfig?.elements?.header?.description;
+  });
+
+  const handleLinkPress = async (url: string) => {
+    const canOpen = await Linking.canOpenURL(url);
+    if (canOpen) {
+      Linking.openURL(url);
+    }
+  };
+
+  if (!paneVisible) {
+    return null;
+  }
+
+  // TODO: for links to work, add query in manifest.xml
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        bottom: 0,
+        width: descriptionPaneConstraints.width,
+        height: descriptionPaneConstraints.height,
+        zIndex: 10,
+      }}
+    >
+      <HLSDescriptionPaneHeader
+        close={hideDescriptionPane}
+        animatedValue={desPaneTranslationValue}
+      />
+
+      <View style={{ flex: 1, overflow: 'hidden' }}>
+        <HLSAnimatedDescriptionPane
+          height={descriptionPaneContentHeight}
+          sharedValue={desPaneTranslationValue}
+        >
+          <ScrollView
+            style={hmsRoomStyles.wrapper}
+            contentContainerStyle={{ paddingBottom: 40 }}
+          >
+            <HLSChatHeaderView expanded={true} />
+
+            {description ? (
+              <Text
+                style={[styles.description, hmsRoomStyles.regularSurfaceMedium]}
+              >
+                {splitLinksAndContent(description, {
+                  pressHandler: handleLinkPress,
+                  style: hmsRoomStyles.link,
+                })}
+              </Text>
+            ) : null}
+          </ScrollView>
+        </HLSAnimatedDescriptionPane>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginHorizontal: 16,
+  },
+});
+
+function splitLinksAndContent(
+  text: string,
+  { pressHandler, style }: any
+): string | (string | React.ReactElement)[] {
+  // Regular expression to find links in a string
+  const pattern = /http[s]?:\/\/\S+/g;
+
+  // Find all links in the text
+  const links = text.match(pattern) || [];
+
+  if (links.length <= 0) {
+    return text;
+  }
+
+  // Split the text into an array of links and content
+  const parts = text.replace(pattern, '^<link>^').split('^');
+
+  return parts.map((p, i) => {
+    if (p !== '<link>') {
+      return p;
+    }
+    const link = links.pop();
+    return link ? (
+      <Text key={link + i} onPress={() => pressHandler(link)} style={style}>
+        {link}
+      </Text>
+    ) : (
+      p
+    );
+  });
+}

package/src/components/HLSDescriptionPaneHeader.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { ChevronIcon } from '../Icons';
+import Animated, {
+  useAnimatedStyle,
+  type SharedValue,
+  interpolate,
+} from 'react-native-reanimated';
+
+export interface HLSDescriptionPaneHeaderProps {
+  close(): void;
+  animatedValue: SharedValue<number>;
+}
+
+export const HLSDescriptionPaneHeaderHeight = 16 * 2 + 24; // vertical padding + content height
+
+export const HLSDescriptionPaneHeader: React.FC<
+  HLSDescriptionPaneHeaderProps
+> = ({ close, animatedValue }) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+      borderBottomColor: theme.palette.border_bright,
+    },
+    semiBoldSurfaceHigh: {
+      fontFamily: `${typography.font_family}-SemiBold`,
+      color: theme.palette.on_surface_high,
+    },
+  }));
+
+  const animatedChevronStyles = useAnimatedStyle(
+    () => ({
+      transform: [
+        {
+          rotateZ: `${interpolate(animatedValue.value, [0, 1], [0, -180])}deg`,
+        },
+      ],
+    }),
+    []
+  );
+
+  const closeHlsDescriptionPane = () => {
+    close();
+  };
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.title, hmsRoomStyles.semiBoldSurfaceHigh]}>
+        About Session
+      </Text>
+
+      <TouchableOpacity
+        hitSlop={{ bottom: 12, left: 12, top: 12, right: 12 }}
+        onPress={closeHlsDescriptionPane}
+      >
+        <Animated.View style={animatedChevronStyles}>
+          <ChevronIcon direction="down" />
+        </Animated.View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderBottomWidth: 1,
+  },
+  title: {
+    fontSize: 16,
+    lineHeight: 24,
+  },
+});

package/src/components/HLSFooter.tsx

@@ -4,7 +4,7 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { Footer } from './Footer';
 import { AnimatedHLSFooter } from './AnimatedHLSFooter';
-import { HLSChatView } from './HMSOverlayChatView';
+import { HMSOverlayChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 import { HMSNotifications } from './HMSNotifications';
 
@@ -17,7 +17,7 @@ export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
 
   return (
     <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
-      {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
+      {overlayChatVisible ? <HMSOverlayChatView offset={offset} /> : null}
 
       <HMSNotifications />
 

package/src/components/HLSHandRaiseButton.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import {
+  useHMSConferencingScreenConfig,
+  useHMSLayoutConfig,
+} from '../hooks-util';
+import { HMSManageRaiseHand } from './HMSManageRaiseHand';
+import {
+  useCanPublishAudio,
+  useCanPublishScreen,
+  useCanPublishVideo,
+} from '../hooks-sdk';
+
+export const HLSHandRaiseButton = () => {
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+  const canPublishScreen = useCanPublishScreen();
+
+  const canRaiseHand = useHMSConferencingScreenConfig(
+    (confScreenConfig) => !!confScreenConfig?.elements?.hand_raise
+  );
+  const isOnStage = useHMSLayoutConfig((layoutConfig) => {
+    return !!layoutConfig?.screens?.conferencing?.default?.elements
+      ?.on_stage_exp;
+  });
+
+  const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
+
+  const canShowHandRaiseInFooter = canRaiseHand && !isOnStage && isViewer;
+
+  if (!canShowHandRaiseInFooter) {
+    return null;
+  }
+
+  return (
+    <View style={{ marginLeft: 12 }}>
+      <HMSManageRaiseHand />
+    </View>
+  );
+};

package/src/components/HLSManageChatTextInput.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  useHLSViewsConstraints,
+  useHMSChatState,
+  useHMSRoomStyleSheet,
+  useIsAllowedToSendMessage,
+  useIsLocalPeerBlockedFromChat,
+} from '../hooks-util';
+import { ChatPaused } from './Chat/ChatPaused';
+import { PeerBlockedFromChat } from './Chat/PeerBlockedFromChat';
+import { ChatFilterBottomSheetOpener } from './Chat/ChatFilterBottomSheetOpener';
+import { HMSSendMessageInput } from './HMSSendMessageInput';
+import type { RootState } from '../redux';
+import { ChatFilterBottomSheet } from './Chat/ChatFilterBottomSheet';
+import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
+
+export const HLSManageChatTextInput = () => {
+  const { chatState } = useHMSChatState();
+  const isAllowedToSendMessage = useIsAllowedToSendMessage();
+  const isChatRecipientSelected = useSelector(
+    (state: RootState) => state.chatWindow.sendTo !== null
+  );
+  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      borderColor: theme.palette.surface_default,
+    },
+  }));
+
+  const { chatWrapperConstraints } = useHLSViewsConstraints();
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  const keyboardAvoidingStyles = React.useMemo(
+    () => ({
+      active: { width: chatWrapperConstraints.width - 32 },
+      inactive: { width: '100%' },
+    }),
+    [chatWrapperConstraints]
+  );
+
+  if (isLocalPeerBlockedFromChat) {
+    return <PeerBlockedFromChat style={styles.shrink} />;
+  }
+
+  if (chatState.enabled) {
+    return (
+      <>
+        {/* INFO: Chat action button UI might be broken,
+        but hls-viewer might not have permission to take action */}
+        <View style={styles.grow}>
+          <ChatFilterBottomSheetOpener useFilterModal={true} />
+
+          {isAllowedToSendMessage && isChatRecipientSelected ? (
+            <HMSKeyboardAvoidingView
+              bottomOffset={bottomInset}
+              styleWhenActive={keyboardAvoidingStyles.active}
+              styleWhenInactive={keyboardAvoidingStyles.inactive}
+            >
+              <HMSSendMessageInput
+                containerStyle={[styles.input, hmsRoomStyles.input]}
+              />
+            </HMSKeyboardAvoidingView>
+          ) : null}
+        </View>
+
+        <ChatFilterBottomSheet />
+      </>
+    );
+  }
+
+  if (isAllowedToSendMessage) {
+    return <ChatPaused style={styles.shrink} />;
+  }
+
+  return <View style={styles.grow} />;
+};
+
+const styles = StyleSheet.create({
+  input: {
+    flex: 0,
+    height: 40,
+    marginHorizontal: 0,
+    marginTop: 0,
+    marginBottom: 0,
+  },
+  shrink: {
+    flexShrink: 1,
+  },
+  grow: {
+    flexGrow: 1,
+  },
+});