Merge branch 'main' into PBE-5856-feat/theme-consolidation

Author: kristian-mkd

packages/client/docusaurus/docs/javascript/02-guides/04-noise-cancellation.mdx

@@ -27,7 +27,7 @@ npm install @stream-io/audio-filters-web
 
 ## Integration
 
-In the following code snippet, we show how to check if platform is supported, initialize the plugin and enable/disable it.
+In the following code snippet, we show how to check if а platform is supported, initialize the plugin, and enable/disable it.
 
 ```typescript
 import { NoiseCancellation } from '@stream-io/audio-filters-web';
@@ -61,3 +61,19 @@ const off = noiseCancellation.on('change', (v) => {
   console.log(`Noise Cancellation is ${v ? 'enabled' : 'disabled'}`);
 });
 ```
+
+In action, the most straight-forward integration should look like this:
+
+```typescript
+import { NoiseCancellation } from '@stream-io/audio-filters-web';
+
+const call = client.call(type, id);
+await call.get(); // or call.getOrCreate()
+
+const noiseCancellation = new NoiseCancellation();
+const isSupported = await noiseCancellation.isSupported();
+if (isSupported) {
+  await noiseCancellation.init();
+  await call.microphone.enableNoiseCancellation(noiseCancellation);
+}
+```

packages/react-sdk/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.4.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.4.3...@stream-io/video-react-sdk-1.4.4) (2024-10-01)
+
+
+### Bug Fixes
+
+* React v17 compatibility ([#1503](https://github.com/GetStream/stream-video-js/issues/1503)) ([a1797cf](https://github.com/GetStream/stream-video-js/commit/a1797cf1d62b1a74f0101bbd185b2cc0e1176575))
+
 ## [1.4.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.4.2...@stream-io/video-react-sdk-1.4.3) (2024-09-24)
 
 ### Dependency Updates

packages/react-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "packageManager": "[email protected]",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -40,8 +40,8 @@
     "react-chartjs-2": "^5.2.0"
   },
   "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19"
   },
   "devDependencies": {
     "@rollup/plugin-json": "^6.1.0",

sample-apps/react/react-dogfood/components/MeetingUI.tsx

@@ -1,5 +1,6 @@
 import { useRouter } from 'next/router';
 import { JSX, useCallback, useEffect, useState } from 'react';
+import { isFirefox } from 'mobile-device-detect';
 import Gleap from 'gleap';
 import {
   CallingState,
@@ -59,7 +60,8 @@ export const MeetingUI = ({ chatClient, mode }: MeetingUIProps) => {
       if (!fastJoin) setShow('loading');
       if (!call) throw new Error('No active call found');
       try {
-        const prontoDefaultCodec = isProntoEnvironment ? 'h264' : 'vp8';
+        const prontoDefaultCodec =
+          isProntoEnvironment && !isFirefox ? 'h264' : 'vp8';
         const preferredCodec = videoCodecOverride || prontoDefaultCodec;
 
         const videoSettings = call.state.settings?.video;

yarn.lock

@@ -7616,8 +7616,8 @@ __metadata:
     rollup: ^4.22.0
     typescript: ^5.5.2
   peerDependencies:
-    react: ^18 || ^19
-    react-dom: ^18 || ^19
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
   languageName: unknown
   linkType: soft