@stream-io/video-react-native-sdk 0.0.1-alpha.141

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@stream-io/video-react-native-sdk",
+  "packageManager": "yarn@3.2.4",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "license": "See license in LICENSE",
+  "scripts": {
+    "clean": "rimraf dist",
+    "start": "tsc --project tsconfig.json --watch",
+    "build": "tsc --project tsconfig.json",
+    "test": "jest --coverage",
+    "generate-docs": "../../scripts/generate-docs.sh reactnative @stream-io/video-react-native-sdk react-native-sdk"
+  },
+  "files": [
+    "dist",
+    "src",
+    "index.ts",
+    "package.json",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@stream-io/i18n": "^0.0.2",
+    "@stream-io/video-client": "^0.0.8",
+    "@stream-io/video-react-bindings": "^0.0.8"
+  },
+  "peerDependencies": {
+    "@react-native-community/netinfo": ">=9.0.0",
+    "react": ">=17.0.0",
+    "react-native": ">=0.67.0",
+    "react-native-callkeep": ">=4.3.4",
+    "react-native-incall-manager": "^4.0.0",
+    "react-native-svg": ">=13.6.0",
+    "react-native-webrtc": ">=111.0.1"
+  },
+  "peerDependenciesMeta": {
+    "react-native-callkeep": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@babel/preset-typescript": "^7.21.5",
+    "@react-native-community/eslint-config": "^3.2.0",
+    "@react-native-community/netinfo": "9.3.9",
+    "@testing-library/jest-native": "^5.4.2",
+    "@testing-library/react-native": "^12.1.2",
+    "@types/jest": "^29.5.1",
+    "@types/react": "18.0.26",
+    "@types/react-native": "^0.70.4",
+    "@types/react-native-incall-manager": "^3.2.1",
+    "@types/react-test-renderer": "^18",
+    "@types/rimraf": "^3.0.2",
+    "jest": "^29.5.0",
+    "react-native": "^0.71.8",
+    "react-native-callkeep": "^4.3.4",
+    "react-native-incall-manager": "^4.0.0",
+    "react-native-svg": "^13.6.0",
+    "react-native-webrtc": "~106.0.4",
+    "react-test-renderer": "^18.2.0",
+    "replace-in-file": "^6.3.5",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^29.1.0",
+    "ts-node": "^10.9.1",
+    "typedoc": "^0.24.7",
+    "typedoc-plugin-markdown": "^3.15.3",
+    "typescript": "^4.9.5"
+  },
+  "version": "0.0.1-alpha.141"
+}

package/src/components/ActiveCall.tsx

@@ -0,0 +1,122 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  useCall,
+  useHasOngoingScreenShare,
+} from '@stream-io/video-react-bindings';
+import { StyleSheet, View } from 'react-native';
+import { CallControlsView } from './CallControlsView';
+import { CallParticipantsView } from './CallParticipantsView';
+import { CallParticipantsSpotlightView } from './CallParticipantsSpotlightView';
+import { theme } from '../theme';
+import { useIncallManager } from '../hooks/useIncallManager';
+import { usePublishMediaStreams } from '../hooks/usePublishMediaStreams';
+import { usePermissionRequest } from '../hooks/usePermissionRequest';
+import { CallParticipantsBadge } from './CallParticipantsBadge';
+import { verifyAndroidBluetoothPermissions } from '../utils/verifyAndroidBluetoothPermissions';
+import { CallingState } from '@stream-io/video-client';
+
+/**
+ * Props to be passed for the ActiveCall component.
+ */
+export interface ActiveCallProps {
+  /**
+   * The mode of the call view. Defaults to 'grid'.
+   * Note: when there is atleast one screen share, the mode is automatically set to 'spotlight'.
+   */
+  mode?: 'grid' | 'spotlight';
+}
+/**
+ * View for an active call, includes call controls and participant handling.
+ *
+ * | 2 Participants | 3 Participants | 4 Participants | 5 Participants |
+ * | :--- | :--- | :--- | :----: |
+ * |![active-call-2](https://user-images.githubusercontent.com/25864161/217351458-6cb4b0df-6071-45f5-89b6-fe650d950502.png) | ![active-call-3](https://user-images.githubusercontent.com/25864161/217351461-908a1887-7cf0-4945-bedd-d6598902be2d.png) | ![active-call-4](https://user-images.githubusercontent.com/25864161/217351465-b2a22178-7593-4639-96dd-6fb692af2dc5.png) | ![active-call-5](https://user-images.githubusercontent.com/25864161/217351453-6547b0a3-4ecc-435f-b2d9-7d511d5d0328.png) |
+ */
+
+export const ActiveCall = (props: ActiveCallProps) => {
+  const activeCall = useCall();
+  const activeCallRef = useRef(activeCall);
+  activeCallRef.current = activeCall;
+
+  useEffect(() => {
+    // when the component mounts, we ask for necessary permissions.
+    verifyAndroidBluetoothPermissions();
+
+    return () => {
+      if (activeCallRef.current?.state.callingState !== CallingState.LEFT) {
+        activeCallRef.current?.leave();
+      }
+    };
+  }, []);
+
+  if (!activeCall) {
+    return null;
+  }
+  return <InnerActiveCall {...props} />;
+};
+
+const InnerActiveCall = (props: ActiveCallProps) => {
+  const [height, setHeight] = useState(0);
+  const { mode = 'grid' } = props;
+  const hasScreenShare = useHasOngoingScreenShare();
+
+  useIncallManager({ media: 'video', auto: true });
+  usePublishMediaStreams();
+  usePermissionRequest();
+
+  const onLayout: React.ComponentProps<typeof View>['onLayout'] = (event) => {
+    setHeight(
+      // we're saving the CallControlsView height and subtracting an amount of padding.
+      // this is done to get the CallParticipants(Screen)View neatly underneath the
+      // rounded corners of the CallControlsView.
+      Math.trunc(event.nativeEvent.layout.height - theme.spacing.lg * 2),
+    );
+  };
+
+  const showSpotLightModeView = mode === 'spotlight' || hasScreenShare;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.iconGroup}>
+        <CallParticipantsBadge />
+      </View>
+
+      <View
+        style={[
+          styles.callParticipantsWrapper,
+          { paddingBottom: height + theme.padding.lg },
+        ]}
+      >
+        {showSpotLightModeView ? (
+          <CallParticipantsSpotlightView />
+        ) : (
+          <CallParticipantsView />
+        )}
+      </View>
+      <View onLayout={onLayout} style={styles.callControlsWrapper}>
+        <CallControlsView />
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.light.static_grey,
+  },
+  callParticipantsWrapper: { flex: 1 },
+  callControlsWrapper: { position: 'absolute', bottom: 0, left: 0, right: 0 },
+  svgContainerStyle: {
+    zIndex: 2,
+    marginRight: theme.margin.md,
+    marginTop: theme.margin.sm,
+  },
+  iconGroup: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignSelf: 'flex-end',
+    alignItems: 'center',
+    marginRight: theme.margin.md,
+  },
+});

package/src/components/Avatar.tsx

@@ -0,0 +1,88 @@
+import { Image, StyleSheet, Text, View } from 'react-native';
+import React from 'react';
+import type { StreamVideoParticipant } from '@stream-io/video-client';
+import { getInitialsOfName } from '../utils';
+import { theme } from '../theme';
+import { A11yComponents, A11yImages } from '../constants/A11yLabels';
+
+/**
+ * Props to be passed for the Avatar component.
+ */
+export interface AvatarProps {
+  /**
+   * The participant of which the avatar will be rendered
+   */
+  participant: StreamVideoParticipant;
+  /**
+   * The radius of the avatar
+   * @defaultValue
+   * The default value is `100`
+   */
+  radius?: number;
+}
+
+const DEFAULT_AVATAR_RADIUS = theme.avatar.sm;
+
+/**
+ * Shows either user's image or initials based on the user state and existence of
+ * their image.
+ *
+ * | User's Image | User's Initials |
+ * | :--- | :----: |
+ * |![avatar-1](https://user-images.githubusercontent.com/25864161/217467045-2d4c8b4e-d4ec-48c1-8ede-4468854826af.png) | ![avatar-2](https://user-images.githubusercontent.com/25864161/217467043-e7a7f2a1-70a7-4d83-8d1e-6463391194ae.png)|
+ */
+export const Avatar = (props: AvatarProps) => {
+  const {
+    participant: { userId, image, name },
+    radius = DEFAULT_AVATAR_RADIUS,
+  } = props;
+
+  const userDetails = name || userId;
+  const userLabel = userDetails ? getInitialsOfName(userDetails) : '?';
+
+  const imageUrl = image;
+  return (
+    <View
+      accessibilityLabel={A11yComponents.PARTICIPANT_AVATAR}
+      style={{
+        ...styles.container,
+        borderRadius: radius / 2,
+        height: radius,
+        width: radius,
+      }}
+    >
+      {imageUrl ? (
+        <Image
+          accessibilityLabel={A11yImages.AVATAR}
+          source={{
+            uri: imageUrl,
+          }}
+          style={styles.image}
+        />
+      ) : (
+        <Text
+          style={{ ...styles.text, fontSize: radius / 2 }}
+          numberOfLines={1}
+        >
+          {userLabel}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: theme.light.primary,
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+  image: {
+    flex: 1,
+  },
+  text: {
+    color: theme.light.bars,
+    textAlign: 'center',
+    ...theme.fonts.heading4,
+  },
+});

package/src/components/CallControlsButton.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import {
+  Pressable,
+  PressableProps,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
+import { theme } from '../theme';
+
+interface CallControlsButtonProps {
+  /**
+   * `onPress` handler called when a single tap gesture is detected.
+   */
+  onPress?: PressableProps['onPress'];
+  /**
+   * The background color of the button rendered.
+   */
+  color?: string;
+  /**
+   * Style to the Pressable button.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Style of the SVG rendered inside the button.
+   */
+  svgContainerStyle?: StyleProp<ViewStyle>;
+}
+
+const DEFAULT_ICON_SIZE = theme.icon.md;
+const DEFAULT_BUTTON_SIZE = theme.button.sm;
+
+export const CallControlsButton = (
+  props: React.PropsWithChildren<CallControlsButtonProps>,
+) => {
+  const { onPress, children, color, style, svgContainerStyle } = props;
+
+  const pressableStyle: PressableProps['style'] = ({ pressed }) => [
+    DEFAULT_BUTTON_SIZE,
+    styles.container,
+    {
+      backgroundColor: color,
+      opacity: pressed ? 0.2 : 1,
+    },
+    style ? style : null,
+  ];
+
+  return (
+    <Pressable style={pressableStyle} onPress={onPress}>
+      <View
+        style={[
+          styles.svgContainerStyle,
+          DEFAULT_ICON_SIZE,
+          svgContainerStyle ?? null,
+        ]}
+      >
+        {children}
+      </View>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: theme.light.content_bg,
+    alignItems: 'center',
+  },
+  svgContainerStyle: {},
+});

package/src/components/CallControlsView.tsx

@@ -0,0 +1,128 @@
+import { StyleSheet, View } from 'react-native';
+import { useCallControls } from '../hooks/useCallControls';
+import { CameraSwitch, Chat, PhoneDown, Reaction } from '../icons';
+import { CallControlsButton } from './CallControlsButton';
+import { theme } from '../theme';
+import { CallingState, OwnCapability } from '@stream-io/video-client';
+import {
+  Restricted,
+  useCall,
+  useCallCallingState,
+} from '@stream-io/video-react-bindings';
+import { useCallback, useState } from 'react';
+import { ReactionModal } from './ReactionsModal';
+import { ToggleAudioButton } from './ToggleAudioButton';
+import { ToggleVideoButton } from './ToggleVideoButton';
+
+/**
+ * Shows a list/row of controls (mute audio/video, toggle front/back camera, hangup call etc.)
+ * the user can trigger within an active call.
+ *
+ * | Call Controls |
+ * | :--- |
+ * | ![call-controls-view](https://user-images.githubusercontent.com/25864161/217349666-af0f3278-393e-449d-b30e-2d1b196abe5e.png) |
+ */
+export const CallControlsView = () => {
+  const [isReactionModalActive, setIsReactionModalActive] =
+    useState<boolean>(false);
+
+  const { isCameraOnFrontFacingMode, toggleCameraFacingMode } =
+    useCallControls();
+  const call = useCall();
+  const callingState = useCallCallingState();
+
+  const onCallHangup = async () => {
+    try {
+      if (callingState === CallingState.LEFT) return;
+      await call?.leave();
+    } catch (err) {
+      console.log('Error Leaving call:', err);
+    }
+  };
+
+  const muteStatusColor = (status: boolean) => {
+    return status ? theme.light.overlay_dark : theme.light.static_white;
+  };
+
+  const onOpenReactionsModalHandler = useCallback(() => {
+    setIsReactionModalActive(true);
+  }, [setIsReactionModalActive]);
+
+  return (
+    <View style={styles.container}>
+      <Restricted requiredGrants={[OwnCapability.CREATE_REACTION]}>
+        <CallControlsButton
+          onPress={onOpenReactionsModalHandler}
+          color={theme.light.static_white}
+          style={styles.button}
+        >
+          <Reaction color={theme.light.static_black} />
+        </CallControlsButton>
+      </Restricted>
+      <ReactionModal
+        isReactionModalActive={isReactionModalActive}
+        setIsReactionModalActive={setIsReactionModalActive}
+      />
+      <CallControlsButton
+        color={theme.light.static_white}
+        onPress={() => null}
+        svgContainerStyle={styles.svgContainerStyle}
+        style={styles.button}
+      >
+        <Chat color={theme.light.static_black} />
+      </CallControlsButton>
+      <ToggleVideoButton />
+      <ToggleAudioButton />
+      <Restricted requiredGrants={[OwnCapability.SEND_VIDEO]}>
+        <CallControlsButton
+          onPress={toggleCameraFacingMode}
+          color={muteStatusColor(!isCameraOnFrontFacingMode)}
+          style={isCameraOnFrontFacingMode ? styles.button : null}
+        >
+          <CameraSwitch
+            color={
+              isCameraOnFrontFacingMode
+                ? theme.light.static_black
+                : theme.light.static_white
+            }
+          />
+        </CallControlsButton>
+      </Restricted>
+      <CallControlsButton
+        onPress={onCallHangup}
+        color={theme.light.error}
+        style={[styles.button, { shadowColor: theme.light.error }]}
+      >
+        <PhoneDown color={theme.light.static_white} />
+      </CallControlsButton>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    paddingVertical: theme.padding.lg,
+    paddingHorizontal: theme.padding.md,
+    borderTopLeftRadius: theme.rounded.lg,
+    borderTopRightRadius: theme.rounded.lg,
+    backgroundColor: theme.light.controls_bg,
+    zIndex: 2,
+  },
+  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/CallParticipantsBadge.tsx

@@ -0,0 +1,57 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { Participants } from '../icons';
+import { useParticipantCount } from '@stream-io/video-react-bindings';
+import { theme } from '../theme';
+import { useCallback, useState } from 'react';
+import { CallParticipantsInfoView } from './CallParticipantsInfoView';
+import { A11yButtons } from '../constants/A11yLabels';
+
+export const CallParticipantsBadge = () => {
+  const participantCount = useParticipantCount();
+  const [isCallParticipantsViewVisible, setIsCallParticipantsViewVisible] =
+    useState<boolean>(false);
+
+  const onOpenCallParticipantsInfoView = useCallback(() => {
+    setIsCallParticipantsViewVisible(true);
+  }, [setIsCallParticipantsViewVisible]);
+
+  return (
+    <Pressable
+      style={styles.participantIcon}
+      onPress={onOpenCallParticipantsInfoView}
+      accessibilityLabel={A11yButtons.PARTICIPANTS_INFO}
+    >
+      <View style={styles.badge}>
+        <Text style={styles.badgeText}>{participantCount}</Text>
+      </View>
+      <View style={[styles.svgContainerStyle, theme.icon.md]}>
+        <Participants color={theme.light.static_white} />
+      </View>
+      <CallParticipantsInfoView
+        isCallParticipantsViewVisible={isCallParticipantsViewVisible}
+        setIsCallParticipantsViewVisible={setIsCallParticipantsViewVisible}
+      />
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  participantIcon: {
+    zIndex: 2,
+  },
+  svgContainerStyle: {},
+  badge: {
+    backgroundColor: theme.light.text_low_emphasis,
+    borderRadius: theme.rounded.xl,
+    padding: theme.padding.xs,
+    position: 'relative',
+    left: theme.spacing.lg,
+    top: theme.spacing.lg,
+    zIndex: 2,
+  },
+  badgeText: {
+    color: theme.light.static_white,
+    textAlign: 'center',
+    ...theme.fonts.caption,
+  },
+});