feat(react-native): add landscape mode support to Lobby, RingingCallContent and DF app

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

@@ -97,7 +97,7 @@ When a screen is shared, the layout automatically changes to `spotlight` mode.
 
 ### `landscape`
 
-<LandScape />
+<Landscape />
 
 ### [`onBackPressed`](../call-top-view/#onbackpressed)
 

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

@@ -42,7 +42,7 @@ const VideoCallUI = () => {
 
 ### `landscape`
 
-<LandScape />
+<Landscape />
 
 ## Built-in call controls
 

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

@@ -91,7 +91,7 @@ This decides whether the participants should be listed vertically or horizontall
 
 ### `landscape`
 
-<LandScape />
+<Landscape />
 
 ### `ParticipantLabel`
 

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

@@ -4,6 +4,7 @@ title: IncomingCall
 ---
 
 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';
 
 IncomingCall represents the incoming call state and the UI when a user receives a call from someone else.
 
@@ -49,6 +50,10 @@ const Call = () => {
 
 ## Props
 
+### `landscape`
+
+<Landscape />
+
 ### `onAcceptCallHandler`
 
 | Type                        |

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

@@ -3,6 +3,8 @@ id: lobby
 title: Lobby
 ---
 
+import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
+
 Lobby is a component that is designed to make your entrance and invite experience to a meeting call user-friendly. The purpose is to allow users to test their setup before entering the meeting call. This component mainly contains all the necessary information about the meeting, including:
 
 - The call details such as its id, etc.
@@ -29,6 +31,10 @@ const LobbyComponent = () => {
 
 ## Props
 
+### `landscape`
+
+<Landscape />
+
 ### `onJoinCallHandler`
 
 Handler to be called when the call is joined using the join button in the Lobby.

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

@@ -6,7 +6,7 @@ title: OutgoingCall
 import ImageShowcase from '@site/src/components/ImageShowcase';
 import CameraEnabled from '../../assets/04-ui-components/call/outgoing-call/outgoing-call-camera-enabled.png';
 import CameraDisabled from '../../assets/04-ui-components/call/outgoing-call/outgoing-call-camera-disabled.png';
-
+import Landscape from '../../common-content/ui-components/call/call-content/landscape.mdx';
 import CallTopView from '../../common-content/ui-components/call/call-content/call-top-view.mdx';
 
 OutgoingCall represents the outgoing call state and the UI when a user calls someone else. The view is displayed until someone accepts the call.
@@ -66,6 +66,10 @@ const Call = () => {
 
 ## Props
 
+### `landscape`
+
+<Landscape />
+
 ### `onHangupCallHandler`
 
 | Type                        |

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

@@ -68,7 +68,7 @@ const Call = () => {
 
 ### `landscape`
 
-<LandScape />
+<Landscape />
 
 ### `IncomingCall`
 

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

@@ -1,4 +1,4 @@
-Applies the landscape mode styles to the component.
+Applies the landscape mode styles to the component, if true.
 
 | Type                     |
 | ------------------------ |

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

@@ -174,12 +174,12 @@ export const CallContent = ({
     supportedReactions,
   };
 
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
 
   return (
-    <View style={[styles.container, callContent.container, landScapeStyles]}>
+    <View style={[styles.container, callContent.container, landscapeStyles]}>
       <View style={[styles.container, callContent.callParticipantsContainer]}>
         <View
           style={[styles.view, callContent.topContainer]}

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

@@ -31,7 +31,7 @@ export const CallControls = ({
   const {
     theme: { colors, callControls },
   } = useTheme();
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'column-reverse' : 'row',
     paddingHorizontal: landscape ? 12 : 0,
     paddingVertical: landscape ? 0 : 12,
@@ -42,7 +42,7 @@ export const CallControls = ({
         styles.container,
         { backgroundColor: colors.static_grey },
         callControls.container,
-        landScapeStyles,
+        landscapeStyles,
         style,
       ]}
     >

packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx

@@ -54,7 +54,7 @@ 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 = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
 
@@ -80,7 +80,7 @@ export const CallParticipantsGrid = ({
     <View
       style={[
         styles.container,
-        landScapeStyles,
+        landscapeStyles,
         { backgroundColor: colors.dark_gray },
         callParticipantsGrid.container,
       ]}

packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsSpotlight.tsx

@@ -75,7 +75,7 @@ export const CallParticipantsSpotlight = ({
     ParticipantView,
   };
 
-  const landScapeStyles: ViewStyle = {
+  const landscapeStyles: ViewStyle = {
     flexDirection: landscape ? 'row' : 'column',
   };
 
@@ -88,7 +88,7 @@ export const CallParticipantsSpotlight = ({
       testID={ComponentTestIds.CALL_PARTICIPANTS_SPOTLIGHT}
       style={[
         styles.container,
-        landScapeStyles,
+        landscapeStyles,
         {
           backgroundColor: colors.dark_gray,
         },

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

@@ -1,5 +1,5 @@
 import React, { ComponentType } from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { StyleSheet, Text, View, ViewStyle } from 'react-native';
 import { MicOff } from '../../../icons';
 import {
   useCall,
@@ -40,6 +40,11 @@ export type LobbyProps = {
    * Component to customize the Join Call Button in the Lobby component.
    */
   JoinCallButton?: ComponentType<JoinCallButtonProps> | null;
+  /**
+   * Check if device is in landscape mode.
+   * This will apply the landscape mode styles to the component.
+   */
+  landscape?: boolean;
   /**
    * Component to customize the Lobby Footer in the Lobby component.
    */
@@ -53,6 +58,7 @@ export const Lobby = ({
   onJoinCallHandler,
   LobbyControls = DefaultLobbyControls,
   JoinCallButton = DefaultJoinCallButton,
+  landscape = false,
   LobbyFooter = DefaultLobbyFooter,
 }: LobbyProps) => {
   const {
@@ -75,16 +81,21 @@ export const Lobby = ({
     name: connectedUser?.name,
   } as StreamVideoParticipant;
 
+  const landscapeStyles: ViewStyle = {
+    flexDirection: landscape ? 'row' : 'column',
+  };
+
   return (
     <View
       style={[
         styles.container,
+        landscapeStyles,
         { backgroundColor: colors.static_grey },
         lobby.container,
       ]}
     >
       {connectedUser && (
-        <>
+        <View style={[styles.topContainer, lobby.topContainer]}>
           <Text
             style={[
               styles.heading,
@@ -126,15 +137,17 @@ export const Lobby = ({
             )}
             <ParticipantStatus />
           </View>
-          {LobbyControls && <LobbyControls />}
-        </>
-      )}
-      {LobbyFooter && (
-        <LobbyFooter
-          JoinCallButton={JoinCallButton}
-          onJoinCallHandler={onJoinCallHandler}
-        />
+        </View>
       )}
+      <View style={[styles.bottomContainer, lobby.bottomContainer]}>
+        {LobbyControls && <LobbyControls />}
+        {LobbyFooter && (
+          <LobbyFooter
+            JoinCallButton={JoinCallButton}
+            onJoinCallHandler={onJoinCallHandler}
+          />
+        )}
+      </View>
     </View>
   );
 };
@@ -195,13 +208,16 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
+  },
+  topContainer: {
+    flex: 2,
+    justifyContent: 'space-evenly',
     paddingHorizontal: 12,
   },
   heading: {
     textAlign: 'center',
   },
   subHeading: {
-    marginBottom: 16,
     textAlign: 'center',
   },
   videoContainer: {
@@ -213,6 +229,11 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   topView: {},
+  bottomContainer: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 12,
+  },
   participantStatusContainer: {
     alignSelf: 'flex-start',
     flexDirection: 'row',