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

package/src/hooks/useCallControls.tsx

@@ -0,0 +1,186 @@
+import {
+  CallingState,
+  getAudioStream,
+  getVideoStream,
+  SfuModels,
+  Call,
+} from '@stream-io/video-client';
+import { useCall, useLocalParticipant } from '@stream-io/video-react-bindings';
+import { useCallback, useEffect, useRef } from 'react';
+import {
+  useStreamVideoStoreSetState,
+  useStreamVideoStoreValue,
+} from '../contexts';
+import { useAppStateListener } from '../utils/hooks/useAppStateListener';
+import NetInfo from '@react-native-community/netinfo';
+
+/**
+ * A helper hook which exposes audio, video mute and camera facing mode and
+ * their respective functions to toggle state
+ *
+ * @category Device Management
+ */
+export const useCallControls = () => {
+  const localParticipant = useLocalParticipant();
+  const call = useCall();
+  /** Refs to keep track of the current call and whether the user is online or not */
+  const callRef = useRef(call);
+  callRef.current = call;
+  const isOnlineRef = useRef(true);
+
+  const setState = useStreamVideoStoreSetState();
+  const isCameraOnFrontFacingMode = useStreamVideoStoreValue(
+    (store) => store.isCameraOnFrontFacingMode,
+  );
+  const currentAudioDevice = useStreamVideoStoreValue(
+    (store) => store.currentAudioDevice,
+  );
+  const videoDevices = useStreamVideoStoreValue((store) => store.videoDevices);
+  const currentVideoDevice = useStreamVideoStoreValue(
+    (store) => store.currentVideoDevice,
+  );
+
+  const publishAudioStream = useCallback(async () => {
+    try {
+      // Client picks up the default audio stream.
+      // For mobile devices there will always be one audio input
+      if (currentAudioDevice && isOnlineRef.current) {
+        const audioStream = await getAudioStream(currentAudioDevice.deviceId);
+        if (call) {
+          await call.publishAudioStream(audioStream);
+        }
+      }
+    } catch (e) {
+      console.log('Failed to publish audio stream', e);
+    }
+  }, [currentAudioDevice, call]);
+
+  const publishVideoStream = useCallback(async () => {
+    try {
+      if (currentVideoDevice && isOnlineRef.current) {
+        const videoStream = await getVideoStream(currentVideoDevice.deviceId);
+        if (call) {
+          await call.publishVideoStream(videoStream);
+        }
+      }
+    } catch (e) {
+      console.log('Failed to publish video stream', e);
+    }
+  }, [call, currentVideoDevice]);
+
+  const isAudioPublished = localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.AUDIO,
+  );
+  const isVideoPublished = localParticipant?.publishedTracks.includes(
+    SfuModels.TrackType.VIDEO,
+  );
+  /** Refs to keep track of whether the user has published the track before going offline  */
+  const isAudioPublishedRef = useRef(false);
+  const isVideoPublishedRef = useRef(false);
+  isAudioPublishedRef.current = !isAudioPublished;
+  isVideoPublishedRef.current = !isVideoPublished;
+
+  /** Refs to be used for useEffect that does the rejoining flow when coming back offline */
+  const publishAudioStreamRef = useRef(publishAudioStream);
+  const publishVideoStreamRef = useRef(publishVideoStream);
+  publishAudioStreamRef.current = publishAudioStream;
+  publishVideoStreamRef.current = publishVideoStream;
+
+  /** Attempt to republish video stream when app comes back to foreground */
+  useAppStateListener(
+    isVideoPublishedRef.current ? publishVideoStream : undefined,
+  );
+
+  /**
+   * Effect to re-join to an existing call happens in case the user comes back online
+   */
+  useEffect(() => {
+    const unsubscribe = NetInfo.addEventListener(async (state) => {
+      const { isConnected, isInternetReachable } = state;
+      const isOnline = isConnected !== false && isInternetReachable !== false;
+      isOnlineRef.current = isOnline;
+      if (!callRef.current) return;
+      const callToJoin = callRef.current;
+      await rejoinCall(
+        callToJoin,
+        isOnline,
+        isAudioPublishedRef.current,
+        isVideoPublishedRef.current,
+        publishAudioStreamRef.current,
+        publishVideoStreamRef.current,
+      );
+    });
+
+    return unsubscribe;
+  }, []);
+
+  const toggleVideoMuted = useCallback(async () => {
+    if (!isVideoPublished) {
+      publishVideoStream();
+    } else {
+      await call?.stopPublish(SfuModels.TrackType.VIDEO);
+    }
+  }, [call, isVideoPublished, publishVideoStream]);
+
+  const toggleAudioMuted = useCallback(async () => {
+    if (!isAudioPublished) {
+      publishAudioStream();
+    } else {
+      await call?.stopPublish(SfuModels.TrackType.AUDIO);
+    }
+  }, [call, isAudioPublished, publishAudioStream]);
+
+  const toggleCameraFacingMode = useCallback(() => {
+    const videoDevice = videoDevices.find(
+      (device) =>
+        device.kind === 'videoinput' &&
+        (!isCameraOnFrontFacingMode
+          ? device.facing === 'front'
+          : device.facing === 'environment'),
+    );
+    setState((prevState) => ({
+      currentVideoDevice: videoDevice,
+      isCameraOnFrontFacingMode: !prevState.isCameraOnFrontFacingMode,
+    }));
+  }, [isCameraOnFrontFacingMode, videoDevices, setState]);
+
+  return {
+    isAudioPublished,
+    isVideoPublished,
+    isCameraOnFrontFacingMode,
+    toggleAudioMuted,
+    toggleVideoMuted,
+    toggleCameraFacingMode,
+  };
+};
+
+/**
+ * Helper function to rejoin a call and then publish the streams
+ */
+async function rejoinCall(
+  callToJoin: Call,
+  isOnline: boolean,
+  isAudioPublished: boolean,
+  isVideoPublished: boolean,
+  publishAudioStream: () => Promise<void>,
+  publishVideoStream: () => Promise<void>,
+) {
+  const isCurrentStateOffline =
+    callToJoin.state.callingState === CallingState.OFFLINE;
+  if (!isOnline && !isCurrentStateOffline) {
+    callToJoin.state.setCallingState(CallingState.OFFLINE);
+  } else if (isOnline && isCurrentStateOffline && callToJoin.rejoin) {
+    try {
+      await callToJoin.rejoin();
+      if (isAudioPublished) {
+        await publishAudioStream();
+      }
+      if (isVideoPublished) {
+        await publishVideoStream();
+      }
+    } catch (e) {
+      console.error('Failed to rejoin', e);
+      callToJoin.state.setCallingState(CallingState.RECONNECTING_FAILED);
+    }
+  }
+}

package/src/hooks/useCallCycleEffect.tsx

@@ -0,0 +1,68 @@
+import { useCall, useCallCallingState } from '@stream-io/video-react-bindings';
+import { useEffect } from 'react';
+import { CallingState } from '@stream-io/video-client';
+import { CallCycleHandlersType } from '../providers';
+import { usePrevious } from '../utils/hooks/usePrevious';
+
+const NON_ACTIVE_CALLING_STATES = [CallingState.UNKNOWN, CallingState.IDLE];
+/**
+ *
+ * @param callCycleHandlers
+ *
+ * @category Client State
+ */
+export const useCallCycleEffect = (
+  callCycleHandlers: CallCycleHandlersType,
+) => {
+  const call = useCall();
+  const callingState = useCallCallingState();
+  const prevCallingState = usePrevious(callingState);
+  const {
+    onCallJoined,
+    onCallIncoming,
+    onCallOutgoing,
+    onCallHungUp,
+    onCallRejected,
+    onCallJoining,
+  } = callCycleHandlers;
+
+  useEffect(() => {
+    if (!call || NON_ACTIVE_CALLING_STATES.includes(callingState)) return;
+    const isCallCreatedByMe = call.data?.created_by.id === call?.currentUserId;
+    const isCallCreatedByOther =
+      !!call.data?.created_by.id && !isCallCreatedByMe;
+    const isIncomingCall =
+      callingState === CallingState.RINGING &&
+      !isCallCreatedByMe &&
+      onCallIncoming;
+    const isOutgoingCall =
+      callingState === CallingState.RINGING &&
+      isCallCreatedByMe &&
+      onCallOutgoing;
+    const isActiveCall = callingState === CallingState.JOINED && onCallJoined;
+    const isCallHungUp = callingState === CallingState.LEFT && onCallHungUp;
+    const isCallRejected =
+      callingState === CallingState.LEFT &&
+      isCallCreatedByOther &&
+      onCallRejected;
+    const isCallJoining =
+      callingState === CallingState.JOINING && onCallJoining;
+
+    if (isIncomingCall) return onCallIncoming();
+    if (isOutgoingCall) return onCallOutgoing();
+    if (isActiveCall) return onCallJoined();
+    if (isCallHungUp) return onCallHungUp();
+    if (isCallRejected) return onCallRejected();
+    if (isCallJoining) return onCallJoining();
+  }, [
+    callingState,
+    prevCallingState,
+    call,
+    onCallIncoming,
+    onCallOutgoing,
+    onCallJoined,
+    onCallHungUp,
+    onCallRejected,
+    onCallJoining,
+  ]);
+};

package/src/hooks/useCallKeep.tsx

@@ -0,0 +1,51 @@
+import { useCallback, useMemo } from 'react';
+import { Platform } from 'react-native';
+import { generateCallTitle } from '../utils';
+import { useCall } from '@stream-io/video-react-bindings';
+
+type RNCallKeepType = typeof import('react-native-callkeep').default;
+
+let RNCallKeep: RNCallKeepType | undefined;
+
+try {
+  RNCallKeep = require('react-native-callkeep').default;
+} catch (e) {}
+
+/**
+ *
+ * @returns
+ *
+ * @category Call Operations
+ *
+ */
+export const useCallKeep = () => {
+  const activeCall = useCall();
+  if (!RNCallKeep) {
+    throw Error(
+      "react-native-callkeep library is not installed. Please install it using 'yarn add react-native-callkeep' or 'npm install react-native-callkeep'",
+    );
+  }
+
+  const users = activeCall?.state.getCurrentValue(activeCall.state.members$);
+  const userIds = useMemo(() => Object.keys(users || {}), [users]);
+  const callTitle = generateCallTitle(userIds);
+
+  const startCall = useCallback(async () => {
+    if (Platform.OS === 'ios' && activeCall) {
+      await RNCallKeep?.startCall(
+        activeCall.id,
+        callTitle,
+        userIds.join(','),
+        'generic',
+      );
+    }
+  }, [activeCall, callTitle, userIds]);
+
+  const endCall = useCallback(async () => {
+    if (Platform.OS === 'ios' && activeCall) {
+      await RNCallKeep?.endCall(activeCall.id);
+    }
+  }, [activeCall]);
+
+  return { startCall, endCall };
+};

package/src/hooks/useCreateStreamVideoClient.tsx

@@ -0,0 +1,77 @@
+import {
+  StreamClientOptions,
+  StreamVideoClient,
+  TokenOrProvider,
+  User,
+} from '@stream-io/video-client';
+import { useEffect, useRef, useState } from 'react';
+
+/**
+ * Exclude types from documentation site, but we should still add doc comments
+ * @internal
+ */
+export type StreamVideoClientInit = {
+  /**
+   * The Stream API key.
+   */
+  apiKey: string;
+  /**
+   * The token or token provider.
+   */
+  tokenOrProvider: TokenOrProvider;
+  /**
+   * The client options.
+   */
+  options?: StreamClientOptions;
+  /**
+   * The user to connect.
+   */
+  user: User;
+  /**
+   * Whether the user is anonymous. Defaults to `false`.
+   */
+  isAnonymous?: boolean;
+};
+
+/**
+ * Creates a new `StreamVideoClient` instance and connects the given user.
+ *
+ * @category Client State
+ */
+export const useCreateStreamVideoClient = ({
+  apiKey,
+  tokenOrProvider,
+  user,
+  options,
+  isAnonymous = false,
+}: StreamVideoClientInit) => {
+  const [client] = useState(() => new StreamVideoClient(apiKey, options));
+
+  const disconnectRef = useRef(Promise.resolve());
+  useEffect(() => {
+    const connectionPromise = disconnectRef.current.then(() => {
+      if (isAnonymous) {
+        return client
+          .connectAnonymousUser(user, tokenOrProvider)
+          .catch((err) => {
+            console.error(`Failed to establish connection`, err);
+          });
+      }
+      return client.connectUser(user, tokenOrProvider).catch((err) => {
+        console.error(`Failed to establish connection`, err);
+      });
+    });
+
+    return () => {
+      disconnectRef.current = connectionPromise
+        .then(() => client.disconnectUser())
+        .catch((err) => {
+          console.error(`Failed to disconnect`, err);
+        });
+    };
+    // we want to re-run this effect only in some special cases
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [apiKey, tokenOrProvider, client, isAnonymous, user?.id]);
+
+  return client;
+};

package/src/hooks/useIncallManager.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import InCallManager from 'react-native-incall-manager';
+
+export type IncallManagerProps = {
+  media: 'audio' | 'video';
+  auto: boolean;
+};
+
+/**
+ * A hook to handle IncallManager specs in the application.
+ *
+ * @param media
+ * @param auto
+ *
+ * @category Device Management
+ *  */
+export const useIncallManager = ({ auto, media }: IncallManagerProps) => {
+  useEffect(() => {
+    InCallManager.start({ media, auto });
+
+    return () => InCallManager.stop();
+  }, [auto, media]);
+};

package/src/hooks/useLocalVideoStream.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import { disposeOfMediaStream, getVideoStream } from '@stream-io/video-client';
+import { MediaStream } from 'react-native-webrtc';
+import { useStreamVideoStoreValue } from '../contexts';
+
+/**
+ * A hook which provides the device's local video stream.
+ *
+ * @category Device Management
+ */
+export const useLocalVideoStream = () => {
+  const [videoStream, setVideoStream] = useState<MediaStream | undefined>(
+    undefined,
+  );
+  const currentVideoDevice = useStreamVideoStoreValue(
+    (store) => store.currentVideoDevice,
+  );
+
+  useEffect(() => {
+    const loadVideoStream = async () => {
+      // If there is no video device, we don't need to load a video stream.
+      if (!currentVideoDevice?.deviceId) return null;
+
+      const stream = await getVideoStream({
+        deviceId: currentVideoDevice.deviceId,
+      });
+      setVideoStream((previousStream) => {
+        if (previousStream) disposeOfMediaStream(previousStream);
+        return stream;
+      });
+    };
+    loadVideoStream();
+  }, [currentVideoDevice?.deviceId]);
+
+  return videoStream;
+};

package/src/hooks/useMutingState.ts

@@ -0,0 +1,24 @@
+import {
+  useStreamVideoStoreSetState,
+  useStreamVideoStoreValue,
+} from '../contexts/StreamVideoContext';
+/**
+ * A helper hook which exposes audio, video mute and camera facing mode and
+ * their respective functions to toggle state
+ *
+ * @category Device Management
+ */
+export const useMutingState = () => {
+  const isAudioMuted = useStreamVideoStoreValue((store) => store.isAudioMuted);
+  const isVideoMuted = useStreamVideoStoreValue((store) => store.isVideoMuted);
+  const setState = useStreamVideoStoreSetState();
+  const toggleAudioState = () => setState({ isAudioMuted: !isAudioMuted });
+  const toggleVideoState = () => setState({ isVideoMuted: !isVideoMuted });
+
+  return {
+    isAudioMuted,
+    isVideoMuted,
+    toggleAudioState,
+    toggleVideoState,
+  };
+};

package/src/hooks/usePermissionNotification.tsx

@@ -0,0 +1,53 @@
+import { OwnCapability } from '@stream-io/video-client';
+import { useHasPermissions } from '@stream-io/video-react-bindings';
+import { useCallback, useEffect } from 'react';
+import { Alert } from 'react-native';
+import { usePrevious } from '../utils/hooks/usePrevious';
+
+export type PermissionNotificationProps = {
+  /**
+   * The permission to check for.
+   */
+  permission: OwnCapability;
+
+  /**
+   * The message to display in the notification once
+   * the requested permission is granted.
+   */
+  messageApproved: string;
+
+  /**
+   * The message to display in the notification once a permission
+   * is revoked.
+   */
+  messageRevoked: string;
+};
+
+export const usePermissionNotification = (
+  props: PermissionNotificationProps,
+) => {
+  const { permission, messageApproved, messageRevoked } = props;
+  const hasPermission = useHasPermissions(permission);
+  const previousHasPermission = usePrevious(hasPermission);
+
+  const showGrantedNotification = useCallback(() => {
+    Alert.alert(messageApproved);
+  }, [messageApproved]);
+
+  const showRevokedNotification = useCallback(() => {
+    Alert.alert(messageRevoked);
+  }, [messageRevoked]);
+
+  useEffect(() => {
+    if (hasPermission && !previousHasPermission) {
+      showGrantedNotification();
+    } else if (!hasPermission && previousHasPermission) {
+      showRevokedNotification();
+    }
+  }, [
+    hasPermission,
+    previousHasPermission,
+    showGrantedNotification,
+    showRevokedNotification,
+  ]);
+};

package/src/hooks/usePermissionRequest.tsx

@@ -0,0 +1,67 @@
+import { OwnCapability, PermissionRequestEvent } from '@stream-io/video-client';
+import { useCall, useHasPermissions } from '@stream-io/video-react-bindings';
+import { useCallback, useEffect } from 'react';
+import { Alert } from 'react-native';
+
+export const usePermissionRequest = () => {
+  const call = useCall();
+
+  const userHasUpdateCallPermissionsCapability = useHasPermissions(
+    OwnCapability.UPDATE_CALL_PERMISSIONS,
+  );
+
+  const messageForPermission = (userName: string, permission: string) => {
+    switch (permission) {
+      case OwnCapability.SEND_AUDIO:
+        return `${userName} is requesting to speak`;
+      case OwnCapability.SEND_VIDEO:
+        return `${userName} is requesting to share their camera`;
+      case OwnCapability.SCREENSHARE:
+        return `${userName} is requesting to present their screen`;
+      default:
+        return `${userName} is requesting permission: ${permission}`;
+    }
+  };
+
+  const handleUpdatePermission = useCallback(
+    (request: PermissionRequestEvent, allow: boolean) => {
+      return async () => {
+        const { user, permissions } = request;
+        try {
+          if (allow) {
+            await call?.grantPermissions(user.id, permissions);
+          } else {
+            await call?.revokePermissions(user.id, permissions);
+          }
+        } catch (err) {
+          console.log(err);
+        }
+      };
+    },
+    [call],
+  );
+
+  useEffect(() => {
+    if (!call || !userHasUpdateCallPermissionsCapability) return;
+    return call.on('call.permission_request', (event) => {
+      if (event.type !== 'call.permission_request') return;
+      const { user, permissions } = event;
+      permissions.forEach((permission) => {
+        return Alert.alert(
+          'Permissions Request',
+          messageForPermission(user.name ?? user.id, permission),
+          [
+            {
+              text: 'Reject',
+              onPress: handleUpdatePermission(event, false),
+            },
+            {
+              text: 'Allow',
+              onPress: handleUpdatePermission(event, true),
+            },
+          ],
+        );
+      });
+    });
+  }, [call, userHasUpdateCallPermissionsCapability, handleUpdatePermission]);
+};

package/src/hooks/usePublishMediaStreams.ts

@@ -0,0 +1,59 @@
+import { useCall } from '@stream-io/video-react-bindings';
+import { useStreamVideoStoreValue } from '../contexts/StreamVideoContext';
+import {
+  OwnCapability,
+  getAudioStream,
+  getVideoStream,
+} from '@stream-io/video-client';
+import { useEffect } from 'react';
+
+/**
+ * A helper hook that takes care of publishing audio and video streams of the active call.
+ *
+ * @category Device Management
+ */
+export const usePublishMediaStreams = () => {
+  const activeCall = useCall();
+  const currentAudioDevice = useStreamVideoStoreValue(
+    (store) => store.currentAudioDevice,
+  );
+  const currentVideoDevice = useStreamVideoStoreValue(
+    (store) => store.currentVideoDevice,
+  );
+  const isVideoMuted = useStreamVideoStoreValue((store) => store.isVideoMuted);
+  const isAudioMuted = useStreamVideoStoreValue((store) => store.isAudioMuted);
+
+  useEffect(() => {
+    if (
+      !activeCall?.permissionsContext.hasPermission(OwnCapability.SEND_AUDIO)
+    ) {
+      console.log(`No permission to publish audio`);
+      return;
+    }
+    if (currentAudioDevice && !isAudioMuted) {
+      getAudioStream(currentAudioDevice.deviceId)
+        .then((stream) => activeCall?.publishAudioStream(stream))
+        .catch((error) => {
+          console.log(error);
+        });
+    }
+  }, [activeCall, currentAudioDevice, isAudioMuted]);
+
+  useEffect(() => {
+    if (
+      !activeCall?.permissionsContext.hasPermission(OwnCapability.SEND_VIDEO)
+    ) {
+      console.log(`No permission to publish video`);
+      return;
+    }
+    if (currentVideoDevice && !isVideoMuted) {
+      getVideoStream(currentVideoDevice.deviceId)
+        .then((stream) => {
+          activeCall?.publishVideoStream(stream);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    }
+  }, [activeCall, currentVideoDevice, isVideoMuted]);
+};

package/src/icons/ArrowRight.tsx

@@ -0,0 +1,16 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const ArrowRight = ({ color }: Props) => (
+  <Svg viewBox="0 0 8 15">
+    <Path
+      clipRule="evenodd"
+      fillRule="evenodd"
+      d="M 0.553016 2.50028 L 5.3299 7.5 L 0.553016 12.4997 C 0.111957 12.9585 0.111957 13.6972 0.553016 14.1559 C 0.994074 14.6147 1.71173 14.6147 2.14531 14.1559 L 7.66975 8.37864 C 7.9015 8.1376 8.01363 7.8188 7.99868 7.5 C 8.01363 7.1812 7.9015 6.8624 7.66975 6.62136 L 2.14531 0.84407 C 1.70425 0.385308 0.986598 0.385308 0.553016 0.84407 C 0.111957 1.30283 0.111957 2.04152 0.553016 2.50028 Z"
+      fill={color}
+    />
+  </Svg>
+);

package/src/icons/CameraSwitch.tsx

@@ -0,0 +1,14 @@
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+  color: string;
+};
+
+export const CameraSwitch = ({ color }: Props) => (
+  <Svg viewBox="0 0 28 23">
+    <Path
+      d="M3.86621 22.0075H24.1117C26.5225 22.0075 27.7948 20.7575 27.7948 18.3691V6.65036C27.7948 4.26196 26.5225 3.01196 24.1117 3.01196H21.143C20.2725 3.01196 19.9934 2.86687 19.4466 2.29768L18.5649 1.34902C17.9845 0.735177 17.393 0.433838 16.2546 0.433838H11.6675C10.5292 0.433838 9.93764 0.735177 9.35728 1.34902L8.47558 2.29768C7.93987 2.85571 7.64969 3.01196 6.77916 3.01196H3.86621C1.4555 3.01196 0.194336 4.26196 0.194336 6.65036V18.3691C0.194336 20.7575 1.4555 22.0075 3.86621 22.0075ZM10.0492 8.34678C9.66978 7.90036 9.80371 7.29768 10.3729 6.86241C11.3104 6.11464 12.6274 5.65705 13.989 5.65705C17.1363 5.65705 19.614 7.75527 20.1609 10.7798H21.21C21.768 10.7798 21.9131 11.3155 21.5894 11.762L19.7925 14.2508C19.4689 14.7084 18.9109 14.6861 18.5872 14.2508L16.7792 11.762C16.4443 11.3267 16.6006 10.7798 17.1586 10.7798H18.2747C17.7725 8.9383 16.0649 7.57669 13.989 7.57669C13.0068 7.57669 12.2479 7.87803 11.489 8.46955C10.9756 8.82669 10.4399 8.80437 10.0492 8.34678ZM6.36621 11.9517L8.15192 9.47402C8.48675 9.01643 9.03362 9.03875 9.35728 9.47402L11.1765 11.9517C11.5001 12.387 11.3439 12.9338 10.7859 12.9338H9.72558C10.2278 14.7754 11.9354 16.137 14.0113 16.137C14.9934 16.137 15.7524 15.8356 16.5113 15.2553C17.0247 14.887 17.5716 14.9204 17.951 15.3669C18.3305 15.8133 18.2077 16.4383 17.6274 16.8624C16.6899 17.6102 15.3841 18.0566 14.0113 18.0566C10.8751 18.0566 8.3863 15.9584 7.83942 12.9338H6.74567C6.18764 12.9338 6.04255 12.3981 6.36621 11.9517Z"
+      fill={color}
+    />
+  </Svg>
+);