Merge branch 'main' into screenshare-audio

.dockerignore

@@ -0,0 +1,17 @@
+**/node_modules/
+**/dist/
+**/.env*
+**/.DS_Store
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+.github/
+.readme-assets/
+sample-apps/**
+!sample-apps/react/egress-composite/
+packages/react-native-sdk/
+sample-apps/react/egress-composite/tests/
+.styles/

.github/workflows/deploy-react-sample-apps.yml

@@ -54,21 +54,24 @@ jobs:
       VITE_STREAM_USER_TOKEN: ${{ secrets.EGRESS_USER_TOKEN }}
       VITE_STREAM_KEY: ${{ vars.STREAM_API_KEY_SAMPLE_APPS }}
       VITE_STREAM_SECRET: ${{ secrets.STREAM_SECRET_SAMPLE_APPS }}
+      VITE_EGRESS_SENTRY_DNS: ${{ secrets.EGRESS_SENTRY_DNS }}
       VITE_VIDEO_DEMO_SENTRY_DNS: ${{secrets.VIDEO_DEMO_SENTRY_DNS}}
       VITE_TOKEN_PROVIDER_URL: ${{secrets.TOKEN_PROVIDER_URL}}
-      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      PRONTO_SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      EGRESS_SENTRY_AUTH_TOKEN: ${{ secrets.EGRESS_SENTRY_AUTH_TOKEN }}
+      MODE: ${{ github.ref_name == 'main' && 'production' || 'preview' }}
 
     steps:
       - uses: actions/checkout@v3
         with:
           fetch-depth: 0
 
-#      - uses: dorny/[email protected]
-#        id: changes
-#        with:
-#          filters: |
-#            sample-apps:
-#              - 'sample-apps/react/${{ matrix.application.folder || matrix.application.name }}/**/*'
+      # - uses: dorny/[email protected]
+      #   id: changes
+      #   with:
+      #     filters: |
+      #       sample-apps:
+      #         - 'sample-apps/react/${{ matrix.application.folder || matrix.application.name }}/**/*'
 
       - name: Setup Node
         uses: actions/setup-node@v3

.github/workflows/egress-composite-e2e.yml

@@ -21,7 +21,7 @@ env:
 
 jobs:
   test:
-    timeout-minutes: 15
+    timeout-minutes: 20
     runs-on: ubuntu-latest
 
     steps:
@@ -58,6 +58,20 @@ jobs:
       - name: Install Playwright system dependencies (always)
         run: npx playwright install-deps
 
+      # - name: Authenticate stream-video-buddy
+      #   uses: nick-fields/[email protected]
+      #   with:
+      #     timeout_minutes: 5
+      #     max_attempts: 2
+      #     command: yarn workspace @stream-io/egress-composite buddy auth
+
       - name: Run Playwright tests
-        working-directory: sample-apps/react/egress-composite
-        run: yarn buddy auth && yarn test:e2e
+        run: yarn workspace @stream-io/egress-composite test:e2e
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: test-results
+          path: sample-apps/react/egress-composite/test-results/
+          retention-days: 5

Dockerfile

@@ -0,0 +1,27 @@
+FROM node:20-alpine as packager
+WORKDIR /e2e
+
+COPY sample-apps/ sample-apps/
+RUN find sample-apps \! -name "package.json" -mindepth 3 -maxdepth 3 -print | xargs rm -rf
+
+COPY packages/ packages/
+RUN find packages \! -name "package.json" -mindepth 2 -maxdepth 2 -print | xargs rm -rf
+
+FROM node:20-bullseye as runner
+WORKDIR /e2e
+
+COPY .yarn/ ./.yarn/
+COPY yarn.lock package.json .yarnrc.yml tsconfig.json ./
+COPY --from=packager /e2e/packages ./packages
+COPY --from=packager /e2e/sample-apps ./sample-apps
+
+RUN yarn install
+
+RUN npx playwright install chromium
+RUN npx playwright install-deps
+
+# Copy all sources next
+COPY ./packages ./packages
+RUN yarn build:react:deps
+
+COPY ./sample-apps/ ./sample-apps/

docker-compose.yml

@@ -0,0 +1,18 @@
+# this compose file exists to generate screenshots
+# for the CI to compare against, replace key and token with your own before running
+# docker compose up, each change to the sources (not including tests) requires image rebuild
+# https://github.com/microsoft/playwright/issues/8161
+
+services:
+  generate-screenshots:
+    build: ./
+    command: >
+      yarn workspace @stream-io/egress-composite run test:e2e 
+      -u 
+      --timeout 5000
+    volumes:
+      - ./sample-apps/react/egress-composite/tests/:/e2e/sample-apps/react/egress-composite/tests/
+    environment:
+      VITE_STREAM_API_KEY: <key>
+      VITE_STREAM_USER_TOKEN: <token>
+      CI: true

packages/react-native-sdk/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.0.28](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.27...@stream-io/video-react-native-sdk-0.0.28) (2023-10-02)
+
+
+### Features
+
+* **react-native:** support landscape more for CallContent ([#1119](https://github.com/GetStream/stream-video-js/issues/1119)) ([2e218b4](https://github.com/GetStream/stream-video-js/commit/2e218b4ad8f00c5eb1632d64df6c5d3456b5af41))
+
 ### [0.0.27](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-react-native-sdk-0.0.26...@stream-io/video-react-native-sdk-0.0.27) (2023-09-28)
 
 ### Dependency Updates

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

@@ -11,6 +11,7 @@ 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';
 import ParticipantLabel from '../../common-content/ui-components/call/call-content/participant-label.mdx';
@@ -93,6 +94,10 @@ This switches the list between the grid and the spotlight mode.
 When a screen is shared, the layout automatically changes to `spotlight` mode.
 :::
 
+### `landscape`
+
+<LandScape />
+
 ### [`onBackPressed`](../call-top-view/#onbackpressed)
 
 <OnBackPressed />

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

@@ -4,6 +4,7 @@ title: CallControls
 ---
 
 import OnHangupCallHandler from '../../common-content/ui-components/call/call-content/on-hangup-call-handler.mdx';
+import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 
 CallControls allows users to execute actions during the call(for example, mute/unmute audio/video, reactions, hang-up calls, etc.).
 We provide a built-in `CallControls` component that displays all relevant call controls during a call.
@@ -39,6 +40,10 @@ const VideoCallUI = () => {
 
 <OnHangupCallHandler />
 
+### `landscape`
+
+<LandScape />
+
 ## Built-in call controls
 
 Each call control is available as a separate UI component.

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

@@ -6,6 +6,7 @@ title: CallParticipantsList
 import ImageShowcase from '@site/src/components/ImageShowcase';
 import CallParticipantsListVertical from '../../assets/04-ui-components/call/call-participants-list/vertical.png';
 import CallParticipantsListHorizontal from '../../assets/04-ui-components/call/call-participants-list/horizontal.png';
+import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 
 import ParticipantLabel from '../../common-content/ui-components/call/call-content/participant-label.mdx';
 import ParticipantReaction from '../../common-content/ui-components/call/call-content/participant-reaction.mdx';
@@ -72,22 +73,26 @@ const VideoCallUI = () => {
 
 The list of participants to list in the view.
 
-### numberOfColumns
+### `numberOfColumns`
 
 | Type                    | Default Value |
 | ----------------------- | ------------- |
 | `number` \| `undefined` | 2             |
 
 The number of participants to be displayed in a single row. This property is only used when there are more than 2 participants.
 
-### horizontal
+### `horizontal`
 
 | Type                     | Default Value |
 | ------------------------ | ------------- |
 | `boolean` \| `undefined` | false         |
 
 This decides whether the participants should be listed vertically or horizontally.
 
+### `landscape`
+
+<LandScape />
+
 ### `ParticipantLabel`
 
 <ParticipantLabel />

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

@@ -10,6 +10,7 @@ import JoiningCallIndicator from '../../assets/04-ui-components/call/ringing-cal
 import CallContent from '../../assets/04-ui-components/call/ringing-call-content/call-content.png';
 
 import CallTopView from '../../common-content/ui-components/call/call-content/call-top-view.mdx';
+import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 
 The `RingingCallContent` lets you easily build UI when you're calling or ringing other people in an app. It's used to show more information about the participants you're calling, as well as give you the option to cancel the call before anyone accepts.
 
@@ -65,6 +66,10 @@ const Call = () => {
 
 ## Props
 
+### `landscape`
+
+<LandScape />
+
 ### `IncomingCall`
 
 Prop to customize the `IncomingCall` component. This component is rendered when an incoming call is received.

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

@@ -0,0 +1,5 @@
+Applies the landscape mode styles to the component.
+
+| Type                     |
+| ------------------------ |
+| `boolean` \| `undefined` |

packages/react-native-sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-native-sdk",
-  "version": "0.0.27",
+  "version": "0.0.28",
   "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, useRef, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import {
   CallTopView as DefaultCallTopView,
   CallTopViewProps,
@@ -60,6 +60,11 @@ export type CallContentProps = Pick<CallControlProps, 'onHangupCallHandler'> &
      * This switches the participant's layout between the grid and the spotlight mode.
      */
     layout?: 'grid' | 'spotlight';
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
   };
 
 export const CallContent = ({
@@ -78,6 +83,7 @@ export const CallContent = ({
   ParticipantsInfoBadge,
   VideoRenderer,
   layout = 'grid',
+  landscape = true,
 }: CallContentProps) => {
   const [
     showRemoteParticipantInFloatingView,
@@ -140,19 +146,25 @@ export const CallContent = ({
 
   const callParticipantsGridProps: CallParticipantsGridProps = {
     ...participantViewProps,
+    landscape,
     showLocalParticipant: isRemoteParticipantInFloatingView,
     ParticipantView,
     CallParticipantsList,
   };
 
   const callParticipantsSpotlightProps: CallParticipantsSpotlightProps = {
     ...participantViewProps,
+    landscape,
     ParticipantView,
     CallParticipantsList,
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
-    <View style={[styles.container, callContent.container]}>
+    <View style={[styles.container, callContent.container, landScapeStyles]}>
       <View style={[styles.container, callContent.callParticipantsContainer]}>
         <View
           style={[styles.view, callContent.topContainer]}
@@ -187,7 +199,10 @@ export const CallContent = ({
       </View>
 
       {CallControls && (
-        <CallControls onHangupCallHandler={onHangupCallHandler} />
+        <CallControls
+          onHangupCallHandler={onHangupCallHandler}
+          landscape={landscape}
+        />
       )}
     </View>
   );

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View, ViewProps } from 'react-native';
+import { StyleSheet, View, ViewProps, ViewStyle } from 'react-native';
 import { ToggleAudioPublishingButton } from './ToggleAudioPublishingButton';
 import { ToggleVideoPublishingButton } from './ToggleVideoPublishingButton';
 import { ToggleCameraFaceButton } from './ToggleCameraFaceButton';
@@ -16,6 +16,11 @@ export type CallControlProps = Pick<ViewProps, 'style'> & {
    * @returns void
    */
   onHangupCallHandler?: () => void;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -25,17 +30,24 @@ export type CallControlProps = Pick<ViewProps, 'style'> & {
 export const CallControls = ({
   style,
   onHangupCallHandler,
+  landscape,
 }: CallControlProps) => {
   const {
     theme: { colors, callControls },
   } = useTheme();
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'column-reverse' : 'row',
+    paddingHorizontal: landscape ? 12 : 0,
+    paddingVertical: landscape ? 0 : 12,
+  };
   return (
     <View
       style={[
         styles.container,
         { backgroundColor: colors.static_grey },
-        style,
         callControls.container,
+        landScapeStyles,
+        style,
       ]}
     >
       <ToggleVideoPublishingButton />
@@ -48,8 +60,6 @@ export const CallControls = ({
 
 const styles = StyleSheet.create({
   container: {
-    paddingVertical: 12,
-    flexDirection: 'row',
     justifyContent: 'space-evenly',
     zIndex: Z_INDEX.IN_FRONT,
   },