@100mslive/react-native-room-kit 0.0.1

package/src/components/Header.tsx

@@ -0,0 +1,185 @@
+import React, { memo } from 'react';
+import { View, StyleSheet, Text } from 'react-native';
+import Animated, {
+  useAnimatedProps,
+  useAnimatedStyle,
+} from 'react-native-reanimated';
+import type { SharedValue } from 'react-native-reanimated';
+
+import { COLORS } from '../utils/theme';
+import { HMSManageLeave } from './HMSManageLeave';
+import { HMSManageCameraRotation } from './HMSManageCameraRotation';
+import { useIsHLSViewer } from '../hooks-util';
+import { HmsLogoIcon } from '../Icons';
+import { useSelector } from 'react-redux';
+import type { RootState } from '../redux';
+
+interface HeaderProps {
+  offset: SharedValue<number>;
+}
+
+export const _Header: React.FC<HeaderProps> = ({ offset }) => {
+  const isHLSViewer = useIsHLSViewer();
+  const roomName = useSelector(
+    (state: RootState) => state.hmsStates.room?.name
+  );
+  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',
+    };
+  }, []);
+
+  return (
+    <Animated.View style={animatedStyles} animatedProps={animatedProps}>
+      {isHLSViewer ? (
+        <View style={styles.hlsContainer}>
+          <HmsLogoIcon />
+
+          {roomName ? <Text style={styles.roomName}>{roomName}</Text> : null}
+        </View>
+      ) : (
+        <View style={styles.container}>
+          <HMSManageLeave />
+          <HMSManageCameraRotation />
+        </View>
+      )}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  hlsContainer: {
+    padding: 16,
+    paddingTop: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  roomName: {
+    flex: 1,
+    fontFamily: 'Inter',
+    fontSize: 15,
+    fontWeight: '500',
+    color: COLORS.SURFACE.ON_SURFACE.HIGH,
+    lineHeight: 20,
+    letterSpacing: 0.1,
+    marginLeft: 24,
+  },
+});
+
+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/LiveButton.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import type { ViewStyle, StyleProp, TextStyle } from 'react-native';
+
+import { COLORS } from '../utils/theme';
+
+export enum LiveStates {
+  LIVE = 10,
+  BEHIND_LIVE = 20,
+  LOADING_LIVE = 30,
+}
+
+export interface LiveButtonProps {
+  containerStyle?: StyleProp<ViewStyle>;
+  isLive: boolean;
+  onPress(): void;
+  disabled?: boolean;
+  size?: 'normal' | 'small';
+}
+
+const LiveButton: React.FC<LiveButtonProps> = ({
+  containerStyle,
+  isLive,
+  onPress,
+  disabled,
+  size = 'normal',
+}) => {
+  const textStyle: StyleProp<TextStyle> =
+    size !== 'normal' ? { fontSize: 10 } : null;
+  const indicatorStyle: StyleProp<ViewStyle> =
+    size !== 'normal' ? { width: 4, height: 4, borderRadius: 2 } : null;
+  const pressableStyle: StyleProp<ViewStyle> =
+    size !== 'normal' ? { padding: 4 } : null;
+
+  return (
+    <View style={containerStyle}>
+      <TouchableOpacity
+        onPress={onPress}
+        style={[styles.touchable, pressableStyle]}
+        disabled={disabled}
+      >
+        <View
+          style={[
+            styles.liveIndicator,
+            indicatorStyle,
+            {
+              backgroundColor: isLive
+                ? COLORS.TWIN.RED
+                : COLORS.SECONDARY.DEFAULT,
+            },
+          ]}
+        />
+        <Text style={[styles.liveText, textStyle]}>LIVE</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default LiveButton;
+
+const styles = StyleSheet.create({
+  touchable: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 16,
+  },
+  liveText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+  liveIndicator: {
+    width: 8,
+    height: 8,
+    backgroundColor: COLORS.TWIN.RED,
+    borderRadius: 4,
+    marginRight: 4,
+  },
+});

package/src/components/Meeting.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { PeerTrackNode } from '../utils/types';
+import { useRTCStatsListeners } from '../utils/hooks';
+import { COLORS } from '../utils/theme';
+import {
+  clearPendingModalTasks,
+  useFetchHMSRoles,
+  useHMSMessages,
+  useHMSPIPRoomLeave,
+  useHMSRemovedFromRoomUpdate,
+  useLandscapeChatViewVisible,
+  usePIPListener,
+} from '../hooks-util';
+import { ChatView } from './ChatWindow';
+import { MeetingScreenContent } from './MeetingScreenContent';
+
+interface MeetingProps {
+  peerTrackNodes: Array<PeerTrackNode>;
+}
+
+export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
+  // TODO: Fetch latest Room and localPeer on mount of this component?
+
+  useFetchHMSRoles();
+
+  useHMSMessages();
+
+  useHMSRemovedFromRoomUpdate();
+
+  // Handle when user press leave button visible on PIP Window
+  useHMSPIPRoomLeave();
+
+  // Handle state change to reset layout when App is focused from PIP Window
+  usePIPListener();
+
+  // Handle rendering RTC stats on Tiles and inside RTC stats modal
+  useRTCStatsListeners();
+
+  const landscapeChatViewVisible = useLandscapeChatViewVisible();
+
+  // Clearing any pending modal opening tasks
+  React.useEffect(() => {
+    return () => {
+      clearPendingModalTasks();
+    };
+  }, []);
+
+  /**
+   * TODO: disbaled Expended View animation in Webrtc flow
+   *
+   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
+   * Solution: Try using Tab Gesture detector instead on Pressable component
+   */
+  return (
+    <SafeAreaView style={styles.container}>
+      <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
+
+      {landscapeChatViewVisible ? <ChatView /> : null}
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: COLORS.BACKGROUND.DIM,
+    flexDirection: 'row',
+  },
+});

package/src/components/MeetingScreenContent.tsx

@@ -0,0 +1,109 @@
+import React, { useCallback, useRef, useState } from 'react';
+import { StyleSheet, Pressable } from 'react-native';
+import { useSelector } from 'react-redux';
+import {
+  Easing,
+  cancelAnimation,
+  runOnJS,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { PipModes } from '../utils/types';
+import type { PeerTrackNode } from '../utils/types';
+import type { RootState } from '../redux';
+import { Footer } from './Footer';
+import { DisplayView } from './DisplayView';
+import { Header } from './Header';
+import { useIsHLSViewer, useLandscapeChatViewVisible } from '../hooks-util';
+import { HMSStatusBar } from './StatusBar';
+
+interface MeetingScreenContentProps {
+  peerTrackNodes: Array<PeerTrackNode>;
+}
+
+export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
+  peerTrackNodes,
+}) => {
+  const offset = useSharedValue(1);
+  const isHLSViewer = useIsHLSViewer();
+  const timerIdRef = useRef<NodeJS.Timeout | null>(null);
+  const [controlsHidden, setControlsHidden] = useState(false);
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+
+  const toggleControls = useCallback(() => {
+    'worklet';
+    if (timerIdRef.current) {
+      clearTimeout(timerIdRef.current);
+      timerIdRef.current = null;
+    }
+    cancelAnimation(offset);
+    offset.value = withTiming(
+      offset.value === 1 ? 0 : 1,
+      { duration: 200, easing: Easing.ease },
+      (finished) => {
+        if (finished) {
+          runOnJS(setControlsHidden)(offset.value === 0);
+        }
+      }
+    );
+  }, []);
+
+  // Handles Auto hiding the controls for the first time
+  // to make this feature discoverable
+  // useEffect(() => {
+  //   if (false && !isHLSViewer) {
+  //     if (timerIdRef.current) {
+  //       clearTimeout(timerIdRef.current);
+  //     }
+  //     timerIdRef.current = setTimeout(() => {
+  //       timerIdRef.current = null;
+  //       toggleControls();
+  //     }, 3000); d
+
+  //     return () => {
+  //       if (timerIdRef.current) {
+  //         clearTimeout(timerIdRef.current);
+  //       }
+  //     };
+  //   }
+  // }, [isHLSViewer]);
+
+  const landscapeChatViewVisible = useLandscapeChatViewVisible();
+
+  /**
+   * TODO: disbaled Expended View animation in Webrtc flow
+   *
+   * Problem: Tiles Flatlist was not scrollable because Root Pressable was registering screen taps.
+   * Solution: Try using Tab Gesture detector instead on Pressable component
+   */
+  return (
+    <Pressable
+      onPress={toggleControls}
+      style={[
+        styles.container,
+        landscapeChatViewVisible ? styles.takeLessSpaceAsItCan : null,
+      ]}
+      disabled={isHLSViewer || true}
+    >
+      <HMSStatusBar hidden={controlsHidden} />
+
+      {isPipModeActive ? null : <Header offset={offset} />}
+
+      <DisplayView offset={offset} peerTrackNodes={peerTrackNodes} />
+
+      {isPipModeActive ? null : <Footer offset={offset} />}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  takeLessSpaceAsItCan: {
+    flex: 0,
+  },
+});