feat(design-v2): new call control buttons

Author: kristian-mkd

packages/react-native-sdk/__tests__/components/ParticipantView.test.tsx

@@ -43,7 +43,6 @@ describe('ParticipantView', () => {
     expect(
       await screen.findByTestId(ComponentTestIds.PARTICIPANT_AVATAR)
     ).toBeOnTheScreen();
-    expect(screen.getByTestId(IconTestIds.MUTED_VIDEO)).toBeOnTheScreen();
     expect(screen.getByText(testParticipant.name)).toBeOnTheScreen();
     // reaction is visible and then disappears after 5500 ms
     expect(screen.getByText('🎉')).toBeOnTheScreen();

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-content.mdx

@@ -10,7 +10,6 @@ import CallContentSpotlight from '../../assets/04-ui-components/call/call-conten
 
 import CallTopView from '../../common-content/ui-components/call/call-content/call-top-view.mdx';
 import CallControls from '../../common-content/ui-components/call/call-content/call-controls.mdx';
-import ParticipantsInfoBadge from '../../common-content/ui-components/call/call-content/participants-info-badge.mdx';
 import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 import OnBackPressed from '../../common-content/ui-components/call/call-content/on-back-pressed.mdx';
 import OnParticipantInfoPress from '../../common-content/ui-components/call/call-content/on-participant-info-press.mdx';

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-top-view.mdx

@@ -60,10 +60,6 @@ Style to override the container of the `CallTopView`.
 | ---------------------------------------------------------- |
 | [ViewStyle](https://reactnative.dev/docs/view-style-props) |
 
-### `ParticipantsInfoBadge`
-
-<ParticipantsInfoBadge />
-
 ## Customization
 
 You can create your own custom `CallTopView` using the [Call Top View UI Cookbook guide](../../../ui-cookbook/replacing-call-top-view/).

packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/participants-info-badge.mdx

@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import React, { useEffect, useMemo, useState } from 'react';
+import { SafeAreaView, StyleSheet, View, ViewStyle } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 
 import {
@@ -71,10 +71,7 @@ export type CallContentProps = Pick<
   HangUpCallButtonProps,
   'onHangupCallHandler'
 > &
-  Pick<
-    CallTopViewProps,
-    'onBackPressed' | 'onParticipantInfoPress' | 'ParticipantsInfoBadge'
-  > &
+  Pick<CallTopViewProps, 'onBackPressed'> &
   CallContentComponentProps & {
     /**
      * This switches the participant's layout between the grid and the spotlight mode.
@@ -101,7 +98,6 @@ export type CallContentProps = Pick<
 
 export const CallContent = ({
   onBackPressed,
-  onParticipantInfoPress,
   onHangupCallHandler,
   CallParticipantsList,
   CallTopView = DefaultCallTopView,
@@ -113,7 +109,6 @@ export const CallContent = ({
   ParticipantReaction,
   ParticipantVideoFallback,
   ParticipantView,
-  ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
   landscape = false,
@@ -146,6 +141,7 @@ export const CallContent = ({
   const isInPiPMode = useIsInPiPMode(disablePictureInPicture);
   const hasScreenShare = useHasOngoingScreenShare();
   const showSpotlightLayout = hasScreenShare || layout === 'spotlight';
+  const styles = useStyles();
 
   const showFloatingView =
     !showSpotlightLayout &&
@@ -201,67 +197,82 @@ export const CallContent = ({
     supportedReactions,
   };
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
     <>
       {!disablePictureInPicture && (
         <RTCViewPipIOS
           includeLocalParticipantVideo={iOSPiPIncludeLocalParticipantVideo}
         />
       )}
-      <View style={[styles.container, landscapeStyles, callContent.container]}>
-        <View style={[styles.container, callContent.callParticipantsContainer]}>
+      <View style={styles.mainContainer}>
+        <View style={styles.unsafeArea} />
+        <SafeAreaView style={[styles.safeArea, callContent.container]}>
           <View
-            style={[styles.view, callContent.topContainer]}
-            // "box-none" disallows the container view to be not take up touches
-            // and allows only the top and floating view (its child views) to take up the touches
-            pointerEvents="box-none"
+            style={[styles.callContent, callContent.callParticipantsContainer]}
           >
-            {!isInPiPMode && CallTopView && (
-              <CallTopView
-                onBackPressed={onBackPressed}
-                onParticipantInfoPress={onParticipantInfoPress}
-                ParticipantsInfoBadge={ParticipantsInfoBadge}
-              />
-            )}
-            {showFloatingView && FloatingParticipantView && (
-              <FloatingParticipantView
-                participant={
-                  isRemoteParticipantInFloatingView
-                    ? remoteParticipants[0]
-                    : localParticipant
-                }
-                onPressHandler={handleFloatingViewParticipantSwitch}
-                supportedReactions={supportedReactions}
-                {...participantViewProps}
-              />
+            <View
+              style={[styles.view, callContent.topContainer]}
+              // "box-none" disallows the container view to be not take up touches
+              // and allows only the top and floating view (its child views) to take up the touches
+              pointerEvents="box-none"
+            >
+              {!isInPiPMode && CallTopView && (
+                <CallTopView onBackPressed={onBackPressed} />
+              )}
+              {showFloatingView && FloatingParticipantView && (
+                <FloatingParticipantView
+                  participant={
+                    isRemoteParticipantInFloatingView
+                      ? remoteParticipants[0]
+                      : localParticipant
+                  }
+                  onPressHandler={handleFloatingViewParticipantSwitch}
+                  supportedReactions={supportedReactions}
+                  {...participantViewProps}
+                />
+              )}
+            </View>
+            {showSpotlightLayout ? (
+              <CallParticipantsSpotlight {...callParticipantsSpotlightProps} />
+            ) : (
+              <CallParticipantsGrid {...callParticipantsGridProps} />
             )}
           </View>
-          {showSpotlightLayout ? (
-            <CallParticipantsSpotlight {...callParticipantsSpotlightProps} />
-          ) : (
-            <CallParticipantsGrid {...callParticipantsGridProps} />
-          )}
-        </View>
 
-        {!isInPiPMode && CallControls && (
-          <CallControls
-            onHangupCallHandler={onHangupCallHandler}
-            landscape={landscape}
-          />
-        )}
+          {!isInPiPMode && CallControls && (
+            <CallControls
+              onHangupCallHandler={onHangupCallHandler}
+              landscape={landscape}
+            />
+          )}
+        </SafeAreaView>
       </View>
     </>
   );
 };
 
-const styles = StyleSheet.create({
-  container: { flex: 1 },
-  view: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: Z_INDEX.IN_FRONT,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        mainContainer: { flex: 1 },
+        callContent: { flex: 1 },
+        safeArea: { flex: 1 },
+        unsafeArea: {
+          position: 'absolute',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          // TODO: should be replaced with safeAreaInsets.bottom for all devices on ios and android
+          height: 34,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        view: {
+          ...StyleSheet.absoluteFillObject,
+          zIndex: Z_INDEX.IN_FRONT,
+        },
+      }),
+    [theme]
+  );
+};

packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../../../contexts/ThemeContext';
+import { ComponentTestIds } from '../../../constants/TestIds';
+import { Z_INDEX } from '../../../constants';
+
+/**
+ * A badge that displays a number.
+ *
+ * @prop {number} count - The number to display in the badge.
+ *
+ * @returns {ReactElement} A View with a Text that displays the count in the badge.
+ */
+export const BadgeCountIndicator = ({
+  count,
+}: {
+  count: number | undefined;
+}) => {
+  const {
+    theme: { colors, typefaces },
+  } = useTheme();
+  const styles = useStyles();
+
+  // Don't show badge if count is 0 or undefined
+  if (!count) {
+    return null;
+  }
+
+  return (
+    <View
+      testID={ComponentTestIds.BADGE_COUNT_INDICATOR}
+      style={[styles.badge, { backgroundColor: colors.iconAlertSuccess }]}
+    >
+      <Text
+        style={[
+          styles.badgeText,
+          { color: colors.sheetPrimary },
+          typefaces.caption,
+        ]}
+      >
+        {count}
+      </Text>
+    </View>
+  );
+};
+
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        badge: {
+          position: 'absolute',
+          justifyContent: 'center',
+          borderRadius: theme.defaults.borderRadius,
+          left: 13,
+          bottom: 17,
+          zIndex: Z_INDEX.IN_FRONT,
+          height: theme.variants.roundButtonSizes.xs,
+          width: theme.variants.roundButtonSizes.xs,
+        },
+        badgeText: {
+          textAlign: 'center',
+        },
+      }),
+    [theme]
+  );
+};

packages/react-native-sdk/src/components/Call/CallControls/BadgeCountIndicator.tsx

@@ -57,26 +57,29 @@ export const CallControlsButton = (
 
   const {
     theme: {
-      variants: { buttonSizes },
       colors,
+      defaults,
+      variants: { roundButtonSizes },
       callControlsButton: { container },
     },
   } = useTheme();
 
   const pressableStyle: PressableProps['style'] = ({ pressed }) => [
     styles.container,
     {
-      backgroundColor: disabled ? colors.disabled : colorProp || colors.base1,
+      backgroundColor: disabled
+        ? colors.buttonPrimaryDisabled
+        : colorProp || colors.buttonSecondaryDefault,
       opacity: pressed ? 0.2 : 1,
-      height: size || buttonSizes.sm,
-      width: size || buttonSizes.sm,
-      borderRadius: (size || buttonSizes.sm) / 2,
-      borderColor: colors.background1,
+      height: size || roundButtonSizes.lg,
+      width: size || roundButtonSizes.lg,
+      borderRadius: defaults.borderRadius,
     },
     styleProp?.container ?? null,
     container,
   ];
 
+  const childrenSize = (size || roundButtonSizes.lg) / 2 - 5;
   return (
     <Pressable
       disabled={disabled}
@@ -87,10 +90,7 @@ export const CallControlsButton = (
     >
       <View
         style={[
-          {
-            height: (size || buttonSizes.sm) / 2 - 5,
-            width: (size || buttonSizes.sm) / 2 - 5,
-          },
+          { height: childrenSize, width: childrenSize },
           styleProp?.svgContainer ?? null,
         ]}
       >