feat(react-native): support landscape more for CallContent (#1119)

This PR focuses on supporting landscape mode for CallContent. This is done using the `landscape` prop in CallContent that can be used by the integrators to use the landscape styles. The styles are changed conditionally depending on the orientation since they vary to an extent among both modes.
GetStream · Oct 2, 2023 · 2e218b4 · 2e218b4
1 parent 473580c
commit 2e218b4
Show file tree

Hide file tree

Showing 19 changed files with 187 additions and 47 deletions.
diff --git a/...t-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-content.mdx b/...t-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 />

diff --git a/...-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-controls.mdx b/...-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.

diff --git a/...dk/docusaurus/docs/reactnative/04-ui-components/call/call-participants-list.mdx b/...dk/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 />

diff --git a/...-sdk/docusaurus/docs/reactnative/04-ui-components/call/ringing-call-content.mdx b/...-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.

diff --git a/...s/docs/reactnative/common-content/ui-components/call/call-content/landscape.mdx b/...s/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` |
diff --git a/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx b/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>
   );

diff --git a/packages/react-native-sdk/src/components/Call/CallControls/CallControls.tsx b/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,
   },

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 import {
@@ -22,6 +22,11 @@ export type CallParticipantsGridProps = CallParticipantsListComponentProps & {
    * Boolean to decide if local participant will be visible in the grid when there is 1:1 call.
    */
   showLocalParticipant?: boolean;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
 };
 
 /**
@@ -36,6 +41,7 @@ export const CallParticipantsGrid = ({
   ParticipantView,
   VideoRenderer,
   showLocalParticipant = false,
+  landscape,
 }: CallParticipantsGridProps) => {
   const {
     theme: { colors, callParticipantsGrid },
@@ -48,6 +54,9 @@ export const CallParticipantsGrid = ({
   // we debounce the participants arrays to avoid unnecessary rerenders that happen when participant tracks are all subscribed simultaneously
   const remoteParticipants = useDebouncedValue(_remoteParticipants, 300);
   const allParticipants = useDebouncedValue(_allParticipants, 300);
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
 
   const showFloatingView =
     remoteParticipants.length > 0 && remoteParticipants.length < 3;
@@ -71,6 +80,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
+        landScapeStyles,
         { backgroundColor: colors.dark_gray },
         callParticipantsGrid.container,
       ]}
@@ -79,6 +89,7 @@ export const CallParticipantsGrid = ({
       {CallParticipantsList && (
         <CallParticipantsList
           participants={participants}
+          landscape={landscape}
           {...participantViewProps}
         />
       )}

diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx
@@ -5,7 +5,7 @@ import {
   StreamVideoParticipant,
 } from '@stream-io/video-client';
 import { useCallStateHooks } from '@stream-io/video-react-bindings';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewStyle } from 'react-native';
 import { useDebouncedValue } from '../../../utils/hooks/useDebouncedValue';
 import { ComponentTestIds } from '../../../constants/TestIds';
 import {
@@ -28,6 +28,11 @@ export type CallParticipantsSpotlightProps =
      * Component to customize the CallParticipantsList.
      */
     CallParticipantsList?: React.ComponentType<CallParticipantsListProps> | null;
+    /**
+     * Check if device is in landscape mode.
+     * This will apply the landscape mode styles to the component.
+     */
+    landscape?: boolean;
   };
 
 const hasScreenShare = (p: StreamVideoParticipant) =>
@@ -45,6 +50,7 @@ export const CallParticipantsSpotlight = ({
   ParticipantVideoFallback,
   ParticipantView = DefaultParticipantView,
   VideoRenderer,
+  landscape,
 }: CallParticipantsSpotlightProps) => {
   const {
     theme: { colors, callParticipantsSpotlight },
@@ -71,11 +77,20 @@ export const CallParticipantsSpotlight = ({
     ParticipantView,
   };
 
+  const landScapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
+  const spotlightContainerLandscapeStyles: ViewStyle = {
+    marginHorizontal: landscape ? 0 : 8,
+  };
+
   return (
     <View
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
+        landScapeStyles,
         {
           backgroundColor: colors.dark_gray,
         },
@@ -93,6 +108,7 @@ export const CallParticipantsSpotlight = ({
                 ]
               : [
                   styles.spotlightContainer,
+                  spotlightContainerLandscapeStyles,
                   callParticipantsSpotlight.spotlightContainer,
                 ]
           }
@@ -114,7 +130,9 @@ export const CallParticipantsSpotlight = ({
               participants={
                 isScreenShareOnSpotlight ? allParticipants : otherParticipants
               }
-              horizontal
+              horizontal={!landscape}
+              numberOfColumns={!landscape ? 2 : 1}
+              landscape={landscape}
               {...callParticipantsListProps}
             />
           )}
@@ -127,7 +145,6 @@ export const CallParticipantsSpotlight = ({
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingVertical: 8,
   },
   fullScreenSpotlightContainer: {
     flex: 1,
@@ -137,7 +154,6 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     borderRadius: 10,
     marginHorizontal: 8,
-    marginBottom: 8,
   },
   callParticipantsListContainer: {
     flex: 1,