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

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]}>
       <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/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,
+  };
+};

package/src/components/Modals.tsx

@@ -36,15 +36,10 @@ import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import { styles } from './styles';
 
 import { CustomButton } from './CustomButton';
-import { CustomInput } from './CustomInput';
 import { Menu, MenuItem } from './MenuModal';
 
 import { CustomPicker } from './Picker';
-import {
-  changeHLSAspectRatio,
-  changeShowStats,
-  saveUserData,
-} from '../redux/actions';
+import { changeHLSAspectRatio, changeShowStats } from '../redux/actions';
 import { getTime } from '../utils/functions';
 import {
   LayoutParams,
@@ -194,60 +189,6 @@ export const SaveScreenshot = ({
   );
 };
 
-export const ChangeNameModal = ({ cancelModal }: { cancelModal: Function }) => {
-  const instance = useHMSInstance();
-  const peer = useSelector((state: RootState) => state.app.peerToUpdate);
-  const dispatch = useDispatch();
-
-  const [name, setName] = useState<string>(peer?.name!);
-
-  const changeName = () => {
-    if (name.length > 0) {
-      instance
-        ?.changeName(name)
-        .then((d) => {
-          dispatch(
-            saveUserData({
-              userName: name,
-            })
-          );
-          console.log('Change Name Success: ', d);
-        })
-        .catch((e) => console.log('Change Name Error: ', e));
-    }
-    cancelModal();
-  };
-
-  return (
-    <View style={styles.volumeModalContainer}>
-      <Text style={styles.roleChangeModalHeading}>Change Name</Text>
-      <View style={styles.volumeModalSlider}>
-        <CustomInput
-          value={name}
-          onChangeText={setName}
-          inputStyle={styles.participantChangeNameInput}
-          placeholderTextColor={COLORS.TEXT.DISABLED}
-          placeholder="Find what you’re looking for"
-        />
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Cancel"
-          onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="Change"
-          onPress={changeName}
-          viewStyle={styles.roleChangeModalSuccessButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
 interface RTCTrack {
   name: string;
   peerId?: string; // peerId is used to get audio track stats
@@ -515,56 +456,6 @@ export const LeaveRoomModal = ({
   );
 };
 
-export const EndRoomModal = ({
-  onSuccess,
-  cancelModal,
-}: {
-  onSuccess: Function;
-  cancelModal: Function;
-}) => {
-  const onEnd = () => {
-    cancelModal();
-    onSuccess();
-  };
-  return (
-    <View style={styles.volumeModalContainer}>
-      <View style={styles.participantMenuItem}>
-        <Feather
-          name="alert-triangle"
-          style={[styles.participantMenuItemIcon, styles.error]}
-          size={24}
-        />
-        <Text style={[styles.roleChangeModalHeading, styles.error]}>
-          End Session
-        </Text>
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <Text style={styles.roleChangeModalDescription}>
-          The session will end for everyone and all the activities will stop.
-          You can’t undo this action.
-        </Text>
-      </View>
-      <View style={styles.roleChangeModalPermissionContainer}>
-        <CustomButton
-          title="Don’t End"
-          onPress={cancelModal}
-          viewStyle={styles.roleChangeModalCancelButton}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-        <CustomButton
-          title="End Session"
-          onPress={onEnd}
-          viewStyle={[
-            styles.roleChangeModalSuccessButton,
-            styles.errorContainer,
-          ]}
-          textStyle={styles.roleChangeModalButtonText}
-        />
-      </View>
-    </View>
-  );
-};
-
 export const ChangeAudioOutputModal = ({
   cancelModal,
 }: {

package/src/components/PaginationDots.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import { StyleSheet, View } from 'react-native';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+
+export interface PaginationDotsProps {
+  list: any[];
+}
+
+const _PaginationDots: React.FC<PaginationDotsProps> = ({ list }) => {
+  const activeIndex = useSelector(
+    (state: RootState) => state.app.gridViewActivePage
+  );
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (theme) => ({
+      dot: { backgroundColor: theme.palette.on_surface_low },
+      activeDot: { backgroundColor: theme.palette.on_surface_high },
+    }),
+    []
+  );
+
+  return (
+    <View style={styles.container}>
+      {list.map((listItem, idx) => {
+        const isActive = activeIndex === idx;
+        const isFirst = idx === 0;
+
+        return (
+          <View
+            key={listItem?.id || idx.toString()}
+            style={[
+              styles.dot,
+              hmsRoomStyles.dot,
+              isFirst ? styles.firstDot : null,
+              isActive ? hmsRoomStyles.activeDot : null,
+            ]}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 16,
+  },
+  dot: {
+    width: 8,
+    aspectRatio: 1,
+    borderRadius: 4,
+    marginLeft: 12,
+  },
+  firstDot: {
+    marginLeft: 0,
+  },
+});
+
+export const PaginationDots = React.memo(_PaginationDots);

package/src/components/ParticipantsCount.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { useHMSRoomStyleSheet } from '../hooks-util';
+import type { RootState } from '../redux';
+
+const _ParticipantsCount = () => {
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    container: {
+      backgroundColor: theme.palette.surface_bright,
+    },
+    count: {
+      color: theme.palette.on_surface_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const peerCount = useSelector(
+    (state: RootState) => state.hmsStates.room?.peerCount
+  );
+
+  if (typeof peerCount !== 'number') {
+    return null;
+  }
+
+  return (
+    <View style={[styles.container, hmsRoomStyles.container]}>
+      <Text style={[styles.count, hmsRoomStyles.count]}>{peerCount}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    right: 0,
+    borderRadius: 40,
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  count: {
+    fontSize: 10,
+    lineHeight: 16,
+    letterSpacing: 1.5,
+    textAlign: 'center',
+  },
+});
+
+export const ParticipantsCount = React.memo(_ParticipantsCount);