@stream-io/video-react-native-sdk 0.7.14 → 0.7.16

package/src/components/Participant/FloatingParticipantView/FloatingView/ReanimatedFloatingView.tsx

@@ -13,7 +13,7 @@ type ReanimatedExportsType = typeof import('react-native-reanimated');
 
 let ReanimatedFloatingView: React.FC<FloatingViewProps> = () => {
   throw new Error(
-    'ReanimatedFloatingView component must not be used without the react-native-reanimated library and react-native-gesture-handler library installed',
+    'ReanimatedFloatingView component must not be used without the react-native-reanimated library and react-native-gesture-handler library installed'
   );
 };
 
@@ -90,15 +90,15 @@ try {
           0,
           Math.min(
             e.translationX + (start.value.x ?? 0),
-            snapAlignments[FloatingViewAlignment.bottomRight].x,
-          ),
+            snapAlignments[FloatingViewAlignment.bottomRight].x
+          )
         );
         translationY.value = Math.max(
           0,
           Math.min(
             e.translationY + (start.value.y ?? 0),
-            snapAlignments[FloatingViewAlignment.bottomRight].y,
-          ),
+            snapAlignments[FloatingViewAlignment.bottomRight].y
+          )
         );
       })
       .onEnd(() => {

package/src/components/Participant/ParticipantView/ParticipantNetworkQualityIndicator.tsx

@@ -15,7 +15,7 @@ export type ParticipantNetworkQualityIndicatorProps = Pick<
 >;
 
 const useConnectionQualitySignalColors = (
-  participant: ParticipantViewProps['participant'],
+  participant: ParticipantViewProps['participant']
 ) => {
   const {
     theme: { colors },

package/src/components/Participant/ParticipantView/ParticipantReaction.tsx

@@ -56,7 +56,7 @@ export const ParticipantReaction = ({
     reaction &&
     supportedReactions.find(
       (supportedReaction) =>
-        supportedReaction.emoji_code === reaction.emoji_code,
+        supportedReaction.emoji_code === reaction.emoji_code
     );
 
   return (

package/src/components/Participant/ParticipantView/VideoRenderer.tsx

@@ -210,7 +210,7 @@ export const VideoRenderer = ({
   }, [trackType, sessionId]);
 
   const onLayout: React.ComponentProps<typeof RTCView>['onLayout'] = (
-    event,
+    event
   ) => {
     if (!call || isLocalParticipant) {
       return;

package/src/contexts/BackgroundFilters.tsx

@@ -0,0 +1,197 @@
+import React, {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { MediaStream } from '@stream-io/react-native-webrtc';
+import { useCall } from '@stream-io/video-react-bindings';
+import { Platform } from 'react-native';
+
+type VideoFiltersModuleType =
+  typeof import('@stream-io/video-filters-react-native');
+
+let videoFiltersModule: VideoFiltersModuleType | undefined;
+
+try {
+  videoFiltersModule = require('@stream-io/video-filters-react-native');
+} catch (e) {
+  console.log(e);
+}
+
+import { Image } from 'react-native';
+
+const resolveAssetSourceFunc = Image.resolveAssetSource;
+
+// excluding array of images and only allow one image
+type ImageSourceType = Exclude<
+  Parameters<typeof resolveAssetSourceFunc>[0],
+  Array<any>
+>;
+
+export type BlurIntensity = 'light' | 'medium' | 'heavy';
+
+export type BackgroundFilterType = 'blur' | 'image';
+
+export type CurrentBackgroundFilter = {
+  blur?: BlurIntensity;
+  image?: ImageSourceType;
+};
+
+export type BackgroundFiltersAPI = {
+  /**
+   * The currently applied background filter. Undefined value indicates that no filter is applied.
+   */
+  currentBackgroundFilter: CurrentBackgroundFilter | undefined;
+  /**
+   * Whether the current device supports the background filters.
+   */
+  isSupported: boolean;
+  /**
+   * Applies a background image filter to the video.
+   *
+   * @param imageSource the URL of the image to use as the background.
+   */
+  applyBackgroundImageFilter: (imageSource: ImageSourceType) => void;
+  /**
+   * Applies a background blur filter to the video.
+   *
+   * @param blurLevel the level of blur to apply to the background.
+   */
+  applyBackgroundBlurFilter: (blurIntensity: BlurIntensity) => void;
+  /**
+   * Disables all filters applied to the video.
+   */
+  disableAllFilters: () => void;
+};
+
+/**
+ * The context for the background filters.
+ */
+const BackgroundFiltersContext = createContext<
+  BackgroundFiltersAPI | undefined
+>(undefined);
+
+/**
+ * A hook to access the background filters context API.
+ */
+export const useBackgroundFilters = () => {
+  const context = useContext(BackgroundFiltersContext);
+  if (!context) {
+    throw new Error(
+      'useBackgroundFilters must be used within a BackgroundFiltersProvider'
+    );
+  }
+  if (!videoFiltersModule) {
+    throw new Error(
+      "Install the '@stream-io/video-filters-react-native' library to use background filters"
+    );
+  }
+  return context;
+};
+
+const isSupported = Platform.OS === 'android';
+
+/**
+ * A provider component that enables the use of background filters in your app.
+ *
+ * Please make sure you have the `@stream-io/video-filters-react-native` package installed
+ * in your project before using this component.
+ */
+export const BackgroundFiltersProvider = ({ children }: PropsWithChildren) => {
+  if (!videoFiltersModule) {
+    throw new Error(
+      "Install the '@stream-io/video-filters-react-native' library to use background filters"
+    );
+  }
+  const call = useCall();
+  const isBlurRegisteredRef = useRef(false);
+  const registeredImageFiltersSetRef = useRef(new Set<string>());
+  const [currentBackgroundFilter, setCurrentBackgroundFilter] =
+    useState<CurrentBackgroundFilter>();
+
+  const applyBackgroundBlurFilter = useCallback(
+    (blurIntensity: BlurIntensity) => {
+      if (!isSupported) {
+        return;
+      }
+      if (!isBlurRegisteredRef.current) {
+        videoFiltersModule?.registerBackgroundBlurVideoFilters();
+      }
+      let filterName = 'BackgroundBlurMedium';
+      if (blurIntensity === 'heavy') {
+        filterName = 'BackgroundBlurHeavy';
+      } else if (blurIntensity === 'light') {
+        filterName = 'BackgroundBlurLight';
+      }
+      (call?.camera.state.mediaStream as MediaStream | undefined)
+        ?.getVideoTracks()
+        .forEach((track) => {
+          track._setVideoEffect(filterName);
+        });
+      setCurrentBackgroundFilter({ blur: blurIntensity });
+    },
+    [call]
+  );
+
+  const applyBackgroundImageFilter = useCallback(
+    (imageSource: ImageSourceType) => {
+      if (!isSupported) {
+        return;
+      }
+      const source = resolveAssetSourceFunc(imageSource);
+      const imageUri = source.uri;
+      const registeredImageFiltersSet = registeredImageFiltersSetRef.current;
+      if (!registeredImageFiltersSet.has(imageUri)) {
+        videoFiltersModule?.registerVirtualBackgroundFilter(imageUri);
+        registeredImageFiltersSetRef.current.add(imageUri);
+      }
+      const filterName = `VirtualBackground-${imageUri}`;
+      (call?.camera.state.mediaStream as MediaStream | undefined)
+        ?.getVideoTracks()
+        .forEach((track) => {
+          track._setVideoEffect(filterName);
+        });
+      setCurrentBackgroundFilter({ image: imageSource });
+    },
+    [call]
+  );
+
+  const disableAllFilters = useCallback(() => {
+    if (!isSupported) {
+      return;
+    }
+    (call?.camera.state.mediaStream as MediaStream | undefined)
+      ?.getVideoTracks()
+      .forEach((track) => {
+        // @ts-expect-error - webrtc typing is wrong, null is supported
+        track._setVideoEffect(null);
+      });
+    setCurrentBackgroundFilter(undefined);
+  }, [call]);
+
+  const value = useMemo(
+    () => ({
+      currentBackgroundFilter,
+      isSupported,
+      applyBackgroundImageFilter,
+      applyBackgroundBlurFilter,
+      disableAllFilters,
+    }),
+    [
+      applyBackgroundBlurFilter,
+      applyBackgroundImageFilter,
+      currentBackgroundFilter,
+      disableAllFilters,
+    ]
+  );
+
+  return (
+    <BackgroundFiltersContext.Provider value={value}>
+      {children}
+    </BackgroundFiltersContext.Provider>
+  );
+};

package/src/contexts/StreamVideoContext.tsx

@@ -17,7 +17,7 @@ function createStoreContext<StoreType extends object>(initialState: StoreType) {
   type SetStateFuncType = (
     partialStateOrFunc:
       | Partial<StoreType>
-      | ((prevState: StoreType) => Partial<StoreType>),
+      | ((prevState: StoreType) => Partial<StoreType>)
   ) => void;
 
   // returns unsubscribe function
@@ -79,7 +79,7 @@ function createStoreContext<StoreType extends object>(initialState: StoreType) {
    * @category Client State
    */
   function useStoreValue<SelectorOutput extends StoreType[keyof StoreType]>(
-    selector: (store: StoreType) => SelectorOutput,
+    selector: (store: StoreType) => SelectorOutput
   ): SelectorOutput {
     const store = useContext(StoreContext);
     if (!store) {
@@ -89,7 +89,7 @@ function createStoreContext<StoreType extends object>(initialState: StoreType) {
     const [state, setState] = useState(selector(store.getSnapshot()));
     useEffect(
       () => store.subscribe(() => setState(selector(store.getSnapshot()))),
-      [selector, store],
+      [selector, store]
     );
 
     return state;

package/src/contexts/ThemeContext.tsx

@@ -45,7 +45,7 @@ export const mergeThemes = (params: MergedThemesParams) => {
 const DEFAULT_BASE_CONTEXT_VALUE = {};
 
 export const ThemeContext = createContext<Theme>(
-  DEFAULT_BASE_CONTEXT_VALUE as Theme,
+  DEFAULT_BASE_CONTEXT_VALUE as Theme
 );
 
 export const ThemeProvider: React.FC<
@@ -73,7 +73,7 @@ export const useTheme = () => {
 
   if (theme === DEFAULT_BASE_CONTEXT_VALUE) {
     throw new Error(
-      'The useThemeContext hook was called outside the ThemeContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider',
+      'The useThemeContext hook was called outside the ThemeContext Provider. Make sure you have configured OverlayProvider component correctly - https://getstream.io/chat/docs/sdk/reactnative/basics/hello_stream_chat/#overlay-provider'
     );
   }
   return { theme };

package/src/contexts/index.ts

@@ -1,2 +1,3 @@
 export * from './StreamVideoContext';
 export * from './ThemeContext';
+export * from './BackgroundFilters';

package/src/hooks/push/useIosCallKeepEventsSetupEffect.ts

@@ -28,14 +28,14 @@ export const useIosCallKeepEventsSetupEffect = () => {
       ({ callUUID }) => {
         const call_cid = RxUtils.getCurrentValue(voipPushNotificationCallCId$);
         iosCallkeepAcceptCall(call_cid, callUUID);
-      },
+      }
     );
     const { remove: removeEndCall } = callkeep.addEventListener(
       'endCall',
       ({ callUUID }) => {
         const call_cid = RxUtils.getCurrentValue(voipPushNotificationCallCId$);
         iosCallkeepRejectCall(call_cid, callUUID, pushConfig);
-      },
+      }
     );
 
     const { remove: removeDisplayIncomingCall } = callkeep.addEventListener(
@@ -52,7 +52,7 @@ export const useIosCallKeepEventsSetupEffect = () => {
           uuid: callUUID,
           cid: call_cid,
         });
-      },
+      }
     );
 
     return () => {

package/src/hooks/push/useIosCallkeepWithCallingStateEffect.ts

@@ -61,10 +61,10 @@ export const useIosCallkeepWithCallingStateEffect = () => {
         return;
       }
       const nativeDialerAcceptedCallMap = RxUtils.getCurrentValue(
-        voipCallkeepAcceptedCallOnNativeDialerMap$,
+        voipCallkeepAcceptedCallOnNativeDialerMap$
       );
       const foregroundIncomingCallkeepMap = RxUtils.getCurrentValue(
-        voipCallkeepCallOnForegroundMap$,
+        voipCallkeepCallOnForegroundMap$
       );
       const callkeep = getCallKeepLib();
       if (activeCallCid === nativeDialerAcceptedCallMap?.cid) {
@@ -95,7 +95,7 @@ export const useIosCallkeepWithCallingStateEffect = () => {
     // push notification was displayed
     // but the call has been accepted through the app and not through the native dialer
     const foregroundCallkeepMap = RxUtils.getCurrentValue(
-      voipCallkeepCallOnForegroundMap$,
+      voipCallkeepCallOnForegroundMap$
     );
     if (foregroundCallkeepMap && foregroundCallkeepMap.cid === activeCallCid) {
       // this call should be accepted in callkeep
@@ -122,7 +122,7 @@ export const useIosCallkeepWithCallingStateEffect = () => {
     // this was a call which had push notification displayed but never joined
     // the user rejected in the app and not from native dialer
     const foregroundIncomingCallkeepMap = RxUtils.getCurrentValue(
-      voipCallkeepCallOnForegroundMap$,
+      voipCallkeepCallOnForegroundMap$
     );
     if (activeCallCid === foregroundIncomingCallkeepMap?.cid) {
       callkeep.endCall(foregroundIncomingCallkeepMap.uuid);
@@ -134,7 +134,7 @@ export const useIosCallkeepWithCallingStateEffect = () => {
     // it was an accepted call from native dialer and not from the app
     // the user left using the leave button in the app
     const nativeDialerAcceptedCallMap = RxUtils.getCurrentValue(
-      voipCallkeepAcceptedCallOnNativeDialerMap$,
+      voipCallkeepAcceptedCallOnNativeDialerMap$
     );
     if (activeCallCid === nativeDialerAcceptedCallMap?.cid) {
       callkeep.endCall(nativeDialerAcceptedCallMap.uuid);

package/src/hooks/push/useIosVoipPushEventsSetupEffect.ts

@@ -146,9 +146,10 @@ const onNotificationReceived = async (notification: any) => {
   const callFromPush = await client.onRingingCall(call_cid);
   let uuid = '';
   try {
-    uuid = await NativeModules?.StreamVideoReactNative?.getIncomingCallUUid(
-      call_cid,
-    );
+    uuid =
+      await NativeModules?.StreamVideoReactNative?.getIncomingCallUUid(
+        call_cid
+      );
   } catch (error) {
     console.log('Error in getting call uuid', error);
   }
@@ -161,7 +162,7 @@ const onNotificationReceived = async (notification: any) => {
     const { mustEndCall, callkeepReason } = shouldCallBeEnded(
       callFromPush,
       created_by_id,
-      receiver_id,
+      receiver_id
     );
     if (mustEndCall) {
       const callkeep = getCallKeepLib();

package/src/hooks/push/useProcessPushCallEffect.ts

@@ -37,7 +37,7 @@ export const useProcessPushCallEffect = () => {
       pushAcceptedIncomingCallCId$,
       client,
       pushConfig,
-      'accept',
+      'accept'
     );
 
     // if the user rejects the call from push notification we leave the call
@@ -45,7 +45,7 @@ export const useProcessPushCallEffect = () => {
       pushRejectedIncomingCallCId$,
       client,
       pushConfig,
-      'decline',
+      'decline'
     );
 
     // if the user taps the call from push notification we do nothing as the only thing is to get the call which adds it to the client
@@ -53,14 +53,14 @@ export const useProcessPushCallEffect = () => {
       pushTappedIncomingCallCId$,
       client,
       pushConfig,
-      'pressed',
+      'pressed'
     );
 
     const backgroundIncomingDeliveredCallSubscription = createCallSubscription(
       pushAndroidBackgroundDeliveredIncomingCallCId$,
       client,
       pushConfig,
-      'backgroundDelivered',
+      'backgroundDelivered'
     );
 
     return () => {
@@ -86,7 +86,7 @@ const createCallSubscription = (
   behaviourSubjectWithCallCid: BehaviorSubject<string | undefined>,
   client: StreamVideoClient,
   pushConfig: NonNullable<StreamVideoConfig['push']>,
-  action: 'accept' | 'decline' | 'pressed' | 'backgroundDelivered',
+  action: 'accept' | 'decline' | 'pressed' | 'backgroundDelivered'
 ) => {
   return behaviourSubjectWithCallCid
     .pipe(filter(cidIsNotUndefined))

package/src/hooks/useAndroidKeepCallAliveEffect.ts

@@ -28,7 +28,7 @@ async function startForegroundService(call_cid: string) {
   const settings = await notifee.getNotificationSettings();
   if (settings.authorizationStatus !== AuthorizationStatus.AUTHORIZED) {
     console.warn(
-      'Notification permission not granted, can not start foreground service to keep the call alive',
+      'Notification permission not granted, can not start foreground service to keep the call alive'
     );
     return;
   }
@@ -110,7 +110,7 @@ export const useAndroidKeepCallAliveEffect = () => {
       } else {
         notifee.getDisplayedNotifications().then((displayedNotifications) => {
           const activeCallNotification = displayedNotifications.find(
-            (notification) => notification.id === activeCallCid,
+            (notification) => notification.id === activeCallCid
           );
           if (activeCallNotification) {
             // this means that we have a incoming call notification shown as foreground service and we must stop it

package/src/hooks/useIsInPiPMode.tsx

@@ -10,14 +10,14 @@ export function useIsInPiPMode() {
     }
 
     const eventEmitter = new NativeEventEmitter(
-      NativeModules.StreamVideoReactNative,
+      NativeModules.StreamVideoReactNative
     );
 
     const subscription = eventEmitter.addListener(
       'StreamVideoReactNative_PIP_CHANGE_EVENT',
       (isPiPEnabled: boolean) => {
         setIsInPiPMode(isPiPEnabled);
-      },
+      }
     );
 
     return () => {

package/src/hooks/useIsIosScreenshareBroadcastStarted.ts

@@ -14,14 +14,14 @@ export function useIsIosScreenshareBroadcastStarted() {
     }
 
     const eventEmitter = new NativeEventEmitter(
-      NativeModules.StreamVideoReactNative,
+      NativeModules.StreamVideoReactNative
     );
 
     const subscription = eventEmitter.addListener(
       'StreamVideoReactNative_Ios_Screenshare_Event',
       (event: Event) => {
         setHasStarted(event.name === 'iOS_BroadcastStarted');
-      },
+      }
     );
 
     return () => {

package/src/hooks/usePaginatedLayoutSortPreset.ts

@@ -10,7 +10,7 @@ const resetSortPreset = (call: Call) => {
   // reset the sorting to the default for the call type
   const callConfig = CallTypes.get(call.type);
   call.setSortParticipantsBy(
-    callConfig.options.sortParticipantsBy || defaultSortPreset,
+    callConfig.options.sortParticipantsBy || defaultSortPreset
   );
 };
 

package/src/hooks/usePermissionNotification.tsx

@@ -24,7 +24,7 @@ export type PermissionNotificationProps = {
 };
 
 export const usePermissionNotification = (
-  props: PermissionNotificationProps,
+  props: PermissionNotificationProps
 ) => {
   const { permission, messageApproved, messageRevoked } = props;
   const { useCallCallingState, useHasPermissions } = useCallStateHooks();

package/src/hooks/usePermissionRequest.tsx

@@ -8,7 +8,7 @@ export const usePermissionRequest = () => {
 
   const { useHasPermissions } = useCallStateHooks();
   const userHasUpdateCallPermissionsCapability = useHasPermissions(
-    OwnCapability.UPDATE_CALL_PERMISSIONS,
+    OwnCapability.UPDATE_CALL_PERMISSIONS
   );
 
   const messageForPermission = (userName: string, permission: string) => {
@@ -39,7 +39,7 @@ export const usePermissionRequest = () => {
         }
       };
     },
-    [call],
+    [call]
   );
 
   useEffect(() => {
@@ -64,7 +64,7 @@ export const usePermissionRequest = () => {
               text: 'Allow',
               onPress: handleUpdatePermission(event, true),
             },
-          ],
+          ]
         );
       });
     });

package/src/index.ts

@@ -28,8 +28,9 @@ export * from './theme';
 export * from './utils';
 export * from './translations';
 
-// Overriding 'StreamVideo' from '@stream-io/video-react-bindings'
+// Overriding 'StreamVideo' and 'StreamCall' from '@stream-io/video-react-bindings'
 // Explicitly re-exporting to resolve ambiguity.
-export { StreamVideo, StreamCall } from './providers';
+export { StreamVideo } from './providers/StreamVideo';
+export { StreamCall } from './providers/StreamCall';
 
 setClientDetails();

package/src/providers/StreamCall.tsx

@@ -57,12 +57,12 @@ const AppStateListener = () => {
             if (!isInPiP) {
               await call?.camera?.disable();
             }
-          },
+          }
         );
       } else {
         await call?.camera?.disable();
       }
-    },
+    }
   );
 
   return null;

package/src/providers/StreamVideo.tsx

@@ -24,7 +24,7 @@ export const StreamVideo = (
       StreamI18nProviderProps & {
         style?: DeepPartial<Theme>;
       }
-  >,
+  >
 ) => {
   const {
     client,

package/src/utils/StreamVideoRN/index.ts

@@ -43,7 +43,7 @@ export class StreamVideoRN {
   static updateAndroidIncomingCallChannel(
     updateChannel: Partial<
       NonNullable<StreamVideoConfig['push']>['android']['incomingCallChannel']
-    >,
+    >
   ) {
     const prevChannel = this.config.push?.android?.incomingCallChannel;
     if (prevChannel) {
@@ -92,7 +92,7 @@ export class StreamVideoRN {
   static onPushLogout() {
     if (pushLogoutCallbacks.current) {
       return Promise.all(
-        pushLogoutCallbacks.current.map((callback) => callback()),
+        pushLogoutCallbacks.current.map((callback) => callback())
       ).then(() => {});
     }
     return Promise.resolve();
@@ -104,7 +104,7 @@ export class StreamVideoRN {
    * @returns Unsubscribe function
    */
   static addOnNewCallNotificationListener(
-    callback: NewCallNotificationCallback,
+    callback: NewCallNotificationCallback
   ) {
     if (!newNotificationCallbacks.current) {
       newNotificationCallbacks.current = [callback];

package/src/utils/StreamVideoRN/types.ts

@@ -77,7 +77,7 @@ export type StreamVideoConfig = {
       callNotificationTextGetters?: {
         getTitle: (
           type: NonRingingPushEvent,
-          createdUserName: string,
+          createdUserName: string
         ) => string;
         getBody: (type: NonRingingPushEvent, createdUserName: string) => string;
       };
@@ -107,7 +107,7 @@ export type StreamVideoConfig = {
     /** Callback that is called when a non ringing push notification was tapped */
     onTapNonRingingCallNotification?: (
       call_cid: string,
-      type: NonRingingPushEvent,
+      type: NonRingingPushEvent
     ) => void;
   };
   foregroundService: {

package/src/utils/enterPiPAndroid.ts

@@ -6,6 +6,6 @@ export function enterPiPAndroid(width?: number, height?: number) {
   }
   return NativeModules?.StreamVideoReactNative?.enterPipMode(
     width ? Math.floor(width) : 0,
-    height ? Math.floor(height) : 0,
+    height ? Math.floor(height) : 0
   );
 }

package/src/utils/hooks/useAppStateListener.ts

@@ -3,7 +3,7 @@ import { AppState, AppStateStatus } from 'react-native';
 
 export const useAppStateListener = (
   onForeground?: () => void,
-  onBackground?: () => void,
+  onBackground?: () => void
 ) => {
   const appStateRef = useRef(AppState.currentState);
   const onForegroundRef = useRef(onForeground);
@@ -31,7 +31,7 @@ export const useAppStateListener = (
     };
     const subscription = AppState.addEventListener(
       'change',
-      handleAppStateChange,
+      handleAppStateChange
     );
 
     return () => {

package/src/utils/index.ts

@@ -1,11 +1,11 @@
 // Utility to join strings with commas and 'and'
 export const generateCallTitle = (
   memberUserIds: string[],
-  totalMembersToShow?: number,
+  totalMembersToShow?: number
 ) => {
   const supportedAmountOfMemberUserIds = memberUserIds.slice(
     0,
-    totalMembersToShow,
+    totalMembersToShow
   );
   if (
     totalMembersToShow &&