Merge branch 'main' into worker-timers

GetStream · Nov 12, 2024 · 0d49d44 · 0d49d44
2 parents 790c605 + 53a5ac3
commit 0d49d44
Show file tree

Hide file tree

Showing 29 changed files with 279 additions and 26 deletions.
diff --git a/packages/client/CHANGELOG.md b/packages/client/CHANGELOG.md
@@ -2,6 +2,20 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.10.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.10.4...@stream-io/video-client-1.10.5) (2024-11-07)
+
+
+### Bug Fixes
+
+* ignore maxSimulcastLayers override for SVC codecs ([#1564](https://github.com/GetStream/stream-video-js/issues/1564)) ([48f8abe](https://github.com/GetStream/stream-video-js/commit/48f8abe5fd5b48c367a04696febd582573def828))
+
+## [1.10.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.10.3...@stream-io/video-client-1.10.4) (2024-11-07)
+
+
+### Bug Fixes
+
+* max simulcast layers preference ([#1560](https://github.com/GetStream/stream-video-js/issues/1560)) ([2b0bf28](https://github.com/GetStream/stream-video-js/commit/2b0bf2824dce41c2709e361e0521cf85e1b2fd16))
+
 ## [1.10.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.10.2...@stream-io/video-client-1.10.3) (2024-11-05)
 
 

diff --git a/...s/client/docusaurus/docs/javascript/02-guides/03-call-and-participant-state.mdx b/...s/client/docusaurus/docs/javascript/02-guides/03-call-and-participant-state.mdx
@@ -151,6 +151,8 @@ const subscription = call.state.participants$.subscribe((participants) => {
 subscription.unsubscribe();
 ```
 
+In a call with many participants, the value of the `participants$` call state observable is truncated to 250 participants. The participants who are publishing video, audio, or screen sharing have priority over the other participants in the list. This means, for example, that in a livestream with one host and many viewers, the host is guaranteed to be in the list.
+
 ## Client state
 
 The client state can be accessed by `client.state`.

diff --git a/packages/client/package.json b/packages/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "1.10.3",
+  "version": "1.10.5",
   "packageManager": "[email protected]",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

diff --git a/packages/client/src/rtc/Publisher.ts b/packages/client/src/rtc/Publisher.ts
@@ -394,7 +394,8 @@ export class Publisher {
         ? // for SVC, we only have one layer (q) and often rid is omitted
           enabledLayers[0]
         : // for non-SVC, we need to find the layer by rid (simulcast)
-          enabledLayers.find((l) => l.name === encoder.rid);
+          enabledLayers.find((l) => l.name === encoder.rid) ??
+          (params.encodings.length === 1 ? enabledLayers[0] : undefined);
 
       // flip 'active' flag only when necessary
       const shouldActivate = !!layer?.active;

diff --git a/packages/client/src/rtc/__tests__/Publisher.test.ts b/packages/client/src/rtc/__tests__/Publisher.test.ts
@@ -360,6 +360,45 @@ describe('Publisher', () => {
       ]);
     });
 
+    it('can dynamically activate/deactivate simulcast layers when rid is missing', async () => {
+      const transceiver = new RTCRtpTransceiver();
+      const setParametersSpy = vi
+        .spyOn(transceiver.sender, 'setParameters')
+        .mockResolvedValue();
+      const getParametersSpy = vi
+        .spyOn(transceiver.sender, 'getParameters')
+        .mockReturnValue({
+          // @ts-expect-error incomplete data
+          codecs: [{ mimeType: 'video/VP8' }],
+          encodings: [{ active: false }],
+        });
+
+      // inject the transceiver
+      publisher['transceiverCache'].set(TrackType.VIDEO, transceiver);
+
+      await publisher['changePublishQuality']([
+        {
+          name: 'q',
+          active: true,
+          maxBitrate: 100,
+          scaleResolutionDownBy: 4,
+          maxFramerate: 30,
+          scalabilityMode: '',
+        },
+      ]);
+
+      expect(getParametersSpy).toHaveBeenCalled();
+      expect(setParametersSpy).toHaveBeenCalled();
+      expect(setParametersSpy.mock.calls[0][0].encodings).toEqual([
+        {
+          active: true,
+          maxBitrate: 100,
+          scaleResolutionDownBy: 4,
+          maxFramerate: 30,
+        },
+      ]);
+    });
+
     it('can dynamically update scalability mode in SVC', async () => {
       const transceiver = new RTCRtpTransceiver();
       const setParametersSpy = vi

diff --git a/packages/client/src/rtc/bitrateLookup.ts b/packages/client/src/rtc/bitrateLookup.ts
@@ -6,8 +6,8 @@ const bitrateLookupTable: Record<
 > = {
   h264: {
     2160: 5_000_000,
-    1440: 3_500_000,
-    1080: 2_750_000,
+    1440: 3_000_000,
+    1080: 2_000_000,
     720: 1_250_000,
     540: 750_000,
     360: 400_000,

diff --git a/packages/client/src/rtc/videoLayers.ts b/packages/client/src/rtc/videoLayers.ts
@@ -65,7 +65,11 @@ export const findOptimalVideoLayers = (
   const optimalVideoLayers: OptimalVideoLayer[] = [];
   const settings = videoTrack.getSettings();
   const { width = 0, height = 0 } = settings;
-  const { scalabilityMode, bitrateDownscaleFactor = 2 } = publishOptions || {};
+  const {
+    scalabilityMode,
+    bitrateDownscaleFactor = 2,
+    maxSimulcastLayers = 3,
+  } = publishOptions || {};
   const maxBitrate = getComputedMaxBitrate(
     targetResolution,
     width,
@@ -76,7 +80,8 @@ export const findOptimalVideoLayers = (
   let downscaleFactor = 1;
   let bitrateFactor = 1;
   const svcCodec = isSvcCodec(codecInUse);
-  for (const rid of ['f', 'h', 'q']) {
+  const totalLayers = svcCodec ? 3 : Math.min(3, maxSimulcastLayers);
+  for (const rid of ['f', 'h', 'q'].slice(0, totalLayers)) {
     const layer: OptimalVideoLayer = {
       active: true,
       rid,

diff --git a/packages/client/src/types.ts b/packages/client/src/types.ts
@@ -181,6 +181,10 @@ export type PublishOptions = {
    * in simulcast mode (non-SVC).
    */
   bitrateDownscaleFactor?: number;
+  /**
+   * The maximum number of simulcast layers to use when publishing the video stream.
+   */
+  maxSimulcastLayers?: number;
   /**
    * Screen share settings.
    */

diff --git a/packages/react-bindings/CHANGELOG.md b/packages/react-bindings/CHANGELOG.md
@@ -2,6 +2,16 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.16](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-1.1.15...@stream-io/video-react-bindings-1.1.16) (2024-11-07)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.5`
+## [1.1.15](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-1.1.14...@stream-io/video-react-bindings-1.1.15) (2024-11-07)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.4`
 ## [1.1.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-1.1.13...@stream-io/video-react-bindings-1.1.14) (2024-11-05)
 
 ### Dependency Updates

diff --git a/packages/react-bindings/package.json b/packages/react-bindings/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-bindings",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "packageManager": "[email protected]",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

diff --git a/packages/react-native-sdk/CHANGELOG.md b/packages/react-native-sdk/CHANGELOG.md
@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.2.14](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.2.13...@stream-io/video-react-native-sdk-1.2.14) (2024-11-07)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.5`
+* `@stream-io/video-react-bindings` updated to version `1.1.16`
+## [1.2.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.2.12...@stream-io/video-react-native-sdk-1.2.13) (2024-11-07)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.4`
+* `@stream-io/video-react-bindings` updated to version `1.1.15`
 ## [1.2.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.2.11...@stream-io/video-react-native-sdk-1.2.12) (2024-11-05)
 
 ### Dependency Updates

diff --git a/...ative-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx b/...ative-sdk/docusaurus/docs/reactnative/03-core/03-call-and-participant-state.mdx
@@ -205,10 +205,12 @@ const hosts = participants.filter((p) => p.roles.includes('host'));
 
 // participants that publish video and audio
 const videoParticipants = participants.filter(
-  (p) => hasVideo(p) && hasAudio(p),
+  (p) => hasVideo(p) && hasAudio(p)
 );
 ```
 
+In a call with many participants, the list returned by the `useParticipants` call state hook is truncated to 250 participants. The participants who are publishing video, audio, or screen sharing have priority over the other participants in the list. This means, for example, that in a livestream with one host and many viewers, the host is guaranteed to be in the list.
+
 ## Client state
 
 To observe client state you need to provide a `StreamVideoClient` instance to the `StreamVideo` context provider.

diff --git a/...ative-sdk/docusaurus/docs/reactnative/05-ui-cookbook/19-call-quality-rating.mdx b/...ative-sdk/docusaurus/docs/reactnative/05-ui-cookbook/19-call-quality-rating.mdx
@@ -0,0 +1,120 @@
+---
+id: call-quality-rating
+title: Call Quality Rating
+---
+
+## Introduction
+
+In this guide, we are going to show how one can build a call quality rating form on top of our React Native Video SDK.
+It is a good practice to ask your end users about their overall experience after the end of the call or, while being in a call.
+
+Here is a preview of the component we are going to build:
+![Preview of the UI](../assets/05-ui-cookbook/19-call-quality-rating/feedback.png)
+
+## Submit Feedback API
+
+Our React Native Video SDK provides an API for collecting this feedback which later can be seen in the call stats section of our dashboard.
+
+```ts
+await call.submitFeedback(
+  rating, // a rating grade from 1 - 5,
+  {
+    reason: '<no-message-provided>', // optional reason message
+    custom: {
+      // ... any extra properties that you wish to collect
+    },
+  }
+);
+```
+
+## Implementation
+
+```tsx
+import React, { useState } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  Image,
+} from 'react-native';
+import { useCall } from '@stream-io/video-react-native-sdk';
+import Star from '../assets/Star';
+import Close from '../assets/Close';
+
+const FeedbackModal: = () => {
+  const call = useCall();
+  const [selectedRating, setSelectedRating] = useState<number | null>(null);
+
+  const handleRatingPress = (rating: number) => {
+    setSelectedRating(rating);
+    await call
+      ?.submitFeedback(Math.min(Math.max(1, rating), 5), {
+        reason: '<no-message-provided>',
+      })
+      .catch((err) => console.warn('Failed to submit call feedback', err));
+  };
+
+  return (
+    <Modal
+      transparent
+      visible={visible}
+      onRequestClose={onClose}
+    >
+      <TouchableOpacity style={styles.overlay} onPress={onClose}>
+        <View style={[styles.modal]}>
+          <View style={styles.top}>
+            <View style={styles.topRight}>
+              <TouchableOpacity onPress={onClose} style={[styles.closeButton]}>
+                <IconWrapper>
+                  <Close
+                    color={colors.typeSecondary}
+                    size={variants.roundButtonSizes.sm}
+                  />
+                </IconWrapper>
+              </TouchableOpacity>
+            </View>
+          </View>
+          <Image source={require('../assets/feedbackLogo.png')} />
+          <View style={styles.textContainer}>
+            <Text style={styles.title}>We Value Your Feedback!</Text>
+            <Text style={styles.subtitle}>
+              Tell us about your video call experience.
+            </Text>
+          </View>
+          <View style={styles.ratingContainer}>
+            {[1, 2, 3, 4, 5].map((rating) => (
+              <TouchableOpacity
+                key={rating}
+                onPress={() => handleRatingPress(rating)}
+                style={[styles.ratingButton]}
+              >
+                <Star
+                  color={
+                    selectedRating && selectedRating >= rating
+                      ? colors.iconAlertSuccess
+                      : colors.typeSecondary
+                  }
+                />
+              </TouchableOpacity>
+            ))}
+          </View>
+          <View style={styles.bottom}>
+            <View style={styles.left}>
+              <Text style={styles.text}>Very Bad</Text>
+            </View>
+            <View style={styles.right}>
+              <Text style={styles.text}>Very Good</Text>
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    </Modal>
+  );
+};
+```
+
+:::note
+For simplicity, the StyleSheet is not included in this guide.
+:::
diff --git a/...urus/docs/reactnative/assets/05-ui-cookbook/19-call-quality-rating/feedback.png b/...urus/docs/reactnative/assets/05-ui-cookbook/19-call-quality-rating/feedback.png
diff --git a/packages/react-native-sdk/package.json b/packages/react-native-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "packageManager": "[email protected]",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

diff --git a/packages/react-sdk/CHANGELOG.md b/packages/react-sdk/CHANGELOG.md
@@ -2,6 +2,23 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.7.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.11...@stream-io/video-react-sdk-1.7.12) (2024-11-08)
+
+### Dependency Updates
+
+* `@stream-io/video-filters-web` updated to version `0.1.5`
+## [1.7.11](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.10...@stream-io/video-react-sdk-1.7.11) (2024-11-07)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.5`
+* `@stream-io/video-react-bindings` updated to version `1.1.16`
+## [1.7.10](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.9...@stream-io/video-react-sdk-1.7.10) (2024-11-07)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.10.4`
+* `@stream-io/video-react-bindings` updated to version `1.1.15`
 ## [1.7.9](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.7.8...@stream-io/video-react-sdk-1.7.9) (2024-11-05)
 
 ### Dependency Updates

diff --git a/...ges/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx b/...ges/react-sdk/docusaurus/docs/React/02-guides/03-call-and-participant-state.mdx
@@ -207,6 +207,8 @@ const videoParticipants = participants.filter(
 );
 ```
 
+In a call with many participants, the list returned by the `useParticipants` call state hook is truncated to 250 participants. The participants who are publishing video, audio, or screen sharing have priority over the other participants in the list. This means, for example, that in a livestream with one host and many viewers, the host is guaranteed to be in the list.
+
 ## Client state
 
 To observe client state you need to provide a `StreamVideoClient` instance to the `StreamVideo` context provider.

diff --git a/packages/react-sdk/package.json b/packages/react-sdk/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.7.9",
+  "version": "1.7.12",
   "packageManager": "[email protected]",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

diff --git a/packages/react-sdk/src/components/BackgroundFilters/BackgroundFilters.tsx b/packages/react-sdk/src/components/BackgroundFilters/BackgroundFilters.tsx
@@ -145,7 +145,7 @@ export const BackgroundFiltersProvider = (
     backgroundImages = [],
     backgroundFilter: bgFilterFromProps = undefined,
     backgroundImage: bgImageFromProps = undefined,
-    backgroundBlurLevel: bgBlurLevelFromProps = 'high',
+    backgroundBlurLevel: bgBlurLevelFromProps = undefined,
     tfFilePath,
     modelFilePath,
     basePath,
@@ -173,7 +173,7 @@ export const BackgroundFiltersProvider = (
   const disableBackgroundFilter = useCallback(() => {
     setBackgroundFilter(undefined);
     setBackgroundImage(undefined);
-    setBackgroundBlurLevel('high');
+    setBackgroundBlurLevel(undefined);
   }, []);
 
   const [isSupported, setIsSupported] = useState(false);

diff --git a/packages/video-filters-web/CHANGELOG.md b/packages/video-filters-web/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.1.4...@stream-io/video-filters-web-0.1.5) (2024-11-08)
+
+
+### Bug Fixes
+
+* guard against null fenceSync ([#1565](https://github.com/GetStream/stream-video-js/issues/1565)) ([9a3ae38](https://github.com/GetStream/stream-video-js/commit/9a3ae385ebed5b7fd44855ed2a7b7fc01ac53792))
+
 ## [0.1.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.1.3...@stream-io/video-filters-web-0.1.4) (2024-09-19)