@stream-io/video-react-native-sdk 1.22.3 → 1.24.0

package/src/components/Call/CallContent/RTCViewPipNative.tsx

@@ -1,4 +1,3 @@
-import { getLogger } from '@stream-io/video-client';
 import React from 'react';
 import {
   type HostComponent,
@@ -7,6 +6,7 @@ import {
   StyleSheet,
   UIManager,
 } from 'react-native';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 const COMPONENT_NAME = 'RTCViewPip';
 
@@ -23,7 +23,7 @@ const NativeComponent: HostComponent<RTCViewPipNativeProps> =
   requireNativeComponent(COMPONENT_NAME);
 
 export function onNativeCallClosed(reactTag: number) {
-  getLogger(['RTCViewPipNative'])('debug', 'onNativeCallClosed');
+  videoLoggerSystem.getLogger('RTCViewPipNative').debug('onNativeCallClosed');
   const commandId =
     UIManager.getViewManagerConfig(COMPONENT_NAME).Commands.onCallClosed;
   if (!commandId) return;
@@ -35,10 +35,12 @@ export function onNativeDimensionsUpdated(
   width: number,
   height: number,
 ) {
-  getLogger(['RTCViewPipNative'])('debug', 'onNativeDimensionsUpdated', {
-    width,
-    height,
-  });
+  videoLoggerSystem
+    .getLogger('RTCViewPipNative')
+    .debug('onNativeDimensionsUpdated', {
+      width,
+      height,
+    });
   const commandId =
     UIManager.getViewManagerConfig(COMPONENT_NAME).Commands
       .setPreferredContentSize;

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

@@ -1,9 +1,9 @@
 import { useCall } from '@stream-io/video-react-bindings';
-import { getLogger } from '@stream-io/video-client';
 import React, { useState } from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { IconWrapper, Phone } from '../../../icons';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 /**
  * The props for the Accept Call button.
@@ -52,8 +52,8 @@ export const AcceptCallButton = ({
         onAcceptCallHandler();
       }
     } catch (error) {
-      const logger = getLogger(['AcceptCallButton']);
-      logger('error', 'Error joining Call', error);
+      const logger = videoLoggerSystem.getLogger('AcceptCallButton');
+      logger.error('Error joining Call', error);
     } finally {
       setIsLoading(false);
     }

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

@@ -1,10 +1,9 @@
 import React from 'react';
-import { getLogger } from '@stream-io/video-client';
 import { CallControlsButton } from './CallControlsButton';
 import { PhoneDown } from '../../../icons';
 import { ButtonTestIds } from '../../../constants/TestIds';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
-import { CallingState } from '@stream-io/video-client';
+import { CallingState, videoLoggerSystem } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
 import { IconWrapper } from '../../../icons/IconWrapper';
 
@@ -60,8 +59,8 @@ export const HangUpCallButton = ({
         onHangupCallHandler();
       }
     } catch (error) {
-      const logger = getLogger(['HangUpCallButton']);
-      logger('error', 'Error leaving Call', error);
+      const logger = videoLoggerSystem.getLogger('HangUpCallButton');
+      logger.error('Error leaving Call', error);
     }
   };
 

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

@@ -2,7 +2,7 @@ import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import React, { useState } from 'react';
 import { CallControlsButton } from './CallControlsButton';
 import { IconWrapper, PhoneDown } from '../../../icons';
-import { CallingState, getLogger } from '@stream-io/video-client';
+import { CallingState, videoLoggerSystem } from '@stream-io/video-client';
 import { useTheme } from '../../../contexts/ThemeContext';
 
 /**
@@ -27,7 +27,7 @@ type RejectCallButtonProps = {
   /**
    * Optional: Reason for rejecting the call.
    * Pass a predefined or a custom reason.
-   * There are four predefined reasons for rejecting the call: 
+   * There are four predefined reasons for rejecting the call:
     - `busy` - when the callee is busy and cannot accept the call.
     - `decline` - when the callee intentionally declines the call.
     - `cancel` - when the caller cancels the call.
@@ -74,8 +74,8 @@ export const RejectCallButton = ({
         onRejectCallHandler();
       }
     } catch (error) {
-      const logger = getLogger(['RejectCallButton']);
-      logger('error', 'Error rejecting Call', error);
+      const logger = videoLoggerSystem.getLogger('RejectCallButton');
+      logger.error('Error rejecting Call', error);
     } finally {
       setIsLoading(false);
     }

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

@@ -7,7 +7,10 @@ import {
   StyleSheet,
 } from 'react-native';
 import { useCall } from '@stream-io/video-react-bindings';
-import { getLogger, type SendReactionRequest } from '@stream-io/video-client';
+import {
+  type SendReactionRequest,
+  videoLoggerSystem,
+} from '@stream-io/video-client';
 import { ComponentTestIds } from '../../../../constants/TestIds';
 import { useTheme } from '../../../../contexts/ThemeContext';
 import type { ReactionsButtonProps } from '../ReactionsButton';
@@ -82,8 +85,8 @@ export const ReactionsPicker = ({
   const onClose = (reaction?: SendReactionRequest) => {
     if (reaction) {
       call?.sendReaction(reaction).catch((e) => {
-        const logger = getLogger(['ReactionsPicker']);
-        logger('error', 'Error on onClose-sendReaction', e, reaction);
+        const logger = videoLoggerSystem.getLogger('ReactionsPicker');
+        logger.error('Error on onClose-sendReaction', e, reaction);
       });
     }
     Animated.timing(elasticAnimRef.current, {

package/src/components/Call/Lobby/JoinCallButton.tsx

@@ -3,7 +3,7 @@ import { type LobbyProps } from './Lobby';
 import { Pressable, StyleSheet, Text } from 'react-native';
 import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import { useTheme } from '../../../contexts/ThemeContext';
-import { getLogger } from '@stream-io/video-client';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 /**
  * Props for the Join Call Button in the Lobby component.
@@ -39,8 +39,8 @@ export const JoinCallButton = ({
         onJoinCallHandler();
       }
     } catch (error) {
-      const logger = getLogger(['JoinCallButton']);
-      logger('error', 'Error joining call:', error);
+      const logger = videoLoggerSystem.getLogger('JoinCallButton');
+      logger.error('Error joining call:', error);
     } finally {
       setIsLoading(false);
     }

package/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx

@@ -13,7 +13,7 @@ import {
 } from 'react-native';
 import { useTheme } from '../../../contexts';
 import { EndBroadcastIcon, StartStreamIcon } from '../../../icons';
-import { SfuModels, getLogger } from '@stream-io/video-client';
+import { SfuModels, videoLoggerSystem } from '@stream-io/video-client';
 
 /**
  * Props for the HostStartStreamButton component.
@@ -79,8 +79,8 @@ export const HostStartStreamButton = ({
         onStartStreamHandler();
       }
     } catch (error) {
-      const logger = getLogger(['HostStartStreamButton']);
-      logger('error', 'Error starting livestream', error);
+      const logger = videoLoggerSystem.getLogger('HostStartStreamButton');
+      logger.error('Error starting livestream', error);
     }
   };
 
@@ -102,8 +102,8 @@ export const HostStartStreamButton = ({
         onEndStreamHandler();
       }
     } catch (error) {
-      const logger = getLogger(['HostStartStreamButton']);
-      logger('error', 'Error stopping livestream', error);
+      const logger = videoLoggerSystem.getLogger('HostStartStreamButton');
+      logger.error('Error stopping livestream', error);
     }
   };
 

package/src/components/Livestream/LivestreamControls/ViewerLeaveStreamButton.tsx

@@ -3,7 +3,7 @@ import { ActivityIndicator, Pressable, StyleSheet, View } from 'react-native';
 import { useTheme } from '../../../contexts';
 import { PhoneDown } from '../../../icons';
 import { useCall } from '@stream-io/video-react-bindings';
-import { getLogger } from '@stream-io/video-client';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 /**
  * Props for the ViewerLeaveStreamButton component.
@@ -43,8 +43,8 @@ export const ViewerLeaveStreamButton = ({
       await call?.leave();
       setIsAwaitingResponse(false);
     } catch (error) {
-      const logger = getLogger(['ViewerLeaveStreamButton']);
-      logger('error', 'Error stopping livestream', error);
+      const logger = videoLoggerSystem.getLogger('ViewerLeaveStreamButton');
+      logger.error('Error stopping livestream', error);
     }
   };
 

package/src/components/Livestream/LivestreamPlayer/LivestreamPlayer.tsx

@@ -3,7 +3,7 @@ import {
   ViewerLivestream as DefaultViewerLivestream,
   type ViewerLivestreamProps,
 } from '../ViewerLivestream';
-import { Call, CallingState, getLogger } from '@stream-io/video-client';
+import { Call, CallingState, videoLoggerSystem } from '@stream-io/video-client';
 import { StreamCall } from '../../../providers/StreamCall';
 import { useStreamVideoClient } from '@stream-io/video-react-bindings';
 
@@ -56,8 +56,8 @@ export const LivestreamPlayer = ({
     return () => {
       if (myCall.state.callingState !== CallingState.LEFT) {
         myCall.leave().catch((e) => {
-          const logger = getLogger(['LivestreamPlayer']);
-          logger('error', 'Error leaving call:', e);
+          const logger = videoLoggerSystem.getLogger('LivestreamPlayer');
+          logger.error('Error leaving call:', e);
         });
       }
       setCall(undefined);
@@ -69,8 +69,8 @@ export const LivestreamPlayer = ({
       // this handles unmount on metro reloads
       if (call?.state.callingState !== CallingState.LEFT) {
         call?.leave().catch((e) => {
-          const logger = getLogger(['LivestreamPlayer']);
-          logger('error', 'Error leaving call:', e);
+          const logger = videoLoggerSystem.getLogger('LivestreamPlayer');
+          logger.error('Error leaving call:', e);
         });
       }
     };

package/src/components/Livestream/ViewerLivestream/ViewerLobby.tsx

@@ -12,8 +12,7 @@ import {
   View,
 } from 'react-native';
 import { useTheme } from '../../../contexts';
-import { CallingState } from '@stream-io/video-client';
-import { getLogger } from '@stream-io/video-client';
+import { CallingState, videoLoggerSystem } from '@stream-io/video-client';
 
 type LobbyProps = {
   isLive: boolean;
@@ -68,8 +67,8 @@ export const ViewerLobby = ({ isLive }: LobbyProps) => {
         await call.get();
       } catch (err) {
         if (err instanceof Error) {
-          const logger = getLogger(['ViewerLobby']);
-          logger('error', 'Error getting call:', err);
+          const logger = videoLoggerSystem.getLogger('ViewerLobby');
+          logger.error('Error getting call:', err);
           setError(err);
         }
       }

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

@@ -14,7 +14,7 @@ import {
   getClosestSnapAlignment,
   getSnapAlignments,
 } from './common';
-import { getLogger } from '@stream-io/video-client';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 const AnimatedFloatingView = ({
   initialAlignment,
@@ -115,9 +115,8 @@ const AnimatedFloatingView = ({
   ).current;
 
   useEffect(() => {
-    const logger = getLogger(['AnimatedFloatingView']);
-    logger(
-      'info',
+    const logger = videoLoggerSystem.getLogger('AnimatedFloatingView');
+    logger.info(
       'react-native-reanimated and/or react-native-gesture-handler libraries are not installed. Please install them to get a more performant draggable local video component',
     );
   }, []);

package/src/components/Participant/FloatingParticipantView/index.tsx

@@ -6,7 +6,7 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import { FLOATING_VIDEO_VIEW_STYLE, Z_INDEX } from '../../../constants';
+import { Z_INDEX } from '../../../constants';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import { VideoSlash } from '../../../icons';
 import FloatingView from './FloatingView';
@@ -21,6 +21,7 @@ import {
   type ParticipantViewProps,
 } from '../ParticipantView';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useFloatingVideoDimensions } from './useFloatingVideoDimensions';
 import { type StreamVideoParticipant } from '@stream-io/video-client';
 
 export type FloatingParticipantViewAlignment =
@@ -104,7 +105,11 @@ export const FloatingParticipantView = ({
   objectFit,
 }: FloatingParticipantViewProps) => {
   const {
-    theme: { colors, floatingParticipantsView },
+    theme: {
+      colors,
+      floatingParticipantsView,
+      variants: { spacingSizes },
+    },
   } = useTheme();
 
   const floatingAlignmentMap: Record<
@@ -122,6 +127,12 @@ export const FloatingParticipantView = ({
     height: number;
   }>();
 
+  const floatingVideoDimensions = useFloatingVideoDimensions(
+    containerDimensions,
+    participant,
+    'videoTrack',
+  );
+
   const participantViewProps: ParticipantViewComponentProps = {
     ParticipantLabel: null,
     ParticipantNetworkQualityIndicator,
@@ -158,7 +169,7 @@ export const FloatingParticipantView = ({
         });
       }}
     >
-      {containerDimensions && (
+      {containerDimensions && floatingVideoDimensions && (
         <FloatingView
           containerHeight={containerDimensions.height}
           containerWidth={containerDimensions.width}
@@ -171,6 +182,12 @@ export const FloatingParticipantView = ({
                 trackType="videoTrack"
                 style={[
                   styles.participantViewContainer,
+                  {
+                    width: floatingVideoDimensions.width,
+                    height: floatingVideoDimensions.height,
+                    borderRadius: floatingVideoDimensions.width * 0.1,
+                    marginHorizontal: spacingSizes.md,
+                  },
                   participantViewStyle,
                   { shadowColor: colors.sheetPrimary },
                   floatingParticipantsView.participantViewContainer,
@@ -197,9 +214,6 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   participantViewContainer: {
-    height: FLOATING_VIDEO_VIEW_STYLE.height,
-    width: FLOATING_VIDEO_VIEW_STYLE.width,
-    borderRadius: FLOATING_VIDEO_VIEW_STYLE.borderRadius,
     shadowOffset: {
       width: 0,
       height: 2,

package/src/components/Participant/FloatingParticipantView/useFloatingVideoDimensions.tsx

@@ -0,0 +1,36 @@
+import {
+  StreamVideoParticipant,
+  VideoTrackType,
+} from '@stream-io/video-client';
+import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
+
+export const useFloatingVideoDimensions = (
+  containerDimensions:
+    | {
+        width: number;
+        height: number;
+      }
+    | undefined,
+  participant: StreamVideoParticipant | undefined,
+  trackType: VideoTrackType,
+) => {
+  const containerWidth = containerDimensions?.width ?? 0;
+  const { width, height } = useTrackDimensions(participant, trackType);
+
+  if (width === 0 || height === 0 || containerWidth === 0) {
+    return undefined;
+  }
+
+  const aspectRatio = width / height;
+
+  // based on Android AOSP PiP mode default dimensions algorithm
+  // 23% of the container width
+  const floatingVideoWidth = containerWidth * 0.23;
+  // the height is calculated based on the aspect ratio
+  const floatingVideoHeight = floatingVideoWidth / aspectRatio;
+
+  return {
+    width: floatingVideoWidth,
+    height: floatingVideoHeight,
+  };
+};

package/src/constants/index.ts

@@ -1,11 +1,5 @@
 import { type StreamReactionType } from '../components';
 
-export const FLOATING_VIDEO_VIEW_STYLE = {
-  height: 140,
-  width: 80,
-  borderRadius: 10,
-};
-
 export const defaultEmojiReactions: StreamReactionType[] = [
   {
     type: 'reaction',

package/src/contexts/internal/ScreenshotIosContext.tsx

@@ -1,7 +1,7 @@
 import {
   StreamVideoParticipant,
+  videoLoggerSystem,
   type VideoTrackType,
-  getLogger,
 } from '@stream-io/video-client';
 import React, {
   createContext,
@@ -85,20 +85,20 @@ export const ScreenshotIosContextProvider = ({
           `${participant.userId}-${videoTrackType}`,
         );
         if (!ref || !ref.current) {
-          getLogger(['ScreenshotIosContextProvider'])(
-            'error',
-            'Cannot take snapshot: No registered view for this participant',
-          );
+          videoLoggerSystem
+            .getLogger('ScreenshotIosContextProvider')
+            .error(
+              'Cannot take snapshot: No registered view for this participant',
+            );
           return null;
         }
 
         // Get the native handle for the view
         const tag = findNodeHandle(ref.current);
         if (!tag) {
-          getLogger(['ScreenshotIosContextProvider'])(
-            'error',
-            'Cannot take snapshot: Cannot get native handle for view',
-          );
+          videoLoggerSystem
+            .getLogger('ScreenshotIosContextProvider')
+            .error('Cannot take snapshot: Cannot get native handle for view');
           return null;
         }
 
@@ -107,11 +107,9 @@ export const ScreenshotIosContextProvider = ({
 
         return base64Image;
       } catch (error) {
-        getLogger(['ScreenshotIosContextProvider'])(
-          'error',
-          'Error taking participant snapshot:',
-          error,
-        );
+        videoLoggerSystem
+          .getLogger('ScreenshotIosContextProvider')
+          .error('Error taking participant snapshot:', error);
         return null;
       }
     },

package/src/hooks/push/useInitAndroidTokenAndRest.ts

@@ -5,7 +5,7 @@ import {
 import { useEffect } from 'react';
 import { StreamVideoRN } from '../../utils';
 import { initAndroidPushToken } from '../../utils/push/android';
-import { getLogger } from '@stream-io/video-client';
+import { videoLoggerSystem } from '@stream-io/video-client';
 
 /**
  * This hook is used to initialize the push token for Android.
@@ -23,11 +23,9 @@ export const useInitAndroidTokenAndRest = () => {
     initAndroidPushToken(client, pushConfig, (unsubscribeListener) => {
       unsubscribe = unsubscribeListener;
     }).catch((error) => {
-      getLogger(['useInitAndroidTokenAndRest'])(
-        'warn',
-        'Error in initializing android push token',
-        error,
-      );
+      videoLoggerSystem
+        .getLogger('useInitAndroidTokenAndRest')
+        .warn('Error in initializing android push token', error);
     });
     return () => {
       unsubscribe();

package/src/hooks/push/useIosCallkeepWithCallingStateEffect.ts

@@ -1,4 +1,8 @@
-import { CallingState, getLogger, RxUtils } from '@stream-io/video-client';
+import {
+  CallingState,
+  RxUtils,
+  videoLoggerSystem,
+} from '@stream-io/video-client';
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { NativeModules, Platform } from 'react-native';
 import { useEffect, useState } from 'react';
@@ -38,9 +42,11 @@ const unsubscribeCallkeepEvents = async (activeCallCid: string | undefined) => {
   );
 };
 
-const logger = getLogger(['useIosCallkeepWithCallingStateEffect']);
+const logger = videoLoggerSystem.getLogger(
+  'useIosCallkeepWithCallingStateEffect',
+);
 const log = (message: string) => {
-  logger('warn', message);
+  logger.warn(message);
 };
 
 /**

package/src/hooks/push/useIosVoipPushEventsSetupEffect.ts

@@ -9,9 +9,9 @@ import {
   useStreamVideoClient,
 } from '@stream-io/video-react-bindings';
 import { setPushLogoutCallback } from '../../utils/internal/pushLogoutCallback';
-import { getLogger, StreamVideoClient } from '@stream-io/video-client';
+import { StreamVideoClient, videoLoggerSystem } from '@stream-io/video-client';
 
-const logger = getLogger(['useIosVoipPushEventsSetupEffect']);
+const logger = videoLoggerSystem.getLogger('useIosVoipPushEventsSetupEffect');
 
 /* VoipPushNotificationLib has support for only one listener type at a time
  hence to support login and logout scenario of multiple users we keep of the last count of the listener that was added
@@ -29,7 +29,7 @@ function setLogoutCallback(
     try {
       await client.removeDevice(token);
     } catch (err) {
-      logger('warn', 'PushLogoutCallback - Failed to remove voip token', err);
+      logger.warn('PushLogoutCallback - Failed to remove voip token', err);
     }
   });
 }
@@ -66,15 +66,14 @@ export const useIosVoipPushEventsSetupEffect = () => {
 
     if (!tokenToSend) return;
 
-    logger(
-      'debug',
+    logger.debug(
       `Sending voip token as user logged in after token was received, token: ${tokenToSend}`,
     );
 
     client
       .addVoipDevice(tokenToSend, 'apn', pushProviderName)
       .then(() => {
-        logger('debug', `Sent voip token: ${tokenToSend}`);
+        logger.debug(`Sent voip token: ${tokenToSend}`);
         setLogoutCallback(client, tokenToSend, lastVoipTokenRef);
         lastVoipTokenRef.current = {
           token: tokenToSend,
@@ -83,7 +82,7 @@ export const useIosVoipPushEventsSetupEffect = () => {
         setUnsentToken(undefined);
       })
       .catch((error) => {
-        logger('warn', 'Error in sending unsent voip token', error);
+        logger.warn('Error in sending unsent voip token', error);
       });
   }, [client, connectedUserId, unsentToken]);
 
@@ -95,8 +94,7 @@ export const useIosVoipPushEventsSetupEffect = () => {
     }
     if (!pushConfig.android.incomingCallChannel) {
       // TODO: remove this check and find a better way once we have telecom integration for android
-      logger(
-        'debug',
+      logger.debug(
         'android incomingCallChannel is not defined, so skipping the useIosVoipPushEventsSetupEffect',
       );
       return;
@@ -117,32 +115,30 @@ export const useIosVoipPushEventsSetupEffect = () => {
           : !token
             ? 'no token was present (possibly using a simulator)'
             : 'no user id was present';
-        logger('debug', `Skipped sending voip token: ${reason}`);
+        logger.debug(`Skipped sending voip token: ${reason}`);
         setUnsentToken(token);
         return;
       }
 
       const lastVoipToken = lastVoipTokenRef.current;
       if (lastVoipToken.token === token && lastVoipToken.userId === userId) {
-        logger(
-          'debug',
+        logger.debug(
           `Skipped sending voip token as it is same as last token - token: ${token}, userId: ${userId}`,
         );
         return;
       }
 
-      logger('debug', `Sending voip token: ${token} userId: ${userId}`);
+      logger.debug(`Sending voip token: ${token} userId: ${userId}`);
       client
         .addVoipDevice(token, 'apn', pushProviderName)
         .then(() => {
-          logger('debug', `Sent voip token: ${token} userId: ${userId}`);
+          logger.debug(`Sent voip token: ${token} userId: ${userId}`);
           setLogoutCallback(client, token, lastVoipTokenRef);
           lastVoipTokenRef.current = { token, userId };
         })
         .catch((err) => {
           setUnsentToken(token);
-          logger(
-            'warn',
+          logger.warn(
             `Failed to send voip token: ${token} userId: ${userId}`,
             err,
           );
@@ -173,13 +169,12 @@ export const useIosVoipPushEventsSetupEffect = () => {
     return () => {
       const userId = client.streamClient._user?.id;
       if (currentListenerCount !== lastListener.count) {
-        logger(
-          'debug',
+        logger.debug(
           `Skipped removing voip event listeners for user: ${userId}`,
         );
         return;
       }
-      logger('debug', `Voip event listeners are removed for user: ${userId}`);
+      logger.debug(`Voip event listeners are removed for user: ${userId}`);
       voipPushNotification.removeEventListener('didLoadWithEvents');
       voipPushNotification.removeEventListener('register');
     };

package/src/hooks/push/useProcessPushCallEffect.ts

@@ -13,7 +13,7 @@ import {
 import { BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter } from 'rxjs/operators';
 import { processCallFromPush } from '../../utils/push/internal/utils';
-import { getLogger, StreamVideoClient } from '@stream-io/video-client';
+import { StreamVideoClient, videoLoggerSystem } from '@stream-io/video-client';
 import type { StreamVideoConfig } from '../../utils/StreamVideoRN/types';
 
 /**
@@ -32,10 +32,11 @@ export const useProcessPushCallEffect = () => {
       return;
     }
 
-    getLogger(['useProcessPushCallEffect'])(
-      'debug',
-      `Adding subscriptions to process incoming call from push notification`,
-    );
+    videoLoggerSystem
+      .getLogger('useProcessPushCallEffect')
+      .debug(
+        `Adding subscriptions to process incoming call from push notification`,
+      );
 
     // if the user accepts the call from push notification we join the call
     const acceptedCallSubscription = createCallSubscription(
@@ -96,10 +97,11 @@ const createCallSubscription = (
   return behaviourSubjectWithCallCid
     .pipe(distinctUntilChanged(), filter(cidIsNotUndefined))
     .subscribe(async (callCId) => {
-      getLogger(['useProcessPushCallEffect'])(
-        'debug',
-        `Processing call from push notification with action: ${action} and callCId: ${callCId}`,
-      );
+      videoLoggerSystem
+        .getLogger('useProcessPushCallEffect')
+        .debug(
+          `Processing call from push notification with action: ${action} and callCId: ${callCId}`,
+        );
       await processCallFromPush(client, callCId, action, pushConfig);
       behaviourSubjectWithCallCid.next(undefined); // remove the current call id to avoid processing again
     });