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

package/src/components/HLSPlayerContainer.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { useHLSViewsConstraints } from '../hooks-util';
+import { HLSPlayer } from './HLSPlayer';
+import { HLSPlayerControls } from './HLSPlayerControls';
+
+export const _HLSPlayerContainer: React.FC = () => {
+  // const hlsPlayerRef = useRef(null);
+  const { playerWrapperConstraints } = useHLSViewsConstraints();
+
+  return (
+    <View
+      style={[
+        styles.hlsPlayerContainer,
+        {
+          backgroundColor: 'black',
+          width: playerWrapperConstraints.width,
+          height: playerWrapperConstraints.height,
+        },
+      ]}
+    >
+      <HLSPlayer />
+
+      <HLSPlayerControls />
+    </View>
+  );
+};
+
+export const HLSPlayerContainer = React.memo(_HLSPlayerContainer);
+
+const styles = StyleSheet.create({
+  hlsView: {
+    flex: 1,
+  },
+  hlsPlayerContainer: {
+    // flex: 1,
+    position: 'relative',
+  },
+  textContainer: {
+    flex: 1,
+    paddingHorizontal: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  warningSubtitle: {
+    fontSize: 16,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    textAlign: 'center',
+  },
+  playbackFailedContainer: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
+  playbackFailed: {
+    fontSize: 24,
+    lineHeight: 32,
+    letterSpacing: 0.5,
+    textAlign: 'center',
+    marginTop: 8,
+  },
+});

package/src/components/HLSPlayerControls.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import {
+  // CCIcon,
+  CloseIcon,
+  MaximizeIcon,
+  MinimizeIcon,
+} from '../Icons';
+import { ModalTypes } from '../utils/types';
+import { useModalType } from '../hooks-util';
+import type { RootState } from '../redux';
+import { setHlsFullScreen } from '../redux/actions';
+
+export const _HLSPlayerControls: React.FC = () => {
+  // const isHLSStreaming = useIsHLSStreamingOn();
+  // const isStreamUrlPresent = useSelector(
+  //   (state: RootState) =>
+  //     !!state.hmsStates.room?.hlsStreamingState.variants?.[0]?.hlsStreamUrl
+  // );
+  const dispatch = useDispatch();
+  const hlsFullScreen = useSelector(
+    (state: RootState) => state.app.hlsFullScreen
+  );
+  const { handleModalVisibleType } = useModalType();
+
+  const handleCloseBtnPress = () => {
+    handleModalVisibleType(ModalTypes.LEAVE_ROOM);
+  };
+
+  // const handleCCBtnPress = () => {
+  //   //
+  // };
+
+  const toggleFullScreen = () => {
+    dispatch(setHlsFullScreen(!hlsFullScreen));
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.controlsRow}>
+        <TouchableOpacity onPress={handleCloseBtnPress} style={styles.icon}>
+          <CloseIcon size="medium" />
+        </TouchableOpacity>
+
+        {/* <View style={[styles.normalRow, styles.gap]}>
+          <TouchableOpacity
+            onPress={handleCCBtnPress}
+            style={[styles.icon, styles.gap]}
+          >
+            <CCIcon size="medium" enabled={true} />
+          </TouchableOpacity>
+        </View> */}
+      </View>
+
+      <View style={styles.controlsRow}>
+        <View />
+
+        <View style={[styles.normalRow, styles.gap]}>
+          <TouchableOpacity onPress={toggleFullScreen} style={styles.icon}>
+            {hlsFullScreen ? (
+              <MinimizeIcon size="medium" />
+            ) : (
+              <MaximizeIcon size="medium" />
+            )}
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export const HLSPlayerControls = React.memo(_HLSPlayerControls);
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    zIndex: 5,
+    justifyContent: 'space-between',
+  },
+  controlsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginHorizontal: 8,
+  },
+  normalRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+  gap: {
+    marginLeft: 16,
+  },
+});

package/src/components/HLSRecordingStatusText.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Text } from 'react-native';
+import type { TextProps } from 'react-native';
+import { useSelector } from 'react-redux';
+import { HMSRecordingState } from '@100mslive/react-native-hms';
+
+import type { RootState } from '../redux';
+import { useIsAnyRecordingOn, useIsAnyRecordingPaused } from '../hooks-sdk';
+
+interface HLSRecordingStatusTextProps extends TextProps {
+  prefix?: React.ReactElement;
+  suffix?: React.ReactElement;
+}
+
+export const HLSRecordingStatusText: React.FC<HLSRecordingStatusTextProps> = ({
+  prefix,
+  suffix,
+  ...restProps
+}) => {
+  const isRecordingOn = useIsAnyRecordingOn();
+  const isRecordingPaused = useIsAnyRecordingPaused();
+  const startingOrStoppingRecording = useSelector(
+    (state: RootState) =>
+      state.app.startingOrStoppingRecording ||
+      state.hmsStates.room?.browserRecordingState.state ===
+        HMSRecordingState.STARTING ||
+      state.hmsStates.room?.serverRecordingState.state ===
+        HMSRecordingState.STARTING ||
+      state.hmsStates.room?.hlsRecordingState?.state ===
+        HMSRecordingState.STARTING
+  );
+
+  if (startingOrStoppingRecording || !(isRecordingPaused && isRecordingOn)) {
+    return null;
+  }
+
+  return (
+    <>
+      {prefix}
+      <Text {...restProps}>
+        {isRecordingPaused
+          ? 'Recording Paused'
+          : isRecordingOn
+            ? 'Recording'
+            : ''}
+      </Text>
+      {suffix}
+    </>
+  );
+};

package/src/components/HLSRoomOptionsButton.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useCanShowRoomOptionsButton } from '../hooks-util';
+import { HMSRoomOptions } from './HMSRoomOptions';
+
+export const HLSRoomOptionsButton = () => {
+  const canShowOptions = useCanShowRoomOptionsButton();
+
+  if (!canShowOptions) {
+    return null;
+  }
+
+  return (
+    <View style={{ marginLeft: 12 }}>
+      <HMSRoomOptions />
+    </View>
+  );
+};

package/src/components/HLSStreamStartedTime.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
+
+export interface HLSStreamStartedTimeProps {
+  prefix?: React.ReactElement;
+}
+
+export const HLSStreamStartedTime: React.FC<HLSStreamStartedTimeProps> = ({
+  prefix,
+}) => {
+  const streamStartedTime = useSelector(
+    (state: RootState) =>
+      state.hmsStates.room?.hlsStreamingState.variants?.[0]?.startedAt
+  );
+  const [streamStartedBeforeMillis, setStreamStartedBeforeMillis] =
+    React.useState(0);
+
+  React.useEffect(() => {
+    if (streamStartedTime) {
+      const beforeMilliSecs = Date.now() - streamStartedTime.getTime();
+
+      setStreamStartedBeforeMillis(beforeMilliSecs);
+
+      const intervalId = setInterval(() => {
+        setStreamStartedBeforeMillis((secs) => {
+          secs += 1000;
+          return secs;
+        });
+      }, 1000);
+
+      return () => {
+        clearInterval(intervalId);
+      };
+    }
+  }, [streamStartedTime]);
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    regularSurfaceMedium: {
+      fontFamily: `${typography.font_family}-Regular`,
+      color: theme.palette.on_surface_medium,
+    },
+  }));
+
+  if (!streamStartedTime) {
+    return null;
+  }
+
+  const { h, min, sec } = msToTime(streamStartedBeforeMillis);
+
+  return (
+    <>
+      {prefix}
+
+      <Text style={[styles.subtitle, hmsRoomStyles.regularSurfaceMedium]}>
+        Started {h > 0 ? `${h} h` : min > 0 ? `${min} min` : `${sec} sec`} ago
+      </Text>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  subtitle: {
+    fontSize: 12,
+    lineHeight: 16,
+  },
+});
+
+function msToTime(duration: number) {
+  return {
+    ms: duration,
+    sec: Math.floor(duration / 1000),
+    min: Math.floor(duration / 1000 / 60),
+    h: Math.floor(duration / 1000 / 60 / 60),
+  };
+}

package/src/components/HLSViewerScreenContent.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { HMSStatusBar } from './StatusBar';
+import { HLSPlayerContainer } from './HLSPlayerContainer';
+import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
+import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
+import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
+import { DefaultModal } from './DefaultModal';
+import { ModalTypes, PipModes } from '../utils/types';
+import {
+  useHMSRoleChangeRequest,
+  useHMSRoomStyleSheet,
+  useHMSSessionStoreListeners,
+  useModalType,
+} from '../hooks-util';
+import { ChangeAspectRatio } from './Modals';
+import type { RootState } from '../redux';
+import { HLSChatView } from './HLSChatView';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+
+interface HLSViewerScreenContentProps {}
+
+export const HLSViewerScreenContent: React.FC<
+  HLSViewerScreenContentProps
+> = ({}) => {
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    container: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  const {
+    modalVisibleType: modalVisible,
+    handleModalVisibleType: setModalVisible,
+  } = useModalType();
+
+  useHMSSessionStoreListeners();
+
+  useHMSRoleChangeRequest();
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <HMSStatusBar barStyle={'light-content'} />
+
+      <SafeAreaView
+        style={[
+          styles.container,
+          hmsRoomStyles.container,
+          isLandscapeOrientation ? styles.landscapeContainer : null,
+        ]}
+      >
+        <HLSPlayerContainer />
+
+        <HLSChatView />
+      </SafeAreaView>
+
+      {isPipModeActive ? null : (
+        <>
+          <LeaveRoomBottomSheet />
+
+          <PreviewForRoleChangeModal />
+
+          <ChatAndParticipantsBottomSheet />
+
+          <DefaultModal
+            modalPosiion="center"
+            modalVisible={modalVisible === ModalTypes.HLS_PLAYER_ASPECT_RATIO}
+            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          >
+            <ChangeAspectRatio
+              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
+            />
+          </DefaultModal>
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 1,
+    position: 'relative',
+  },
+  landscapeContainer: {
+    flexDirection: 'row',
+  },
+});

package/src/components/HMSHLSNotStarted.tsx

@@ -18,7 +18,11 @@ export const HMSHLSNotStarted = () => {
 
   return (
     <View style={styles.container}>
-      <RadioIcon size="extra-large" containerStyle={styles.icon} />
+      <RadioIcon
+        size="extra-large"
+        containerStyle={styles.iconWrapper}
+        style={styles.icon}
+      />
       <Text style={[styles.title, hmsRoomStyles.title]}>
         Stream yet to start
       </Text>
@@ -36,20 +40,27 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
+  iconWrapper: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
     marginBottom: 24,
   },
+  icon: {
+    width: 24,
+    height: 24,
+  },
   title: {
-    fontSize: 24,
-    lineHeight: 32,
+    fontSize: 16,
+    lineHeight: 20,
     textAlign: 'center',
   },
   description: {
-    fontSize: 16,
-    lineHeight: 24,
+    fontSize: 14,
+    lineHeight: 20,
     letterSpacing: 0.5,
     textAlign: 'center',
-    marginTop: 8,
+    marginTop: 4,
   },
   taleLessSpaceAsYouCan: {
     flex: 0,

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -12,12 +12,20 @@ import { useKeyboardState } from '../hooks-util';
 
 export interface HMSKeyboardAvoidingViewProps {
   style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  styleWhenInactive?: ViewStyle;
+  styleWhenActive?: ViewStyle;
   bottomOffset?: number | SharedValue<number>;
 }
 
 export const HMSKeyboardAvoidingView: React.FC<
   HMSKeyboardAvoidingViewProps
-> = ({ children, style, bottomOffset = 0 }) => {
+> = ({
+  children,
+  style,
+  styleWhenInactive,
+  styleWhenActive,
+  bottomOffset = 0,
+}) => {
   const animatedKeyboard = useAnimatedKeyboard();
   const { keyboardState } = useKeyboardState();
 
@@ -27,14 +35,16 @@ export const HMSKeyboardAvoidingView: React.FC<
 
   const keyboardAvoidStyle = useAnimatedStyle(() => {
     const keyboardHeight = animatedKeyboard.height.value;
+    const keyboardHidden =
+      keyboardHeight <= initialPageY.value ||
+      keyboardState.value === KeyboardState.CLOSED;
     return {
+      ...(keyboardHidden ? styleWhenInactive : styleWhenActive),
       transform: [
         {
-          translateY:
-            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),
+          translateY: keyboardHidden
+            ? 0 // Keep element at original `pageY` till and when keyboard height is less than `pageY`
+            : -(keyboardHeight - initialPageY.value),
         },
       ],
     };

package/src/components/HMSLiveViewerCount.tsx

@@ -5,17 +5,14 @@ import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
 import {
   useHMSRoomStyleSheet,
-  useIsHLSViewer,
   useShowChatAndParticipants,
 } from '../hooks-util';
 import { EyeIcon } from '../Icons';
-import { hexToRgbA } from '../utils/theme';
 import type { RootState } from '../redux';
 import { TestIds } from '../utils/constants';
 import { useIsAnyStreamingOn } from '../hooks-sdk';
 
 const _HMSLiveViewerCount = () => {
-  const isHLSViewer = useIsHLSViewer();
   const previewPeerCount = useSelector(
     (state: RootState) => state.hmsStates.room?.peerCount
   );
@@ -23,11 +20,8 @@ const _HMSLiveViewerCount = () => {
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typograhy) => ({
     viewers: {
-      backgroundColor: isHLSViewer
-        ? theme.palette.background_dim &&
-          hexToRgbA(theme.palette.background_dim, 0.64)
-        : undefined,
-      borderWidth: isHLSViewer ? 0 : 1,
+      backgroundColor: undefined,
+      borderWidth: 1,
       borderColor: theme.palette.border_bright,
     },
     count: {

package/src/components/HMSNotification.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import type { StyleProp, ViewStyle, TextStyle, TextProps } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 
-import { useHMSRoomStyleSheet } from '../hooks-util';
+import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 import { ChatIcon, CloseIcon } from '../Icons';
 import { UnmountAfterDelay } from './UnmountAfterDelay';
 import { removeNotification } from '../redux/actions';
@@ -39,20 +39,26 @@ export const HMSNotification: React.FC<HMSNotificationProps> = ({
   dismissable = false,
 }) => {
   const dispatch = useDispatch();
+  const isHLSViewer = useIsHLSViewer();
 
-  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
-    container: {
-      backgroundColor: theme.palette.surface_dim,
-    },
-    text: {
-      color: theme.palette.on_surface_high,
-      fontFamily: `${typography.font_family}-SemiBold`,
-    },
-    description: {
-      color: theme.palette.on_surface_medium,
-      fontFamily: `${typography.font_family}-Regular`,
-    },
-  }));
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme, typography) => ({
+      container: {
+        backgroundColor: isHLSViewer
+          ? theme.palette.surface_default
+          : theme.palette.surface_dim,
+      },
+      text: {
+        color: theme.palette.on_surface_high,
+        fontFamily: `${typography.font_family}-SemiBold`,
+      },
+      description: {
+        color: theme.palette.on_surface_medium,
+        fontFamily: `${typography.font_family}-Regular`,
+      },
+    }),
+    [isHLSViewer]
+  );
 
   const dismissNotification =
     onDismiss ||

package/src/components/HMSNotifications.tsx

@@ -13,6 +13,7 @@ import { AlertTriangleIcon } from '../Icons';
 import { HMSReconnectingNotification } from './HMSReconnectingNotification';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import { HMSPollsQuizzesNotification } from './HMSPollsQuizzesNotification';
+import { useIsHLSViewer } from '../hooks-util';
 
 export interface HMSNotificationsProps {}
 
@@ -25,6 +26,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   const isLocalScreenShared = useSelector(
     (state: RootState) => state.hmsStates.isLocalScreenShared
   );
+  const isHLSViewer = useIsHLSViewer();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
   // notifications is a stack, first will appear last
@@ -84,7 +86,7 @@ export const HMSNotifications: React.FC<HMSNotificationsProps> = () => {
   return (
     <View
       style={[
-        isLandscapeOrientation
+        isLandscapeOrientation && !isHLSViewer
           ? styles.absoluteLandscapeContainer
           : styles.absoluteContainer,
         { paddingTop: (notifications.length - 1) * 16 },

package/src/components/HMSOverlayChatView.tsx

@@ -32,11 +32,13 @@ const colors = [
 ];
 const colorLocations = [0, 0.4, 1];
 
-export interface HLSChatViewProps {
+export interface HMSOverlayChatViewProps {
   offset?: SharedValue<number>;
 }
 
-export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
+export const HMSOverlayChatView: React.FC<HMSOverlayChatViewProps> = ({
+  offset,
+}) => {
   const footerHeight = useFooterHeight();
   const hmsNotificationsHeight = useHMSNotificationsHeight();
   const { chatState } = useHMSChatState();
@@ -77,7 +79,12 @@ export const HLSChatView: React.FC<HLSChatViewProps> = ({ offset }) => {
         {chatState.enabled ? (
           <>
             <View style={styles.filterSheetWrapper}>
-              <ChatFilterBottomSheetOpener insetMode={true} />
+              <ChatFilterBottomSheetOpener
+                overlay={true}
+                useFilterModal={true}
+                showActionBtn={true}
+                useActionModal={true}
+              />
             </View>
 
             {isLocalPeerBlockedFromChat ? (

package/src/components/Meeting.tsx

@@ -15,6 +15,7 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
+  useIsHLSViewer,
   useLandscapeImmersiveMode,
   usePIPListener,
   useSetDefaultChatRecipient,
@@ -22,6 +23,7 @@ import {
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
 import type { RootState } from '../redux';
+import { HLSViewerScreenContent } from './HLSViewerScreenContent';
 
 interface MeetingProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -32,6 +34,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
+  const isHLSViewer = useIsHLSViewer();
+
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
@@ -81,7 +85,11 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
 
   return (
     <View style={[styles.container, containerStyles]}>
-      <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+      {isHLSViewer ? (
+        <HLSViewerScreenContent />
+      ) : (
+        <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+      )}
     </View>
   );
 };