@100mslive/react-native-room-kit 1.0.9 → 1.1.1

package/src/components/HMSPollsQuizzesNotification.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { batch, useDispatch } from 'react-redux';
+import { StyleSheet, Text, TouchableHighlight } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import type { HMSPoll } from '@100mslive/react-native-hms';
+import { HMSPollType, HMSPollUpdateType } from '@100mslive/react-native-hms';
+
+import { PollVoteIcon } from '../Icons';
+import {
+  useHMSRoomColorPalette,
+  useHMSRoomStyleSheet,
+  useModalType,
+} from '../hooks-util';
+import { HMSNotification } from './HMSNotification';
+import { ModalTypes } from '../utils/types';
+import {
+  removeNotification,
+  setPollStage,
+  setSelectedPollId,
+} from '../redux/actions';
+import { CreatePollStages } from '../redux/actionTypes';
+
+export interface HMSPollsQuizzesNotificationProps {
+  id: string;
+  payload: any;
+}
+
+export const HMSPollsQuizzesNotification: React.FC<
+  HMSPollsQuizzesNotificationProps
+> = ({ id, payload }) => {
+  const { poll, pollUpdateType } = payload as {
+    poll: HMSPoll;
+    pollUpdateType: HMSPollUpdateType;
+  };
+
+  const dispatch = useDispatch();
+  const { handleModalVisibleType } = useModalType();
+  const { secondary_dim: secondaryDimColor } = useHMSRoomColorPalette();
+  // const canVoteOnPoll = useSelector((state: RootState) => {
+  //   const permissions = state.hmsStates.localPeer?.role?.permissions;
+  //   return permissions?.pollRead;
+  // });
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.secondary_default,
+    },
+    buttonText: {
+      color: theme.palette.on_secondary_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+  }));
+
+  const handleVotePress = () => {
+    // if (!canVoteOnPoll) {
+    //   return;
+    // }
+    batch(() => {
+      dispatch(setPollStage(CreatePollStages.POLL_VOTING));
+      dispatch(setSelectedPollId(poll.pollId));
+      handleModalVisibleType(ModalTypes.POLLS_AND_QUIZZES);
+      dispatch(removeNotification(id));
+    });
+  };
+
+  return (
+    <HMSNotification
+      id={id}
+      icon={<PollVoteIcon />}
+      text={
+        poll.createdBy
+          ? `${poll.createdBy.name} ${
+              pollUpdateType === HMSPollUpdateType.started ? 'started' : ''
+            } a new ${poll.type === HMSPollType.poll ? 'poll' : 'quiz'}`
+          : `A new ${poll.type === HMSPollType.poll ? 'poll' : 'quiz'} has started`
+      }
+      autoDismiss={false}
+      dismissable={true}
+      cta={
+        // canVoteOnPoll ? (
+        <GestureDetector gesture={Gesture.Tap()}>
+          <TouchableHighlight
+            underlayColor={secondaryDimColor}
+            style={[styles.button, hmsRoomStyles.button]}
+            onPress={handleVotePress}
+          >
+            <Text style={[styles.buttonText, hmsRoomStyles.buttonText]}>
+              Vote
+            </Text>
+          </TouchableHighlight>
+        </GestureDetector>
+        // ) : undefined
+      }
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    borderRadius: 8,
+    marginRight: 16,
+  },
+  buttonText: {
+    fontSize: 14,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+  },
+});

package/src/components/HMSPrimaryButton.tsx

@@ -8,7 +8,7 @@ import type { HMSBaseButtonProps } from './HMSBaseButton';
 export interface HMSPrimaryButtonProps {
   title: string;
   loading: boolean;
-  onPress(): void;
+  onPress(e: any): void;
   testId?: HMSBaseButtonProps['testID'];
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;

package/src/components/HMSRoomOptions.tsx

@@ -22,6 +22,7 @@ import { BottomSheet } from './BottomSheet';
 import { ChangeNameModalContent } from './ChangeNameModalContent';
 import { StopRecordingModalContent } from './StopRecordingModalContent';
 import { TestIds } from '../utils/constants';
+import { PollsAndQuizBottomSheet } from './PollsAndQuizBottomSheet';
 
 interface HMSRoomOptionsProps {}
 
@@ -71,6 +72,8 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
         />
       </BottomSheet>
 
+      <PollsAndQuizBottomSheet />
+
       <BottomSheet
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}

package/src/components/HMSSecondaryButton.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { useHMSRoomColorPalette, useHMSRoomStyleSheet } from '../hooks-util';
+import { HMSBaseButton } from './HMSBaseButton';
+import type { HMSBaseButtonProps } from './HMSBaseButton';
+
+export interface HMSPrimaryButtonProps {
+  title: string;
+  loading: boolean;
+  onPress(): void;
+  testId?: HMSBaseButtonProps['testID'];
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  leftComponent?: React.ReactElement | null;
+  wrapWithGestureDetector?: boolean;
+}
+
+export const HMSSecondaryButton: React.FC<HMSPrimaryButtonProps> = ({
+  title,
+  loading,
+  onPress,
+  testId,
+  style,
+  disabled,
+  leftComponent,
+  wrapWithGestureDetector,
+}) => {
+  const {
+    secondary_dim: secondaryDarkColor,
+    on_secondary_high: onSecondaryHighColor,
+  } = useHMSRoomColorPalette();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
+    button: {
+      backgroundColor: theme.palette.secondary_default,
+    },
+    disabledButton: {
+      backgroundColor: theme.palette.secondary_disabled,
+    },
+    buttonText: {
+      color: theme.palette.on_secondary_high,
+      fontFamily: `${typography.font_family}-SemiBold`,
+    },
+    disabledText: {
+      color: theme.palette.on_secondary_low,
+    },
+  }));
+
+  return (
+    <HMSBaseButton
+      testID={testId}
+      loaderColor={onSecondaryHighColor}
+      loading={loading}
+      onPress={onPress}
+      title={title}
+      underlayColor={secondaryDarkColor}
+      disabled={disabled}
+      leftComponent={leftComponent}
+      style={[
+        hmsRoomStyles.button,
+        disabled ? hmsRoomStyles.disabledButton : null,
+        style,
+      ]}
+      textStyle={[
+        hmsRoomStyles.buttonText,
+        disabled ? hmsRoomStyles.disabledText : null,
+      ]}
+      wrapWithGestureDetector={wrapWithGestureDetector}
+    />
+  );
+};

package/src/components/Meeting.tsx

@@ -15,6 +15,7 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
+  useLandscapeImmersiveMode,
   usePIPListener,
   useSetDefaultChatRecipient,
 } from '../hooks-util';
@@ -61,6 +62,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
   // Handle Back button press and show leave room modal
   useBackButtonPress();
 
+  useLandscapeImmersiveMode();
+
   // Clearing any pending modal opening tasks
   React.useEffect(() => {
     return () => {

package/src/components/OverlayContainer.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { AnimatedStyle } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 type OverlayContainerProps = {};
 
@@ -9,10 +12,16 @@ export const OverlayContainer: React.FC<OverlayContainerProps> & {
   return <View style={styles.container}>{children}</View>;
 };
 
-type OverlayProps = {};
+export type OverlayProps = {
+  animatedStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+};
 
-const Overlay: React.FC<OverlayProps> = ({ children }) => {
-  return <View style={styles.absoluteContainer}>{children}</View>;
+const Overlay: React.FC<OverlayProps> = ({ children, animatedStyle }) => {
+  return (
+    <Animated.View style={[styles.absoluteContainer, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
 };
 
 OverlayContainer.Overlay = Overlay;

package/src/components/OverlayedViews.tsx

@@ -3,18 +3,22 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
+import type { OverlayProps } from './OverlayContainer';
 import { HLSChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
 export type OverlayedViewsProps = {
   offset: SharedValue<number>;
-};
+} & OverlayProps;
 
-const _OverlayedViews: React.FC<OverlayedViewsProps> = ({ offset }) => {
+const _OverlayedViews: React.FC<OverlayedViewsProps> = ({
+  offset,
+  animatedStyle,
+}) => {
   const { overlayChatVisible } = useShowChatAndParticipants();
 
   return (
-    <OverlayContainer.Overlay>
+    <OverlayContainer.Overlay animatedStyle={animatedStyle}>
       {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />

package/src/components/PeerVideoTile/HMSPinchGesture.tsx

@@ -21,25 +21,6 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
    */
   const dimensions = useSharedValue({ width: 0, height: 0 });
 
-  /**
-   * - Tracking number of active pointers in pinch gesture
-   * "Focal point" is used as an origin point for scaling the view
-   * when active number of pointers change, focal point is also changed causing a flicker effect
-   *
-   * To remove flicker effect, when `numberOfPointers` change, we calculate the amount of change in focal point
-   * and use the `(new focal point) + (amount of change in focal point)` to apply transformations
-   */
-  const numberOfPointers = useSharedValue(0);
-
-  /**
-   * - Current focal point to apply scaling
-   * "Focal point" is used as an origin point for scaling the view
-   * > We transform the "center of View" to the "focal point", "apply scaling" and then "undo the transformation"
-   */
-  const focalPoint = useSharedValue({ x: 0, y: 0 });
-
-  const adjustedFocalPoint = useSharedValue({ x: 0, y: 0 });
-
   /**
    * - focal point captured at the start of the pinch gesture
    * We use this point to calculate the amount of translation of focal point
@@ -51,17 +32,6 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
    */
   const focalPointAtStart = useSharedValue({ x: 0, y: 0 });
 
-  /**
-   * - x,y coords representing the amount by which focal point shifted due to change in `numberOfPointers`
-   * e.g. focal point when `numberOfPointers = 2`            - (20, 100)
-   *      focal point when `numberOfPointers` reduced to `1` - (40, 300)
-   *
-   *      focal point got shifted by `20` points on x-axis and `200` points on y-axis. Thus, `focalShift = (20, 200)`
-   *
-   * Usage: TODO
-   */
-  const focalShift = useSharedValue({ x: 0, y: 0 });
-
   const scale = useSharedValue(1);
   const savedScale = useSharedValue(1);
   const translation = useSharedValue({ x: 0, y: 0 });
@@ -80,9 +50,22 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
   const panGesture = Gesture.Pan()
     .maxPointers(1)
     .onUpdate((e) => {
+      if (savedScale.value <= 1) {
+        return;
+      }
+      const swipeOnXAxis = e.translationX + savedTranslation.value.x;
+      const swipeOnYAxis = e.translationY + savedTranslation.value.y;
+
+      const diffX =
+        (dimensions.value.width * savedScale.value - dimensions.value.width) /
+        2;
+      const diffY =
+        (dimensions.value.height * savedScale.value - dimensions.value.height) /
+        2;
+
       translation.value = {
-        x: e.translationX + savedTranslation.value.x,
-        y: e.translationY + savedTranslation.value.y,
+        x: Math.max(Math.min(swipeOnXAxis, diffX), -diffX),
+        y: Math.max(Math.min(swipeOnYAxis, diffY), -diffY),
       };
     })
     .onEnd(() => {
@@ -91,45 +74,26 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
 
   const pinchGesture = Gesture.Pinch()
     .onStart((e) => {
-      numberOfPointers.value = e.numberOfPointers;
       focalPointAtStart.value = { x: e.focalX, y: e.focalY };
-
-      adjustedFocalPoint.value = {
-        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-      };
     })
     .onUpdate((e) => {
-      // Calculating `focal point` shift values when `numberOfPointers` changes
-      if (numberOfPointers.value !== e.numberOfPointers) {
-        numberOfPointers.value = e.numberOfPointers;
-
-        focalShift.value = {
-          x: e.focalX - (focalPoint.value.x - focalShift.value.x),
-          y: e.focalY - (focalPoint.value.y - focalShift.value.y),
-        };
-      }
+      scale.value = Math.min(Math.max(savedScale.value * e.scale, 0.94), 5.2);
 
-      adjustedFocalPoint.value = {
-        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-      };
+      const offsetX = dimensions.value.width / 2 - focalPointAtStart.value.x;
+      const offsetY = dimensions.value.height / 2 - focalPointAtStart.value.y;
+
+      const swipeOnXAxis = offsetX * scale.value + savedTranslation.value.x;
+      const swipeOnYAxis = offsetY * scale.value + savedTranslation.value.y;
+
+      const diffX =
+        (dimensions.value.width * scale.value - dimensions.value.width) / 2;
+      const diffY =
+        (dimensions.value.height * scale.value - dimensions.value.height) / 2;
 
-      // Applying translations
       translation.value = {
-        x:
-          adjustedFocalPoint.value.x -
-          focalPointAtStart.value.x + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
-          savedTranslation.value.x, // Adding current translation to previous Translation to make it a continuous gesture
-        y:
-          adjustedFocalPoint.value.y -
-          focalPointAtStart.value.y + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
-          savedTranslation.value.y, // Adding current translation to previous Translation to make it a continuous gesture
+        x: Math.max(Math.min(swipeOnXAxis, diffX), -diffX),
+        y: Math.max(Math.min(swipeOnYAxis, diffY), -diffY),
       };
-
-      // saving focal point to apply scaling on correct position
-      focalPoint.value = { x: e.focalX, y: e.focalY };
-      scale.value = Math.min(Math.max(savedScale.value * e.scale, 0.94), 5.2);
     })
     .onEnd(() => {
       if (scale.value < 1) {
@@ -143,7 +107,6 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
         savedScale.value = scale.value;
       }
 
-      focalShift.value = { x: 0, y: 0 };
       savedTranslation.value = translation.value;
     });
 
@@ -151,13 +114,7 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
     transform: [
       { translateX: translation.value.x },
       { translateY: translation.value.y },
-      { translateX: focalPointAtStart.value.x - dimensions.value.width / 2 },
-      { translateY: focalPointAtStart.value.y - dimensions.value.height / 2 },
       { scale: scale.value },
-      { translateX: -(focalPointAtStart.value.x - dimensions.value.width / 2) },
-      {
-        translateY: -(focalPointAtStart.value.y - dimensions.value.height / 2),
-      },
     ],
   }));
 

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -28,6 +28,7 @@ import {
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { HMSFullScreenButton } from './HMSFullScreenButton';
 import { TestIds } from '../../utils/constants';
+import { useIsLandscapeOrientation } from '../../utils/dimension';
 
 export interface PeerVideoTileViewProps {
   peerTrackNode: PeerTrackNode;
@@ -146,6 +147,8 @@ export const _PeerVideoTileView = React.forwardRef<
       !canTakeActionOnPeer || // If local peer can't take action on peer, Or
       !allowedToPublish; // If local peer can't publish tracks
 
+    const isLandscapeOrientation = useIsLandscapeOrientation();
+
     return (
       <View style={styles.container}>
         <AvatarView
@@ -181,7 +184,7 @@ export const _PeerVideoTileView = React.forwardRef<
 
         {/* Handling Peer Audio Mute indicator */}
         {screenShareTile && showingVideoTrack ? (
-          isPipModeActive ? null : (
+          isPipModeActive || isLandscapeOrientation ? null : (
             <HMSFullScreenButton peerTrackNode={peerTrackNode} />
           )
         ) : peerCanPublishAudio ? (