@100mslive/react-native-room-kit 0.0.4 → 0.2.0

package/src/components/BottomSheet.tsx

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import type { ReactNativeModal } from 'react-native-modal';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { CloseIcon } from '../Icons';
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyle,
+  useHMSRoomStyleSheet,
+} from '../hooks-util';
+
+type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+
+export type BottomSheetProps = WithRequired<
+  Partial<ReactNativeModal['props']>,
+  'isVisible'
+> & {
+  // closes modal and no action will be taken after modal has been closed
+  dismissModal(): void;
+  containerStyle?: StyleProp<ViewStyle>;
+};
+
+export const BottomSheet: React.FC<BottomSheetProps> & {
+  Header: React.FC<HeaderProps>;
+  Divider: React.FC;
+} = ({ dismissModal, style, children, containerStyle, ...resetProps }) => {
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_default,
+  }));
+
+  const { handleModalHideAction } = useBottomSheetActionHandlers();
+
+  return (
+    <Modal
+      {...resetProps}
+      animationIn={resetProps.animationIn ?? 'slideInUp'}
+      animationOut={resetProps.animationOut ?? 'slideOutDown'}
+      backdropColor={resetProps.backdropColor ?? backgroundDimColor}
+      backdropOpacity={resetProps.backdropOpacity ?? 0.3}
+      onBackButtonPress={resetProps.onBackButtonPress ?? dismissModal}
+      onBackdropPress={resetProps.onBackdropPress ?? dismissModal}
+      useNativeDriver={resetProps.useNativeDriver ?? true}
+      useNativeDriverForBackdrop={resetProps.useNativeDriverForBackdrop ?? true}
+      hideModalContentWhileAnimating={
+        resetProps.hideModalContentWhileAnimating ?? true
+      }
+      style={[styles.modal, style]}
+      onModalHide={resetProps.onModalHide ?? handleModalHideAction}
+      supportedOrientations={
+        resetProps.supportedOrientations ?? ['portrait', 'landscape']
+      }
+      // coverScreen={true}
+    >
+      <View style={[styles.container, containerStyles, containerStyle]}>
+        {children}
+      </View>
+    </Modal>
+  );
+};
+
+interface HeaderProps {
+  dismissModal(): void;
+  heading: string;
+  subheading?: string;
+}
+
+const BottomSheetHeader: React.FC<HeaderProps> = ({
+  dismissModal,
+  heading,
+  subheading,
+}) => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    subheadingText: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.header}>
+      <View>
+        <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+          {heading}
+        </Text>
+
+        {subheading ? (
+          <Text style={[styles.subheadingText, hmsRoomStyles.subheadingText]}>
+            {subheading}
+          </Text>
+        ) : null}
+      </View>
+
+      <TouchableOpacity
+        onPress={dismissModal}
+        hitSlop={styles.closeIconHitSlop}
+      >
+        <CloseIcon />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const BottomSheetDivider: React.FC = () => {
+  const dividerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.border_default,
+  }));
+
+  return <View style={[styles.divider, dividerStyles]} />;
+};
+
+BottomSheet.Header = BottomSheetHeader;
+
+BottomSheet.Divider = BottomSheetDivider;
+
+const onModalHideActionHandlerRef: { handler: null | (() => void) } = {
+  handler: null,
+};
+
+const useBottomSheetActionHandlers = () => {
+  const onModalHideActionRef = React.useRef(onModalHideActionHandlerRef);
+
+  const handleModalHideAction = React.useCallback(() => {
+    if (typeof onModalHideActionRef.current.handler === 'function') {
+      onModalHideActionRef.current.handler();
+    }
+    onModalHideActionRef.current.handler = null;
+  }, []);
+
+  return { handleModalHideAction };
+};
+
+export const useBottomSheetActions = () => {
+  const registerOnModalHideAction = React.useCallback((action: () => void) => {
+    onModalHideActionHandlerRef.handler = action;
+  }, []);
+
+  const clearOnModalHideAction = React.useCallback(() => {
+    onModalHideActionHandlerRef.handler = null;
+  }, []);
+
+  return { registerOnModalHideAction, clearOnModalHideAction };
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end',
+  },
+  container: {
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+    paddingBottom: 32,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    marginHorizontal: 24,
+  },
+  headerText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+  },
+  subheadingText: {
+    marginTop: 4,
+    fontSize: 12,
+    lineHeight: 16,
+    letterSpacing: 0.4,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  divider: {
+    height: 1,
+    width: '100%',
+    marginVertical: 16,
+  },
+});

package/src/components/ChangeNameModalContent.tsx

@@ -0,0 +1,157 @@
+import * as React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  TouchableOpacity,
+  Keyboard,
+} from 'react-native';
+import { useSelector } from 'react-redux';
+
+import type { RootState } from '../redux';
+import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
+import { BottomSheet, useBottomSheetActions } from './BottomSheet';
+import { ChevronIcon, CloseIcon } from '../Icons';
+import { ModalTypes } from '../utils/types';
+import { HMSTextInput } from './HMSTextInput';
+import { HMSPrimaryButton } from './HMSPrimaryButton';
+import { useHMSActions } from '../hooks-sdk';
+
+export interface ChangeNameModalContentProps {
+  dismissModal(): void;
+}
+
+export const ChangeNameModalContent: React.FC<ChangeNameModalContentProps> = ({
+  dismissModal,
+}) => {
+  const hmsActions = useHMSActions();
+  const localPeerName = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.name || ''
+  );
+
+  const [name, setName] = React.useState(localPeerName);
+  const [nameChangeLoading, setNameChangeLoading] = React.useState(false);
+  const { handleModalVisibleType } = useModalType();
+
+  const { registerOnModalHideAction } = useBottomSheetActions();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const invalidName = name.trim().length <= 0;
+  const disabledButton = nameChangeLoading || invalidName;
+
+  const handleBackPress = () => {
+    Keyboard.dismiss();
+
+    // Open SETTINGS bottom sheet when current sheet is closed
+    registerOnModalHideAction(() => {
+      handleModalVisibleType(ModalTypes.SETTINGS);
+    });
+
+    // Close current bottom sheet
+    dismissModal();
+  };
+
+  const handleClosePress = () => {
+    Keyboard.dismiss();
+    dismissModal();
+  };
+
+  const changeName = async () => {
+    if (invalidName) return;
+
+    setNameChangeLoading(true);
+    try {
+      await hmsActions.changeName(name);
+      Keyboard.dismiss();
+      dismissModal();
+    } catch (error) {
+      setNameChangeLoading(false);
+    }
+  };
+
+  return (
+    <View>
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          <TouchableOpacity
+            onPress={handleBackPress}
+            hitSlop={styles.closeIconHitSlop}
+          >
+            <ChevronIcon direction="left" />
+          </TouchableOpacity>
+
+          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+            Change Name
+          </Text>
+        </View>
+
+        <TouchableOpacity
+          onPress={handleClosePress}
+          hitSlop={styles.closeIconHitSlop}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      {/* Divider */}
+      <BottomSheet.Divider />
+
+      {/* Content */}
+      <View style={styles.contentContainer}>
+        <HMSTextInput
+          style={styles.textInput}
+          value={name}
+          autoFocus={true}
+          onChangeText={setName}
+        />
+
+        <HMSPrimaryButton
+          loading={nameChangeLoading}
+          onPress={changeName}
+          title="Change"
+          disabled={disabledButton}
+        />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginTop: 16,
+    marginHorizontal: 24,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginLeft: 8,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  contentContainer: {
+    marginHorizontal: 24,
+  },
+  textInput: {
+    flex: undefined,
+    marginBottom: 16,
+  },
+});

package/src/components/CompanyLogo.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSLayoutConfig } from '../hooks-util';
+
+interface CompanyLogoProps extends Omit<ImageProps, 'source'> {}
+
+export const CompanyLogo: React.FC<CompanyLogoProps> = ({
+  style,
+  ...restProps
+}) => {
+  const layoutConfig = useHMSLayoutConfig();
+
+  const logoSource = layoutConfig?.logo?.url;
+  if (!logoSource) {
+    return null;
+  }
+
+  return (
+    <Image
+      source={{ uri: logoSource }}
+      style={[styles.icon, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    aspectRatio: 1,
+    height: 32,
+    resizeMode: 'contain',
+  },
+});

package/src/components/CustomInput.tsx

@@ -32,9 +32,8 @@ const CustomInput = ({
   blurOnSubmit,
   disableFullscreenUI = true,
   clear = true,
-  autoCapitalize = 'none', // autoCorrect = false,
-} // autoCompleteType = 'off',
-: {
+  autoCapitalize = 'none', // autoCorrect = false, // autoCompleteType = 'off',
+}: {
   value?: string;
   title?: string;
   onChangeText: Function;

package/src/components/DisplayView.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { View, Text, InteractionManager } from 'react-native';
+import { InteractionManager } from 'react-native';
 import { HMSTrack, HMSCameraControl } from '@100mslive/react-native-hms';
 import Animated, {
   interpolate,
@@ -8,14 +8,12 @@ import Animated, {
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
 
-import { styles } from './styles';
 import { DefaultModal } from './DefaultModal';
 import { ModalTypes, PipModes } from '../utils/types';
 import type { PeerTrackNode } from '../utils/types';
-import { pairData, requestExternalStoragePermission } from '../utils/functions';
+import { requestExternalStoragePermission } from '../utils/functions';
 import {
   ChangeAspectRatio,
-  ChangeNameModal,
   ChangeRoleAccepteModal,
   ChangeRoleModal,
   ChangeTrackStateModal,
@@ -24,7 +22,6 @@ import {
 import type { RootState } from '../redux';
 import { GridView } from './GridView';
 import { HLSView } from './HLSView';
-import PIPView from './PIPView';
 import { PeerSettingsModalContent } from '../components/PeerSettingsModalContent';
 import { StreamingQualityModalContent } from '../components/StreamingQualityModalContent';
 import {
@@ -35,8 +32,9 @@ import {
   useIsHLSViewer,
   useModalType,
 } from '../hooks-util';
-import { useIsPortraitOrientation } from '../utils/dimension';
 import { ParticipantsModal } from './ParticipantsModal';
+import { WebrtcView } from './WebrtcView';
+import { BottomSheet } from './BottomSheet';
 
 type CapturedImagePath = { uri: string } | null;
 
@@ -51,8 +49,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 }) => {
   // --- 100ms SDK Instance ---
   const hmsInstance = useHMSInstance();
-
-  const isPortrait = useIsPortraitOrientation();
   const isHLSViewer = useIsHLSViewer();
 
   const {
@@ -68,9 +64,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
-  const spotlightTrackId = useSelector(
-    (state: RootState) => state.user.spotlightTrackId
-  ); // State to track active spotlight trackId
 
   // --- Component Local States ---
   const [selectedPeerTrackNode, setSelectedPeerTrackNode] =
@@ -78,14 +71,8 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
   const [capturedImagePath, setCapturedImagePath] =
     useState<CapturedImagePath>(null);
 
-  // --- Constants ---
-  const pairedPeers = useMemo(
-    () => pairData(peerTrackNodes, isPortrait ? 4 : 2, spotlightTrackId),
-    [peerTrackNodes, spotlightTrackId, isPortrait]
-  );
-
   // --- Listeners ---
-  useHMSSessionStoreListeners();
+  useHMSSessionStoreListeners(gridViewRef);
 
   const trackStateChangeRequest = useHMSChangeTrackStateRequest(() => {
     setModalVisible(ModalTypes.CHANGE_TRACK, true);
@@ -95,16 +82,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
     setModalVisible(ModalTypes.CHANGE_ROLE_ACCEPT, true);
   });
 
-  // --- Effects ---
-  useEffect(() => {
-    // Scroll to start of the list
-    if (spotlightTrackId) {
-      gridViewRef.current
-        ?.getFlatlistRef()
-        .current?.scrollToOffset({ animated: true, offset: 0 });
-    }
-  }, [spotlightTrackId]);
-
   // functions
 
   const handlePeerTileMorePress = React.useCallback(
@@ -161,45 +138,27 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
   }, []);
 
   return (
-    <Animated.View style={[styles.container, animatedStyles]}>
+    <Animated.View style={[{ flex: 1 }, animatedStyles]}>
       {isHLSViewer ? (
         <HLSView />
-      ) : pairedPeers.length > 0 ? (
-        <>
-          {isPipModeActive ? (
-            <PIPView pairedPeers={pairedPeers} />
-          ) : (
-            <GridView
-              ref={gridViewRef}
-              onPeerTileMorePress={handlePeerTileMorePress}
-              pairedPeers={pairedPeers}
-            />
-          )}
-        </>
       ) : (
-        <View style={styles.welcomeContainer}>
-          <Text style={styles.welcomeHeading}>Welcome!</Text>
-          <Text style={styles.welcomeDescription}>
-            You're the first one here.
-          </Text>
-          <Text style={styles.welcomeDescription}>
-            Sit back and relax till the others join.
-          </Text>
-        </View>
+        <WebrtcView
+          ref={gridViewRef}
+          peerTrackNodes={peerTrackNodes}
+          handlePeerTileMorePress={handlePeerTileMorePress}
+        />
       )}
 
       {isPipModeActive ? null : (
         <>
-          <DefaultModal
-            backdrop={true}
-            modalPosiion="center"
-            viewStyle={{ minWidth: '70%', width: undefined }}
-            modalVisible={modalVisible === ModalTypes.PEER_SETTINGS}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
+          <BottomSheet
+            isVisible={modalVisible === ModalTypes.PEER_SETTINGS}
+            dismissModal={() => setModalVisible(ModalTypes.DEFAULT)}
           >
             {selectedPeerTrackNode ? (
               <PeerSettingsModalContent
                 peerTrackNode={selectedPeerTrackNode}
+                peerTrackNodesListEmpty={peerTrackNodes.length === 0}
                 cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
                 onCaptureScreenShotPress={handleCaptureScreenShotPress}
                 onCaptureImageAtMaxSupportedResolutionPress={
@@ -208,7 +167,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
                 onStreamingQualityPress={handleStreamingQualityPress}
               />
             ) : null}
-          </DefaultModal>
+          </BottomSheet>
 
           <DefaultModal
             modalPosiion="center"
@@ -288,15 +247,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
             />
           </DefaultModal>
-          <DefaultModal
-            modalPosiion="center"
-            modalVisible={modalVisible === ModalTypes.CHANGE_NAME}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            <ChangeNameModal
-              cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
-            />
-          </DefaultModal>
         </>
       )}
     </Animated.View>

package/src/components/EndRoomModalContent.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+
+import { useHMSRoomStyleSheet, useLeaveMethods } from '../hooks-util';
+import { AlertTriangleIcon, CloseIcon } from '../Icons';
+import { HMSDangerButton } from './HMSDangerButton';
+
+export interface EndRoomModalContentProps {
+  dismissModal(): void;
+}
+
+export const EndRoomModalContent: React.FC<EndRoomModalContentProps> = ({
+  dismissModal,
+}) => {
+  const { endRoom } = useLeaveMethods();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    headerText: {
+      color: theme.palette.alert_error_default,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    text: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <View style={styles.headerControls}>
+          <AlertTriangleIcon />
+
+          <Text style={[styles.headerText, hmsRoomStyles.headerText]}>
+            End Session
+          </Text>
+        </View>
+
+        <TouchableOpacity
+          onPress={dismissModal}
+          hitSlop={styles.closeIconHitSlop}
+        >
+          <CloseIcon />
+        </TouchableOpacity>
+      </View>
+
+      <Text style={[styles.text, hmsRoomStyles.text]}>
+        The session will end for everyone and all the activities will stop. You
+        can't undo this action.
+      </Text>
+
+      <HMSDangerButton loading={false} onPress={endRoom} title="End Session" />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 24,
+    marginHorizontal: 24,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 8,
+  },
+  headerControls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerText: {
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    marginLeft: 8,
+  },
+  closeIconHitSlop: {
+    bottom: 16,
+    left: 16,
+    right: 16,
+    top: 16,
+  },
+  text: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    marginBottom: 24,
+  },
+});