feat(react-native): add landscape mode support to Lobby, RingingCallC…

…ontent and DF app (#1123) Add support for landscape mode temporarily for Lobby and RingingCall components so that it doesn't overflow when rendered alongside other components. SDK components: - Lobby ![Screenshot_1696869145](https://github.com/GetStream/stream-video-js/assets/39884168/a3a80699-39ec-4437-9557-f48514609dd4) - Incoming Call ![Simulator Screenshot - iPhone SE (3rd generation) - 2023-10-10 at 10 58 34](https://github.com/GetStream/stream-video-js/assets/39884168/ccc91de6-54b4-4d5a-8a0c-7432f50d94ee) ![Screenshot_1696878441](https://github.com/GetStream/stream-video-js/assets/39884168/45259ece-9a7e-484a-a475-efa5a9f4ce95) - Outgoing Call ![Screenshot_1696915730](https://github.com/GetStream/stream-video-js/assets/39884168/4af1ec54-1896-442c-9b6a-017188ac521c) DF app screens: ![Screenshot_1696868884](https://github.com/GetStream/stream-video-js/assets/39884168/6abe7cd3-f384-4809-a246-3c4df46f8078) ![Screenshot_1696869005](https://github.com/GetStream/stream-video-js/assets/39884168/96888728-d20b-4b12-a8df-33948606726b) ![Screenshot_1696869029](https://github.com/GetStream/stream-video-js/assets/39884168/e9b8d108-f26c-4ef6-ab76-686e2f40a72e) ![Screenshot_1696878061](https://github.com/GetStream/stream-video-js/assets/39884168/a0e3cefa-d5b6-4de6-a598-7b4af1e92cb0)
GetStream · Oct 12, 2023 · cc247f0 · cc247f0
1 parent d1886b7
commit cc247f0
Show file tree

Hide file tree

Showing 27 changed files with 366 additions and 202 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
@@ -97,7 +97,7 @@ When a screen is shared, the layout automatically changes to `spotlight` mode.
 
 ### `landscape`
 
-<LandScape />
+<Landscape />
 
 ### [`onBackPressed`](../call-top-view/#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
@@ -42,7 +42,7 @@ const VideoCallUI = () => {
 
 ### `landscape`
 
-<LandScape />
+<Landscape />
 
 ## Built-in call controls
 

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

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

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

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

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

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
@@ -1,4 +1,4 @@
-Applies the landscape mode styles to the component.
+Applies the landscape mode styles to the component, if true.
 
 | Type                     |
 | ------------------------ |

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

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

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

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

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