@stream-io/video-react-native-sdk 1.3.7 → 1.4.0

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

@@ -1,7 +1,7 @@
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
-import { PhoneDown } from '../../../icons';
+import { IconWrapper, PhoneDown } from '../../../icons';
 import { CallingState, getLogger } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
 
@@ -54,7 +54,7 @@ export const RejectCallButton = ({
     theme: {
       colors,
       rejectCallButton,
-      variants: { buttonSizes },
+      variants: { buttonSizes, iconSizes },
     },
   } = useTheme();
   const rejectCallHandler = async () => {
@@ -79,13 +79,15 @@ export const RejectCallButton = ({
   return (
     <CallControlsButton
       onPress={rejectCallHandler}
-      color={colors.error}
-      size={size ?? buttonSizes.lg}
+      color={colors.buttonWarning}
+      size={size ?? buttonSizes.md}
       // TODO: check what to do about this random style prop
       // svgContainerStyle={theme.icon.lg}
       style={rejectCallButton}
     >
-      <PhoneDown color={colors.static_white} />
+      <IconWrapper>
+        <PhoneDown color={colors.iconPrimary} size={iconSizes.lg} />
+      </IconWrapper>
     </CallControlsButton>
   );
 };

package/src/components/Call/CallControls/ScreenShareToggleButton.tsx

@@ -6,6 +6,7 @@ import { StopScreenShare } from '../../../icons/StopScreenShare';
 import { CallControlsButton } from './CallControlsButton';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { useScreenShareButton } from '../../../hooks/useScreenShareButton';
+import { IconWrapper } from '../../../icons';
 
 /**
  * The props for the Screen Share button in the Call Controls.
@@ -32,7 +33,7 @@ export const ScreenShareToggleButton = ({
   onScreenShareStoppedHandler,
 }: ScreenShareToggleButtonProps) => {
   const {
-    theme: { colors, screenShareToggleButton },
+    theme: { colors, screenShareToggleButton, variants },
   } = useTheme();
 
   const screenCapturePickerViewiOSRef = useRef(null);
@@ -48,17 +49,27 @@ export const ScreenShareToggleButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={hasPublishedScreenShare ? colors.error : colors.static_white}
+      color={
+        hasPublishedScreenShare ? colors.buttonWarning : colors.buttonSecondary
+      }
       style={{
         container: screenShareToggleButton.container,
         svgContainer: screenShareToggleButton.svgContainer,
       }}
     >
-      {hasPublishedScreenShare ? (
-        <StopScreenShare color={colors.static_black} />
-      ) : (
-        <ScreenShare color={colors.static_black} />
-      )}
+      <IconWrapper>
+        {hasPublishedScreenShare ? (
+          <StopScreenShare
+            size={variants.iconSizes.md}
+            color={colors.iconPrimary}
+          />
+        ) : (
+          <ScreenShare
+            size={variants.iconSizes.md}
+            color={colors.iconPrimary}
+          />
+        )}
+      </IconWrapper>
       {Platform.OS === 'ios' && (
         <ScreenCapturePickerView ref={screenCapturePickerViewiOSRef} />
       )}

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

@@ -1,7 +1,7 @@
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { useTheme } from '../../../contexts';
-import { Mic, MicOff } from '../../../icons';
+import { IconWrapper, Mic, MicOff } from '../../../icons';
 import { CallControlsButton } from './CallControlsButton';
 
 /**
@@ -26,6 +26,7 @@ export const ToggleAudioPreviewButton = ({
       colors,
       toggleAudioPreviewButton,
       variants: { buttonSizes },
+      defaults,
     },
   } = useTheme();
   const { useMicrophoneState } = useCallStateHooks();
@@ -42,23 +43,20 @@ export const ToggleAudioPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={!optimisticIsMute ? colors.static_white : colors.static_black}
+      color={!optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning}
       size={buttonSizes.md}
       style={{
-        container: {
-          shadowColor: !optimisticIsMute
-            ? colors.static_white
-            : colors.static_black,
-          ...toggleAudioPreviewButton.container,
-        },
+        container: toggleAudioPreviewButton.container,
         svgContainer: toggleAudioPreviewButton.svgContainer,
       }}
     >
-      {!optimisticIsMute ? (
-        <Mic color={colors.static_black} />
-      ) : (
-        <MicOff color={colors.static_white} />
-      )}
+      <IconWrapper>
+        {!optimisticIsMute ? (
+          <Mic color={colors.iconPrimary} size={defaults.iconSize} />
+        ) : (
+          <MicOff color={colors.iconPrimary} size={defaults.iconSize} />
+        )}
+      </IconWrapper>
     </CallControlsButton>
   );
 };

package/src/components/Call/CallControls/ToggleAudioPublishingButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { OwnCapability } from '@stream-io/video-client';
 import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { CallControlsButton } from './CallControlsButton';
-import { Mic, MicOff } from '../../../icons';
+import { IconWrapper, Mic, MicOff } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
@@ -26,7 +26,7 @@ export const ToggleAudioPublishingButton = ({
   const { optimisticIsMute, microphone } = useMicrophoneState();
 
   const {
-    theme: { colors, toggleAudioPublishingButton },
+    theme: { colors, toggleAudioPublishingButton, defaults },
   } = useTheme();
   const onPress = async () => {
     if (onPressHandler) {
@@ -41,14 +41,18 @@ export const ToggleAudioPublishingButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
       <CallControlsButton
         onPress={onPress}
-        color={!optimisticIsMute ? colors.static_white : colors.overlay_dark}
+        color={
+          !optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning
+        }
         style={toggleAudioPublishingButton}
       >
-        {!optimisticIsMute ? (
-          <Mic color={colors.static_black} />
-        ) : (
-          <MicOff color={colors.static_white} />
-        )}
+        <IconWrapper>
+          {!optimisticIsMute ? (
+            <Mic color={colors.iconPrimary} size={defaults.iconSize} />
+          ) : (
+            <MicOff color={colors.iconPrimary} size={defaults.iconSize} />
+          )}
+        </IconWrapper>
       </CallControlsButton>
     </Restricted>
   );

package/src/components/Call/CallControls/ToggleCameraFaceButton.tsx

@@ -2,8 +2,9 @@ import { OwnCapability } from '@stream-io/video-client';
 import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
 import React from 'react';
 import { CallControlsButton } from './CallControlsButton';
-import { CameraSwitch } from '../../../icons';
+import { CameraSwitch, IconWrapper } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { ColorValue } from 'react-native';
 
 /**
  * Props for the Toggle Camera face button.
@@ -14,6 +15,11 @@ export type ToggleCameraFaceButtonProps = {
    * @returns void
    */
   onPressHandler?: () => void;
+
+  /**
+   * Background color of the button.
+   */
+  backgroundColor?: ColorValue;
 };
 
 /**
@@ -21,6 +27,7 @@ export type ToggleCameraFaceButtonProps = {
  */
 export const ToggleCameraFaceButton = ({
   onPressHandler,
+  backgroundColor,
 }: ToggleCameraFaceButtonProps) => {
   const { useCameraState, useCallSettings } = useCallStateHooks();
   const { camera, optimisticIsMute, direction } = useCameraState();
@@ -28,7 +35,7 @@ export const ToggleCameraFaceButton = ({
   const isVideoEnabledInCall = callSettings?.video.enabled;
 
   const {
-    theme: { colors, toggleCameraFaceButton },
+    theme: { colors, toggleCameraFaceButton, variants },
   } = useTheme();
   const onPress = async () => {
     if (onPressHandler) {
@@ -47,17 +54,23 @@ export const ToggleCameraFaceButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         onPress={onPress}
-        color={direction === 'back' ? colors.overlay_dark : colors.static_white}
+        color={backgroundColor || colors.buttonSecondary}
+        disabledColor={backgroundColor || colors.sheetSecondary}
         disabled={optimisticIsMute}
         style={toggleCameraFaceButton}
       >
-        <CameraSwitch
-          color={
-            direction === 'front' || direction === undefined
-              ? colors.static_black
-              : colors.static_white
-          }
-        />
+        <IconWrapper>
+          <CameraSwitch
+            size={variants.iconSizes.md}
+            color={
+              optimisticIsMute
+                ? colors.buttonDisabled
+                : direction === 'front' || direction === undefined
+                  ? colors.iconPrimary
+                  : colors.buttonPrimary
+            }
+          />
+        </IconWrapper>
       </CallControlsButton>
     </Restricted>
   );

package/src/components/Call/CallControls/ToggleVideoPreviewButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useTheme } from '../../../contexts';
 import { CallControlsButton } from './CallControlsButton';
-import { Video, VideoSlash } from '../../../icons';
+import { IconWrapper, Video, VideoSlash } from '../../../icons';
 
 /**
  * Props for the Toggle Video preview button
@@ -25,7 +25,7 @@ export const ToggleVideoPreviewButton = ({
     theme: {
       colors,
       toggleVideoPreviewButton,
-      variants: { buttonSizes },
+      variants: { buttonSizes, iconSizes },
     },
   } = useTheme();
   const { useCameraState, useCallSettings } = useCallStateHooks();
@@ -47,23 +47,20 @@ export const ToggleVideoPreviewButton = ({
   return (
     <CallControlsButton
       onPress={onPress}
-      color={!optimisticIsMute ? colors.static_white : colors.static_black}
+      color={!optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning}
       size={buttonSizes.md}
       style={{
-        container: {
-          shadowColor: !optimisticIsMute
-            ? colors.static_white
-            : colors.static_black,
-          ...toggleVideoPreviewButton.container,
-        },
+        container: toggleVideoPreviewButton.container,
         svgContainer: toggleVideoPreviewButton.svgContainer,
       }}
     >
-      {!optimisticIsMute ? (
-        <Video color={colors.static_black} />
-      ) : (
-        <VideoSlash color={colors.static_white} />
-      )}
+      <IconWrapper>
+        {!optimisticIsMute ? (
+          <Video color={colors.iconPrimary} size={iconSizes.lg} />
+        ) : (
+          <VideoSlash color={colors.iconPrimary} size={iconSizes.lg} />
+        )}
+      </IconWrapper>
     </CallControlsButton>
   );
 };

package/src/components/Call/CallControls/ToggleVideoPublishingButton.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { OwnCapability } from '@stream-io/video-client';
 import { Restricted, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { CallControlsButton } from './CallControlsButton';
-import { Video, VideoSlash } from '../../../icons';
+import { IconWrapper, Video, VideoSlash } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
@@ -27,7 +27,7 @@ export const ToggleVideoPublishingButton = ({
   const callSettings = useCallSettings();
   const isVideoEnabledInCall = callSettings?.video.enabled;
   const {
-    theme: { colors },
+    theme: { colors, variants },
   } = useTheme();
   const onPress = async () => {
     if (onPressHandler) {
@@ -45,13 +45,20 @@ export const ToggleVideoPublishingButton = ({
     <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
       <CallControlsButton
         onPress={onPress}
-        color={!optimisticIsMute ? colors.static_white : colors.overlay_dark}
+        color={
+          !optimisticIsMute ? colors.buttonSecondary : colors.buttonWarning
+        }
       >
-        {!optimisticIsMute ? (
-          <Video color={colors.static_black} />
-        ) : (
-          <VideoSlash color={colors.static_white} />
-        )}
+        <IconWrapper>
+          {!optimisticIsMute ? (
+            <Video color={colors.iconPrimary} size={variants.iconSizes.md} />
+          ) : (
+            <VideoSlash
+              color={colors.iconPrimary}
+              size={variants.iconSizes.md}
+            />
+          )}
+        </IconWrapper>
       </CallControlsButton>
     </Restricted>
   );

package/src/components/Call/CallControls/index.tsx

@@ -6,7 +6,6 @@ export * from './ToggleVideoPreviewButton';
 export * from './ToggleAudioPublishingButton';
 export * from './ToggleVideoPublishingButton';
 export * from './ToggleCameraFaceButton';
-export * from './ChatButton';
 export * from './ReactionsButton';
 export * from './CallControls';
 export * from './CallControlsButton';

package/src/components/Call/CallControls/internal/ReactionsPicker.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import {
   LayoutRectangle,
   Pressable,
@@ -18,26 +18,24 @@ type ReactionPickerProps = Pick<ReactionsButtonProps, 'supportedReactions'> & {
   onRequestedClose: () => void;
 };
 
-const TOP_PADDING = 4;
-const REACTION_MARGIN_BOTTOM = 4;
-
 export const ReactionsPicker = ({
   supportedReactions = defaultEmojiReactions,
   reactionsButtonLayoutRectangle,
   onRequestedClose,
 }: ReactionPickerProps) => {
   const {
-    theme: { colors, reactionsPicker },
+    theme: { colors, reactionsPicker, variants },
   } = useTheme();
+  const styles = useStyles();
   const call = useCall();
   const size = reactionsButtonLayoutRectangle?.width ?? 0;
   const reactionItemSize = size * 0.8;
 
   const popupHeight =
     // the top padding
-    TOP_PADDING +
+    variants.spacingSizes.xs +
     // take margins into account
-    REACTION_MARGIN_BOTTOM * supportedReactions.length +
+    variants.spacingSizes.xs * supportedReactions.length +
     // the size of the reaction icon items (same size as reactions button * amount of reactions)
     reactionItemSize * supportedReactions.length;
 
@@ -104,7 +102,7 @@ export const ReactionsPicker = ({
           styles.reactionsPopup,
           reactionsPopupStyle,
           {
-            backgroundColor: colors.static_grey,
+            backgroundColor: colors.sheetSecondary,
           },
           reactionsPicker.reactionsPopup,
         ]}
@@ -119,10 +117,7 @@ export const ReactionsPicker = ({
             style={[
               styles.reactionItem,
               reactionItemStyle,
-              {
-                // temporary background color until we have theming
-                backgroundColor: colors.overlay,
-              },
+              { backgroundColor: colors.buttonSecondary },
               reactionsPicker.reactionItem,
             ]}
             onPress={() => {
@@ -159,7 +154,7 @@ export const ReactionsPicker = ({
         style={[
           reactionsButtonDimmerStyle,
           {
-            backgroundColor: colors.static_grey,
+            backgroundColor: colors.sheetSecondary,
           },
           reactionsPicker.reactionsButtonDimmer,
         ]}
@@ -169,22 +164,29 @@ export const ReactionsPicker = ({
   );
 };
 
-const styles = StyleSheet.create({
-  reactionsPopup: {
-    position: 'absolute',
-    alignItems: 'center',
-    paddingTop: TOP_PADDING,
-  },
-  reactionsButtonDimmer: {
-    position: 'absolute',
-    opacity: 0.5,
-  },
-  reactionItem: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginBottom: REACTION_MARGIN_BOTTOM,
-  },
-  reactionText: {
-    fontSize: 18.5,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        reactionsPopup: {
+          position: 'absolute',
+          alignItems: 'center',
+          paddingTop: theme.variants.spacingSizes.xs,
+        },
+        reactionsButtonDimmer: {
+          position: 'absolute',
+          opacity: 0.5,
+        },
+        reactionItem: {
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: theme.variants.spacingSizes.xs,
+        },
+        reactionText: {
+          fontSize: 18.5,
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -100,7 +100,7 @@ export const CallParticipantsGrid = ({
       style={[
         styles.container,
         landscapeStyles,
-        { backgroundColor: colors.dark_gray },
+        { backgroundColor: colors.sheetPrimary },
         callParticipantsGrid.container,
       ]}
       testID={ComponentTestIds.CALL_PARTICIPANTS_GRID}
@@ -118,7 +118,5 @@ export const CallParticipantsGrid = ({
 };
 
 const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
+  container: { flex: 1 },
 });

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   hasScreenShare,
   speakerLayoutSortPreset,
@@ -56,8 +56,9 @@ export const CallParticipantsSpotlight = ({
   disablePictureInPicture,
 }: CallParticipantsSpotlightProps) => {
   const {
-    theme: { colors, callParticipantsSpotlight },
+    theme: { callParticipantsSpotlight, variants },
   } = useTheme();
+  const styles = useStyles();
   const { useParticipants } = useCallStateHooks();
   const _allParticipants = useParticipants({
     sortBy: speakerLayoutSortPreset,
@@ -88,7 +89,7 @@ export const CallParticipantsSpotlight = ({
   };
 
   const spotlightContainerLandscapeStyles: ViewStyle = {
-    marginHorizontal: landscape ? 0 : 8,
+    marginHorizontal: landscape ? 0 : variants.spacingSizes.xs,
   };
 
   const showShareScreenOverlay =
@@ -102,9 +103,6 @@ export const CallParticipantsSpotlight = ({
       style={[
         styles.container,
         landscapeStyles,
-        {
-          backgroundColor: colors.dark_gray,
-        },
         callParticipantsSpotlight.container,
       ]}
     >
@@ -160,20 +158,28 @@ export const CallParticipantsSpotlight = ({
   );
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  fullScreenSpotlightContainer: {
-    flex: 1,
-  },
-  spotlightContainer: {
-    flex: 2,
-    overflow: 'hidden',
-    borderRadius: 10,
-    marginHorizontal: 8,
-  },
-  callParticipantsListContainer: {
-    flex: 1,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          flex: 1,
+          backgroundColor: theme.colors.sheetPrimary,
+        },
+        fullScreenSpotlightContainer: {
+          flex: 1,
+        },
+        spotlightContainer: {
+          flex: 2,
+          overflow: 'hidden',
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+          marginHorizontal: theme.variants.spacingSizes.sm,
+        },
+        callParticipantsListContainer: {
+          flex: 1,
+        },
+      }),
+    [theme]
+  );
+};

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -21,6 +21,7 @@ import {
   ParticipantViewProps,
 } from '../../Participant/ParticipantView';
 import { CallContentProps } from '../CallContent';
+import { useTheme } from '../../../contexts';
 
 type FlatListProps = React.ComponentProps<
   typeof FlatList<StreamVideoParticipant>
@@ -83,6 +84,7 @@ export const CallParticipantsList = ({
   supportedReactions,
   landscape,
 }: CallParticipantsListProps) => {
+  const styles = useStyles();
   const [containerLayout, setContainerLayout] = useState({
     width: 0,
     height: 0,
@@ -163,10 +165,15 @@ export const CallParticipantsList = ({
     participantsLength: participants.length,
     numberOfColumns,
     horizontal,
+    margin: styles.participant.margin,
   });
 
   const itemContainerStyle = useMemo<StyleProp<ViewStyle>>(() => {
-    const style = { width: itemWidth, height: itemHeight };
+    const style = {
+      width: itemWidth,
+      height: itemHeight,
+      margin: styles.participant.margin,
+    };
     if (horizontal) {
       return [styles.participantWrapperHorizontal, style];
     }
@@ -174,7 +181,7 @@ export const CallParticipantsList = ({
       return [styles.landScapeStyle, style];
     }
     return style;
-  }, [itemWidth, itemHeight, horizontal, landscape]);
+  }, [itemWidth, itemHeight, horizontal, landscape, styles]);
 
   const participantProps: ParticipantViewComponentProps = {
     ParticipantLabel,
@@ -251,19 +258,27 @@ export const CallParticipantsList = ({
   );
 };
 
-const styles = StyleSheet.create({
-  flexed: {
-    flex: 1,
-  },
-  participantWrapperHorizontal: {
-    // note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
-    marginHorizontal: 8,
-    borderRadius: 10,
-  },
-  landScapeStyle: {
-    borderRadius: 10,
-  },
-});
+const useStyles = () => {
+  const { theme } = useTheme();
+  return useMemo(
+    () =>
+      StyleSheet.create({
+        flexed: { flex: 1 },
+        participantWrapperHorizontal: {
+          // note: if marginHorizontal is changed, be sure to change the width calculation in calculateParticipantViewSize function
+          marginHorizontal: theme.variants.spacingSizes.sm,
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        landScapeStyle: {
+          borderRadius: theme.variants.borderRadiusSizes.sm,
+        },
+        participant: {
+          margin: theme.variants.spacingSizes.xs,
+        },
+      }),
+    [theme]
+  );
+};
 
 /**
  * This function calculates the size of the participant view based on the size of the container (the phone's screen size) and the number of participants.
@@ -280,12 +295,14 @@ function calculateParticipantViewSize({
   participantsLength,
   numberOfColumns,
   horizontal,
+  margin,
 }: {
   containerHeight: number;
   containerWidth: number;
   participantsLength: number;
   numberOfColumns: number;
   horizontal: boolean | undefined;
+  margin: number;
 }) {
   let itemHeight = containerHeight;
   // in vertical mode, we calculate the height of the participant view based on the containerHeight (aka the phone's screen height)
@@ -305,5 +322,7 @@ function calculateParticipantViewSize({
     itemWidth = itemWidth - 8 * 2;
   }
 
+  itemHeight = itemHeight - margin;
+  itemWidth = itemWidth - margin;
   return { itemHeight, itemWidth };
 }