@stream-io/video-client 1.37.1 → 1.37.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.37.1",
+  "version": "1.37.3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "browser": "dist/index.browser.es.js",
@@ -41,7 +41,7 @@
     "@openapitools/openapi-generator-cli": "^2.25.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.4",
-    "@stream-io/audio-filters-web": "^0.6.0",
+    "@stream-io/audio-filters-web": "^0.6.1",
     "@stream-io/node-sdk": "^0.7.9",
     "@total-typescript/shoehorn": "^0.1.2",
     "@types/sdp-transform": "^2.15.0",

package/src/devices/MicrophoneManager.ts

@@ -92,7 +92,9 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
             })
             .then((canAutoEnable) => {
               if (canAutoEnable) {
-                this.noiseCancellation?.enable();
+                this.noiseCancellation?.enable().catch((err) => {
+                  this.logger.warn('Failed to enable noise cancellation', err);
+                });
               }
             })
             .catch((err) => {
@@ -175,7 +177,9 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
           canAutoEnable = await noiseCancellation.canAutoEnable();
         }
         if (canAutoEnable) {
-          noiseCancellation.enable();
+          noiseCancellation.enable().catch((err) => {
+            this.logger.warn('Failed to enable noise cancellation', err);
+          });
         }
       }
     } catch (e) {
@@ -268,9 +272,16 @@ export class MicrophoneManager extends AudioDeviceManager<MicrophoneManagerState
       const disableAudioProcessing =
         profile === AudioBitrateProfile.MUSIC_HIGH_QUALITY;
       if (disableAudioProcessing) {
-        this.noiseCancellation.disable(); // disable for high quality music mode
+        this.noiseCancellation.disable().catch((err) => {
+          this.logger.warn(
+            'Failed to disable noise cancellation for music mode',
+            err,
+          );
+        }); // disable for high quality music mode
       } else {
-        this.noiseCancellation.enable(); // restore it for other modes if available
+        this.noiseCancellation.enable().catch((err) => {
+          this.logger.warn('Failed to enable noise cancellation', err);
+        }); // restore it for other modes if available
       }
     }
   }

package/src/devices/__tests__/NoiseCancellationStub.ts

@@ -7,8 +7,12 @@ export class NoiseCancellationStub implements INoiseCancellation {
   isSupported = () => true;
   init = () => Promise.resolve(undefined);
   isEnabled = async () => true;
-  enable = () => this.listeners['change']?.forEach((l) => l(true));
-  disable = () => this.listeners['change']?.forEach((l) => l(false));
+  enable = async () => {
+    this.listeners['change']?.forEach((l) => l(true));
+  };
+  disable = async () => {
+    this.listeners['change']?.forEach((l) => l(false));
+  };
   setSuppressionLevel = () => {};
   dispose = () => Promise.resolve(undefined);
   toFilter = () => (ms: MediaStream) => ({ output: ms });

package/src/store/CallState.ts

@@ -74,6 +74,29 @@ type OrphanedTrack = {
   track: MediaStream;
 };
 
+/**
+ * Creates a stable participant filter function, ready to be used in combination
+ * with the `useSyncExternalStore` hook.
+ *
+ * @param predicate the predicate to use.
+ */
+const createStableParticipantsFilter = (
+  predicate: (p: StreamVideoParticipant) => boolean,
+) => {
+  const empty: StreamVideoParticipant[] = [];
+  return (participants: StreamVideoParticipant[]) => {
+    // no need to filter if there are no participants
+    if (!participants.length) return participants;
+
+    // return a stable empty array if there are no remote participants
+    // instead of creating an empty one
+    const filteredParticipants = participants.filter(predicate);
+    if (!filteredParticipants.length) return empty;
+
+    return filteredParticipants;
+  };
+};
+
 /**
  * Holds the state of the current call.
  * @react You don't have to use this class directly, as we are exposing the state through Hooks.
@@ -353,12 +376,12 @@ export class CallState {
     );
 
     this.remoteParticipants$ = this.participants$.pipe(
-      map((participants) => participants.filter((p) => !p.isLocalParticipant)),
+      map(createStableParticipantsFilter((p) => !p.isLocalParticipant)),
       shareReplay({ bufferSize: 1, refCount: true }),
     );
 
     this.pinnedParticipants$ = this.participants$.pipe(
-      map((participants) => participants.filter((p) => !!p.pin)),
+      map(createStableParticipantsFilter((p) => !!p.pin)),
       shareReplay({ bufferSize: 1, refCount: true }),
     );