@stream-io/video-react-sdk 1.18.0 → 1.18.2

package/dist/src/core/components/CallLayout/hooks.d.ts

@@ -14,3 +14,4 @@ export declare const useFilteredParticipants: ({ excludeLocalParticipant, filter
 export declare const applyParticipantsFilter: (participants: StreamVideoParticipant[], filter: ParticipantPredicate | ParticipantFilter) => StreamVideoParticipant[];
 export declare const usePaginatedLayoutSortPreset: (call: Call | undefined) => void;
 export declare const useSpeakerLayoutSortPreset: (call: Call | undefined, isOneOnOneCall: boolean) => void;
+export declare const useRawRemoteParticipants: () => StreamVideoParticipant[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.18.0",
+  "version": "1.18.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.23.2",
+    "@stream-io/video-client": "1.23.3",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.6.5",
+    "@stream-io/video-react-bindings": "1.6.6",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -45,7 +45,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@stream-io/audio-filters-web": "^0.4.0",
+    "@stream-io/audio-filters-web": "^0.4.2",
     "@stream-io/video-styling": "^1.2.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",

package/src/components/NoiseCancellation/NoiseCancellationProvider.tsx

@@ -111,7 +111,7 @@ export const NoiseCancellationProvider = (
     noiseCancellation.isEnabled().then((e) => setIsEnabled(e));
     const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));
     const init = (deinit.current || Promise.resolve())
-      .then(() => noiseCancellation.init())
+      .then(() => noiseCancellation.init({ tracer: call.tracer }))
       .then(() => call.microphone.enableNoiseCancellation(noiseCancellation))
       .catch((e) => console.error(`Can't initialize noise cancellation`, e));
 

package/src/core/components/CallLayout/LivestreamLayout.tsx

@@ -8,7 +8,10 @@ import {
 import { hasScreenShare } from '@stream-io/video-client';
 import { ParticipantView, useParticipantViewContext } from '../ParticipantView';
 import { ParticipantsAudio } from '../Audio';
-import { usePaginatedLayoutSortPreset } from './hooks';
+import {
+  usePaginatedLayoutSortPreset,
+  useRawRemoteParticipants,
+} from './hooks';
 
 /**
  * The props for the {@link LivestreamLayout} component.
@@ -62,12 +65,11 @@ export type LivestreamLayoutProps = {
 };
 
 export const LivestreamLayout = (props: LivestreamLayoutProps) => {
-  const { useParticipants, useRemoteParticipants, useHasOngoingScreenShare } =
-    useCallStateHooks();
+  const { useParticipants, useHasOngoingScreenShare } = useCallStateHooks();
   const call = useCall();
   const participants = useParticipants();
   const [currentSpeaker] = participants;
-  const remoteParticipants = useRemoteParticipants();
+  const remoteParticipants = useRawRemoteParticipants();
   const hasOngoingScreenShare = useHasOngoingScreenShare();
   const presenter = hasOngoingScreenShare
     ? participants.find(hasScreenShare)

package/src/core/components/CallLayout/PaginatedGridLayout.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import { useCall } from '@stream-io/video-react-bindings';
 import { StreamVideoParticipant } from '@stream-io/video-client';
 import clsx from 'clsx';
 
@@ -16,6 +16,7 @@ import {
   ParticipantPredicate,
   useFilteredParticipants,
   usePaginatedLayoutSortPreset,
+  useRawRemoteParticipants,
 } from './hooks';
 
 const GROUP_SIZE = 16;
@@ -137,8 +138,7 @@ export const PaginatedGridLayout = (props: PaginatedGridLayoutProps) => {
   ] = useState<HTMLDivElement | null>(null);
 
   const call = useCall();
-  const { useRemoteParticipants } = useCallStateHooks();
-  const remoteParticipants = useRemoteParticipants();
+  const remoteParticipants = useRawRemoteParticipants();
   const participants = useFilteredParticipants({
     excludeLocalParticipant,
     filterParticipants,

package/src/core/components/CallLayout/PipLayout.tsx

@@ -1,10 +1,8 @@
-import {
-  useCall,
-  useCallStateHooks,
-  useI18n,
-} from '@stream-io/video-react-bindings';
+import { useCall, useI18n } from '@stream-io/video-react-bindings';
 import { useEffect, useState } from 'react';
 
+import { hasScreenShare } from '@stream-io/video-client';
+import { Icon } from '../../../components';
 import { ParticipantsAudio } from '../Audio';
 import {
   DefaultParticipantViewUI,
@@ -16,9 +14,8 @@ import {
   ParticipantPredicate,
   useFilteredParticipants,
   usePaginatedLayoutSortPreset,
+  useRawRemoteParticipants,
 } from './hooks';
-import { hasScreenShare } from '@stream-io/video-client';
-import { Icon } from '../../../components';
 
 export type PipLayoutProps = {
   /**
@@ -121,8 +118,7 @@ const Pip = (props: PipLayoutProps) => {
 Pip.displayName = 'PipLayout.Pip';
 
 const Host = () => {
-  const { useRemoteParticipants } = useCallStateHooks();
-  const remoteParticipants = useRemoteParticipants();
+  const remoteParticipants = useRawRemoteParticipants();
   return <ParticipantsAudio participants={remoteParticipants} />;
 };
 

package/src/core/components/CallLayout/SpeakerLayout.tsx

@@ -17,6 +17,7 @@ import {
   ParticipantFilter,
   ParticipantPredicate,
   useFilteredParticipants,
+  useRawRemoteParticipants,
   useSpeakerLayoutSortPreset,
 } from './hooks';
 import { useCalculateHardLimit } from '../../hooks/useCalculateHardLimit';
@@ -110,9 +111,9 @@ export const SpeakerLayout = ({
   muted,
 }: SpeakerLayoutProps) => {
   const call = useCall();
-  const { useParticipants, useRemoteParticipants } = useCallStateHooks();
+  const { useParticipants } = useCallStateHooks();
   const allParticipants = useParticipants();
-  const remoteParticipants = useRemoteParticipants();
+  const remoteParticipants = useRawRemoteParticipants();
   const [participantInSpotlight, ...otherParticipants] =
     useFilteredParticipants({ excludeLocalParticipant, filterParticipants });
   const [participantsBarWrapperElement, setParticipantsBarWrapperElement] =

package/src/core/components/CallLayout/hooks.ts

@@ -109,6 +109,15 @@ export const useSpeakerLayoutSortPreset = (
   }, [call, isOneOnOneCall]);
 };
 
+export const useRawRemoteParticipants = () => {
+  const { useRawParticipants } = useCallStateHooks();
+  const rawParicipants = useRawParticipants();
+  return useMemo(
+    () => rawParicipants.filter((p) => !p.isLocalParticipant),
+    [rawParicipants],
+  );
+};
+
 const resetSortPreset = (call: Call) => {
   // reset the sorting to the default for the call type
   const callConfig = CallTypes.get(call.type);