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

package/src/components/Tile.tsx

@@ -1,118 +1,77 @@
 import React from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import { useSelector } from 'react-redux';
+import { View } from 'react-native';
+import type { ViewStyle, StyleProp } from 'react-native';
 import { HMSTrackSource } from '@100mslive/react-native-hms';
-import Feather from 'react-native-vector-icons/Feather';
-import Ionicons from 'react-native-vector-icons/Ionicons';
 import type { HMSView } from '@100mslive/react-native-hms';
 
-import { styles } from './styles';
-
-import { parseMetadata } from '../utils/functions';
-import { DisplayTrack } from './DisplayTrack';
-import { COLORS } from '../utils/theme';
 import type { PeerTrackNode } from '../utils/types';
-import { useIsPortraitOrientation } from '../utils/dimension';
+import PeerRTCStatsContainer from './PeerRTCStatsContainer';
+import type { RootState } from '../redux';
+import { LocalPeerScreenshareView } from './LocalPeerScreenshareView';
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
 
-interface TileProps {
-  totalTilesInContainer: number;
+type TileProps = {
   peerTrackNode: PeerTrackNode;
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
   setHmsViewRefs(viewId: string, ref: typeof HMSView | null): void;
-}
+  style?: StyleProp<ViewStyle>;
+} & (
+  | {
+      aspectRatio?: undefined;
+      width: ViewStyle['width'];
+      height: ViewStyle['height'];
+    }
+  | {
+      aspectRatio: number;
+      width?: ViewStyle['width'];
+      height?: ViewStyle['width'];
+    }
+);
 
-const TileUnmemoized: React.FC<TileProps> = ({
+const _Tile: React.FC<TileProps> = ({
+  aspectRatio,
+  width,
+  height,
   onPeerTileMorePress,
   peerTrackNode,
-  totalTilesInContainer,
   setHmsViewRefs,
+  style,
 }) => {
-  const isPortraitOrientation = useIsPortraitOrientation();
-  const parsedMetadata = parseMetadata(peerTrackNode?.peer?.metadata);
-
-  const oneTileStyle = { width: '100%', height: '100%' };
-  const twoTileStyle = { width: '100%', height: '50%' };
-  const threeTileStyle = { width: '100%', height: '33.3333%' };
-  const fourTileStyle = { width: '50%', height: '50%' };
+  const showStatsOnTiles = useSelector(
+    (state: RootState) => state.app.joinConfig.showStats
+  );
 
-  const oneTileStyleLandscape = { width: '100%', height: '100%' };
-  const twoTileStyleLandscape = { width: '50%', height: '100%' };
-  const threeTileStyleLandscape = { width: '33.3333%', height: '100%' };
-  const fourTileStyleLandscape = { width: '50%', height: '50%' };
+  const trackSource = peerTrackNode.track?.source;
+  const isNonRegularTrack =
+    trackSource && trackSource !== HMSTrackSource.REGULAR;
 
   return (
     <View
-      style={[
-        { borderWidth: 1 },
-        peerTrackNode?.track?.source !== undefined &&
-        peerTrackNode?.track?.source !== HMSTrackSource.REGULAR
-          ? styles.gridTile
-          : isPortraitOrientation
-          ? totalTilesInContainer === 1
-            ? oneTileStyle
-            : totalTilesInContainer === 2
-            ? twoTileStyle
-            : totalTilesInContainer === 3
-            ? threeTileStyle
-            : fourTileStyle
-          : totalTilesInContainer === 1
-          ? oneTileStyleLandscape
-          : totalTilesInContainer === 2
-          ? twoTileStyleLandscape
-          : totalTilesInContainer === 3
-          ? threeTileStyleLandscape
-          : fourTileStyleLandscape,
-      ]}
+      style={[{ position: 'relative' }, { width, height, aspectRatio }, style]}
     >
-      <DisplayTrack
-        // saving HmsView ref in collection with uniqueId as key
-        ref={(ref) => setHmsViewRefs(peerTrackNode.id, ref)}
-        isLocal={peerTrackNode?.peer?.isLocal}
-        peer={peerTrackNode?.peer}
-        videoTrack={peerTrackNode?.track}
-        videoStyles={styles.generalTile}
-        isDegraded={peerTrackNode?.isDegraded}
-      />
-
-      {/* More Options button for Peer */}
-      <View style={styles.morePeerOptionsContainer}>
-        <TouchableOpacity
-          onPress={() => onPeerTileMorePress(peerTrackNode)}
-          style={{
-            padding: 8,
-            backgroundColor: COLORS.SECONDARY.DISABLED,
-            borderRadius: 18,
-          }}
-        >
-          <Feather name="more-horizontal" style={styles.mic} size={20} />
-        </TouchableOpacity>
-      </View>
-
-      {peerTrackNode?.peer?.audioTrack?.isMute() && (
-        <View style={styles.micContainer}>
-          <Feather name="mic-off" style={styles.mic} size={20} />
-        </View>
+      {isNonRegularTrack && peerTrackNode.peer.isLocal ? (
+        <LocalPeerScreenshareView />
+      ) : (
+        <PeerVideoTileView
+          ref={(ref) => setHmsViewRefs(peerTrackNode.id, ref)}
+          peerTrackNode={peerTrackNode}
+          onMoreOptionsPress={onPeerTileMorePress}
+        />
       )}
-      {parsedMetadata?.isBRBOn ? (
-        <View style={styles.status}>
-          <View style={styles.brbOnContainer}>
-            <Text style={styles.brbOn}>BRB</Text>
-          </View>
-        </View>
-      ) : null}
-      {parsedMetadata?.isHandRaised ? (
-        <View style={styles.status}>
-          <Ionicons
-            name="hand-left"
-            style={{ color: COLORS.TWIN.YELLOW }}
-            size={20}
-          />
-        </View>
+
+      {showStatsOnTiles ? (
+        <PeerRTCStatsContainer
+          trackId={peerTrackNode.track?.trackId}
+          peerId={peerTrackNode.peer.peerID}
+          trackSource={peerTrackNode.track?.source}
+        />
       ) : null}
     </View>
   );
 };
 
-const Tile = React.memo(TileUnmemoized);
+const Tile = React.memo(_Tile);
 
 Tile.displayName = 'Tile';
 

package/src/components/TilesContainer.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { View, Dimensions } from 'react-native';
+import type { ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import type { HMSView } from '@100mslive/react-native-hms';
 
-import { styles } from './styles';
-
 import { Tile } from './Tile';
 import type { PeerTrackNode } from '../utils/types';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { groupIntoPairs } from '../utils/functions';
 
 interface TilesContainerProps {
   peerTrackNodes: PeerTrackNode[];
@@ -14,35 +15,136 @@ interface TilesContainerProps {
   setHmsViewRefs(viewId: string, ref: typeof HMSView | null): void;
 }
 
-const TilesContainerUnmemoized: React.FC<TilesContainerProps> = ({
+const _TilesContainer: React.FC<TilesContainerProps> = ({
   peerTrackNodes,
   setHmsViewRefs,
   onPeerTileMorePress,
 }) => {
   const { left, right } = useSafeAreaInsets();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  const stylesConfig = computeTileWidthAndHeight(
+    peerTrackNodes.length,
+    isLandscapeOrientation
+  );
+
+  // In this layout, Tile will take as much height and width as possible
+  // Width and Height of Tile are independent of each other
+  const growableTileLayout = peerTrackNodes.length <= 4;
 
   return (
     <View
       style={[
-        styles.page,
+        // If tile are growable, then we want whatever remaining space to be between them
+        { justifyContent: growableTileLayout ? 'space-between' : 'center' },
         { width: Dimensions.get('window').width - left - right },
       ]}
     >
-      {peerTrackNodes?.map((peerTrackNode, _idx, arr) => (
-        <Tile
-          key={peerTrackNode.id}
-          setHmsViewRefs={setHmsViewRefs}
-          onPeerTileMorePress={onPeerTileMorePress}
-          peerTrackNode={peerTrackNode}
-          totalTilesInContainer={arr.length}
-        />
-      ))}
+      {peerTrackNodes.length <= 3 ? (
+        // Use 1 Column Layout
+        <React.Fragment>
+          {peerTrackNodes.map((peerTrackNode) => {
+            return (
+              <Tile
+                key={peerTrackNode.id}
+                setHmsViewRefs={setHmsViewRefs}
+                onPeerTileMorePress={onPeerTileMorePress}
+                peerTrackNode={peerTrackNode}
+                height={stylesConfig.height}
+                width={stylesConfig.width}
+                aspectRatio={stylesConfig.aspectRatio}
+              />
+            );
+          })}
+        </React.Fragment>
+      ) : (
+        // Use Grid Layout
+        <React.Fragment>
+          {groupIntoPairs(peerTrackNodes.length).map((pair, idx) => {
+            const peerTrackNodesPair = pair.map(
+              (nodeIndex) => peerTrackNodes[nodeIndex] as PeerTrackNode
+            );
+            const isFirstPairGroup = idx === 0;
+
+            return (
+              <View
+                key={peerTrackNodesPair
+                  .map((peerTrackNode) => peerTrackNode.id)
+                  .join(',')}
+                style={{
+                  justifyContent:
+                    peerTrackNodesPair.length === 1
+                      ? 'center'
+                      : 'space-between',
+                  flexDirection: 'row',
+                  flex: growableTileLayout ? 1 : 0,
+                  marginTop: isFirstPairGroup ? 0 : 8,
+                }}
+              >
+                {peerTrackNodesPair.map((peerTrackNode) => {
+                  return (
+                    <Tile
+                      key={peerTrackNode.id}
+                      setHmsViewRefs={setHmsViewRefs}
+                      onPeerTileMorePress={onPeerTileMorePress}
+                      peerTrackNode={peerTrackNode}
+                      height={stylesConfig.height}
+                      width={stylesConfig.width}
+                      aspectRatio={stylesConfig.aspectRatio}
+                    />
+                  );
+                })}
+              </View>
+            );
+          })}
+        </React.Fragment>
+      )}
     </View>
   );
 };
 
-const TilesContainer = React.memo(TilesContainerUnmemoized);
+const TilesContainer = React.memo(_TilesContainer);
 
 TilesContainer.displayName = 'TilesContainer';
 
 export { TilesContainer };
+
+// Utility Functions
+
+const oneTileStyle = { width: '100%', height: '100%' }; // 1 Column Layout
+const twoTileStyle = { width: '100%', height: '49.4444%' }; // 1 Column Layout
+const threeTileStyle = { width: '100%', height: '32.6666%' }; // 1 Column Layout
+
+const fourTileStyle = { width: '49%', height: '100%' }; // Grid Layout when Width and Height has no-correlatiom
+const fiveAndSixTileStyle = { width: '49%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
+
+const oneTileStyleLandscape = { width: '100%', height: '100%' };
+const twoTileStyleLandscape = { width: '50%', height: '100%' };
+const threeTileStyleLandscape = { width: '33.3333%', height: '100%' };
+const fourTileStyleLandscape = { width: '50%', height: '50%' };
+
+function computeTileWidthAndHeight(
+  totalTiles: number,
+  isLandscapeOrientation: boolean
+): {
+  width?: ViewStyle['width'];
+  height?: ViewStyle['height'];
+  aspectRatio?: ViewStyle['aspectRatio'];
+} {
+  return (
+    (isLandscapeOrientation
+      ? [
+          oneTileStyleLandscape,
+          twoTileStyleLandscape,
+          threeTileStyleLandscape,
+          fourTileStyleLandscape,
+        ][Math.min(totalTiles - 1, 3)]
+      : [
+          oneTileStyle,
+          twoTileStyle,
+          threeTileStyle,
+          fourTileStyle,
+          fiveAndSixTileStyle,
+        ][Math.min(totalTiles - 1, 4)]) || { width: '100%', height: '100%' }
+  );
+}

package/src/components/UnmountAfterDelay.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react';
+
+export interface UnmountAfterDelayProps {
+  // current visible state of content
+  visible: boolean;
+  // callback which unmounts the content by setting a state
+  onUnmount(): void;
+  // content to show
+  children: React.ReactElement;
+  // delay after which content should hide
+  delay?: number;
+}
+
+export type UnmountAfterDelayAttrs = {
+  resetTimer(): void;
+};
+
+export const UnmountAfterDelay = React.forwardRef<
+  UnmountAfterDelayAttrs,
+  UnmountAfterDelayProps
+>(({ delay = 4000, children, visible, onUnmount }, ref) => {
+  const timeoutId = React.useRef<NodeJS.Timeout | null>(null);
+
+  const setTimer = React.useCallback(() => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    timeoutId.current = setTimeout(() => {
+      onUnmount();
+      timeoutId.current = null;
+    }, delay);
+  }, [delay]);
+
+  const clearTimer = React.useCallback(() => {
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      timeoutId.current = null;
+    }
+  }, []);
+
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      resetTimer: () => {
+        clearTimer();
+        setTimer();
+      },
+    }),
+    [setTimer]
+  );
+
+  React.useEffect(() => {
+    if (visible) {
+      setTimer();
+
+      return clearTimer;
+    }
+  }, [visible, setTimer, clearTimer]);
+
+  return visible ? children : null;
+});

package/src/components/WebrtcView.tsx

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { MaxTilesInOnePage, PipModes } from '../utils/types';
+import type { PeerTrackNode } from '../utils/types';
+import { pairData } from '../utils/functions';
+import type { RootState } from '../redux';
+import { GridView } from './GridView';
+import type { GridViewRefAttrs } from './GridView';
+import PIPView from './PIPView';
+import { useIsPortraitOrientation } from '../utils/dimension';
+import { LocalPeerRegularVideoView } from './LocalPeerRegularVideoView';
+import { WelcomeInMeeting } from './WelcomeInMeeting';
+
+interface WebrtcViewProps {
+  peerTrackNodes: Array<PeerTrackNode>;
+  handlePeerTileMorePress(node: PeerTrackNode): void;
+}
+
+export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
+  ({ peerTrackNodes, handlePeerTileMorePress }, gridViewRef) => {
+    const isPortrait = useIsPortraitOrientation();
+
+    const isPipModeActive = useSelector(
+      (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+    );
+
+    // State to track active spotlight trackId
+    const spotlightTrackId = useSelector(
+      (state: RootState) => state.user.spotlightTrackId
+    );
+
+    const pairedPeers = useMemo(
+      () =>
+        pairData(
+          peerTrackNodes,
+          isPortrait
+            ? MaxTilesInOnePage.IN_PORTRAIT
+            : MaxTilesInOnePage.IN_LANDSCAPE,
+          spotlightTrackId
+        ),
+      [peerTrackNodes, spotlightTrackId, isPortrait]
+    );
+
+    const canShowTiles = useSelector(
+      (state: RootState) =>
+        !!state.app.localPeerTrackNode || pairedPeers.length > 0
+    );
+
+    if (!canShowTiles) {
+      return <WelcomeInMeeting />;
+    }
+
+    if (isPipModeActive) {
+      return <PIPView pairedPeers={pairedPeers} />;
+    }
+
+    if (pairedPeers.length > 0) {
+      return (
+        <GridView
+          ref={gridViewRef}
+          onPeerTileMorePress={handlePeerTileMorePress}
+          pairedPeers={pairedPeers}
+        />
+      );
+    }
+
+    return (
+      <LocalPeerRegularVideoView onMoreOptionsPress={handlePeerTileMorePress} />
+    );
+  }
+);

package/src/components/WelcomeInMeeting.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+
+export interface WelcomeInMeetingProps {}
+
+export const WelcomeInMeeting: React.FC<WelcomeInMeetingProps> = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    heading: {
+      fontFamily: `${typography.font_family}-Bold`,
+      color: theme.palette.on_surface_high,
+    },
+    description: {
+      fontFamily: `${typography.font_family}-Medium`,
+      color: theme.palette.on_surface_medium,
+    },
+  }));
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.heading, hmsRoomStyles.heading]}>Welcome!</Text>
+      <Text style={[styles.description, hmsRoomStyles.description]}>
+        You're the first one here.
+      </Text>
+      <Text style={[styles.description, hmsRoomStyles.description]}>
+        Sit back and relax till the others join.
+      </Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  heading: {
+    fontSize: 28,
+    lineHeight: 36,
+    letterSpacing: 0.1,
+    textAlign: 'center',
+    paddingBottom: 32,
+  },
+  description: {
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    textAlign: 'center',
+  },
+});

package/src/hooks-sdk-selectors.tsx

@@ -1,3 +1,5 @@
+import type { HMSRole } from '@100mslive/react-native-hms';
+
 import type { RootState } from './redux';
 
 export const selectAllowedTracksToPublish = (state: RootState) =>
@@ -7,3 +9,8 @@ export const selectCanPublishTrack = (
   state: RootState,
   track: 'audio' | 'video' | 'screen'
 ) => selectAllowedTracksToPublish(state)?.includes(track) ?? false;
+
+export const selectCanPublishTrackForRole = (
+  role: HMSRole | undefined,
+  track: 'audio' | 'video' | 'screen'
+) => role?.publishSettings?.allowed?.includes(track) ?? false;

package/src/hooks-sdk.ts

@@ -146,11 +146,29 @@ export const useHMSActions = () => {
     }
   }, []);
 
+  const changeName = useCallback(async (name: string): Promise<void> => {
+    const state: RootState = store.getState();
+    const hmsInstance = state.user.hmsInstance;
+
+    if (!hmsInstance) {
+      return Promise.reject('HMSSDK Instance is not available!');
+    }
+
+    try {
+      const result = await hmsInstance.changeName(name);
+      console.log('Change Name Success: ', result);
+    } catch (error) {
+      console.log('Change Name Error: ', error);
+      return Promise.reject(error);
+    }
+  }, []);
+
   return {
     setLocalAudioEnabled,
     setLocalVideoEnabled,
     switchCamera,
     setScreenShareEnabled,
     changeMetadata,
+    changeName,
   };
 };

package/src/hooks-util-selectors.tsx

@@ -1,4 +1,5 @@
 import type { HMSPeer } from '@100mslive/react-native-hms';
+import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
 
 import type { RootState } from './redux';
 
@@ -6,9 +7,19 @@ export const selectIsHLSViewer = (peer: HMSPeer | null | undefined) =>
   peer?.role?.name?.includes('hls') ?? false;
 
 export const selectShouldGoLive = (state: RootState) => {
+  const layoutConfig = state.hmsStates.layoutConfig;
   const isHLSStreaming = state.hmsStates.room?.hlsStreamingState.running;
+
+  const joinButtonType =
+    layoutConfig?.screens?.preview?.default?.elements?.join_form?.join_btn_type;
+
   const canStartHLSStreaming =
-    state.hmsStates.localPeer?.role?.permissions?.hlsStreaming;
+    joinButtonType === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE ||
+    joinButtonType === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_ONLY
+      ? // can start if `joinButtonType` is `JOIN_BTN_TYPE_JOIN_AND_GO_LIVE`
+        joinButtonType === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE
+      : // Check if the Role has permission to start HLS Stream
+        state.hmsStates.localPeer?.role?.permissions?.hlsStreaming;
 
   return canStartHLSStreaming && !isHLSStreaming;
 };