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

.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/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/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/Participant/ParticipantView/VideoRenderer.tsx

@@ -14,6 +14,7 @@ import {
 import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
 import { ParticipantVideoFallback as DefaultParticipantVideoFallback } from './ParticipantVideoFallback';
 import { useTheme } from '../../../contexts/ThemeContext';
+import { useTrackDimensions } from '../../../hooks/useTrackDimensions';
 
 const DEFAULT_VIEWPORT_VISIBILITY_STATE: Record<
   VideoTrackType,
@@ -60,6 +61,7 @@ export const VideoRenderer = ({
   const pendingVideoLayoutRef = useRef<SfuModels.VideoDimension>();
   const subscribedVideoLayoutRef = useRef<SfuModels.VideoDimension>();
   const { direction } = useCameraState();
+  const videoDimensions = useTrackDimensions(participant, trackType);
   const {
     isLocalParticipant,
     sessionId,
@@ -260,7 +262,12 @@ export const VideoRenderer = ({
           style={[styles.videoStream, videoRenderer.videoStream]}
           streamURL={videoStreamToRender.toURL()}
           mirror={mirror}
-          objectFit={objectFit ?? (isScreenSharing ? 'contain' : 'cover')}
+          objectFit={
+            objectFit ??
+            (videoDimensions.width > videoDimensions.height
+              ? 'contain'
+              : 'cover')
+          }
           zOrder={videoZOrder}
         />
       ) : (

packages/react-native-sdk/src/hooks/index.ts

@@ -7,3 +7,4 @@ export * from './useIsInPiPMode';
 export * from './useAutoEnterPiPEffect';
 export * from './useApplyDefaultMediaStreamSettings';
 export * from './useScreenShareButton';
+export * from './useTrackDimensions';

packages/react-native-sdk/src/hooks/useTrackDimensions.ts

@@ -0,0 +1,79 @@
+import {
+  StreamVideoParticipant,
+  VideoTrackType,
+} from '@stream-io/video-client';
+import { useCall } from '@stream-io/video-react-bindings';
+import { useState, useEffect } from 'react';
+
+/**
+ * This is a utility hook to get the dimensions of the video track of the participant.
+ * Note: the `tracktype` is used only for local participants.
+ * `tracktype` should be 'videoTrack' for video track and 'screenShareTrack' for screen share track.
+ */
+export function useTrackDimensions(
+  participant: StreamVideoParticipant,
+  trackType: VideoTrackType
+) {
+  const [trackDimensions, setTrackDimensions] = useState({
+    width: 0,
+    height: 0,
+  });
+  const call = useCall();
+  const { isLocalParticipant, sessionId, videoStream, screenShareStream } =
+    participant;
+
+  // for local participant we can get from track.getSettings()
+  useEffect(() => {
+    if (call && isLocalParticipant) {
+      const stream =
+        trackType === 'screenShareTrack' ? screenShareStream : videoStream;
+      if (!stream) return;
+      const [track] = stream?.getVideoTracks();
+      if (!track) return;
+      const { width = 0, height = 0 } = track.getSettings();
+      setTrackDimensions((prev) => {
+        if (prev.width !== width || prev.height !== height) {
+          return { width, height };
+        }
+        return prev;
+      });
+    }
+  }, [call, isLocalParticipant, screenShareStream, trackType, videoStream]);
+
+  // start reporting stats for the remote participant
+  useEffect(() => {
+    if (!call) return;
+    if (isLocalParticipant) return;
+    call.startReportingStatsFor(sessionId);
+    return () => {
+      call.stopReportingStatsFor(sessionId);
+    };
+  }, [call, sessionId, isLocalParticipant]);
+
+  // for remote participants track.getSettings() is not supported it returns an empty object
+  // so we need to rely on call stats to get the dimensions
+  useEffect(() => {
+    if (!call) return;
+    const sub = call.state.callStatsReport$.subscribe((report) => {
+      if (!report) return;
+      const reportForTracks = report.participants[sessionId];
+      const trackStats = reportForTracks
+        ?.flatMap((r) => r.streams)
+        .filter((track) => track.kind === 'video');
+      if (!trackStats) return;
+      const stat = trackStats[0];
+      if (stat) {
+        const { frameWidth = 0, frameHeight = 0 } = stat;
+        setTrackDimensions((prev) => {
+          if (prev.width !== frameWidth || prev.height !== frameHeight) {
+            return { width: frameWidth, height: frameHeight };
+          }
+          return prev;
+        });
+      }
+    });
+    return () => sub.unsubscribe();
+  }, [call, sessionId]);
+
+  return trackDimensions;
+}

packages/react-sdk/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.6.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.6.5...@stream-io/video-react-sdk-1.6.6) (2024-10-14)
+
+
+### Bug Fixes
+
+* check for user capabilities before rendering call control buttons ([#1513](https://github.com/GetStream/stream-video-js/issues/1513)) ([9b11219](https://github.com/GetStream/stream-video-js/commit/9b1121966d3e3f7610fbbca386b8837563203e86))
+
+## [1.6.5](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.6.4...@stream-io/video-react-sdk-1.6.5) (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.6.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.6.3...@stream-io/video-react-sdk-1.6.4) (2024-10-10)
 
 ### Dependency Updates

packages/react-sdk/docusaurus/docs/React/02-guides/01-client-auth.mdx

@@ -71,6 +71,25 @@ const apiKey = 'my-stream-api-key';
 const client = new StreamVideoClient({ 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-sdk/package.json

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