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

…58-call-scene-container
GetStream · Oct 16, 2024 · 5e1b3ba · 5e1b3ba
2 parents a0f2ba3 + 4f36656
commit 5e1b3ba
Show file tree

Hide file tree

Showing 26 changed files with 247 additions and 97 deletions.
diff --git a/packages/client/CHANGELOG.md b/packages/client/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.8.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-client-1.8.3...@stream-io/video-client-1.8.4) (2024-10-16)
+
+
+### Bug Fixes
+
+* ignore camera direction for desktop devices ([#1521](https://github.com/GetStream/stream-video-js/issues/1521)) ([562b5cc](https://github.com/GetStream/stream-video-js/commit/562b5cca77264330d08dff5305eccc489970076a))
+
 ## [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)
 
 

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

diff --git a/packages/client/src/compatibility.ts b/packages/client/src/compatibility.ts
@@ -0,0 +1,7 @@
+/**
+ * Checks if the current platform is a mobile device.
+ *
+ * See:
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+ */
+export const isMobile = () => /Mobi/i.test(navigator.userAgent);
diff --git a/packages/client/src/devices/CameraManager.ts b/packages/client/src/devices/CameraManager.ts
@@ -5,6 +5,7 @@ import { InputMediaDeviceManager } from './InputMediaDeviceManager';
 import { getVideoDevices, getVideoStream } from './devices';
 import { TrackType } from '../gen/video/sfu/models/models';
 import { PreferredCodec, PublishOptions } from '../types';
+import { isMobile } from '../compatibility';
 
 export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
   private targetResolution = {
@@ -34,10 +35,14 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
    * @param direction the direction of the camera to select.
    */
   async selectDirection(direction: Exclude<CameraDirection, undefined>) {
-    this.state.setDirection(direction);
-    // Providing both device id and direction doesn't work, so we deselect the device
-    this.state.setDevice(undefined);
-    await this.applySettingsToStream();
+    if (isMobile()) {
+      this.state.setDirection(direction);
+      // Providing both device id and direction doesn't work, so we deselect the device
+      this.state.setDevice(undefined);
+      await this.applySettingsToStream();
+    } else {
+      this.logger('warn', 'Camera direction ignored for desktop devices');
+    }
   }
 
   /**
@@ -131,7 +136,7 @@ export class CameraManager extends InputMediaDeviceManager<CameraManagerState> {
     constraints.height = this.targetResolution.height;
     // We can't set both device id and facing mode
     // Device id has higher priority
-    if (!constraints.deviceId && this.state.direction) {
+    if (!constraints.deviceId && this.state.direction && isMobile()) {
       constraints.facingMode =
         this.state.direction === 'front' ? 'user' : 'environment';
     }

diff --git a/packages/client/src/devices/__tests__/CameraManager.test.ts b/packages/client/src/devices/__tests__/CameraManager.test.ts
@@ -36,6 +36,13 @@ vi.mock('../../Call.ts', () => {
   };
 });
 
+vi.mock('../../compatibility.ts', () => {
+  console.log('MOCKING mobile device');
+  return {
+    isMobile: () => true,
+  };
+});
+
 describe('CameraManager', () => {
   let manager: CameraManager;
 

diff --git a/packages/react-bindings/CHANGELOG.md b/packages/react-bindings/CHANGELOG.md
@@ -2,6 +2,11 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.4](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-bindings-1.1.3...@stream-io/video-react-bindings-1.1.4) (2024-10-16)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.8.4`
 ## [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

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.3",
+  "version": "1.1.4",
   "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,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.6](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-1.1.5...@stream-io/video-react-native-sdk-1.1.6) (2024-10-16)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.8.4`
+* `@stream-io/video-react-bindings` updated to version `1.1.4`
 ## [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)
 
 

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.1.5",
+  "version": "1.1.6",
   "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,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.6.7](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-sdk-1.6.6...@stream-io/video-react-sdk-1.6.7) (2024-10-16)
+
+### Dependency Updates
+
+* `@stream-io/video-client` updated to version `1.8.4`
+* `@stream-io/video-react-bindings` updated to version `1.1.4`
+* `@stream-io/video-styling` updated to version `1.1.1`
+
+### Bug Fixes
+
+* PiP video placeholder ([#1509](https://github.com/GetStream/stream-video-js/issues/1509)) ([9eb2936](https://github.com/GetStream/stream-video-js/commit/9eb2936379726923ee43491ce965003e0e7f2c37))
+
 ## [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)
 
 

diff --git a/packages/react-sdk/docusaurus/docs/React/03-ui-components/core/call-layout.mdx b/packages/react-sdk/docusaurus/docs/React/03-ui-components/core/call-layout.mdx
@@ -77,28 +77,30 @@ const MyApp = () => {
 
 #### Props
 
-| Name                          | Description                                                                                            | Type                                                                                                   |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
-| `groupSize`                   | The number of participants to display per page                                                         | `number` \| `undefined`                                                                                |
-| `excludeLocalParticipant`     | Whether to exclude the local participant from the grid                                                 | `boolean` \| `undefined`                                                                               |
-| `mirrorLocalParticipantVideo` | Whether to mirror the user's own video (default `true`)                                                | `boolean` \| `undefined`                                                                               |
-| `pageArrowsVisible`           | Turns on/off the pagination arrows                                                                     | `boolean` \| `undefined`                                                                               |
-| `ParticipantViewUI`           | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui) | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui) |
-| `VideoPlaceholder`            | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)  | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)  |
+| Name                          | Description                                                                                                      | Type                                                                                                             |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `groupSize`                   | The number of participants to display per page                                                                   | `number` \| `undefined`                                                                                          |
+| `excludeLocalParticipant`     | Whether to exclude the local participant from the grid                                                           | `boolean` \| `undefined`                                                                                         |
+| `mirrorLocalParticipantVideo` | Whether to mirror the user's own video (default `true`)                                                          | `boolean` \| `undefined`                                                                                         |
+| `pageArrowsVisible`           | Turns on/off the pagination arrows                                                                               | `boolean` \| `undefined`                                                                                         |
+| `ParticipantViewUI`           | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui)           | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui)           |
+| `VideoPlaceholder`            | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)            | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)            |
+| `PictureInPicturePlaceholder` | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#pictureinpictureplaceholder) | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#pictureinpictureplaceholder) |
 
 ### `SpeakerLayout`
 
 #### Props
 
-| Name                          | Description                                                                                                                                                | Type                                                                                                   |
-| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `participantsBarPosition`     | The position of the participants who are not in focus, the default is `bottom`. Providing `null` will hide the bar                                         | `top` \| `bottom` \| `left` \| `right` \| `null`                                                       |
-| `excludeLocalParticipant`     | Whether to exclude the local participant from the layout                                                                                                   | `boolean` \| `undefined`                                                                               |
-| `mirrorLocalParticipantVideo` | Whether to mirror the user's own video (default `true`)                                                                                                    | `boolean` \| `undefined`                                                                               |
-| `pageArrowsVisible`           | Turns on/off the pagination arrows                                                                                                                         | `boolean` \| `undefined`                                                                               |
-| `ParticipantViewUISpotlight`  | The participant UI for the spotlight view, [see `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui)          | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui) |
-| `ParticipantViewUIBar`        | The participant UI for the participants in the bar, [see `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui) | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui) |
-| `VideoPlaceholder`            | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)                                                      | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)  |
+| Name                          | Description                                                                                                                                                | Type                                                                                                             |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `participantsBarPosition`     | The position of the participants who are not in focus, the default is `bottom`. Providing `null` will hide the bar                                         | `top` \| `bottom` \| `left` \| `right` \| `null`                                                                 |
+| `excludeLocalParticipant`     | Whether to exclude the local participant from the layout                                                                                                   | `boolean` \| `undefined`                                                                                         |
+| `mirrorLocalParticipantVideo` | Whether to mirror the user's own video (default `true`)                                                                                                    | `boolean` \| `undefined`                                                                                         |
+| `pageArrowsVisible`           | Turns on/off the pagination arrows                                                                                                                         | `boolean` \| `undefined`                                                                                         |
+| `ParticipantViewUISpotlight`  | The participant UI for the spotlight view, [see `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui)          | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui)           |
+| `ParticipantViewUIBar`        | The participant UI for the participants in the bar, [see `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui) | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#participantviewui)           |
+| `VideoPlaceholder`            | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)                                                      | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#videoplaceholder)            |
+| `PictureInPicturePlaceholder` | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#pictureinpictureplaceholder)                                           | [See `ParticipantView` documentation](../../../ui-components/core/participant-view/#pictureinpictureplaceholder) |
 
 ### `LivestreamLayout`
 

diff --git a/...ages/react-sdk/docusaurus/docs/React/03-ui-components/core/participant-view.mdx b/...ages/react-sdk/docusaurus/docs/React/03-ui-components/core/participant-view.mdx
@@ -69,6 +69,14 @@ Override the default UI for rendering participant information/actions.
 
 Override the default UI that's visible when a participant turned off their video.
 
+### `PictureInPicturePlaceholder`
+
+| Type                                        |
+| ------------------------------------------- |
+| `ComponentType` \| `ReactElement` \| `null` |
+
+Override the default UI that's visible when a participant video is playing in picture-in-picture.
+
 ### `trackType`
 
 | Type                                         |

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.6.6",
+  "version": "1.6.7",
   "packageManager": "[email protected]",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",

diff --git a/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/PaginatedGridLayout.tsx
@@ -20,13 +20,17 @@ type PaginatedGridLayoutGroupProps = {
    * The group of participants to render.
    */
   group: Array<StreamVideoParticipant>;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder' | 'mirror'> &
+} & Pick<
+  ParticipantViewProps,
+  'VideoPlaceholder' | 'PictureInPicturePlaceholder' | 'mirror'
+> &
   Required<Pick<ParticipantViewProps, 'ParticipantViewUI'>>;
 
 const PaginatedGridLayoutGroup = ({
   group,
   mirror,
   VideoPlaceholder,
+  PictureInPicturePlaceholder,
   ParticipantViewUI,
 }: PaginatedGridLayoutGroupProps) => {
   return (
@@ -46,6 +50,7 @@ const PaginatedGridLayoutGroup = ({
           muteAudio
           mirror={mirror}
           VideoPlaceholder={VideoPlaceholder}
+          PictureInPicturePlaceholder={PictureInPicturePlaceholder}
           ParticipantViewUI={ParticipantViewUI}
         />
       ))}

diff --git a/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx b/packages/react-sdk/src/core/components/CallLayout/SpeakerLayout.tsx
@@ -51,7 +51,10 @@ export type SpeakerLayoutProps = {
    * @default true
    */
   pageArrowsVisible?: boolean;
-} & Pick<ParticipantViewProps, 'VideoPlaceholder'>;
+} & Pick<
+  ParticipantViewProps,
+  'VideoPlaceholder' | 'PictureInPicturePlaceholder'
+>;
 
 const DefaultParticipantViewUIBar = () => (
   <DefaultParticipantViewUI menuPlacement="top-end" />
@@ -61,6 +64,7 @@ export const SpeakerLayout = ({
   ParticipantViewUIBar = DefaultParticipantViewUIBar,
   ParticipantViewUISpotlight = DefaultParticipantViewUI,
   VideoPlaceholder,
+  PictureInPicturePlaceholder,
   participantsBarPosition = 'bottom',
   participantsBarLimit,
   mirrorLocalParticipantVideo = true,
@@ -151,6 +155,7 @@ export const SpeakerLayout = ({
               }
               ParticipantViewUI={ParticipantViewUISpotlight}
               VideoPlaceholder={VideoPlaceholder}
+              PictureInPicturePlaceholder={PictureInPicturePlaceholder}
             />
           )}
         </div>
@@ -176,6 +181,7 @@ export const SpeakerLayout = ({
                       participant={participantInSpotlight}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      PictureInPicturePlaceholder={PictureInPicturePlaceholder}
                       mirror={mirror}
                       muteAudio={true}
                     />
@@ -190,6 +196,7 @@ export const SpeakerLayout = ({
                       participant={participant}
                       ParticipantViewUI={ParticipantViewUIBar}
                       VideoPlaceholder={VideoPlaceholder}
+                      PictureInPicturePlaceholder={PictureInPicturePlaceholder}
                       mirror={mirror}
                       muteAudio={true}
                     />