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

package/src/components/HMSRoomOptions.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 import { HMSAudioMixingMode, HMSAudioMode } from '@100mslive/react-native-hms';
 
 import { PressableIcon } from './PressableIcon';
-import { ThreeDotsIcon } from '../Icons';
+import { HamburgerIcon } from '../Icons';
 import { DefaultModal } from './DefaultModal';
 import { RoomSettingsModalContent } from './RoomSettingsModalContent';
 import {
@@ -18,6 +18,9 @@ import {
 } from './Modals';
 import { ModalTypes } from '../utils/types';
 import { useModalType } from '../hooks-util';
+import { BottomSheet } from './BottomSheet';
+import { ChangeNameModalContent } from './ChangeNameModalContent';
+import { StopRecordingModalContent } from './StopRecordingModalContent';
 
 interface HMSRoomOptionsProps {}
 
@@ -44,14 +47,13 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
   return (
     <View>
       <PressableIcon onPress={onSettingsPress}>
-        <ThreeDotsIcon stack="vertical" />
+        <HamburgerIcon />
       </PressableIcon>
 
-      <DefaultModal
-        animationIn={'slideInUp'}
-        animationOut={'slideOutDown'}
-        modalVisible={modalVisible === ModalTypes.SETTINGS}
-        setModalVisible={dismissModal}
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.SETTINGS}
+        dismissModal={dismissModal}
+        animationOutTiming={700}
       >
         <RoomSettingsModalContent
           newAudioMixingMode={newAudioMixingMode}
@@ -64,7 +66,25 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
           setIsAudioShared={setIsAudioShared}
           setMuteAllTracksAudio={setMuteAllTracksAudio}
         />
-      </DefaultModal>
+      </BottomSheet>
+
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.CHANGE_NAME}
+        dismissModal={dismissModal}
+        avoidKeyboard={true}
+        animationOutTiming={700}
+      >
+        <ChangeNameModalContent dismissModal={dismissModal} />
+      </BottomSheet>
+
+      <BottomSheet
+        isVisible={modalVisible === ModalTypes.STOP_RECORDING}
+        dismissModal={dismissModal}
+        animationOutTiming={800}
+      >
+        <StopRecordingModalContent dismissModal={dismissModal} />
+      </BottomSheet>
+
       <DefaultModal
         animationIn={'slideInUp'}
         animationOut={'slideOutDown'}

package/src/components/HMSShowNetworkQuality.tsx

@@ -3,9 +3,8 @@ import { useSelector } from 'react-redux';
 import { StyleSheet, Image } from 'react-native';
 
 import type { RootState } from '../redux';
-import { COLORS } from '../utils/theme';
 import { CustomButton } from './CustomButton';
-import { useHMSInstance } from '../hooks-util';
+import { useHMSInstance, useHMSRoomStyle } from '../hooks-util';
 
 export const HMSShowNetworkQuality = () => {
   const hmsInstance = useHMSInstance();
@@ -20,11 +19,16 @@ export const HMSShowNetworkQuality = () => {
     return () => hmsInstance.disableNetworkQualityUpdates();
   }, [hmsInstance]);
 
+  const iconContainer = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.border_bright,
+    borderColor: theme.palette.border_bright,
+  }));
+
   return (
     <CustomButton
       onPress={() => {}}
       disabled={true}
-      viewStyle={styles.singleIconContainer}
+      viewStyle={[styles.singleIconContainer, iconContainer]}
       LeftIcon={
         <Image
           resizeMode="contain"
@@ -53,8 +57,6 @@ const styles = StyleSheet.create({
   },
   singleIconContainer: {
     padding: 8,
-    backgroundColor: COLORS.BORDER.LIGHT,
-    borderColor: COLORS.BORDER.LIGHT,
     borderWidth: 1,
     width: 'auto',
     height: 48,

package/src/components/HMSTextInput.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Platform, StyleSheet, TextInput } from 'react-native';
+import type { StyleProp, TextStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+
+export interface HMSTextInputProps {
+  value: string;
+  onChangeText(text: string): void;
+  style?: StyleProp<TextStyle>;
+  autoFocus?: boolean;
+}
+
+export const HMSTextInput: React.FC<HMSTextInputProps> = ({
+  value,
+  onChangeText,
+  style,
+  autoFocus,
+}) => {
+  const [inputFocused, setInputFocused] = React.useState(false);
+
+  const handleInputFocus = () => setInputFocused(true);
+
+  const handleInputBlur = () => setInputFocused(false);
+
+  const {
+    on_surface_low: onSurfaceLowColor,
+    on_surface_high: onSurfaceHighColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    input: {
+      backgroundColor: theme.palette.surface_default,
+      color: theme.palette.on_surface_high,
+      borderColor: theme.palette.surface_default,
+      fontFamily: `${typography.font_family}-Regular`,
+    },
+    focusedInput: {
+      borderColor: theme.palette.primary_default,
+      borderWidth: 2,
+    },
+  }));
+
+  return (
+    <TextInput
+      style={[
+        styles.input,
+        hmsRoomStyles.input,
+        inputFocused ? hmsRoomStyles.focusedInput : null,
+        style,
+      ]}
+      value={value}
+      onChangeText={onChangeText}
+      placeholder="Enter Name..."
+      autoCapitalize="words"
+      autoCompleteType="name"
+      placeholderTextColor={onSurfaceLowColor}
+      selectionColor={onSurfaceHighColor}
+      onFocus={handleInputFocus}
+      onBlur={handleInputBlur}
+      autoFocus={autoFocus}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  input: {
+    flex: 1,
+    height: 50,
+    textAlignVertical: 'center',
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    fontSize: 16,
+    lineHeight: Platform.OS === 'android' ? 24 : undefined,
+    letterSpacing: 0.5,
+    borderWidth: 2,
+  },
+});

package/src/components/Header.tsx

@@ -1,18 +1,16 @@
 import React, { memo } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet } 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';
+import { useHMSRoomStyle, useIsHLSViewer } from '../hooks-util';
+import { HMSManageAudioOutput } from './HMSManageAudioOutput';
+import { HMSRecordingIndicator } from './HMSRecordingIndicator';
+import { CompanyLogo } from './CompanyLogo';
 
 interface HeaderProps {
   offset: SharedValue<number>;
@@ -20,10 +18,7 @@ interface HeaderProps {
 
 export const _Header: React.FC<HeaderProps> = ({ offset }) => {
   const isHLSViewer = useIsHLSViewer();
-  const roomName = useSelector(
-    (state: RootState) => state.hmsStates.room?.name
-  );
-  const debugMode = useSelector((state: RootState) => state.user.debugMode);
+
   const animatedStyles = useAnimatedStyle(() => {
     return {
       opacity: offset.value,
@@ -39,50 +34,56 @@ export const _Header: React.FC<HeaderProps> = ({ offset }) => {
     };
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
   return (
     <Animated.View style={animatedStyles} animatedProps={animatedProps}>
-      {isHLSViewer ? (
-        <View style={styles.hlsContainer}>
-          <HmsLogoIcon />
+      <View style={[styles.container, containerStyles]}>
+        <View style={styles.logoContainer}>
+          <CompanyLogo style={styles.logo} />
 
-          {debugMode && roomName ? (
-            <Text style={styles.roomName}>{roomName}</Text>
-          ) : null}
+          <HMSRecordingIndicator />
         </View>
-      ) : (
-        <View style={styles.container}>
-          <HMSManageLeave />
-          <HMSManageCameraRotation />
+
+        <View style={styles.controls}>
+          {isHLSViewer ? null : (
+            <View style={styles.cameraRotationWrapper}>
+              <HMSManageCameraRotation />
+            </View>
+          )}
+
+          <HMSManageAudioOutput />
         </View>
-      )}
+      </View>
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 8,
+    paddingTop: 8,
+    paddingBottom: 16,
     paddingHorizontal: 16,
-    backgroundColor: COLORS.BACKGROUND.DIM,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-between',
   },
-  hlsContainer: {
-    padding: 16,
-    paddingTop: 8,
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  logo: {
+    marginRight: 12,
+  },
+  controls: {
     flexDirection: 'row',
     alignItems: 'center',
+    marginLeft: 16,
   },
-  roomName: {
-    flex: 1,
-    fontFamily: 'Inter',
-    fontSize: 15,
-    fontWeight: '500',
-    color: COLORS.SURFACE.ON_SURFACE.HIGH,
-    lineHeight: 20,
-    letterSpacing: 0.1,
-    marginLeft: 24,
+  cameraRotationWrapper: {
+    marginRight: 16,
   },
 });
 

package/src/components/LocalPeerRegularVideoView.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
+import type { PeerVideoTileViewProps } from './PeerVideoTile/PeerVideoTileView';
+import type { RootState } from '../redux';
+
+export interface LocalPeerRegularVideoViewProps
+  extends Omit<PeerVideoTileViewProps, 'peerTrackNode'> {}
+
+export const LocalPeerRegularVideoView: React.FC<
+  LocalPeerRegularVideoViewProps
+> = ({ onMoreOptionsPress }) => {
+  const localPeerTrackNode = useSelector(
+    (state: RootState) => state.app.localPeerTrackNode
+  );
+
+  if (!localPeerTrackNode) {
+    return null;
+  }
+
+  return (
+    <PeerVideoTileView
+      peerTrackNode={localPeerTrackNode}
+      onMoreOptionsPress={onMoreOptionsPress}
+    />
+  );
+};

package/src/components/LocalPeerScreenshareView.tsx

@@ -0,0 +1,72 @@
+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';
+import { COLORS } from '../utils/theme';
+
+export const LocalPeerScreenshareView = () => {
+  const hmsActions = useHMSActions();
+
+  const onEndScreenSharePress = async () => {
+    await hmsActions.setScreenShareEnabled(false);
+  };
+
+  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"
+        onPress={onEndScreenSharePress}
+        viewStyle={styles.button}
+        textStyle={styles.buttonText}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+    backgroundColor: COLORS.SURFACE.DEFAULT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  icon: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+  },
+  text: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 20,
+    lineHeight: 24,
+    letterSpacing: 0.15,
+    fontFamily: 'Inter-Medium',
+    marginTop: 16,
+  },
+  button: {
+    backgroundColor: COLORS.INDICATORS.ERROR,
+    borderColor: COLORS.INDICATORS.ERROR,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderRadius: 8,
+    width: '60%',
+    alignSelf: 'center',
+    marginTop: 48,
+  },
+  buttonText: {
+    color: COLORS.TEXT.HIGH_EMPHASIS,
+    fontSize: 16,
+    lineHeight: 24,
+    letterSpacing: 0.5,
+    fontFamily: 'Inter-Medium',
+    textTransform: 'capitalize',
+  },
+});

package/src/components/Meeting.tsx

@@ -5,13 +5,14 @@ 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,
+  useHMSNetworkQualityUpdate,
   useHMSPIPRoomLeave,
   useHMSRemovedFromRoomUpdate,
+  useHMSRoomStyle,
   useLandscapeChatViewVisible,
   usePIPListener,
 } from '../hooks-util';
@@ -46,6 +47,9 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
   // Handle rendering RTC stats on Tiles and inside RTC stats modal
   useRTCStatsListeners();
 
+  // Subscribe to Peers Network quality updates
+  useHMSNetworkQualityUpdate();
+
   const landscapeChatViewVisible = useLandscapeChatViewVisible();
 
   // Clearing any pending modal opening tasks
@@ -55,6 +59,10 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
     };
   }, []);
 
+  const containerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
   if (startingHLSStream) {
     return <HMSHLSStreamLoading />;
   }
@@ -66,7 +74,7 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
    * Solution: Try using Tab Gesture detector instead on Pressable component
    */
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={[styles.container, containerStyles]} edges={['top', 'left', 'right']}>
       <MeetingScreenContent peerTrackNodes={peerTrackNodes} />
 
       {landscapeChatViewVisible ? <ChatView /> : null}
@@ -77,7 +85,6 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: COLORS.BACKGROUND.DIM,
     flexDirection: 'row',
   },
 });

package/src/components/MeetingScreenContent.tsx

@@ -88,7 +88,7 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
       ]}
       disabled={isHLSViewer || true}
     >
-      <HMSStatusBar hidden={controlsHidden} />
+      <HMSStatusBar hidden={controlsHidden} barStyle={'light-content'} />
 
       {isPipModeActive ? null : <Header offset={offset} />}
 

package/src/components/MiniView.tsx

@@ -0,0 +1,213 @@
+import * as React from 'react';
+import type { MutableRefObject } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { StyleSheet, View, LayoutAnimation } from 'react-native';
+import type { LayoutRectangle } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+} from 'react-native-reanimated';
+
+import { PeerVideoTileView } from './PeerVideoTile/PeerVideoTileView';
+import type { PeerVideoTileViewProps } from './PeerVideoTile/PeerVideoTileView';
+import {
+  PeerMinimizedView,
+  usePeerMinimizedViewDimensions,
+} from './PeerMinimizedView';
+import type { RootState } from '../redux';
+import { setInsetViewMinimized } from '../redux/actions';
+
+const cornerOffset = {
+  x: 8,
+  y: 16,
+};
+
+export interface MiniViewProps
+  extends Omit<PeerVideoTileViewProps, 'peerTrackNode'> {
+  boundingBoxRef: MutableRefObject<LayoutRectangle | null>;
+}
+
+export const MiniView: React.FC<Omit<MiniViewProps, 'insetMode'>> = ({
+  boundingBoxRef,
+  onMoreOptionsPress,
+}) => {
+  const isPressed = useSharedValue(false);
+  const xOffset = useSharedValue(0);
+  const yOffset = useSharedValue(0);
+  const start = useSharedValue({ x: 0, y: 0 });
+  const dispatch = useDispatch();
+
+  const minimized = useSelector(
+    (state: RootState) => state.app.insetViewMinimized
+  );
+  const miniviewPeerTrackNode = useSelector(
+    (state: RootState) => state.app.miniviewPeerTrackNode
+  );
+
+  const { height: minimizedViewHeigth, width: minimizedViewWidth } =
+    usePeerMinimizedViewDimensions();
+
+  const size = {
+    width: minimized ? minimizedViewWidth : 104,
+    height: minimized ? minimizedViewHeigth : 186,
+  };
+
+  const dimensionStyles = {
+    width: size.width,
+    height: size.height,
+  };
+
+  const animatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [
+        { translateX: xOffset.value },
+        { translateY: yOffset.value },
+        { scale: withSpring(isPressed.value ? 1.05 : 1) },
+      ],
+    };
+  }, []);
+
+  const handlePanGestureEnd = (e: { velocityX: number; velocityY: number }) => {
+    'worklet';
+
+    const { snapPointX, snapPointY } = getSnappingPoints(
+      xOffset.value,
+      yOffset.value,
+      size.width,
+      size.height,
+      cornerOffset.x,
+      cornerOffset.y,
+      boundingBoxRef.current
+    );
+
+    const finalX = snapPointX;
+    const finalY = snapPointY;
+
+    xOffset.value = withSpring(finalX, {
+      damping: 100,
+      stiffness: 100,
+      velocity: e.velocityX,
+    });
+    yOffset.value = withSpring(finalY, {
+      damping: 100,
+      stiffness: 100,
+      velocity: e.velocityY,
+    });
+
+    start.value = {
+      x: finalX,
+      y: finalY,
+    };
+  };
+
+  const panGesture = Gesture.Pan()
+    .onUpdate((e) => {
+      xOffset.value = e.translationX + start.value.x;
+      yOffset.value = e.translationY + start.value.y;
+    })
+    .onEnd(handlePanGestureEnd);
+
+  const longPressGesture = Gesture.LongPress()
+    .minDuration(800)
+    .maxDistance(1000)
+    .onBegin(() => {
+      isPressed.value = true;
+    })
+    .onFinalize(() => {
+      isPressed.value = false;
+    });
+
+  React.useEffect(() => {
+    handlePanGestureEnd({ velocityX: 0, velocityY: 0 });
+
+    return () => {
+      cancelAnimation(xOffset);
+      cancelAnimation(yOffset);
+    };
+  }, [minimized]);
+
+  const handleMaximize = () => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    dispatch(setInsetViewMinimized(false));
+  };
+
+  if (!miniviewPeerTrackNode) {
+    return null;
+  }
+
+  return (
+    <GestureDetector
+      gesture={Gesture.Simultaneous(panGesture, longPressGesture)}
+    >
+      <Animated.View
+        style={[styles.miniAnimatedView, dimensionStyles, animatedStyles]}
+      >
+        <View style={styles.contentContainer}>
+          {minimized ? (
+            <PeerMinimizedView
+              peerTrackNode={miniviewPeerTrackNode}
+              onMaximizePress={handleMaximize}
+            />
+          ) : (
+            <PeerVideoTileView
+              peerTrackNode={miniviewPeerTrackNode}
+              insetMode={true}
+              onMoreOptionsPress={onMoreOptionsPress}
+            />
+          )}
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+const styles = StyleSheet.create({
+  miniAnimatedView: {
+    position: 'absolute',
+    bottom: cornerOffset.y,
+    right: cornerOffset.x,
+    zIndex: 1,
+    elevation: 3,
+    shadowOffset: { height: 3, width: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+  },
+  contentContainer: {
+    flex: 1,
+    overflow: 'hidden',
+    borderRadius: 8,
+  },
+});
+
+const getSnappingPoints = (
+  currentValueX: number,
+  currentValueY: number,
+  compWidth: number,
+  compHeight: number,
+  xCornerOffset: number,
+  yCornerOffset: number,
+  boundingBox: null | { width: number; height: number }
+) => {
+  'worklet';
+  if (!boundingBox) {
+    return {
+      snapPointX: 0,
+      snapPointY: 0,
+    };
+  }
+  const { height, width } = boundingBox;
+
+  return {
+    snapPointX:
+      Math.abs(currentValueX) + compWidth < width / 2
+        ? 0
+        : -width + compWidth + xCornerOffset * 2,
+    snapPointY:
+      Math.abs(currentValueY) + compHeight < height / 2
+        ? 0
+        : -height + compHeight + yCornerOffset * 2,
+  };
+};