Merge branch 'main' into feature/WD-1079

packages/client/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.5.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.5.1...@stream-io/video-client-0.5.2) (2023-12-11)
+
+
+### Bug Fixes
+
+* **ringing:** Auto-Cancel outgoing calls ([#1217](https://github.com/GetStream/stream-video-js/issues/1217)) ([c4d557b](https://github.com/GetStream/stream-video-js/commit/c4d557b736df8ff0a95166d1f9f0a52d4a57a122)), closes [#1215](https://github.com/GetStream/stream-video-js/issues/1215)
+
 ### [0.5.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-0.5.0...@stream-io/video-client-0.5.1) (2023-12-05)
 
 

packages/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "packageManager": "[email protected]",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

packages/client/src/Call.ts

@@ -82,10 +82,8 @@ import {
   debounce,
   filter,
   map,
-  pairwise,
   Subject,
   takeWhile,
-  tap,
   timer,
 } from 'rxjs';
 import { TrackSubscriptionDetails } from './gen/video/sfu/signal_rpc/signal';
@@ -1345,9 +1343,10 @@ export class Call {
   };
 
   /**
+   * Updates the list of video layers to publish.
+   *
    * @internal
-   * @param enabledRids
-   * @returns
+   * @param enabledLayers the list of layers to enable.
    */
   updatePublishQuality = async (enabledLayers: VideoLayerSetting[]) => {
     return this.publisher?.updateVideoPublishQuality(enabledLayers);
@@ -1718,45 +1717,30 @@ export class Call {
     >(`${this.streamClientBasePath}/members`, data);
   };
 
+  /**
+   * Schedules an auto-drop timeout based on the call settings.
+   * Applicable only for ringing calls.
+   */
   private scheduleAutoDrop = () => {
-    if (this.dropTimeout) clearTimeout(this.dropTimeout);
-    const subscription = this.state.settings$
-      .pipe(
-        pairwise(),
-        tap(([prevSettings, currentSettings]) => {
-          if (!currentSettings || !this.clientStore.connectedUser) return;
-
-          const isOutgoingCall =
-            this.currentUserId === this.state.createdBy?.id;
-
-          const [prevTimeoutMs, timeoutMs] = isOutgoingCall
-            ? [
-                prevSettings?.ring.auto_cancel_timeout_ms,
-                currentSettings.ring.auto_cancel_timeout_ms,
-              ]
-            : [
-                prevSettings?.ring.incoming_call_timeout_ms,
-                currentSettings.ring.incoming_call_timeout_ms,
-              ];
-          if (
-            typeof timeoutMs === 'undefined' ||
-            timeoutMs === prevTimeoutMs ||
-            timeoutMs === 0
-          )
-            return;
-
-          if (this.dropTimeout) clearTimeout(this.dropTimeout);
-          this.dropTimeout = setTimeout(() => this.leave(), timeoutMs);
-        }),
-        takeWhile(
-          () => !!this.clientStore.calls.find((call) => call.cid === this.cid),
-        ),
-      )
-      .subscribe();
+    clearTimeout(this.dropTimeout);
+    this.leaveCallHooks.add(
+      createSubscription(this.state.settings$, (settings) => {
+        if (!settings) return;
+        // ignore if the call is not ringing
+        if (this.state.callingState !== CallingState.RINGING) return;
 
-    this.leaveCallHooks.add(() => {
-      !subscription.closed && subscription.unsubscribe();
-    });
+        const timeoutInMs = settings.ring.auto_cancel_timeout_ms;
+        // 0 means no auto-drop
+        if (timeoutInMs <= 0) return;
+
+        clearTimeout(this.dropTimeout);
+        this.dropTimeout = setTimeout(() => {
+          this.leave().catch((err) => {
+            this.logger('error', 'Failed to drop call', err);
+          });
+        }, timeoutInMs);
+      }),
+    );
   };
 
   /**

packages/client/src/rtc/Publisher.ts

@@ -218,12 +218,7 @@ export class Publisher {
         'info',
         `Track ${TrackType[trackType]} has ended, notifying the SFU`,
       );
-      await this.notifyTrackMuteStateChanged(
-        mediaStream,
-        track,
-        trackType,
-        true,
-      );
+      await this.notifyTrackMuteStateChanged(mediaStream, trackType, true);
       // clean-up, this event listener needs to run only once.
       track.removeEventListener('ended', handleTrackEnded);
     };
@@ -295,12 +290,7 @@ export class Publisher {
       await transceiver.sender.replaceTrack(track);
     }
 
-    await this.notifyTrackMuteStateChanged(
-      mediaStream,
-      track,
-      trackType,
-      false,
-    );
+    await this.notifyTrackMuteStateChanged(mediaStream, trackType, false);
   };
 
   /**
@@ -325,12 +315,7 @@ export class Publisher {
         : (transceiver.sender.track.enabled = false);
       // We don't need to notify SFU if unpublishing in response to remote soft mute
       if (this.state.localParticipant?.publishedTracks.includes(trackType)) {
-        await this.notifyTrackMuteStateChanged(
-          undefined,
-          transceiver.sender.track,
-          trackType,
-          true,
-        );
+        await this.notifyTrackMuteStateChanged(undefined, trackType, true);
       }
     }
   };
@@ -369,7 +354,6 @@ export class Publisher {
 
   private notifyTrackMuteStateChanged = async (
     mediaStream: MediaStream | undefined,
-    track: MediaStreamTrack,
     trackType: TrackType,
     isMuted: boolean,
   ) => {

packages/client/src/store/stateStore.ts

@@ -2,7 +2,8 @@ import { BehaviorSubject, Observable } from 'rxjs';
 import type { Patch } from './rxUtils';
 import * as RxUtils from './rxUtils';
 import { Call } from '../Call';
-import type { OwnUserResponse } from '../coordinator/connection/types';
+import { CallingState } from './CallState';
+import type { OwnUserResponse } from '../gen/coordinator';
 import { getLogger } from '../logger';
 
 export class StreamVideoWriteableStateStore {
@@ -22,12 +23,14 @@ export class StreamVideoWriteableStateStore {
     this.connectedUserSubject.subscribe(async (user) => {
       // leave all calls when the user disconnects.
       if (!user) {
+        const logger = getLogger(['client-state']);
         for (const call of this.calls) {
-          getLogger(['client-state'])(
-            'info',
-            `User disconnected, leaving call: ${call.cid}`,
-          );
-          await call.leave();
+          if (call.state.callingState === CallingState.LEFT) continue;
+
+          logger('info', `User disconnected, leaving call: ${call.cid}`);
+          await call.leave().catch((err) => {
+            logger('error', `Error leaving call: ${call.cid}`, err);
+          });
         }
       }
     });

packages/react-bindings/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.13](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.3.12...@stream-io/video-react-bindings-0.3.13) (2023-12-11)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.5.2`
 ### [0.3.12](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-0.3.11...@stream-io/video-react-bindings-0.3.12) (2023-12-05)
 
 ### Dependency Updates

packages/react-bindings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-bindings",
-  "version": "0.3.12",
+  "version": "0.3.13",
   "packageManager": "[email protected]",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

packages/react-native-sdk/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.3.4...@stream-io/video-react-native-sdk-0.3.5) (2023-12-11)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `0.5.2`
+* `@stream-io/video-react-bindings` updated to version `0.3.13`
 ### [0.3.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.3.3...@stream-io/video-react-native-sdk-0.3.4) (2023-12-06)
 
 

packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/01-introduction.mdx

@@ -23,8 +23,8 @@ After the tutorials, the documentation explains how to use:
 It also explains advanced features such as:
 
 - [Ringing/Calls](./core/joining-and-creating-calls/)
-- [Requesting and Granting permissions](./ui-cookbook/permission-requests/)
+- [Requesting and Granting permissions](./core/permissions-and-moderation/)
 - [Participants Layout Switching](./ui-cookbook/runtime-layout-switching/)
-- Friendly support for [Push notifications](./advanced/push-notifications/setup), [deep linking](./advanced/deeplinking/) and Reconnection of calls.
+- Friendly support for [Push notifications](./advanced/push-notifications/overview), [deep linking](./advanced/deeplinking/) and Reconnection of calls.
 
 If you feel like anything is missing or could be improved, please don't hesitate to [contact us](https://getstream.io/contact/). We're happy to help.

packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/02-installation/01-react-native.mdx

@@ -120,4 +120,4 @@ To enable this feature you need to install the following dependencies:
 - `@react-native-firebase/app` and `@react-native-firebase/messaging` to receive notifications on Android.
 - `@react-native-voip-push-notification` to receive notifications on iOS.
 
-More about how to enable this feature can be found [in our push notification guide](../../advanced/push-notifications/setup).
+More about how to enable this feature can be found [in our push notification guide](../../../advanced/push-notifications/overview).

packages/react-native-sdk/docusaurus/docs/reactnative/01-setup/03-quickstart.mdx

@@ -4,7 +4,7 @@ description: For when you're in a hurry and want to quickly get up and running
 ---
 
 In this guide, we will cover the basics of making your first call using Stream Video.
-If you haven't already, we recommend starting with the **[introduction](../../)** and **[installation](../installation)** steps first, as this guide will build on the material covered in those sections.
+If you haven't already, we recommend starting with the **[introduction](../../)** and **installation**([Native CLI](../installation/react-native) or [Expo](../installation/expo)) steps first, as this guide will build on the material covered in those sections.
 
 ## Client setup & Calls
 
@@ -80,10 +80,10 @@ export const MyVideoButton = () => {
   const { useCameraState } = useCallStateHooks();
   const { camera, isMute } = useCameraState();
   return (
-    <Button 
+    <Button
       title={isMute ? 'Turn on camera' : 'Turn off camera'}
-      onClick={() => camera.toggle()}>
-    </Button>
+      onClick={() => camera.toggle()}
+    ></Button>
   );
 };
 
@@ -93,8 +93,8 @@ export const MyMicrophoneButton = () => {
   return (
     <Button
       title={isMute ? 'Turn on microphone' : 'Turn off microphone'}
-      onClick={() => microphone.toggle()}>
-    </Button>
+      onClick={() => microphone.toggle()}
+    ></Button>
   );
 };
 ```
@@ -109,4 +109,4 @@ The goal of this library is to make it easy to build any type of video/calling e
 - Use our library of built-in components.
 - Mix & Match between your own and built-in components.
 
-If you're using our built-in components, you can easily customize them through theming and props. For creating your own components, the [UI Cookbook section](../../ui-cookbook/overview) is there to help you get started.
+If you're using our built-in components, you can easily customize them through theming and props. For creating your own components, the [UI Cookbook section](../../ui-cookbook/overview) is there to help you get started.

packages/react-native-sdk/docusaurus/docs/reactnative/03-core/02-joining-creating-calls.mdx

@@ -80,7 +80,7 @@ The caller will automatically join the call once the first callee accepts the ca
 The calling will automatically stop if all callee rejects the call.
 
 :::note
-When ring is true, a push notification will be sent to the members, provided their app have the required setup. For more details around push notifications, please check [this page](../../advanced/push-notifications/setup).
+When ring is true, a push notification will be sent to the members, provided their app have the required setup. For more details around push notifications, please check [this page](../../advanced/push-notifications/overview).
 :::
 
 ### Watch for incoming and outgoing calls

packages/react-native-sdk/docusaurus/docs/reactnative/03-core/08-native-permissions.mdx

@@ -11,7 +11,7 @@ Once the function is called, we should see permissions being requested like belo
 
 ## Setup
 
-Ensure that relevant permissions are declared in your `AndroidManifest.xml` and `Info.plist` as mentioned in the [installation](../setup/installation/) guide. 
+Ensure that relevant permissions are declared in your `AndroidManifest.xml` and `Info.plist` as mentioned in the installation([Native CLI](../../setup/installation/react-native) or [Expo](../../setup/installation/expo)) guide.
 
 Additionally, to easily request permissions on both platforms, we will use the [`react-native-permissions`](https://github.com/zoontek/react-native-permissions) library. You can run the following command to install it:
 
@@ -20,7 +20,7 @@ yarn add react-native-permissions
 ```
 
 :::note
-Do not forget to perform the additional setup steps for iOS mentioned in the [`react-native-permissions` library documentation](https://github.com/zoontek/react-native-permissions#ios) 
+Do not forget to perform the additional setup steps for iOS mentioned in the [`react-native-permissions` library documentation](https://github.com/zoontek/react-native-permissions#ios)
 :::
 
 ## Step 1 - Add a function to request permissions in the app
@@ -31,7 +31,6 @@ In this step, we create a function called `requestAndUpdatePermissions`. This fu
 import { Platform } from 'react-native';
 import { PERMISSIONS, requestMultiple } from 'react-native-permissions';
 
-
 export const requestAndUpdatePermissions = async () => {
   if (Platform.OS === 'ios') {
     // Request camera and mic permissions on iOS
@@ -68,10 +67,8 @@ const MyApp = () => {
 
   return (
     <StreamVideo client={client}>
-      <StreamCall call={call}>
-        {/*  You UI */}
-      </StreamCall>
+      <StreamCall call={call}>{/*  You UI */}</StreamCall>
     </StreamVideo>
   );
 };
-```
+```

packages/react-native-sdk/docusaurus/docs/reactnative/03-core/10-reactions-and-custom-events.mdx

@@ -10,8 +10,7 @@ Custom events let participants send and receive arbitrary WebSocket messages. Fo
 ## Reactions
 
 :::tip
-[`CallControls `](../../ui-components/call/call-controls/) utilizes [`ReactionsModal`](../../ui-components/utility/reactions-modal/) and components support reactions out-of-the-box, but for advanced use-cases you can also build your own reaction system.
-
+[`CallControls `](../../ui-components/call/call-controls/) optionally utilizes [`ReactionsButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Call/CallControls/ReactionsButton.tsx) component that support reactions out-of-the-box, but for advanced use-cases you can also build your own reaction system.
 :::
 
 ### Sending reactions

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/core/stream-call.mdx

@@ -3,7 +3,7 @@ id: stream-call
 title: StreamCall
 ---
 
-The `<StreamCall />` component is a declarative component wrapper around `Call` objects. It utilizes the `StreamCallProvider` to make the [call and its state](../../core/call-and-participant-state/) available to all child components.
+The `<StreamCall />` component is a declarative component wrapper around `Call` objects. It utilizes the `StreamCallProvider` to make the [call and its state](../../../core/call-and-participant-state/) available to all child components.
 
 ## General usage
 

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/participants/participant-view.mdx

@@ -124,4 +124,4 @@ Our [UI cookbook](../../../ui-cookbook/overview) tells all the important informa
 - [Network Quality Indicator](../../../ui-cookbook/network-quality-indicator)
 - [Custom Label](../../../ui-cookbook/participant-label)
 - [Video Renderer](../../../ui-cookbook/video-renderer)
-- [Reactions](../../../ui-cookbook/reaction)
+- [Reactions](../../../ui-cookbook/reactions)

packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/02-replacing-call-controls.mdx

@@ -23,7 +23,7 @@ Implementing call controls buttons will often be in reality associated with hand
 
 ### Button to accept a call
 
-We will need a call accept button when building an app that makes use of [ring call workflow](../../advanced/ringing). To accept a call we just invoke `call.join()`. So the minimal call accept button could look like this:
+We will need a call accept button when building an app that makes use of [ring call workflow](../../core/joining-and-creating-calls/#ring-call). To accept a call we just invoke `call.join()`. So the minimal call accept button could look like this:
 
 ```tsx
 import { Pressable, Text, StyleSheet } from 'react-native';
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
 
 ### Button to reject a call
 
-We will need a call reject button when building an app that makes use of [ring call workflow](../../advanced/ringing). To reject a call we just invoke `call.leave()` function with an object parameter having key as `reject` and value of it being `true`. So the minimal call reject button could look like this:
+We will need a call reject button when building an app that makes use of [ring call workflow](../../core/joining-and-creating-calls/#ring-call). To reject a call we just invoke `call.leave()` function with an object parameter having key as `reject` and value of it being `true`. So the minimal call reject button could look like this:
 
 ```tsx
 import { Pressable, Text, StyleSheet } from 'react-native';

packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/10-network-quality-indicator.mdx

@@ -18,7 +18,7 @@ In this guide we'll learn how to build and implement our own primitive network q
 
 ## Custom Network Quality Indicator
 
-You'll most likely be displaying this indicator component inside each participant view ([Participant](../../ui-components/core/participant)) within a call layout. To achieve the customization you can follow the snippet below:
+You'll most likely be displaying this indicator component inside each participant view ([Participant](../../ui-components/participants/participant-view)) within a call layout. To achieve the customization you can follow the snippet below:
 
 ![Preview of the Custom Network quality indicator](../assets/05-ui-cookbook/10-network-quality-indicator/network-quality-indicator-custom.png)
 

packages/react-native-sdk/docusaurus/docs/reactnative/05-ui-cookbook/14-watching-a-livestream.mdx

@@ -9,7 +9,7 @@ import ViewerLivestreamScreenShare from '../assets/05-ui-cookbook/14-watching-a-
 
 The Video API allows you to assign specific roles for users in a livestream, such as hosts and viewers. Our SDK provides dedicated livestreaming components for both of these roles.
 
-The `ViewerLivestream` component leverages the WebRTC protocol for seamless livestream viewing within the SDK. To enable external publishing, you can access HLS credentials from the dashboard. For additional information, please refer to our [livestream tutorial](../../tutorials/livestream).
+The `ViewerLivestream` component leverages the WebRTC protocol for seamless livestream viewing within the SDK. To enable external publishing, you can access HLS credentials from the dashboard. For additional information, please refer to our [livestream tutorial](https://getstream.io/video/sdk/reactnative/tutorial/livestreaming/).
 
 This guide describes how to customize watching a livestream through our SDK.