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

package/src/components/Footer.tsx

@@ -1,35 +1,65 @@
 import React, { memo, useMemo } from 'react';
 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 { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
+import {
+  useHMSLayoutConfig,
+  useHMSRoomStyle,
+  useIsHLSViewer,
+  useShowChatAndParticipants,
+} from '../hooks-util';
 import { HMSManageLeave } from './HMSManageLeave';
 import { HMSManageRaiseHand } from './HMSManageRaiseHand';
 import { HMSManageLocalAudio } from './HMSManageLocalAudio';
 import { HMSManageLocalVideo } from './HMSManageLocalVideo';
 import { HMSChat } from './HMSChat';
 import { HMSRoomOptions } from './HMSRoomOptions';
-import { useCanPublishAudio, useCanPublishVideo } from '../hooks-sdk';
+import {
+  useCanPublishAudio,
+  useCanPublishScreen,
+  useCanPublishVideo,
+} from '../hooks-sdk';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
 
-interface FooterProps {
-  offset: SharedValue<number>;
-}
+interface FooterProps {}
 
-export const _Footer: React.FC<FooterProps> = ({ offset }) => {
+export const _Footer: React.FC<FooterProps> = () => {
   const isHLSViewer = useIsHLSViewer();
   const canPublishAudio = useCanPublishAudio();
   const canPublishVideo = useCanPublishVideo();
+  const canPublishScreen = useCanPublishScreen();
+
+  const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
+
+  const { canShowParticipants, canShowChat } = useShowChatAndParticipants();
+
+  const canShowBRB = useHMSLayoutConfig(
+    (layoutConfig) =>
+      !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
+  );
+
+  const isOnStage = useHMSLayoutConfig((layoutConfig) => {
+    return !!layoutConfig?.screens?.conferencing?.default?.elements
+      ?.on_stage_exp;
+  });
+
+  const canStartRecording = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.browserRecording
+  );
+
+  const canShowOptions =
+    canPublishScreen || canShowParticipants || canShowBRB || canStartRecording;
 
   const footerActionButtons = useMemo(() => {
-    const actions = ['chat', 'options'];
+    const actions = [];
+
+    if (canShowChat) {
+      actions.push('chat');
+    }
 
-    if (isHLSViewer) {
+    if (!isOnStage && isViewer) {
       actions.unshift('hand-raise');
     }
 
@@ -43,57 +73,59 @@ export const _Footer: React.FC<FooterProps> = ({ offset }) => {
 
     actions.unshift('leave');
 
+    if (canShowOptions) {
+      actions.push('options');
+    }
+
     return actions;
-  }, [isHLSViewer, canPublishAudio, canPublishVideo]);
-
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: interpolate(offset.value, [0, 0.7, 1], [0, 0.5, 1]),
-      transform: [{ translateY: interpolate(offset.value, [0, 1], [10, 0]) }],
-    };
-  }, []);
-
-  const animatedProps = useAnimatedProps((): {
-    pointerEvents: 'none' | 'auto';
-  } => {
-    return {
-      pointerEvents: offset.value === 0 ? 'none' : 'auto',
-    };
-  }, []);
+  }, [
+    isOnStage,
+    canShowOptions,
+    canShowChat,
+    isViewer,
+    canPublishAudio,
+    canPublishVideo,
+  ]);
 
   const containerStyles = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.background_dim,
   }));
 
   return (
-    <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      <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>
+    <SafeAreaView
+      style={isHLSViewer ? null : containerStyles}
+      edges={['bottom']}
+    >
+      <View
+        style={[
+          styles.container,
+          isHLSViewer ? styles.hlsContainer : 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>
   );
 };
 
@@ -106,6 +138,9 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     marginBottom: Platform.OS === 'android' ? 16 : 0, // TODO: need to correct hide aimation offsets because of this change
   },
+  hlsContainer: {
+    paddingTop: 8,
+  },
   iconWrapper: {
     marginLeft: 24,
   },

package/src/components/FullScreenVideoView.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import { StyleSheet, View } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+
+import type { RootState } from '../redux';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+import { setFullScreenPeerTrackNode } from '../redux/actions';
+import { HMSFullScreenButton } from './PeerVideoTile/HMSFullScreenButton';
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
+
+export const FullScreenVideoView = () => {
+  const dispatch = useDispatch();
+  const fullScreenPeerTrackNode = useSelector(
+    (state: RootState) => state.app.fullScreenPeerTrackNode
+  );
+
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
+  const contentContainerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
+  const handleClosingFullScreenView = () => {
+    dispatch(setFullScreenPeerTrackNode(null));
+  };
+
+  return (
+    <Modal
+      isVisible={fullScreenPeerTrackNode !== null}
+      animationIn={'fadeInUp'}
+      animationInTiming={100}
+      animationOutTiming={100}
+      animationOut={'fadeOutDown'}
+      backdropColor={backgroundDimColor}
+      backdropOpacity={0.3}
+      onBackButtonPress={handleClosingFullScreenView}
+      onBackdropPress={handleClosingFullScreenView}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={styles.modal}
+      supportedOrientations={['portrait', 'landscape']}
+    >
+      <GestureHandlerRootView style={styles.container}>
+        <SafeAreaView style={styles.container}>
+          <View style={[styles.contentContainer, contentContainerStyles]}>
+            {fullScreenPeerTrackNode &&
+            fullScreenPeerTrackNode.track?.trackId ? (
+              <PeerVideoTileView
+                peerTrackNode={fullScreenPeerTrackNode}
+                zoomIn={true}
+              />
+            ) : null}
+
+            <HMSFullScreenButton peerTrackNode={fullScreenPeerTrackNode!} />
+          </View>
+        </SafeAreaView>
+      </GestureHandlerRootView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flexGrow: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    position: 'relative',
+  },
+});

package/src/components/GridView.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useImperativeHandle } from 'react';
 import type { ElementRef } from 'react';
-import { View, FlatList, StyleSheet } from 'react-native';
+import { View, FlatList, StyleSheet, Dimensions } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import type {
   LayoutChangeEvent,
@@ -17,6 +17,7 @@ import { MiniView } from './MiniView';
 import type { RootState } from '../redux';
 import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
+import { Tile } from './Tile';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -25,7 +26,10 @@ export type GridViewProps = {
 
 export type GridViewRefAttrs = {
   captureViewScreenshot(node: PeerTrackNode): any;
-  getFlatlistRef(): React.RefObject<FlatList<any>>;
+  getRegularTilesFlatlistRef(): React.RefObject<FlatList<PeerTrackNode[]>>;
+  getScreenshareTilesFlatlistRef(): React.RefObject<
+    FlatList<PeerTrackNode>
+  > | null;
 };
 
 const FLATLIST_VIEWABILITY_CONFIG = {
@@ -35,14 +39,18 @@ const FLATLIST_VIEWABILITY_CONFIG = {
 
 export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
   ({ pairedPeers, onPeerTileMorePress }, ref) => {
-    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 regularTilesFlatlistRef = useRef<FlatList<PeerTrackNode[]>>(null);
+    const screenshareTilesFlatlistRef = useRef<FlatList<PeerTrackNode>>(null);
     const insetTileBoundingBoxRef = useRef<LayoutRectangle | null>(null);
+
+    const screenshareTilesAvailable = useSelector(
+      (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+    );
     const miniviewPeerTrackNodeExists = useSelector(
       (state: RootState) => !!state.app.miniviewPeerTrackNode
     );
@@ -77,8 +85,11 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
               console.warn('HmsView Capture Error: ', error)
             );
         },
-        getFlatlistRef: () => {
-          return flatlistRef;
+        getRegularTilesFlatlistRef: () => {
+          return regularTilesFlatlistRef;
+        },
+        getScreenshareTilesFlatlistRef: () => {
+          return screenshareTilesFlatlistRef;
         },
       }),
       []
@@ -91,21 +102,6 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
       []
     );
 
-    const _renderItem = React.useCallback(
-      ({ item }) => {
-        return (
-          <TilesContainer
-            onPeerTileMorePress={onPeerTileMorePress}
-            peerTrackNodes={item}
-            setHmsViewRefs={setHmsViewRefs}
-          />
-        );
-      },
-      [onPeerTileMorePress, setHmsViewRefs]
-    );
-
-    const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
-
     const _handleLayoutChange = React.useCallback(
       ({ nativeEvent }: LayoutChangeEvent) => {
         insetTileBoundingBoxRef.current = nativeEvent.layout;
@@ -113,53 +109,31 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
       []
     );
 
-    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={styles.container}>
-        <View style={styles.tilesArea}>
-          <View
-            onLayout={_handleLayoutChange}
-            style={styles.measureLayoutView}
-          />
+        <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}
+        {screenshareTilesAvailable ? (
+          <ScreenshareTiles
+            ref={screenshareTilesFlatlistRef}
+            setHmsViewRefs={setHmsViewRefs}
+            onPeerTileMorePress={onPeerTileMorePress}
           />
+        ) : null}
 
-          {pairedPeers.length > 0 && miniviewPeerTrackNodeExists ? (
-            <MiniView
-              boundingBoxRef={insetTileBoundingBoxRef}
-              onMoreOptionsPress={onPeerTileMorePress}
-            />
-          ) : null}
-        </View>
+        <RegularTiles
+          ref={regularTilesFlatlistRef}
+          pairedPeers={pairedPeers}
+          setHmsViewRefs={setHmsViewRefs}
+          onPeerTileMorePress={onPeerTileMorePress}
+        />
 
-        {pairedPeers.length > 1 ? <PaginationDots list={pairedPeers} /> : null}
+        {pairedPeers.length > 0 && miniviewPeerTrackNodeExists ? (
+          <MiniView
+            boundingBoxRef={insetTileBoundingBoxRef}
+            onMoreOptionsPress={onPeerTileMorePress}
+          />
+        ) : null}
 
         {/* Save Captured Screenshot of HMSView Modal */}
         <DefaultModal
@@ -182,9 +156,6 @@ GridView.displayName = 'GridView';
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-  },
-  tilesArea: {
-    flex: 1,
     position: 'relative',
   },
   measureLayoutView: {
@@ -193,3 +164,153 @@ const styles = StyleSheet.create({
     height: '100%',
   },
 });
+
+export type RegularTilesProps = {
+  setHmsViewRefs(viewId: string, ref: typeof HMSView | null): void;
+  onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
+  pairedPeers: PeerTrackNode[][];
+};
+
+const RegularTiles = React.forwardRef<
+  FlatList<PeerTrackNode[]>,
+  RegularTilesProps
+>(({ pairedPeers, onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
+  const dispatch = useDispatch();
+  const screenshareTilesAvailable = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  );
+  const activeIndex = useSelector(
+    (state: RootState) => state.app.gridViewActivePage
+  );
+
+  const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
+
+  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));
+      }
+    },
+    []
+  );
+
+  const _renderItem = React.useCallback(
+    ({ item }) => {
+      return (
+        <TilesContainer
+          onPeerTileMorePress={onPeerTileMorePress}
+          peerTrackNodes={item}
+          setHmsViewRefs={setHmsViewRefs}
+        />
+      );
+    },
+    [onPeerTileMorePress, setHmsViewRefs]
+  );
+
+  return (
+    <View style={{ flex: screenshareTilesAvailable ? undefined : 1 }}>
+      <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 > 1 ? (
+        <PaginationDots
+          list={pairedPeers}
+          activeIndex={activeIndex}
+          style={screenshareTilesAvailable ? { marginVertical: 8 } : null}
+        />
+      ) : null}
+    </View>
+  );
+});
+
+export type ScreenshareTilesProps = {
+  setHmsViewRefs(viewId: string, ref: typeof HMSView | null): void;
+  onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
+};
+
+const ScreenshareTiles = React.forwardRef<
+  FlatList<PeerTrackNode>,
+  ScreenshareTilesProps
+>(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
+  const [activePage, setActivePage] = useState(0);
+  const screensharePeerTrackNodes = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes
+  );
+
+  const _keyExtractor = React.useCallback((item) => item.id, []);
+
+  const _handleViewableItemsChanged = React.useCallback(
+    (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
+      const firstViewable = info.viewableItems[0];
+
+      if (
+        firstViewable?.isViewable &&
+        typeof firstViewable.index === 'number'
+      ) {
+        setActivePage(firstViewable.index);
+      }
+    },
+    []
+  );
+
+  const _renderItem = React.useCallback(
+    ({ item }) => {
+      return (
+        <Tile
+          height={'100%'}
+          width={Dimensions.get('window').width}
+          peerTrackNode={item}
+          onPeerTileMorePress={onPeerTileMorePress}
+          setHmsViewRefs={setHmsViewRefs}
+        />
+      );
+    },
+    [onPeerTileMorePress, setHmsViewRefs]
+  );
+
+  return (
+    <View style={{ flex: 1, marginBottom: 4 }}>
+      <FlatList
+        ref={flatlistRef}
+        horizontal={true}
+        data={screensharePeerTrackNodes}
+        initialNumToRender={1}
+        maxToRenderPerBatch={1}
+        windowSize={2}
+        pagingEnabled
+        showsHorizontalScrollIndicator={false}
+        renderItem={_renderItem}
+        numColumns={1}
+        keyExtractor={_keyExtractor}
+        onViewableItemsChanged={_handleViewableItemsChanged}
+        viewabilityConfig={FLATLIST_VIEWABILITY_CONFIG}
+      />
+
+      {screensharePeerTrackNodes.length > 1 ? (
+        <PaginationDots
+          list={screensharePeerTrackNodes}
+          activeIndex={activePage}
+          style={{ marginVertical: 8 }}
+        />
+      ) : null}
+    </View>
+  );
+});

package/src/components/HLSFooter.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { Footer } from './Footer';
+import { AnimatedHLSFooter } from './AnimatedHLSFooter';
+import { HLSChatView } from './HMSOverlayChatView';
+import { useShowChatAndParticipants } from '../hooks-util';
+
+interface HLSFooterProps {
+  offset: SharedValue<number>;
+}
+
+export const HLSFooter: React.FC<HLSFooterProps> = ({ offset }) => {
+  const { overlayChatVisible } = useShowChatAndParticipants();
+
+  return (
+    <AnimatedHLSFooter offset={offset} style={styles.animatedContainer}>
+      {overlayChatVisible ? <HLSChatView /> : null}
+
+      <Footer />
+    </AnimatedHLSFooter>
+  );
+};
+
+const styles = StyleSheet.create({
+  animatedContainer: {
+    position: 'absolute',
+    bottom: 0,
+    width: '100%',
+  },
+});