Merge branch 'PBE-5855-feat/react-native-video-design-v2' into PBE-58…

…58-call-scene-container

.github/workflows/version-and-release.yml

@@ -4,11 +4,11 @@ env:
   STREAM_SECRET: ${{ secrets.CLIENT_TEST_SECRET }}
 
 on:
-  push:
-    branches:
-      - main
-    paths:
-      - 'packages/**'
+  # push:
+  #  branches:
+  #    - main
+  #  paths:
+  #    - 'packages/**'
 
   workflow_dispatch:
 

packages/client/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.8.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.8.2...@stream-io/video-client-1.8.3) (2024-10-10)
+
+
+### Bug Fixes
+
+* do not release track if track was not removed from stream ([#1517](https://github.com/GetStream/stream-video-js/issues/1517)) ([5bfc528](https://github.com/GetStream/stream-video-js/commit/5bfc52850c36ffe0de37e47066538a8a14dc9e01))
+
 ## [1.8.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.8.1...@stream-io/video-client-1.8.2) (2024-10-10)
 
 

packages/client/package.json

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

packages/client/src/devices/InputMediaDeviceManager.ts

@@ -279,14 +279,7 @@ export abstract class InputMediaDeviceManager<
 
   private stopTracks() {
     this.getTracks().forEach((track) => {
-      if (track.readyState === 'live') {
-        track.stop();
-        // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the track
-        if (typeof track.release === 'function') {
-          // @ts-expect-error
-          track.release();
-        }
-      }
+      if (track.readyState === 'live') track.stop();
     });
   }
 

packages/client/src/devices/devices.ts

@@ -276,12 +276,6 @@ export const disposeOfMediaStream = (stream: MediaStream) => {
   if (!stream.active) return;
   stream.getTracks().forEach((track) => {
     track.stop();
-    stream.removeTrack(track);
-    // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the track
-    if (typeof track.release === 'function') {
-      // @ts-expect-error
-      track.release();
-    }
   });
   // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
   if (typeof stream.release === 'function') {

packages/client/src/helpers/RNSpeechDetector.ts

@@ -106,14 +106,7 @@ export class RNSpeechDetector {
     if (!this.audioStream) {
       return;
     }
-    this.audioStream.getTracks().forEach((track) => {
-      track.stop();
-      // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the track
-      if (typeof track.release === 'function') {
-        // @ts-expect-error
-        track.release();
-      }
-    });
+    this.audioStream.getTracks().forEach((track) => track.stop());
     if (
       // @ts-expect-error release() is present in react-native-webrtc
       typeof this.audioStream.release === 'function'

packages/client/src/rtc/Publisher.ts

@@ -316,11 +316,6 @@ export class Publisher {
       if (previousTrack && previousTrack !== track) {
         previousTrack.stop();
         previousTrack.removeEventListener('ended', handleTrackEnded);
-        // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the track
-        if (typeof previousTrack.release === 'function') {
-          // @ts-expect-error
-          track.release();
-        }
         track.addEventListener('ended', handleTrackEnded);
       }
       if (!track.enabled) {
@@ -342,18 +337,16 @@ export class Publisher {
     const transceiver = this.pc
       .getTransceivers()
       .find((t) => t === this.transceiverRegistry[trackType] && t.sender.track);
-    const track = transceiver?.sender.track;
-    if (track && (stopTrack ? track.readyState === 'live' : track.enabled)) {
-      if (stopTrack) {
-        track.stop();
-        // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the track
-        if (typeof track.release === 'function') {
-          // @ts-expect-error
-          track.release();
-        }
-      } else {
-        track.enabled = false;
-      }
+    if (
+      transceiver &&
+      transceiver.sender.track &&
+      (stopTrack
+        ? transceiver.sender.track.readyState === 'live'
+        : transceiver.sender.track.enabled)
+    ) {
+      stopTrack
+        ? transceiver.sender.track.stop()
+        : (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, trackType, true);
@@ -406,13 +399,7 @@ export class Publisher {
   private stopPublishing = () => {
     this.logger('debug', 'Stopping publishing all tracks');
     this.pc.getSenders().forEach((s) => {
-      const track = s.track;
-      track?.stop();
-      // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the track
-      if (typeof track?.release === 'function') {
-        // @ts-expect-error
-        track.release();
-      }
+      s.track?.stop();
       if (this.pc.signalingState !== 'closed') {
         this.pc.removeTrack(s);
       }

packages/react-bindings/CHANGELOG.md

@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-1.1.2...@stream-io/video-react-bindings-1.1.3) (2024-10-10)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.8.3`
 ## [1.1.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-1.1.1...@stream-io/video-react-bindings-1.1.2) (2024-10-10)
 
 ### Dependency Updates

packages/react-bindings/package.json

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

packages/react-native-sdk/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.1.4...@stream-io/video-react-native-sdk-1.1.5) (2024-10-16)
+
+
+### Bug Fixes
+
+* **react-native:** set objectFit based on actual video track dimensions ([#1520](https://github.com/GetStream/stream-video-js/issues/1520)) ([44ef7d2](https://github.com/GetStream/stream-video-js/commit/44ef7d2e69a910be45b2d3a7643c3f58e0f29803))
+
+## [1.1.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.1.3...@stream-io/video-react-native-sdk-1.1.4) (2024-10-10)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.8.3`
+* `@stream-io/video-react-bindings` updated to version `1.1.3`
 ## [1.1.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.1.2...@stream-io/video-react-native-sdk-1.1.3) (2024-10-10)
 
 ### Dependency Updates

packages/react-native-sdk/__tests__/components/CallControls.test.tsx

@@ -3,11 +3,10 @@ import { mockClientWithUser } from '../mocks/client';
 import mockParticipant from '../mocks/participant';
 import { ButtonTestIds, ComponentTestIds } from '../../src/constants/TestIds';
 import { mockCall } from '../mocks/call';
-import { fireEvent, render, screen, waitFor } from '../utils/RNTLTools';
+import { fireEvent, render, screen } from '../utils/RNTLTools';
 import { OwnCapability } from '@stream-io/video-client';
 import { defaultEmojiReactions } from '../../src/constants';
-import { CallControls } from '../../src/components/Call/CallControls/CallControls';
-import { ChatButton } from '../../src/components/Call/CallControls/ChatButton';
+import { CallControls } from '../../src';
 import { HangUpCallButton } from '../../src/components/Call/CallControls/HangupCallButton';
 import { ReactionsButton } from '../../src/components/Call/CallControls/ReactionsButton';
 
@@ -18,48 +17,6 @@ enum P_IDS {
   LOCAL_1 = 'local-1',
 }
 
-describe('ChatButton', () => {
-  it('should render an unread badge indicator when the value is defined in the chatButton prop', async () => {
-    const call = mockCall(mockClientWithUser(), [
-      mockParticipant({
-        isLocalParticipant: true,
-        sessionId: P_IDS.LOCAL_1,
-        userId: P_IDS.LOCAL_1,
-      }),
-    ]);
-
-    render(<ChatButton onPressHandler={jest.fn()} unreadBadgeCount={1} />, {
-      call,
-    });
-
-    const indicator = await screen.findByText('1');
-
-    expect(indicator).toBeVisible();
-  });
-
-  it('should not render an unread badge indicator when the value is 0 in the chatButton prop', async () => {
-    const call = mockCall(mockClientWithUser(), [
-      mockParticipant({
-        isLocalParticipant: true,
-        sessionId: P_IDS.LOCAL_1,
-        userId: P_IDS.LOCAL_1,
-      }),
-    ]);
-
-    render(<ChatButton onPressHandler={jest.fn()} unreadBadgeCount={0} />, {
-      call,
-    });
-
-    await waitFor(() =>
-      expect(() =>
-        screen.getByTestId(ComponentTestIds.CHAT_UNREAD_BADGE_COUNT_INDICATOR)
-      ).toThrow(
-        /Unable to find an element with testID: chat-unread-badge-count-indicator/i
-      )
-    );
-  });
-});
-
 describe('ReactionsButton', () => {
   it('render reaction button in call controls component', async () => {
     const call = mockCall(

packages/react-native-sdk/__tests__/components/ParticipantView.test.tsx

@@ -43,7 +43,6 @@ describe('ParticipantView', () => {
     expect(
       await screen.findByTestId(ComponentTestIds.PARTICIPANT_AVATAR)
     ).toBeOnTheScreen();
-    expect(screen.getByTestId(IconTestIds.MUTED_VIDEO)).toBeOnTheScreen();
     expect(screen.getByText(testParticipant.name)).toBeOnTheScreen();
     // reaction is visible and then disappears after 5500 ms
     expect(screen.getByText('🎉')).toBeOnTheScreen();

packages/react-native-sdk/docusaurus/docs/reactnative/03-core/01-client-auth.mdx

@@ -71,6 +71,25 @@ const apiKey = 'my-stream-api-key';
 const client = StreamVideoClient.getOrCreateInstance({ apiKey, user });
 ```
 
+Anonymous users don't establish an active web socket connection, therefore they won't receive any events. They are just able to watch a livestream or join a call.
+
+The token for an anonymous user should contain the `call_cids` field, which is an array of the call `cid`'s that the user is allowed to join.
+
+Here's an example JWT token payload for an anonymous user:
+
+```ts
+{
+  "iss": "@stream-io/dashboard",
+  "iat": 1726406693,
+  "exp": 1726493093,
+  "user_id": "!anon",
+  "role": "viewer",
+  "call_cids": [
+    "livestream:123"
+  ]
+}
+```
+
 ## Client options
 
 ### `token` or `tokenProvider`

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

@@ -10,7 +10,6 @@ import CallContentSpotlight from '../../assets/04-ui-components/call/call-conten
 
 import CallTopView from '../../common-content/ui-components/call/call-content/call-top-view.mdx';
 import CallControls from '../../common-content/ui-components/call/call-content/call-controls.mdx';
-import ParticipantsInfoBadge from '../../common-content/ui-components/call/call-content/participants-info-badge.mdx';
 import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 import OnBackPressed from '../../common-content/ui-components/call/call-content/on-back-pressed.mdx';
 import OnParticipantInfoPress from '../../common-content/ui-components/call/call-content/on-participant-info-press.mdx';

packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-top-view.mdx

@@ -60,10 +60,6 @@ Style to override the container of the `CallTopView`.
 | ---------------------------------------------------------- |
 | [ViewStyle](https://reactnative.dev/docs/view-style-props) |
 
-### `ParticipantsInfoBadge`
-
-<ParticipantsInfoBadge />
-
 ## Customization
 
 You can create your own custom `CallTopView` using the [Call Top View UI Cookbook guide](../../../ui-cookbook/replacing-call-top-view/).

packages/react-native-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "packageManager": "[email protected]",
   "main": "dist/commonjs/index.js",
   "module": "dist/module/index.js",

packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StyleSheet, View, ViewStyle } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import InCallManager from 'react-native-incall-manager';
 
 import {
@@ -194,18 +194,14 @@ export const CallContent = ({
     supportedReactions,
   };
 
-  const landscapeStyles: ViewStyle = {
-    flexDirection: landscape ? 'row' : 'column',
-  };
-
   return (
     <>
       {!disablePictureInPicture && (
         <RTCViewPipIOS
           includeLocalParticipantVideo={iOSPiPIncludeLocalParticipantVideo}
         />
       )}
-      <View style={[styles.container, landscapeStyles, callContent.container]}>
+      <View style={[styles.container, callContent.container]}>
         <View style={[styles.container, callContent.callParticipantsContainer]}>
           {!isInPiPMode && CallTopView && (
             <CallTopView onHangupCallHandler={onHangupCallHandler} />
@@ -249,6 +245,7 @@ export const CallContent = ({
 
 const styles = StyleSheet.create({
   container: { flex: 1 },
+  content: { flex: 1 },
   view: {
     // backgroundColor: 'red',
     ...StyleSheet.absoluteFillObject,

packages/react-native-sdk/src/components/Call/CallControls/CallControlsButton.tsx

@@ -57,26 +57,29 @@ export const CallControlsButton = (
 
   const {
     theme: {
-      variants: { buttonSizes },
       colors,
+      defaults,
+      variants: { roundButtonSizes },
       callControlsButton: { container },
     },
   } = useTheme();
 
   const pressableStyle: PressableProps['style'] = ({ pressed }) => [
     styles.container,
     {
-      backgroundColor: disabled ? colors.disabled : colorProp || colors.base1,
+      backgroundColor: disabled
+        ? colors.buttonPrimaryDisabled
+        : colorProp || colors.buttonSecondaryDefault,
       opacity: pressed ? 0.2 : 1,
-      height: size || buttonSizes.sm,
-      width: size || buttonSizes.sm,
-      borderRadius: (size || buttonSizes.sm) / 2,
-      borderColor: colors.background1,
+      height: size || roundButtonSizes.lg,
+      width: size || roundButtonSizes.lg,
+      borderRadius: defaults.borderRadius,
     },
     styleProp?.container ?? null,
     container,
   ];
 
+  const childrenSize = (size || roundButtonSizes.lg) / 2 - 5;
   return (
     <Pressable
       disabled={disabled}
@@ -87,10 +90,7 @@ export const CallControlsButton = (
     >
       <View
         style={[
-          {
-            height: (size || buttonSizes.sm) / 2 - 5,
-            width: (size || buttonSizes.sm) / 2 - 5,
-          },
+          { height: childrenSize, width: childrenSize },
           styleProp?.svgContainer ?? null,
         ]}
       >