@100mslive/react-native-room-kit 0.0.3 → 0.1.0

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,
@@ -12,20 +12,17 @@ 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,
-  ChangeVolumeModal,
   SaveScreenshot,
 } from './Modals';
 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 {
@@ -36,8 +33,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;
 
@@ -52,8 +50,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 }) => {
   // --- 100ms SDK Instance ---
   const hmsInstance = useHMSInstance();
-
-  const isPortrait = useIsPortraitOrientation();
   const isHLSViewer = useIsHLSViewer();
 
   const {
@@ -69,9 +65,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] =
@@ -79,14 +72,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);
@@ -96,16 +83,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(
@@ -165,42 +142,24 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
     <Animated.View style={[styles.container, 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={
@@ -209,7 +168,7 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
                 onStreamingQualityPress={handleStreamingQualityPress}
               />
             ) : null}
-          </DefaultModal>
+          </BottomSheet>
 
           <DefaultModal
             modalPosiion="center"
@@ -289,24 +248,6 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
               cancelModal={() => setModalVisible(ModalTypes.DEFAULT)}
             />
           </DefaultModal>
-          <DefaultModal
-            modalPosiion="center"
-            modalVisible={modalVisible === ModalTypes.VOLUME}
-            setModalVisible={() => setModalVisible(ModalTypes.DEFAULT)}
-          >
-            <ChangeVolumeModal
-              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,
+  },
+});

package/src/components/Footer.tsx

@@ -1,5 +1,5 @@
 import React, { memo, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedProps,
@@ -9,7 +9,6 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { COLORS } from '../utils/theme';
 import { useIsHLSViewer } from '../hooks-util';
-import { EndIcon } from '../Icons';
 import { HMSManageLeave } from './HMSManageLeave';
 import { HMSManageRaiseHand } from './HMSManageRaiseHand';
 import { HMSManageLocalAudio } from './HMSManageLocalAudio';
@@ -28,10 +27,10 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
   const canPublishVideo = useCanPublishVideo();
 
   const footerActionButtons = useMemo(() => {
-    const actions = ['chat'];
+    const actions = ['chat', 'options'];
 
     if (isHLSViewer) {
-      actions.unshift('leave');
+      actions.unshift('hand-raise');
     }
 
     if (canPublishVideo) {
@@ -42,7 +41,7 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
       actions.unshift('audio');
     }
 
-    actions.push(isHLSViewer ? 'hand-raise' : 'options');
+    actions.unshift('leave');
 
     return actions;
   }, [isHLSViewer, canPublishAudio, canPublishVideo]);
@@ -72,7 +71,7 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
               style={index === 0 ? null : styles.iconWrapper}
             >
               {actionType === 'leave' ? (
-                <HMSManageLeave leaveIconDelegate={<EndIcon />} />
+                <HMSManageLeave />
               ) : actionType === 'audio' ? (
                 <HMSManageLocalAudio />
               ) : actionType === 'video' ? (
@@ -94,12 +93,13 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
+    paddingTop: 16,
     paddingHorizontal: 16,
     backgroundColor: COLORS.BACKGROUND.DIM,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide aimation offsets because of this change
   },
   iconWrapper: {
     marginLeft: 24,

package/src/components/GridView.tsx

@@ -1,32 +1,51 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import { View, FlatList } from 'react-native';
+import { View, FlatList, StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import type {
+  LayoutChangeEvent,
+  LayoutRectangle,
+  ViewToken,
+} from 'react-native';
 import type { HMSView, HMSPeer } from '@100mslive/react-native-hms';
 
 import { DefaultModal } from './DefaultModal';
 import { SaveScreenshot } from './Modals';
 import { TilesContainer } from './TilesContainer';
 import type { PeerTrackNode } from '../utils/types';
+import { MiniView } from './MiniView';
+import type { RootState } from '../redux';
+import { PaginationDots } from './PaginationDots';
+import { setGridViewActivePage } from '../redux/actions';
 
-type GridViewProps = {
+export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
   pairedPeers: PeerTrackNode[][];
 };
 
-type GridViewRefAttrs = {
+export type GridViewRefAttrs = {
   captureViewScreenshot(node: PeerTrackNode): any;
   getFlatlistRef(): React.RefObject<FlatList<any>>;
 };
 
-const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
+const FLATLIST_VIEWABILITY_CONFIG = {
+  waitForInteraction: true,
+  itemVisiblePercentThreshold: 80,
+};
+
+export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
   ({ pairedPeers, onPeerTileMorePress }, ref) => {
-    // hooks
+    const dispatch = useDispatch();
     const [screenshotData, setScreenshotData] = useState<{
       peer: HMSPeer;
       source: { uri: string };
     } | null>(null);
     const hmsViewRefs = useRef<Record<string, ElementRef<typeof HMSView>>>({});
     const flatlistRef = useRef<FlatList>(null);
+    const insetTileBoundingBoxRef = useRef<LayoutRectangle | null>(null);
+    const miniviewPeerTrackNodeExists = useSelector(
+      (state: RootState) => !!state.app.miniviewPeerTrackNode
+    );
 
     // We are setting `captureViewScreenshot` method on ref passed to GridView component
     // `captureViewScreenshot` method can be called to with PeerTrackNode to capture the HmsView Snapshot
@@ -87,21 +106,60 @@ const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
 
     const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
 
+    const _handleLayoutChange = React.useCallback(
+      ({ nativeEvent }: LayoutChangeEvent) => {
+        insetTileBoundingBoxRef.current = nativeEvent.layout;
+      },
+      []
+    );
+
+    const _handleViewableItemsChanged = React.useCallback(
+      (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
+        const firstViewable = info.viewableItems[0];
+
+        if (
+          firstViewable?.isViewable &&
+          typeof firstViewable.index === 'number'
+        ) {
+          dispatch(setGridViewActivePage(firstViewable.index));
+        }
+      },
+      []
+    );
+
     return (
-      <View style={{ flex: 1 }}>
-        <FlatList
-          ref={flatlistRef}
-          horizontal
-          data={pairedPeers}
-          initialNumToRender={1}
-          maxToRenderPerBatch={1}
-          windowSize={2}
-          pagingEnabled
-          showsHorizontalScrollIndicator={false}
-          renderItem={_renderItem}
-          numColumns={1}
-          keyExtractor={_keyExtractor}
-        />
+      <View style={styles.container}>
+        <View style={styles.tilesArea}>
+          <View
+            onLayout={_handleLayoutChange}
+            style={styles.measureLayoutView}
+          />
+
+          <FlatList
+            ref={flatlistRef}
+            horizontal={true}
+            data={pairedPeers}
+            initialNumToRender={1}
+            maxToRenderPerBatch={1}
+            windowSize={2}
+            pagingEnabled
+            showsHorizontalScrollIndicator={false}
+            renderItem={_renderItem}
+            numColumns={1}
+            keyExtractor={_keyExtractor}
+            onViewableItemsChanged={_handleViewableItemsChanged}
+            viewabilityConfig={FLATLIST_VIEWABILITY_CONFIG}
+          />
+
+          {pairedPeers.length > 0 && miniviewPeerTrackNodeExists ? (
+            <MiniView
+              boundingBoxRef={insetTileBoundingBoxRef}
+              onMoreOptionsPress={onPeerTileMorePress}
+            />
+          ) : null}
+        </View>
+
+        {pairedPeers.length > 1 ? <PaginationDots list={pairedPeers} /> : null}
 
         {/* Save Captured Screenshot of HMSView Modal */}
         <DefaultModal
@@ -121,4 +179,17 @@ const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
 
 GridView.displayName = 'GridView';
 
-export { GridView };
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tilesArea: {
+    flex: 1,
+    position: 'relative',
+  },
+  measureLayoutView: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+  },
+});

package/src/components/HLSView.tsx

@@ -46,7 +46,7 @@ export const HLSView: React.FC = () => {
       | 'seekForward'
       | 'seekBackward'
       | 'seekToLive'
-      | 'setVolume',
+      | 'setVolume'
   >(
     action: T,
     ...args: any[]

package/src/components/HMSBaseButton.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import {
+  ActivityIndicator,
+  StyleSheet,
+  Text,
+  TouchableHighlight,
+  View,
+} from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle, ColorValue } from 'react-native';
+
+export interface HMSBaseButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  underlayColor: ColorValue;
+  loaderColor: ColorValue;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+}
+
+export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
+  underlayColor,
+  loaderColor,
+  title,
+  loading,
+  onPress,
+  style,
+  textStyle,
+  disabled,
+  leftComponent,
+}) => {
+  return (
+    <TouchableHighlight
+      underlayColor={underlayColor}
+      style={[styles.button, style]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <>
+        {loading ? (
+          <ActivityIndicator
+            size={'small'}
+            color={loaderColor}
+            style={styles.loader}
+          />
+        ) : null}
+
+        <View
+          style={[
+            styles.buttonContentWrapper,
+            loading ? styles.hiddenView : null,
+          ]}
+        >
+          {leftComponent}
+
+          <Text style={[styles.text, textStyle]}>{title}</Text>
+        </View>
+      </>
+    </TouchableHighlight>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonContentWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    marginHorizontal: 8,
+  },
+  loader: {
+    position: 'absolute',
+  },
+  hiddenView: {
+    opacity: 0,
+  },
+});

package/src/components/HMSDangerButton.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSBaseButton } from './HMSBaseButton';
+
+export interface HMSDangerButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+}
+
+export const HMSDangerButton: React.FC<HMSDangerButtonProps> = ({
+  title,
+  loading,
+  onPress,
+  style,
+  disabled,
+  leftComponent,
+}) => {
+  const {
+    alert_error_dim: alertErrorDimColor,
+    alert_error_brighter: alertErrorBrighterColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.alert_error_default,
+    },
+    disabledButton: {
+      backgroundColor: theme.palette.alert_error_dim,
+    },
+    buttonText: {
+      color: theme.palette.alert_error_brighter,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    disabledText: {
+      color: theme.palette.alert_error_bright,
+    },
+  }));
+
+  return (
+    <HMSBaseButton
+      loaderColor={alertErrorBrighterColor}
+      loading={loading}
+      onPress={onPress}
+      title={title}
+      underlayColor={alertErrorDimColor}
+      disabled={disabled}
+      leftComponent={leftComponent}
+      style={[
+        hmsRoomStyles.button,
+        disabled ? hmsRoomStyles.disabledButton : null,
+        style,
+      ]}
+      textStyle={[
+        hmsRoomStyles.buttonText,
+        disabled ? hmsRoomStyles.disabledText : null,
+      ]}
+    />
+  );
+};