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

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

package/src/components/HLSNotifications.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { HMSNotifications } from './HMSNotifications';
+
+const _HLSNotifications = () => {
+  const { bottom: bottomInset } = useSafeAreaInsets();
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          bottom: bottomInset + 90,
+        },
+      ]}
+    >
+      <HMSNotifications />
+    </View>
+  );
+};
+
+export const HLSNotifications = React.memo(_HLSNotifications);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    bottom: 0,
+    zIndex: 1,
+  },
+});

package/src/components/{HLSView.tsx → HLSPlayer.tsx}

@@ -6,13 +6,12 @@ import {
   Text,
   StyleSheet,
   Platform,
-  useWindowDimensions,
+  ActivityIndicator,
 } from 'react-native';
 import {
   HMSHLSPlayer,
   HMSHLSPlayerPlaybackState,
   useHMSHLSPlayerPlaybackState,
-  useHMSHLSPlayerResolution,
 } from '@100mslive/react-native-hms';
 
 import type { RootState } from '../redux';
@@ -23,18 +22,20 @@ import { CustomControls } from './CustomHLSPlayerControls';
 import { COLORS, hexToRgbA } from '../utils/theme';
 import { HMSHLSNotStarted } from './HMSHLSNotStarted';
 import { CrossCircleIcon } from '../Icons';
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import {
+  useHLSPlayerConstraints,
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
 import { useIsHLSStreamingOn } from '../hooks-sdk';
-import { useIsLandscapeOrientation } from '../utils/dimension';
 
-export const _HLSView: React.FC = () => {
+export const _HLSPlayer: React.FC = () => {
   const dispatch = useDispatch();
   const isHLSStreaming = useIsHLSStreamingOn();
   const isStreamUrlPresent = useSelector(
     (state: RootState) =>
       !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
   );
-  const { width, height } = useWindowDimensions();
   const hmsHlsPlayerRef = useRef<ComponentRef<typeof HMSHLSPlayer>>(null);
   const showHLSStats = useSelector(
     (state: RootState) => state.app.joinConfig.showHLSStats
@@ -100,6 +101,7 @@ export const _HLSView: React.FC = () => {
     }
   };
 
+  const hlsPlayerConstraints = useHLSPlayerConstraints();
   const [playerKey, setPlayerKey] = React.useState(1);
 
   const prevReconnectingRef = React.useRef<null | boolean>(null);
@@ -108,12 +110,13 @@ export const _HLSView: React.FC = () => {
   );
 
   const hlsPlayerPlaybackState = useHMSHLSPlayerPlaybackState();
-  const resolution = useHMSHLSPlayerResolution();
-  const isLandscapeOrientation = useIsLandscapeOrientation();
 
   const isPlaybackFailed =
     hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.FAILED;
 
+  const isPlayerBuffering =
+    hlsPlayerPlaybackState === HMSHLSPlayerPlaybackState.BUFFERING;
+
   React.useEffect(() => {
     const prevReconnecting = prevReconnectingRef.current;
 
@@ -140,80 +143,85 @@ export const _HLSView: React.FC = () => {
       color: theme.palette.on_surface_high,
       fontFamily: `${typography.font_family}-Regular`,
     },
+    warningText: {
+      color: theme.palette.alert_warning,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
   }));
 
+  const { primary_bright: PrimaryBrightColor } = useHMSRoomColorPalette();
+
+  if (!isHLSStreaming) return <HMSHLSNotStarted />;
+
+  if (!isStreamUrlPresent)
+    return (
+      <View style={styles.textContainer}>
+        <Text style={[styles.warningSubtitle, hmsRoomStyles.warningText]}>
+          Stream URL not found!
+        </Text>
+      </View>
+    );
+
   return (
-    <View style={styles.hlsView}>
-      {isHLSStreaming ? (
-        isStreamUrlPresent ? (
-          <View style={styles.hlsPlayerContainer}>
-            <HMSHLSPlayer
-              key={playerKey}
-              ref={hmsHlsPlayerRef}
-              enableStats={showHLSStats}
-              enableControls={enableHLSPlayerControls}
-              style={
-                isLandscapeOrientation
-                  ? {
-                      height,
-                      width: resolution
-                        ? height * (resolution.width / resolution.height)
-                        : width,
-                    }
-                  : {
-                      width,
-                      height: resolution
-                        ? width / (resolution.width / resolution.height)
-                        : height,
-                    }
-              }
-            />
-
-            <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 />
-      )}
-    </View>
+    <>
+      <HMSHLSPlayer
+        key={playerKey}
+        ref={hmsHlsPlayerRef}
+        enableStats={showHLSStats}
+        enableControls={enableHLSPlayerControls}
+        style={{
+          width: hlsPlayerConstraints.width,
+          height: hlsPlayerConstraints.height,
+        }}
+      />
+
+      <HLSPlayerEmoticons />
+
+      {showHLSStats ? (
+        <HLSPlayerStatsView onClosePress={handleClosePress} />
+      ) : null}
+
+      {showCustomHLSPlayerControls ? (
+        <CustomControls handleControlPress={hlsPlayerActions} />
+      ) : null}
+
+      {isPlayerBuffering ? (
+        <View
+          style={[
+            styles.playbackFailedContainer,
+            hmsRoomStyles.failedContainer,
+          ]}
+        >
+          <ActivityIndicator size={'large'} color={PrimaryBrightColor} />
+        </View>
+      ) : null}
+
+      {isPlaybackFailed ? (
+        <View
+          style={[
+            styles.playbackFailedContainer,
+            hmsRoomStyles.failedContainer,
+          ]}
+        >
+          <CrossCircleIcon />
+
+          <Text style={[styles.playbackFailed, hmsRoomStyles.failedText]}>
+            Playback Failed
+          </Text>
+        </View>
+      ) : null}
+    </>
   );
 };
 
-export const HLSView = React.memo(_HLSView);
+export const HLSPlayer = React.memo(_HLSPlayer);
 
 const styles = StyleSheet.create({
   hlsView: {
     flex: 1,
   },
   hlsPlayerContainer: {
-    flex: 1,
+    // flex: 1,
     position: 'relative',
   },
   textContainer: {
@@ -223,16 +231,11 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   warningSubtitle: {
-    color: COLORS.INDICATORS.WARNING,
-    fontFamily: 'Inter',
-    fontSize: 20,
-    fontWeight: '600',
+    fontSize: 16,
+    lineHeight: 20,
     letterSpacing: 0.25,
     textAlign: 'center',
   },
-  taleLessSpaceAsYouCan: {
-    flex: 0,
-  },
   playbackFailedContainer: {
     flex: 1,
     width: '100%',