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

package/src/components/Footer.tsx

@@ -1,15 +1,14 @@
 import React, { memo, useMemo } from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, Platform } from 'react-native';
 import Animated, {
   interpolate,
   useAnimatedProps,
   useAnimatedStyle,
 } from 'react-native-reanimated';
 import type { SharedValue } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { COLORS } from '../utils/theme';
-import { useIsHLSViewer } from '../hooks-util';
-import { EndIcon } from '../Icons';
+import { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
 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]);
@@ -62,44 +61,50 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
     };
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
   return (
     <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      <View style={styles.container}>
-        {footerActionButtons.map((actionType, index) => {
-          return (
-            <View
-              key={actionType}
-              style={index === 0 ? null : styles.iconWrapper}
-            >
-              {actionType === 'leave' ? (
-                <HMSManageLeave leaveIconDelegate={<EndIcon />} />
-              ) : actionType === 'audio' ? (
-                <HMSManageLocalAudio />
-              ) : actionType === 'video' ? (
-                <HMSManageLocalVideo />
-              ) : actionType === 'chat' ? (
-                <HMSChat />
-              ) : actionType === 'options' ? (
-                <HMSRoomOptions />
-              ) : actionType === 'hand-raise' ? (
-                <HMSManageRaiseHand />
-              ) : null}
-            </View>
-          );
-        })}
-      </View>
+      <SafeAreaView style={containerStyles} edges={['bottom']}>
+        <View style={[styles.container, containerStyles]}>
+          {footerActionButtons.map((actionType, index) => {
+            return (
+              <View
+                key={actionType}
+                style={index === 0 ? null : styles.iconWrapper}
+              >
+                {actionType === 'leave' ? (
+                  <HMSManageLeave />
+                ) : actionType === 'audio' ? (
+                  <HMSManageLocalAudio />
+                ) : actionType === 'video' ? (
+                  <HMSManageLocalVideo />
+                ) : actionType === 'chat' ? (
+                  <HMSChat />
+                ) : actionType === 'options' ? (
+                  <HMSRoomOptions />
+                ) : actionType === 'hand-raise' ? (
+                  <HMSManageRaiseHand />
+                ) : null}
+              </View>
+            );
+          })}
+        </View>
+      </SafeAreaView>
     </Animated.View>
   );
 };
 
 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/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,
+      ]}
+    />
+  );
+};

package/src/components/HMSHLSNotStarted.tsx

@@ -3,9 +3,8 @@ import { useSelector } from 'react-redux';
 import { View, Text, StyleSheet } from 'react-native';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
-import { usePortraitChatViewVisible } from '../hooks-util';
-import { ClockIcon } from '../Icons';
+import { useHMSRoomStyleSheet, usePortraitChatViewVisible } from '../hooks-util';
+import { RadioIcon } from '../Icons';
 
 export const HMSHLSNotStarted = () => {
   const portraitChatViewVisible = usePortraitChatViewVisible();
@@ -13,46 +12,53 @@ export const HMSHLSNotStarted = () => {
     (state: RootState) => state.app.hlsAspectRatio
   );
 
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    title: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    description: {
+      color: theme.palette.on_surface_medium,
+      fontFamily: `${typography.font_family}-Regular`,
+    }
+  }));
+
   return (
     <View
       style={[
-        styles.textContainer,
+        styles.container,
         portraitChatViewVisible ? styles.taleLessSpaceAsYouCan : null,
         portraitChatViewVisible ? { aspectRatio: hlsAspectRatio.value } : null,
       ]}
     >
-      <ClockIcon />
-      <Text style={styles.title}>Class hasn't started yet</Text>
-      <Text style={styles.description}>
-        Please wait for the teacher to start the class.
+      <RadioIcon size='extra-large' containerStyle={styles.icon} />
+      <Text style={[styles.title, hmsRoomStyles.title]}>Stream yet to start</Text>
+      <Text style={[styles.description, hmsRoomStyles.description]}>
+        Sit back and relax
       </Text>
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  textContainer: {
+  container: {
     flex: 1,
     paddingHorizontal: 24,
     alignItems: 'center',
     justifyContent: 'center',
   },
+  icon: {
+    marginBottom: 24
+  },
   title: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    fontFamily: 'Inter',
-    fontSize: 28,
-    fontWeight: '600',
+    fontSize: 24,
     lineHeight: 32,
-    letterSpacing: 0.25,
     textAlign: 'center',
   },
   description: {
-    color: COLORS.SURFACE.ON_SURFACE.LOW,
-    fontSize: 14,
-    fontFamily: 'Inter',
-    fontWeight: '400',
-    lineHeight: 20,
-    letterSpacing: 0.25,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
     textAlign: 'center',
     marginTop: 8,
   },

package/src/components/HMSHLSStreamLoading.tsx

@@ -5,24 +5,39 @@ import { useSelector } from 'react-redux';
 import { COLORS } from '../utils/theme';
 import type { RootState } from '../redux';
 import { HMSLocalVideoView } from './HMSLocalVideoView';
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
 
 export const HMSHLSStreamLoading = () => {
   const isLocalVideoMuted = useSelector(
     (state: RootState) => state.hmsStates.isLocalVideoMuted
   );
 
+  const { primary_default: primaryDefaultColor } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.background_dim,
+    },
+    text: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+  }));
+
   return (
-    <View style={styles.container}>
+    <View style={[styles.container, hmsRoomStyles.container]}>
       {isLocalVideoMuted ? null : <HMSLocalVideoView />}
 
       <View style={styles.hlsLoaderContainer}>
         <ActivityIndicator
           style={styles.hlsLoader}
           size={'large'}
-          color={COLORS.PRIMARY.DEFAULT}
+          color={primaryDefaultColor}
         />
 
-        <Text style={styles.hlsLoaderText}>Starting live stream...</Text>
+        <Text style={[styles.hlsLoaderText, hmsRoomStyles.text]}>
+          Starting live stream...
+        </Text>
       </View>
     </View>
   );
@@ -32,7 +47,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
-    backgroundColor: COLORS.BACKGROUND.DIM,
   },
   hlsLoaderContainer: {
     position: 'absolute',
@@ -47,10 +61,7 @@ const styles = StyleSheet.create({
     marginBottom: 30,
   },
   hlsLoaderText: {
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
     fontSize: 16,
-    fontFamily: 'Inter',
-    fontWeight: '400',
     lineHeight: 24,
     letterSpacing: 0.5,
   },