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

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../../../theme';
+import { Video, VideoSlash } from '../../../icons';
+import { useMediaStreamManagement } from '../../../providers';
+
+/**
+ * Props for the Toggle Video preview button
+ */
+export type ToggleVideoPreviewButtonProps = {
+  /**
+   * Handler to be called when the the video preview button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+};
+
+/**
+ * Button to toggle video mute/unmute status before joining the call.
+ */
+export const ToggleVideoPreviewButton = ({
+  onPressHandler,
+}: ToggleVideoPreviewButtonProps) => {
+  const { initialVideoEnabled, toggleInitialVideoMuteState } =
+    useMediaStreamManagement();
+
+  const VideoIcon = !initialVideoEnabled ? (
+    <VideoSlash color={theme.light.static_white} />
+  ) : (
+    <Video color={theme.light.static_black} />
+  );
+
+  const toggleVideoPreviewHandler = () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
+    toggleInitialVideoMuteState();
+  };
+
+  return (
+    <CallControlsButton
+      onPress={toggleVideoPreviewHandler}
+      color={
+        initialVideoEnabled
+          ? theme.light.static_white
+          : theme.light.static_black
+      }
+      style={[
+        theme.button.md,
+        {
+          shadowColor: initialVideoEnabled
+            ? theme.light.static_white
+            : theme.light.static_black,
+        },
+      ]}
+    >
+      {VideoIcon}
+    </CallControlsButton>
+  );
+};

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

@@ -8,21 +8,36 @@ import {
 } from '@stream-io/video-react-bindings';
 import { CallControlsButton } from './CallControlsButton';
 import { muteStatusColor } from '../../../utils';
-import { Alert, StyleSheet } from 'react-native';
+import { Alert } from 'react-native';
 import { theme } from '../../../theme';
 import { Video, VideoSlash } from '../../../icons';
 import { usePermissionNotification } from '../../../hooks';
 import { useMediaStreamManagement } from '../../../providers';
 
-export const ToggleVideoButton = () => {
+/**
+ * Props for the Toggle Video publishing button
+ */
+export type ToggleVideoPublishingButtonProps = {
+  /**
+   * Handler to be called when the the video publishing button is pressed.
+   * @returns void
+   */
+  onPressHandler?: () => void;
+};
+
+/**
+ * Button to toggle video mute/unmute status while in the call.
+ */
+export const ToggleVideoPublishingButton = ({
+  onPressHandler,
+}: ToggleVideoPublishingButtonProps) => {
   const [isAwaitingApproval, setIsAwaitingApproval] = useState(false);
   const { isVideoMuted, toggleVideoMuted } = useMediaStreamManagement();
   const { t } = useI18n();
-
+  const call = useCall();
   const userHasSendVideoCapability = useHasPermissions(
     OwnCapability.SEND_VIDEO,
   );
-  const call = useCall();
 
   useEffect(() => {
     if (userHasSendVideoCapability) {
@@ -57,8 +72,12 @@ export const ToggleVideoButton = () => {
   });
 
   const handleToggleVideoButton = async () => {
+    if (onPressHandler) {
+      onPressHandler();
+      return;
+    }
     if (userHasSendVideoCapability) {
-      await toggleVideoMuted();
+      toggleVideoMuted();
       return;
     }
     if (!isAwaitingApproval) {
@@ -73,7 +92,6 @@ export const ToggleVideoButton = () => {
       <CallControlsButton
         onPress={handleToggleVideoButton}
         color={muteStatusColor(isVideoMuted)}
-        style={!isVideoMuted ? styles.button : null}
       >
         {isVideoMuted ? (
           <VideoSlash color={theme.light.static_white} />
@@ -84,21 +102,3 @@ export const ToggleVideoButton = () => {
     </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/call/CallControls/index.tsx

@@ -0,0 +1,11 @@
+export * from './AcceptCallButton';
+export * from './RejectCallButton';
+export * from './HangupCallButton';
+export * from './ToggleAudioPreviewButton';
+export * from './ToggleVideoPreviewButton';
+export * from './ToggleAudioPublishingButton';
+export * from './ToggleVideoPublishingButton';
+export * from './ToggleCameraFaceButton';
+export * from './ChatButton';
+export * from './ReactionButton';
+export * from './CallControls';

package/src/components/call/CallTopView/CallTopView.tsx

@@ -0,0 +1,130 @@
+import React, { useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  Text,
+  StyleProp,
+  ViewStyle,
+  Pressable,
+} from 'react-native';
+import { ParticipantsInfoBadge } from './ParticipantsInfoBadge';
+import { theme } from '../../../theme';
+import { Back } from '../../../icons/Back';
+import { Z_INDEX } from '../../../constants';
+import { TopViewBackground } from '../../../icons';
+import { useCallStateHooks, useI18n } from '@stream-io/video-react-bindings';
+import { CallingState } from '@stream-io/video-client';
+
+export type CallTopViewProps = {
+  /**
+   * Handler to be called when the back button is pressed in the CallTopView.
+   * @returns void
+   */
+  onBackPressed?: () => void;
+  /**
+   * Handler to be called when the Participant icon is pressed in the CallTopView.
+   * @returns
+   */
+  onParticipantInfoPress?: () => void;
+  /**
+   * Title to be rendered at the center of the Header.
+   */
+  title?: string;
+  /**
+   * Style to override the container of the CallTopView.
+   */
+  style?: StyleProp<ViewStyle>;
+};
+
+export const CallTopView = ({
+  onBackPressed,
+  onParticipantInfoPress,
+  title,
+  style,
+}: CallTopViewProps) => {
+  const { useCallCallingState } = useCallStateHooks();
+  const callingState = useCallCallingState();
+  const { t } = useI18n();
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
+  const isCallReconnecting = callingState === CallingState.RECONNECTING;
+
+  const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
+    const { height } = event.nativeEvent.layout;
+    setHeaderHeight(height);
+  };
+
+  return (
+    <View style={[styles.container, style]}>
+      {/* Component for the background of the CallTopView. Since it has a Linear Gradient, an SVG is used to render it. */}
+      <TopViewBackground height={headerHeight} width={'100%'} />
+      <View style={styles.topView} onLayout={onLayout}>
+        <View style={styles.leftElement}>
+          {onBackPressed && (
+            <Pressable
+              style={({ pressed }) => [
+                theme.icon.md,
+                styles.backIcon,
+                { opacity: pressed ? 0.2 : 1 },
+              ]}
+              onPress={onBackPressed}
+            >
+              <Back color={theme.light.static_white} />
+            </Pressable>
+          )}
+        </View>
+        <View style={styles.centerElement}>
+          {title ? (
+            <Text style={styles.title} numberOfLines={1}>
+              {title}
+            </Text>
+          ) : (
+            isCallReconnecting && (
+              <Text style={styles.title}>{t('Reconnecting...')}</Text>
+            )
+          )}
+        </View>
+        <View style={styles.rightElement}>
+          <ParticipantsInfoBadge
+            onParticipantInfoPress={onParticipantInfoPress}
+          />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: Z_INDEX.IN_FRONT,
+    position: 'absolute',
+    left: 0,
+    right: 0,
+  },
+  topView: {
+    position: 'absolute',
+    flexDirection: 'row',
+    paddingVertical: theme.padding.lg,
+    alignItems: 'center',
+  },
+  backIcon: {
+    // Added to compensate the participant badge surface area
+    marginLeft: theme.margin.sm,
+  },
+  leftElement: {
+    flex: 1,
+    alignItems: 'flex-start',
+  },
+  centerElement: {
+    flex: 1,
+    alignItems: 'center',
+    flexGrow: 3,
+  },
+  rightElement: {
+    flex: 1,
+    alignItems: 'flex-end',
+  },
+  title: {
+    ...theme.fonts.subtitleBold,
+    color: theme.light.static_white,
+  },
+});

package/src/components/call/CallTopView/ParticipantsInfoBadge.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Participants } from '../../../icons';
+import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { theme } from '../../../theme';
+import { Z_INDEX } from '../../../constants';
+import { CallTopViewProps } from '..';
+
+export type ParticipantsInfoBadgeProps = Pick<
+  CallTopViewProps,
+  'onParticipantInfoPress'
+>;
+
+/**
+ * Badge that shows the number of participants in the call.
+ * When pressed, it opens the ParticipantsInfoList.
+ */
+export const ParticipantsInfoBadge = ({
+  onParticipantInfoPress,
+}: ParticipantsInfoBadgeProps) => {
+  const { useParticipantCount } = useCallStateHooks();
+  const participantCount = useParticipantCount();
+
+  return (
+    <Pressable
+      onPress={onParticipantInfoPress}
+      style={({ pressed }) => [
+        { ...styles.container, opacity: pressed ? 0.2 : 1 },
+      ]}
+      disabled={!onParticipantInfoPress}
+    >
+      <View style={theme.icon.md}>
+        <Participants color={theme.light.static_white} />
+      </View>
+      <View style={styles.badge}>
+        <Text style={styles.badgeText}>{participantCount}</Text>
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  },
+  badge: {
+    justifyContent: 'center',
+    paddingHorizontal: theme.padding.sm,
+    backgroundColor: theme.light.text_low_emphasis,
+    borderRadius: theme.rounded.xl,
+    zIndex: Z_INDEX.IN_FRONT,
+    bottom: theme.spacing.xl,
+    right: theme.spacing.xl,
+  },
+  badgeText: {
+    includeFontPadding: false,
+    color: theme.light.static_white,
+    textAlign: 'center',
+    ...theme.fonts.subtitle,
+  },
+});

package/src/components/call/CallTopView/index.ts

@@ -0,0 +1,2 @@
+export * from './CallTopView';
+export * from './ParticipantsInfoBadge';

package/src/components/call/IncomingCall.tsx

@@ -1,17 +1,15 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { ImageBackground, StyleSheet, Text, View } from 'react-native';
-import { CallControlsButton } from '../utility/internal/CallControlsButton';
 import {
-  useCall,
   useCallStateHooks,
   useConnectedUser,
   useI18n,
 } from '@stream-io/video-react-bindings';
 import { UserInfo } from './internal/UserInfo';
-import { Phone, PhoneDown, Video, VideoSlash } from '../../icons';
 import { theme } from '../../theme';
-import { useMediaStreamManagement } from '../../providers/MediaStreamManagement';
-import { CallingState } from '@stream-io/video-client';
+import { RejectCallButton } from './CallControls/RejectCallButton';
+import { AcceptCallButton } from './CallControls/AcceptCallButton';
+import { ToggleVideoPreviewButton } from './CallControls/ToggleVideoPreviewButton';
 
 /**
  * The props for the Accept Call button in the IncomingCall component.
@@ -57,42 +55,8 @@ export const IncomingCall = ({
   acceptCallButton,
   rejectCallButton,
 }: IncomingCallType) => {
-  const { toggleInitialVideoMuteState, initialVideoEnabled } =
-    useMediaStreamManagement();
-  const call = useCall();
-  const { useCallCallingState } = useCallStateHooks();
-  const callingState = useCallCallingState();
   const { t } = useI18n();
 
-  const acceptCallHandler = useCallback(async () => {
-    if (acceptCallButton?.onPressHandler) {
-      acceptCallButton.onPressHandler();
-      return;
-    }
-    try {
-      await call?.join();
-    } catch (error) {
-      console.log('Error joining Call', error);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [call]);
-
-  const rejectCallHandler = useCallback(async () => {
-    if (rejectCallButton?.onPressHandler) {
-      rejectCallButton.onPressHandler();
-      return;
-    }
-    try {
-      if (callingState === CallingState.LEFT) {
-        return;
-      }
-      await call?.leave({ reject: true });
-    } catch (error) {
-      console.log('Error rejecting Call', error);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [call]);
-
   return (
     <Background>
       <View style={styles.content}>
@@ -101,38 +65,9 @@ export const IncomingCall = ({
       </View>
 
       <View style={styles.buttonGroup}>
-        <CallControlsButton
-          onPress={rejectCallHandler}
-          color={theme.light.error}
-          style={[styles.button, theme.button.lg]}
-          svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
-        >
-          <PhoneDown color={theme.light.static_white} />
-        </CallControlsButton>
-        <CallControlsButton
-          onPress={toggleInitialVideoMuteState}
-          color={
-            initialVideoEnabled
-              ? theme.light.static_white
-              : theme.light.overlay_dark
-          }
-          style={[styles.button, theme.button.lg]}
-          svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
-        >
-          {!initialVideoEnabled ? (
-            <VideoSlash color={theme.light.static_white} />
-          ) : (
-            <Video color={theme.light.static_black} />
-          )}
-        </CallControlsButton>
-        <CallControlsButton
-          onPress={acceptCallHandler}
-          color={theme.light.info}
-          style={[styles.button, theme.button.lg]}
-          svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
-        >
-          <Phone color={theme.light.static_white} />
-        </CallControlsButton>
+        <RejectCallButton onPressHandler={rejectCallButton?.onPressHandler} />
+        <ToggleVideoPreviewButton />
+        <AcceptCallButton onPressHandler={acceptCallButton?.onPressHandler} />
       </View>
     </Background>
   );
@@ -186,9 +121,6 @@ const styles = StyleSheet.create({
   },
   buttonGroup: {
     flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingHorizontal: theme.padding.xl,
+    justifyContent: 'space-evenly',
   },
-  button: {},
-  svgContainerStyle: {},
 });

package/src/components/call/Lobby.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import { Pressable, StyleSheet, Text, View } from 'react-native';
-import { Mic, MicOff, Video, VideoSlash } from '../../icons';
+import { MicOff } from '../../icons';
 import {
   useCall,
   useCallStateHooks,
   useConnectedUser,
   useI18n,
 } from '@stream-io/video-react-bindings';
-import { CallControlsButton } from '../utility/internal/CallControlsButton';
 import { theme } from '../../theme';
 import { useLocalVideoStream } from '../../hooks';
 import { VideoRenderer } from '../utility/internal/VideoRenderer';
@@ -15,6 +14,8 @@ import { Avatar } from '../utility/Avatar';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 import { LOCAL_VIDEO_VIEW_STYLE } from '../../constants';
 import { useMediaStreamManagement } from '../../providers/MediaStreamManagement';
+import { ToggleAudioPreviewButton } from './CallControls/ToggleAudioPreviewButton';
+import { ToggleVideoPreviewButton } from './CallControls/ToggleVideoPreviewButton';
 
 /**
  * Use this view prior to joining a call.
@@ -44,13 +45,8 @@ type LobbyProps = {
 export const Lobby = ({ joinCallButton }: LobbyProps) => {
   const localVideoStream = useLocalVideoStream();
   const connectedUser = useConnectedUser();
-  const {
-    initialAudioEnabled,
-    initialVideoEnabled,
-    toggleInitialAudioMuteState,
-    toggleInitialVideoMuteState,
-    isCameraOnFrontFacingMode,
-  } = useMediaStreamManagement();
+  const { initialVideoEnabled, isCameraOnFrontFacingMode } =
+    useMediaStreamManagement();
   const isVideoAvailable = !!localVideoStream && initialVideoEnabled;
   const call = useCall();
   const { useCallMetadata } = useCallStateHooks();
@@ -58,27 +54,12 @@ export const Lobby = ({ joinCallButton }: LobbyProps) => {
   const { t } = useI18n();
   const participantsCount = callMetadata?.session?.participants.length;
 
-  const MicIcon = !initialAudioEnabled ? (
-    <MicOff color={theme.light.static_white} />
-  ) : (
-    <Mic color={theme.light.static_black} />
-  );
-  const VideoIcon = !initialVideoEnabled ? (
-    <VideoSlash color={theme.light.static_white} />
-  ) : (
-    <Video color={theme.light.static_black} />
-  );
-
   const connectedUserAsParticipant = {
     userId: connectedUser?.id,
     image: connectedUser?.image,
     name: connectedUser?.name,
   } as StreamVideoParticipant;
 
-  const muteStatusColor = (muted: boolean) => {
-    return muted ? theme.light.static_black : theme.light.static_white;
-  };
-
   return (
     <View style={styles.container}>
       <View style={styles.content}>
@@ -103,32 +84,8 @@ export const Lobby = ({ joinCallButton }: LobbyProps) => {
               <ParticipantStatus />
             </View>
             <View style={styles.buttonGroup}>
-              <CallControlsButton
-                onPress={toggleInitialAudioMuteState}
-                color={muteStatusColor(!initialAudioEnabled)}
-                style={[
-                  styles.button,
-                  theme.button.md,
-                  {
-                    shadowColor: muteStatusColor(!initialAudioEnabled),
-                  },
-                ]}
-              >
-                {MicIcon}
-              </CallControlsButton>
-              <CallControlsButton
-                onPress={toggleInitialVideoMuteState}
-                color={muteStatusColor(!initialVideoEnabled)}
-                style={[
-                  styles.button,
-                  theme.button.md,
-                  {
-                    shadowColor: muteStatusColor(!initialVideoEnabled),
-                  },
-                ]}
-              >
-                {VideoIcon}
-              </CallControlsButton>
+              <ToggleAudioPreviewButton />
+              <ToggleVideoPreviewButton />
             </View>
           </>
         )}
@@ -182,17 +139,18 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   content: {
-    alignItems: 'center',
     paddingHorizontal: theme.padding.md,
   },
   heading: {
     color: theme.light.static_white,
     ...theme.fonts.heading4,
+    textAlign: 'center',
   },
   subHeading: {
     color: theme.light.text_low_emphasis,
     ...theme.fonts.subtitle,
     marginBottom: theme.margin.sm,
+    textAlign: 'center',
   },
   videoView: {
     backgroundColor: theme.light.disabled,
@@ -208,12 +166,9 @@ const styles = StyleSheet.create({
   topView: {},
   buttonGroup: {
     flexDirection: 'row',
-    justifyContent: 'center',
+    justifyContent: 'space-evenly',
     marginBottom: theme.margin.md,
   },
-  button: {
-    marginHorizontal: theme.margin.sm,
-  },
   info: {
     backgroundColor: theme.light.static_overlay,
     padding: theme.padding.md,

package/src/components/call/OutgoingCall.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 import { UserInfo } from './internal/UserInfo';
-import { CallControlsButton } from '../utility/internal/CallControlsButton';
-import { Mic, MicOff, Video, VideoSlash } from '../../icons';
 import { VideoRenderer } from '../utility/internal/VideoRenderer';
 import { useLocalVideoStream } from '../../hooks/useLocalVideoStream';
 import { theme } from '../../theme';
@@ -11,8 +9,10 @@ import { useMediaStreamManagement } from '../../providers/MediaStreamManagement'
 import {
   HangUpCallButton,
   HangUpCallButtonProps,
-} from '../utility/internal/HangupCallButton';
+} from './CallControls/HangupCallButton';
 import { useI18n } from '@stream-io/video-react-bindings';
+import { ToggleAudioPreviewButton } from './CallControls/ToggleAudioPreviewButton';
+import { ToggleVideoPreviewButton } from './CallControls/ToggleVideoPreviewButton';
 
 /**
  * Props for the OutgoingCall Component.
@@ -29,16 +29,7 @@ export type OutgoingCallProps = {
  * Used after the user has initiated a call.
  */
 export const OutgoingCall = ({ hangupCallButton }: OutgoingCallProps) => {
-  const {
-    initialAudioEnabled,
-    initialVideoEnabled,
-    toggleInitialAudioMuteState,
-    toggleInitialVideoMuteState,
-  } = useMediaStreamManagement();
   const { t } = useI18n();
-  const muteStatusColor = (status: boolean) => {
-    return status ? theme.light.overlay_dark : theme.light.static_white;
-  };
 
   return (
     <>
@@ -49,30 +40,8 @@ export const OutgoingCall = ({ hangupCallButton }: OutgoingCallProps) => {
         </View>
         <View style={styles.buttonGroup}>
           <View style={styles.deviceControlButtons}>
-            <CallControlsButton
-              onPress={toggleInitialAudioMuteState}
-              color={muteStatusColor(!initialAudioEnabled)}
-              style={[styles.button, theme.button.lg]}
-              svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
-            >
-              {!initialAudioEnabled ? (
-                <MicOff color={theme.light.static_white} />
-              ) : (
-                <Mic color={theme.light.static_black} />
-              )}
-            </CallControlsButton>
-            <CallControlsButton
-              onPress={toggleInitialVideoMuteState}
-              color={muteStatusColor(!initialVideoEnabled)}
-              style={[styles.button, theme.button.lg]}
-              svgContainerStyle={[styles.svgContainerStyle, theme.icon.lg]}
-            >
-              {!initialVideoEnabled ? (
-                <VideoSlash color={theme.light.static_white} />
-              ) : (
-                <Video color={theme.light.static_black} />
-              )}
-            </CallControlsButton>
+            <ToggleAudioPreviewButton />
+            <ToggleVideoPreviewButton />
           </View>
           <HangUpCallButton
             onPressHandler={hangupCallButton?.onPressHandler}
@@ -131,6 +100,4 @@ const styles = StyleSheet.create({
   cancelCallButton: {
     alignSelf: 'center',
   },
-  button: {},
-  svgContainerStyle: {},
 });