@stream-io/video-react-native-sdk 1.29.4 → 1.30.1-beta.0

package/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { debounceTime } from 'rxjs';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
   type CallParticipantsListComponentProps,
@@ -49,19 +49,33 @@ export const CallParticipantsGrid = ({
   const {
     theme: { colors, callParticipantsGrid },
   } = useTheme();
-  const {
-    useRemoteParticipants,
-    useParticipants,
-    useLocalParticipant,
-    useDominantSpeaker,
-  } = useCallStateHooks();
-  const _remoteParticipants = useRemoteParticipants();
+  const call = useCall();
+  const { useLocalParticipant, useDominantSpeaker } = useCallStateHooks();
   const localParticipant = useLocalParticipant();
-  const _allParticipants = useParticipants();
   const dominantSpeaker = useDominantSpeaker();
-  // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
-  const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
-  const allParticipants = useDebouncedValue(_allParticipants, 300);
+  const [remoteParticipants, setRemoteParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.remoteParticipants ?? []);
+  const [allParticipants, setAllParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.participants ?? []);
+  useEffect(() => {
+    if (!call) {
+      setRemoteParticipants([]);
+      setAllParticipants([]);
+      return;
+    }
+    const sub1 = call.state.remoteParticipants$
+      .pipe(debounceTime(300))
+      .subscribe(setRemoteParticipants);
+    const sub2 = call.state.participants$
+      .pipe(debounceTime(300))
+      .subscribe(setAllParticipants);
+    return () => {
+      sub1.unsubscribe();
+      sub2.unsubscribe();
+    };
+  }, [call]);
   const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };

package/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import {
   hasScreenShare,
-  speakerLayoutSortPreset,
+  type StreamVideoParticipant,
 } from '@stream-io/video-client';
-import { useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
 import { StyleSheet, View, type ViewStyle } from 'react-native';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { debounceTime } from 'rxjs';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
   CallParticipantsList as DefaultCallParticipantsList,
@@ -56,15 +56,24 @@ export const CallParticipantsSpotlight = ({
     theme: { callParticipantsSpotlight, variants },
   } = useTheme();
   const styles = useStyles();
-  const { useParticipants } = useCallStateHooks();
-  const _allParticipants = useParticipants({
-    sortBy: speakerLayoutSortPreset,
-  });
-  const allParticipants = useDebouncedValue(_allParticipants, 300); // we debounce the participants to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
+  const call = useCall();
+  const [allParticipants, setAllParticipants] = useState<
+    StreamVideoParticipant[]
+  >(() => call?.state.participants ?? []);
+  useEffect(() => {
+    if (!call) {
+      setAllParticipants([]);
+      return;
+    }
+    const sub = call.state.participants$
+      .pipe(debounceTime(300))
+      .subscribe(setAllParticipants);
+    return () => sub.unsubscribe();
+  }, [call]);
   const [participantInSpotlight, ...otherParticipants] = allParticipants;
   const isScreenShareOnSpotlight =
     participantInSpotlight && hasScreenShare(participantInSpotlight);
-  const isUserAloneInCall = _allParticipants?.length === 1;
+  const isUserAloneInCall = allParticipants.length === 1;
 
   const isInPiP = useIsInPiPMode();
 

package/src/components/Call/CallParticipantsList/CallParticipantsList.tsx

@@ -1,7 +1,7 @@
 import React, {
   useCallback,
+  useEffect,
   useMemo,
-  useReducer,
   useRef,
   useState,
 } from 'react';
@@ -17,7 +17,7 @@ import {
   type StreamVideoParticipantPatches,
   VisibilityState,
 } from '@stream-io/video-client';
-import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
+import { Subject, debounceTime } from 'rxjs';
 import { useCall } from '@stream-io/video-react-bindings';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
@@ -104,9 +104,24 @@ export const CallParticipantsList = ({
   // we use a HashSet to track the currently viewable participants
   // and a separate force update state to rerender the component to inform that the HashSet has changed
   // NOTE: we use set instead of array or object for O(1) lookup, add and delete
-  const viewableParticipantSessionIds = useRef<Set<string>>(new Set());
-  const [_forceUpdateValue, forceUpdate] = useReducer((x) => x + 1, 0);
-  const forceUpdateValue = useDebouncedValue(_forceUpdateValue, 500); // we debounce forced value to avoid multiple viewability change continuous rerenders due to callbacks that occurs simultaneously during a large list scroll or when scrolling is completed
+  // Lazy ref init: avoids recreating instances on every render (useRef doesn't support initializer fns)
+  const viewableParticipantSessionIds = useRef<Set<string>>(null!);
+  if (!viewableParticipantSessionIds.current) {
+    viewableParticipantSessionIds.current = new Set();
+  }
+  const forceUpdate$Ref = useRef<Subject<void>>(null!);
+  if (!forceUpdate$Ref.current) {
+    forceUpdate$Ref.current = new Subject<void>();
+  }
+  const forceUpdate$ = forceUpdate$Ref.current;
+  const [forceUpdateValue, setForceUpdateValue] = useState(0);
+  useEffect(() => {
+    const sub = forceUpdate$.pipe(debounceTime(500)).subscribe(() => {
+      setForceUpdateValue((v) => v + 1);
+    });
+    return () => sub.unsubscribe();
+  }, [forceUpdate$]);
+  const forceUpdate = useCallback(() => forceUpdate$.next(), [forceUpdate$]);
 
   // we use a ref to store the active call object
   // so that it can be used in the onViewableItemsChanged callback

package/src/contexts/ThemeContext.tsx

@@ -5,8 +5,6 @@ import React, {
   useMemo,
 } from 'react';
 
-import merge from 'lodash.merge';
-
 import { defaultTheme, type Theme } from '../theme/theme';
 
 export type DeepPartial<T> = {
@@ -32,6 +30,26 @@ export type ThemeContextValue = {
   theme: Theme;
 };
 
+const isObject = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value);
+
+const merge = <T extends Record<string, unknown>>(
+  target: T,
+  source: DeepPartial<T>,
+) => {
+  for (const key in source) {
+    const sourceValue = source[key];
+    if (sourceValue === undefined) continue;
+
+    const targetValue = target[key as keyof T];
+    if (isObject(sourceValue) && isObject(targetValue)) {
+      merge(targetValue, sourceValue as DeepPartial<Record<string, unknown>>);
+    } else {
+      target[key as keyof T] = sourceValue as T[keyof T];
+    }
+  }
+};
+
 export const mergeThemes = (params: MergedThemesParams) => {
   const { style, theme } = params;
   const finalTheme = (

package/src/utils/hooks/index.ts

@@ -1,2 +1 @@
-export * from './useDebouncedValue';
 export * from './usePrevious';

package/src/version.ts

@@ -1 +1 @@
-export const version = '1.29.4';
+export const version = '1.30.1-beta.0';

package/dist/commonjs/utils/hooks/useDebouncedValue.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useDebouncedValue = useDebouncedValue;
-var _react = require("react");
-/**
- * this is a custom hook that takes a value and a delay and returns a debounced value
- * @param {T} value
- * @param {number} delay
- * @returns {T}
- */
-function useDebouncedValue(value, delay) {
-  const [debouncedValue, setDebouncedValue] = (0, _react.useState)(value);
-  (0, _react.useEffect)(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-//# sourceMappingURL=useDebouncedValue.js.map

package/dist/commonjs/utils/hooks/useDebouncedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_react","require","useDebouncedValue","value","delay","debouncedValue","setDebouncedValue","useState","useEffect","timer","setTimeout","clearTimeout"],"sourceRoot":"../../../../src","sources":["utils/hooks/useDebouncedValue.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA;AACA;AACA;AACA;AACA;AACA;AACO,SAASC,iBAAiBA,CAAIC,KAAQ,EAAEC,KAAa,EAAK;EAC/D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAG,IAAAC,eAAQ,EAAIJ,KAAK,CAAC;EAE9D,IAAAK,gBAAS,EAAC,MAAM;IACd,MAAMC,KAAK,GAAGC,UAAU,CAAC,MAAMJ,iBAAiB,CAACH,KAAK,CAAC,EAAEC,KAAK,CAAC;IAE/D,OAAO,MAAM;MACXO,YAAY,CAACF,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACN,KAAK,EAAEC,KAAK,CAAC,CAAC;EAElB,OAAOC,cAAc;AACvB","ignoreList":[]}

package/dist/module/utils/hooks/useDebouncedValue.js

@@ -1,19 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * this is a custom hook that takes a value and a delay and returns a debounced value
- * @param {T} value
- * @param {number} delay
- * @returns {T}
- */
-export function useDebouncedValue(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-  return debouncedValue;
-}
-//# sourceMappingURL=useDebouncedValue.js.map

package/dist/module/utils/hooks/useDebouncedValue.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useEffect","useState","useDebouncedValue","value","delay","debouncedValue","setDebouncedValue","timer","setTimeout","clearTimeout"],"sourceRoot":"../../../../src","sources":["utils/hooks/useDebouncedValue.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;;AAE3C;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAAIC,KAAQ,EAAEC,KAAa,EAAK;EAC/D,MAAM,CAACC,cAAc,EAAEC,iBAAiB,CAAC,GAAGL,QAAQ,CAAIE,KAAK,CAAC;EAE9DH,SAAS,CAAC,MAAM;IACd,MAAMO,KAAK,GAAGC,UAAU,CAAC,MAAMF,iBAAiB,CAACH,KAAK,CAAC,EAAEC,KAAK,CAAC;IAE/D,OAAO,MAAM;MACXK,YAAY,CAACF,KAAK,CAAC;IACrB,CAAC;EACH,CAAC,EAAE,CAACJ,KAAK,EAAEC,KAAK,CAAC,CAAC;EAElB,OAAOC,cAAc;AACvB","ignoreList":[]}

package/dist/typescript/utils/hooks/useDebouncedValue.d.ts

@@ -1,8 +0,0 @@
-/**
- * this is a custom hook that takes a value and a delay and returns a debounced value
- * @param {T} value
- * @param {number} delay
- * @returns {T}
- */
-export declare function useDebouncedValue<T>(value: T, delay: number): T;
-//# sourceMappingURL=useDebouncedValue.d.ts.map

package/dist/typescript/utils/hooks/useDebouncedValue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDebouncedValue.d.ts","sourceRoot":"","sources":["../../../../src/utils/hooks/useDebouncedValue.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,CAY/D"}

package/src/utils/hooks/useDebouncedValue.ts

@@ -1,21 +0,0 @@
-import { useEffect, useState } from 'react';
-
-/**
- * this is a custom hook that takes a value and a delay and returns a debounced value
- * @param {T} value
- * @param {number} delay
- * @returns {T}
- */
-export function useDebouncedValue<T>(value: T, delay: number): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
-
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [value, delay]);
-
-  return debouncedValue;
-}