@stream-io/video-react-native-sdk 0.0.1-alpha.366 → 0.0.1-alpha.368

package/src/components/call/CallControls/AcceptCallButton.tsx

@@ -0,0 +1,58 @@
+import { useCall } from '@stream-io/video-react-bindings';
+import React from 'react';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../../../theme';
+import { Phone } from '../../../icons';
+
+/**
+ * The props for the Accept Call button.
+ */
+type AcceptCallButtonProps = {
+  /**
+   * Handler to be called when the accept call button is pressed.
+   */
+  onPressHandler?: () => void;
+  /**
+   * Handler to be called after the incoming call is accepted.
+   *
+   * Note: If the `onPressHandler` is passed this handler will not be executed.
+   */
+  onAcceptHandler?: () => void;
+};
+
+/**
+ * Button to accept a call.
+ *
+ * Mostly calls call.join() internally.
+ */
+export const AcceptCallButton = ({
+  onPressHandler,
+  onAcceptHandler,
+}: AcceptCallButtonProps) => {
+  const call = useCall();
+  const acceptCallHandler = async () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    try {
+      await call?.join();
+      if (onAcceptHandler) {
+        onAcceptHandler();
+      }
+    } catch (error) {
+      console.log('Error joining Call', error);
+    }
+  };
+
+  return (
+    <CallControlsButton
+      onPress={acceptCallHandler}
+      color={theme.light.info}
+      style={theme.button.lg}
+      svgContainerStyle={theme.icon.lg}
+    >
+      <Phone color={theme.light.static_white} />
+    </CallControlsButton>
+  );
+};

package/src/components/call/CallControls/CallControls.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet, View, ViewProps } from 'react-native';
+import { theme } from '../../../theme';
+import { ToggleAudioPublishingButton } from './ToggleAudioPublishingButton';
+import { ToggleVideoPublishingButton } from './ToggleVideoPublishingButton';
+import { ToggleCameraFaceButton } from './ToggleCameraFaceButton';
+import { Z_INDEX } from '../../../constants';
+import { HangUpCallButton } from './HangupCallButton';
+
+/**
+ * Props for the CallControls Component.
+ */
+export interface CallControlsType extends Pick<ViewProps, 'style'> {
+  /**
+   * Handler to override the hang up handler when the hangup button is pressed.
+   * @returns void
+   */
+  onHangupCallHandler?: () => void;
+}
+
+/**
+ * A list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
+ * the user can trigger within an active call.
+ */
+export const CallControls = ({
+  onHangupCallHandler,
+  style,
+}: CallControlsType) => {
+  return (
+    <View style={[styles.container, style]}>
+      <ToggleVideoPublishingButton />
+      <ToggleAudioPublishingButton />
+      <ToggleCameraFaceButton />
+      <HangUpCallButton onPressHandler={onHangupCallHandler} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingTop: theme.padding.md,
+    paddingBottom: theme.padding.lg,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    zIndex: Z_INDEX.IN_FRONT,
+    backgroundColor: theme.light.static_grey,
+  },
+});

package/src/components/{utility/internal → call/CallControls}/CallControlsButton.tsx

@@ -19,7 +19,7 @@ interface CallControlsButtonProps {
    */
   color?: string;
   /**
-   * Boolean to enable/enable the button
+   * Boolean to enable/disable the button
    */
   disabled?: boolean;
   /**
@@ -34,6 +34,10 @@ interface CallControlsButtonProps {
    * Accessibility label for the button.
    */
   testID?: string;
+  /**
+   * Invoked on mount and layout changes with
+   * {nativeEvent: { layout: {x, y, width, height}}}.
+   */
   onLayout?: View['props']['onLayout'];
 }
 
@@ -61,7 +65,7 @@ export const CallControlsButton = (
       backgroundColor: color,
       opacity: pressed ? 0.2 : 1,
     },
-    style ? style : null,
+    style,
     disabled ? styles.disabledStyle : null,
   ];
 
@@ -73,13 +77,7 @@ export const CallControlsButton = (
       testID={testID}
       onLayout={onLayout}
     >
-      <View
-        style={[
-          styles.svgContainerStyle,
-          DEFAULT_ICON_SIZE,
-          svgContainerStyle ?? null,
-        ]}
-      >
+      <View style={[DEFAULT_ICON_SIZE, svgContainerStyle ?? null]}>
         {children}
       </View>
     </Pressable>
@@ -92,8 +90,18 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: theme.light.content_bg,
     alignItems: 'center',
+    // For iOS
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 8,
+
+    // For android
+    elevation: 6,
   },
-  svgContainerStyle: {},
   disabledStyle: {
     backgroundColor: theme.light.disabled,
   },

package/src/components/call/CallControls/ChatButton.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../../../theme';
+import { Chat } from '../../../icons';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * The props for the Chat Button in the Call Controls.
+ */
+export type ChatButtonProps = {
+  /**
+   * Handler to be called when the chat button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+  /**
+   * The count of the current unread message to be displayed above on the Chat button.
+   */
+  unreadBadgeCount?: number;
+};
+
+/**
+ * Button to open the Chat window while in the call.
+ *
+ * This call also display the unread count indicator/badge is there messages that are unread.
+ */
+export const ChatButton = ({
+  onPressHandler,
+  unreadBadgeCount,
+}: ChatButtonProps) => {
+  return (
+    <View>
+      <CallControlsButton
+        color={theme.light.static_white}
+        onPress={onPressHandler}
+        svgContainerStyle={styles.svgContainerStyle}
+      >
+        <UnreadBadgeCountIndicator count={unreadBadgeCount} />
+        <Chat color={theme.light.static_black} />
+      </CallControlsButton>
+    </View>
+  );
+};
+
+const UnreadBadgeCountIndicator = ({
+  count,
+}: {
+  count: ChatButtonProps['unreadBadgeCount'];
+}) => {
+  // Don't show badge if count is 0 or undefined
+  if (!count) {
+    return null;
+  }
+
+  return (
+    <View
+      testID={ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR}
+      style={styles.chatBadge}
+    >
+      <Text style={styles.chatBadgeText}>{count}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  svgContainerStyle: {
+    paddingTop: theme.padding.xs,
+  },
+  chatBadge: {
+    backgroundColor: theme.light.error,
+    borderRadius: theme.rounded.xl,
+    position: 'absolute',
+    left: 15,
+    bottom: 20,
+    zIndex: Z_INDEX.IN_FRONT,
+    height: 30,
+    width: 30,
+    justifyContent: 'center',
+  },
+  chatBadgeText: {
+    color: theme.light.static_white,
+    textAlign: 'center',
+    ...theme.fonts.bodyBold,
+  },
+});

package/src/components/{utility/internal → call/CallControls}/HangupCallButton.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { theme } from '../../../theme';
-import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { StyleProp, ViewStyle } from 'react-native';
 import { PhoneDown } from '../../../icons';
 import { ButtonTestIds } from '../../../constants/TestIds';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
@@ -16,15 +16,26 @@ export type HangUpCallButtonProps = {
    * @returns void
    */
   onPressHandler?: () => void;
-
+  /**
+   * Handler to be called when the call is hanged up.
+   *
+   * Note: If the `onPressHandler` is passed this handler will not be executed.
+   */
+  onHangUpCall?: () => void;
   /**
    * Style of the Button Container
    */
   style?: StyleProp<ViewStyle>;
 };
 
+/**
+ * Button to hangup a call.
+ *
+ * Mostly calls call.leave() internally.
+ */
 export const HangUpCallButton = ({
   onPressHandler,
+  onHangUpCall,
   style,
 }: HangUpCallButtonProps) => {
   const call = useCall();
@@ -41,6 +52,9 @@ export const HangUpCallButton = ({
         return;
       }
       await call?.leave();
+      if (onHangUpCall) {
+        onHangUpCall();
+      }
     } catch (error) {
       console.error('Error leaving call:', error);
     }
@@ -51,25 +65,10 @@ export const HangUpCallButton = ({
     <CallControlsButton
       onPress={hangUpCallHandler}
       color={theme.light.error}
-      style={[styles.button, { shadowColor: theme.light.error }, style]}
+      style={[{ shadowColor: theme.light.error }, style]}
       testID={ButtonTestIds.HANG_UP_CALL}
     >
       <PhoneDown color={theme.light.static_white} />
     </CallControlsButton>
   );
 };
-
-const styles = StyleSheet.create({
-  button: {
-    // For iOS
-    shadowOffset: {
-      width: 0,
-      height: 6,
-    },
-    shadowOpacity: 0.37,
-    shadowRadius: 7.49,
-
-    // For android
-    elevation: 6,
-  },
-});

package/src/components/call/CallControls/ReactionButton.tsx

@@ -0,0 +1,80 @@
+import { Restricted } from '@stream-io/video-react-bindings';
+import React, { useState } from 'react';
+import { CallControlsButton } from './CallControlsButton';
+import { OwnCapability } from '@stream-io/video-client';
+import { ButtonTestIds } from '../../../constants/TestIds';
+import { theme } from '../../../theme';
+import { Reaction } from '../../../icons';
+import { ReactionsPicker } from '../ReactionsPicker';
+import { StreamVideoRN } from '../../../utils';
+import { LayoutChangeEvent, LayoutRectangle } from 'react-native';
+
+/**
+ * Props for the Reaction button
+ */
+export type ReactionButtonProps = {
+  /**
+   * Handler to be called when the reaction button is pressed.
+   */
+  onPressHandler?: () => void;
+};
+
+/**
+ * Button to display the list of Reactions supported in the call.
+ * On press, it opens a view that can be used to send Reaction.
+ */
+export const ReactionButton = ({ onPressHandler }: ReactionButtonProps) => {
+  const [showReactionsPicker, setShowReactionsPicker] =
+    useState<boolean>(false);
+  const [reactionsButtonLayoutRectangle, setReactionsButtonLayoutRectangle] =
+    useState<LayoutRectangle>();
+
+  // This is for the reaction picker
+  const onReactionsButtonLayout = (event: LayoutChangeEvent) => {
+    const layout = event.nativeEvent.layout;
+    setReactionsButtonLayoutRectangle((prev) => {
+      if (
+        prev &&
+        prev.width === layout.width &&
+        prev.height === layout.height &&
+        prev.x === layout.x &&
+        prev.y === layout.y
+      ) {
+        return prev;
+      }
+      return layout;
+    });
+  };
+
+  const reactionButtonHandler = () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    setShowReactionsPicker(true);
+  };
+
+  return (
+    <>
+      <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
+        <CallControlsButton
+          testID={ButtonTestIds.REACTION}
+          onPress={reactionButtonHandler}
+          color={theme.light.static_white}
+          onLayout={onReactionsButtonLayout}
+        >
+          <Reaction color={theme.light.static_black} />
+        </CallControlsButton>
+      </Restricted>
+      {showReactionsPicker && (
+        <ReactionsPicker
+          reactions={StreamVideoRN.getConfig().supportedReactions}
+          reactionsButtonLayoutRectangle={reactionsButtonLayoutRectangle}
+          onRequestedClose={() => {
+            setShowReactionsPicker(false);
+          }}
+        />
+      )}
+    </>
+  );
+};

package/src/components/call/CallControls/RejectCallButton.tsx

@@ -0,0 +1,65 @@
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import React from 'react';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../../../theme';
+import { PhoneDown } from '../../../icons';
+import { CallingState } from '@stream-io/video-client';
+
+/**
+ * The props for the Reject Call button.
+ */
+type RejectCallButtonProps = {
+  /**
+   * Handler to be called when the accept call button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+  /**
+   * Handler to be called when the reject call button is pressed.
+   *
+   * Note: If the `onPressHandler` is passed this handler will not be executed.
+   */
+  onRejectHandler?: () => void;
+};
+
+/**
+ * Button to reject a call.
+ *
+ * Mostly calls call.leave({ reject: true }) internally.
+ */
+export const RejectCallButton = ({
+  onPressHandler,
+  onRejectHandler,
+}: RejectCallButtonProps) => {
+  const call = useCall();
+  const { useCallCallingState } = useCallStateHooks();
+  const callingState = useCallCallingState();
+  const rejectCallHandler = async () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    try {
+      if (callingState === CallingState.LEFT) {
+        return;
+      }
+      await call?.leave({ reject: true });
+      if (onRejectHandler) {
+        onRejectHandler();
+      }
+    } catch (error) {
+      console.log('Error rejecting Call', error);
+    }
+  };
+
+  return (
+    <CallControlsButton
+      onPress={rejectCallHandler}
+      color={theme.light.error}
+      style={theme.button.lg}
+      svgContainerStyle={theme.icon.lg}
+    >
+      <PhoneDown color={theme.light.static_white} />
+    </CallControlsButton>
+  );
+};

package/src/components/call/CallControls/ToggleAudioPreviewButton.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../../../theme';
+import { Mic, MicOff } from '../../../icons';
+import { useMediaStreamManagement } from '../../../providers';
+
+/**
+ * Props for the Toggle Audio preview button
+ */
+export type ToggleAudioPreviewButtonProps = {
+  /**
+   * Handler to be called when the the audio preview button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+};
+
+/**
+ * Button to toggle audio mute/unmute status before joining the call.
+ */
+export const ToggleAudioPreviewButton = ({
+  onPressHandler,
+}: ToggleAudioPreviewButtonProps) => {
+  const { initialAudioEnabled, toggleInitialAudioMuteState } =
+    useMediaStreamManagement();
+
+  const MicIcon = !initialAudioEnabled ? (
+    <MicOff color={theme.light.static_white} />
+  ) : (
+    <Mic color={theme.light.static_black} />
+  );
+
+  const toggleAudioPreviewHandler = () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    toggleInitialAudioMuteState();
+  };
+
+  return (
+    <CallControlsButton
+      onPress={toggleAudioPreviewHandler}
+      color={
+        initialAudioEnabled
+          ? theme.light.static_white
+          : theme.light.static_black
+      }
+      style={[
+        theme.button.md,
+        {
+          shadowColor: initialAudioEnabled
+            ? theme.light.static_white
+            : theme.light.static_black,
+        },
+      ]}
+    >
+      {MicIcon}
+    </CallControlsButton>
+  );
+};

package/src/components/{utility/internal/ToggleAudioButton.tsx → call/CallControls/ToggleAudioPublishingButton.tsx}

@@ -10,17 +10,34 @@ import { CallControlsButton } from './CallControlsButton';
 import { usePermissionNotification } from '../../../hooks';
 import { theme } from '../../../theme';
 import { Mic, MicOff } from '../../../icons';
-import { Alert, StyleSheet } from 'react-native';
+import { Alert } from 'react-native';
 import { muteStatusColor } from '../../../utils';
 import { useMediaStreamManagement } from '../../../providers';
 
-export const ToggleAudioButton = () => {
+/**
+ * Props for the Toggle Audio publishing button
+ */
+export type ToggleAudioPublishingButtonProps = {
+  /**
+   * Handler to be called when the the video publishing button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+};
+
+/**
+ * Button to toggle audio mute/unmute status while in the call.
+ */
+export const ToggleAudioPublishingButton = ({
+  onPressHandler,
+}: ToggleAudioPublishingButtonProps) => {
   const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
   const { isAudioMuted, toggleAudioMuted } = useMediaStreamManagement();
   const userHasSendAudioCapability = useHasPermissions(
     OwnCapability.SEND_AUDIO,
   );
   const { t } = useI18n();
+  const call = useCall();
 
   usePermissionNotification({
     permission: OwnCapability.SEND_AUDIO,
@@ -28,8 +45,6 @@ export const ToggleAudioButton = () => {
     messageRevoked: t('You can no longer speak.'),
   });
 
-  const call = useCall();
-
   useEffect(() => {
     if (userHasSendAudioCapability) {
       setIsAwaitingApproval(false);
@@ -57,8 +72,12 @@ export const ToggleAudioButton = () => {
   );
 
   const handleToggleAudioButton = async () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
     if (userHasSendAudioCapability) {
-      await toggleAudioMuted();
+      toggleAudioMuted();
       return;
     }
     if (!isAwaitingApproval) {
@@ -73,7 +92,6 @@ export const ToggleAudioButton = () => {
       <CallControlsButton
         onPress={handleToggleAudioButton}
         color={muteStatusColor(isAudioMuted)}
-        style={!isAudioMuted ? styles.button : null}
       >
         {isAudioMuted ? (
           <MicOff color={theme.light.static_white} />
@@ -84,21 +102,3 @@ export const ToggleAudioButton = () => {
     </Restricted>
   );
 };
-
-const styles = StyleSheet.create({
-  button: {
-    // For iOS
-    shadowOffset: {
-      width: 0,
-      height: 6,
-    },
-    shadowOpacity: 0.37,
-    shadowRadius: 7.49,
-
-    // For android
-    elevation: 6,
-  },
-  svgContainerStyle: {
-    paddingTop: theme.padding.xs,
-  },
-});

package/src/components/{utility/internal → call/CallControls}/ToggleCameraFaceButton.tsx

@@ -6,19 +6,41 @@ import { useMediaStreamManagement } from '../../../providers/MediaStreamManageme
 import { muteStatusColor } from '../../../utils';
 import { CameraSwitch } from '../../../icons';
 import { theme } from '../../../theme';
-import { StyleSheet } from 'react-native';
 
-export const ToggleCameraFaceButton = () => {
+/**
+ * Props for the Toggle Camera face button.
+ */
+export type ToggleCameraFaceButtonProps = {
+  /**
+   * Handler to be called when the the video publishing button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+};
+
+/**
+ * Button to toggle camera face(front/back) when in the call.
+ */
+export const ToggleCameraFaceButton = ({
+  onPressHandler,
+}: ToggleCameraFaceButtonProps) => {
   const { isVideoMuted, isCameraOnFrontFacingMode, toggleCameraFacingMode } =
     useMediaStreamManagement();
 
+  const toggleCameraFaceHandler = () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    toggleCameraFacingMode();
+  };
+
   return (
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         disabled={isVideoMuted}
-        onPress={toggleCameraFacingMode}
+        onPress={toggleCameraFaceHandler}
         color={muteStatusColor(!isCameraOnFrontFacingMode)}
-        style={isCameraOnFrontFacingMode ? styles.button : null}
       >
         <CameraSwitch
           color={
@@ -31,18 +53,3 @@ export const ToggleCameraFaceButton = () => {
     </Restricted>
   );
 };
-
-const styles = StyleSheet.create({
-  button: {
-    // For iOS
-    shadowOffset: {
-      width: 0,
-      height: 6,
-    },
-    shadowOpacity: 0.37,
-    shadowRadius: 7.49,
-
-    // For android
-    elevation: 6,
-  },
-});