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

package/src/components/Header.tsx

@@ -1,70 +1,61 @@
 import React, { memo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import Animated, {
-  useAnimatedProps,
-  useAnimatedStyle,
-} from 'react-native-reanimated';
-import type { SharedValue } from 'react-native-reanimated';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { HMSManageCameraRotation } from './HMSManageCameraRotation';
-import { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
+import { useHMSRoomStyle } from '../hooks-util';
 import { HMSManageAudioOutput } from './HMSManageAudioOutput';
 import { HMSRecordingIndicator } from './HMSRecordingIndicator';
 import { CompanyLogo } from './CompanyLogo';
+import { HMSLiveIndicator } from './HMSLiveIndicator';
 
 interface HeaderProps {
-  offset: SharedValue<number>;
+  transparent?: boolean;
+  showControls?: boolean;
 }
 
-export const _Header: React.FC<HeaderProps> = ({ offset }) => {
-  const isHLSViewer = useIsHLSViewer();
-
-  const animatedStyles = useAnimatedStyle(() => {
-    return {
-      opacity: offset.value,
-      // transform: [{ translateY: interpolate(offset.value, [0, 1], [-10, 0]) }]
-    };
-  }, []);
-
-  const animatedProps = useAnimatedProps((): {
-    pointerEvents: 'none' | 'auto';
-  } => {
-    return {
-      pointerEvents: offset.value === 0 ? 'none' : 'auto',
-    };
-  }, []);
+const TOP_PADDING = 8;
+const BOTTOM_PADDING = 16;
+const CONTENT_HEIGHT = 42;
+export const HEADER_HEIGHT = TOP_PADDING + CONTENT_HEIGHT + BOTTOM_PADDING;
 
+export const _Header: React.FC<HeaderProps> = ({
+  transparent = false,
+  showControls = true,
+}) => {
   const containerStyles = useHMSRoomStyle((theme) => ({
     backgroundColor: theme.palette.background_dim,
   }));
 
   return (
-    <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      <View style={[styles.container, containerStyles]}>
+    <SafeAreaView style={transparent ? null : containerStyles} edges={['top']}>
+      <View style={[styles.container, transparent ? null : containerStyles]}>
         <View style={styles.logoContainer}>
           <CompanyLogo style={styles.logo} />
 
           <HMSRecordingIndicator />
+
+          <HMSLiveIndicator />
         </View>
 
-        <View style={styles.controls}>
-          {isHLSViewer ? null : (
+        {showControls ? (
+          <View style={styles.controls}>
             <View style={styles.cameraRotationWrapper}>
               <HMSManageCameraRotation />
             </View>
-          )}
 
-          <HMSManageAudioOutput />
-        </View>
+            <HMSManageAudioOutput />
+          </View>
+        ) : null}
       </View>
-    </Animated.View>
+    </SafeAreaView>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 8,
-    paddingBottom: 16,
+    paddingTop: TOP_PADDING,
+    paddingBottom: BOTTOM_PADDING,
     paddingHorizontal: 16,
     flexDirection: 'row',
     alignItems: 'center',
@@ -88,102 +79,3 @@ const styles = StyleSheet.create({
 });
 
 export const Header = memo(_Header);
-
-// export const _Header2 = ({
-//   isLeaveMenuOpen,
-//   setModalVisible,
-// }: {
-//   isLeaveMenuOpen: boolean;
-//   setModalVisible(modalType: ModalTypes, delay?: any): void;
-// }) => {
-//   // hooks
-//   const hmsInstance = useSelector((state: RootState) => state.user.hmsInstance);
-//   const room = useSelector((state: RootState) => state.hmsStates.room);
-//   const localPeer = useSelector(
-//     (state: RootState) => state.hmsStates.localPeer,
-//   );
-//   const roomCode = useSelector((state: RootState) => state.user.roomCode);
-//   const isScreenShared = useSelector(
-//     (state: RootState) => state.hmsStates.isLocalScreenShared,
-//   );
-//   const showLandscapeLayout = useShowLandscapeLayout();
-
-//   // constants
-//   const iconSize = 20;
-
-//   // functions
-
-//   return (
-//     <View
-//       style={[
-//         styles.iconTopWrapper,
-//         showLandscapeLayout ? styles.iconTopWrapperLandscape : null,
-//       ]}
-//     >
-//       <View
-//         style={[
-//           styles.iconTopSubWrapper,
-//           showLandscapeLayout ? styles.iconTopSubWrapperLandscape : null,
-//         ]}
-//       >
-//         {room?.hlsStreamingState?.running ? (
-//           <View>
-//             <View style={styles.liveTextContainer}>
-//               <View style={styles.liveStatus} />
-//               <Text style={styles.liveTimeText}>Live</Text>
-//             </View>
-//             {Array.isArray(room?.hlsStreamingState?.variants) ? (
-//               <RealTime
-//                 startedAt={room?.hlsStreamingState?.variants[0]?.startedAt}
-//               />
-//             ) : null}
-//           </View>
-//         ) : (
-//           <Text style={styles.headerName}>{roomCode}</Text>
-//         )}
-//       </View>
-//       <View
-//         style={[
-//           styles.iconTopSubWrapper,
-//           showLandscapeLayout ? styles.iconTopSubWrapperLandscape : null,
-//         ]}
-//       >
-//         {(room?.browserRecordingState?.running ||
-//           room?.hlsRecordingState?.running) && (
-//           <MaterialCommunityIcons
-//             name="record-circle-outline"
-//             style={
-//               showLandscapeLayout
-//                 ? styles.roomStatusLandscape
-//                 : styles.roomStatus
-//             }
-//             size={iconSize}
-//           />
-//         )}
-//         {(room?.hlsStreamingState?.running ||
-//           room?.rtmpHMSRtmpStreamingState?.running) && (
-//           <Ionicons
-//             name="globe-outline"
-//             style={
-//               showLandscapeLayout
-//                 ? styles.roomStatusLandscape
-//                 : styles.roomStatus
-//             }
-//             size={iconSize}
-//           />
-//         )}
-//         {isScreenShared && (
-//           <Feather
-//             name="copy"
-//             style={
-//               showLandscapeLayout
-//                 ? styles.roomStatusLandscape
-//                 : styles.roomStatus
-//             }
-//             size={iconSize}
-//           />
-//         )}
-//       </View>
-//     </View>
-//   );
-// };

package/src/components/LocalPeerScreenshareView.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 
 import { CustomButton } from './CustomButton';
 import { useHMSActions } from '../hooks-sdk';
@@ -15,11 +14,6 @@ export const LocalPeerScreenshareView = () => {
 
   return (
     <View style={styles.container}>
-      <MaterialCommunityIcons
-        name="monitor-share"
-        style={styles.icon}
-        size={48}
-      />
       <Text style={styles.text}>You are sharing your screen</Text>
       <CustomButton
         title="X   Stop Screenshare"

package/src/components/Meeting.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -11,12 +11,12 @@ import {
   useHMSMessages,
   useHMSNetworkQualityUpdate,
   useHMSPIPRoomLeave,
+  useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
-  useLandscapeChatViewVisible,
+  useIsHLSViewer,
   usePIPListener,
 } from '../hooks-util';
-import { ChatView } from './ChatWindow';
 import { MeetingScreenContent } from './MeetingScreenContent';
 import { HMSHLSStreamLoading } from './HMSHLSStreamLoading';
 import type { RootState } from '../redux';
@@ -30,12 +30,16 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     (state: RootState) => state.app.startingHLSStream
   );
 
+  const isHLSViewer = useIsHLSViewer();
+
   // TODO: Fetch latest Room and localPeer on mount of this component?
 
   useFetchHMSRoles();
 
   useHMSMessages();
 
+  useHMSReconnection();
+
   useHMSRemovedFromRoomUpdate();
 
   // Handle when user press leave button visible on PIP Window
@@ -50,8 +54,6 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
   // Subscribe to Peers Network quality updates
   useHMSNetworkQualityUpdate();
 
-  const landscapeChatViewVisible = useLandscapeChatViewVisible();
-
   // Clearing any pending modal opening tasks
   React.useEffect(() => {
     return () => {
@@ -67,6 +69,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     return <HMSHLSStreamLoading />;
   }
 
+  const Container = isHLSViewer ? View : SafeAreaView;
+
   /**
    * TODO: disbaled Expended View animation in Webrtc flow
    *
@@ -74,11 +78,14 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
    * Solution: Try using Tab Gesture detector instead on Pressable component
    */
   return (
-    <SafeAreaView style={[styles.container, containerStyles]} edges={['top', 'left', 'right']}>
+    <Container
+      style={[styles.container, containerStyles]}
+      edges={['left', 'right']}
+    >
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
 
-      {landscapeChatViewVisible ? <ChatView /> : null}
-    </SafeAreaView>
+      {/* {landscapeChatViewVisible ? <ChatView /> : null} */}
+    </Container>
   );
 };
 

package/src/components/MeetingScreenContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState } from 'react';
-import { StyleSheet, Pressable } from 'react-native';
+import { StyleSheet, Pressable, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   Easing,
@@ -15,8 +15,12 @@ import type { RootState } from '../redux';
 import { Footer } from './Footer';
 import { DisplayView } from './DisplayView';
 import { Header } from './Header';
-import { useIsHLSViewer, useLandscapeChatViewVisible } from '../hooks-util';
+import { useIsHLSViewer } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
+import { AnimatedFooter } from './AnimatedFooter';
+import { HLSFooter } from './HLSFooter';
+import { AnimatedHeader } from './AnimatedHeader';
+import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
   peerTrackNodes: Array<PeerTrackNode>;
@@ -71,8 +75,6 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   //   }
   // }, [isHLSViewer]);
 
-  const landscapeChatViewVisible = useLandscapeChatViewVisible();
-
   /**
    * TODO: disbaled Expended View animation in Webrtc flow
    *
@@ -82,19 +84,30 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   return (
     <Pressable
       onPress={toggleControls}
-      style={[
-        styles.container,
-        landscapeChatViewVisible ? styles.takeLessSpaceAsItCan : null,
-      ]}
+      style={styles.container}
       disabled={isHLSViewer || true}
     >
       <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
-      {isPipModeActive ? null : <Header offset={offset} />}
+      <View style={styles.reconnectionWrapper}>
+        {isPipModeActive ? null : (
+          <AnimatedHeader offset={offset}>
+            <Header transparent={isHLSViewer} showControls={!isHLSViewer} />
+          </AnimatedHeader>
+        )}
+
+        <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
 
-      <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
+        <ReconnectionView />
+      </View>
 
-      {isPipModeActive ? null : <Footer offset={offset} />}
+      {isPipModeActive ? null : isHLSViewer ? (
+        <HLSFooter offset={offset} />
+      ) : (
+        <AnimatedFooter offset={offset}>
+          <Footer />
+        </AnimatedFooter>
+      )}
     </Pressable>
   );
 };
@@ -102,8 +115,12 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    position: 'relative',
   },
   takeLessSpaceAsItCan: {
     flex: 0,
   },
+  reconnectionWrapper: {
+    flex: 1,
+  },
 });

package/src/components/MiniView.tsx

@@ -19,10 +19,13 @@ import {
 } from './PeerMinimizedView';
 import type { RootState } from '../redux';
 import { setInsetViewMinimized } from '../redux/actions';
+import { isPublishingAllowed } from '../hooks-util';
 
 const cornerOffset = {
-  x: 8,
-  y: 16,
+  x: 8, // rightX
+  y: 40, // bottomY
+  leftX: 8,
+  topY: 32,
 };
 
 export interface MiniViewProps
@@ -79,7 +82,7 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
       size.width,
       size.height,
       cornerOffset.x,
-      cornerOffset.y,
+      cornerOffset.topY,
       boundingBoxRef.current
     );
 
@@ -134,7 +137,10 @@ export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
     dispatch(setInsetViewMinimized(false));
   };
 
-  if (!miniviewPeerTrackNode) {
+  if (
+    !miniviewPeerTrackNode ||
+    !isPublishingAllowed(miniviewPeerTrackNode.peer)
+  ) {
     return null;
   }