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

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%',

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