diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-content.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-content.mdx index a1d095d5cc..1cd9ecbf2d 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-content.mdx +++ b/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` - + ### [`onBackPressed`](../call-top-view/#onbackpressed) diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-controls.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-controls.mdx index 6ffc9e0885..9b4d418ad0 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-controls.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-controls.mdx @@ -42,7 +42,7 @@ const VideoCallUI = () => { ### `landscape` - + ## Built-in call controls diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-participants-list.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-participants-list.mdx index 174f5b777b..13814198c0 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/call-participants-list.mdx +++ b/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` - + ### `ParticipantLabel` diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/incoming-call.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/incoming-call.mdx index b8e5d7dc3e..f185ba164f 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/incoming-call.mdx +++ b/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` + + + ### `onAcceptCallHandler` | Type | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx index 031c85d1fb..4a43883713 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/lobby.mdx +++ b/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` + + + ### `onJoinCallHandler` Handler to be called when the call is joined using the join button in the Lobby. diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/outgoing-call.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/outgoing-call.mdx index 531046e33c..c095fbdc56 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/outgoing-call.mdx +++ b/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` + + + ### `onHangupCallHandler` | Type | diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/ringing-call-content.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/ringing-call-content.mdx index af575901f0..be92bd4ba9 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/ringing-call-content.mdx +++ b/packages/react-native-sdk/docusaurus/docs/reactnative/04-ui-components/call/ringing-call-content.mdx @@ -68,7 +68,7 @@ const Call = () => { ### `landscape` - + ### `IncomingCall` diff --git a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/landscape.mdx b/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/landscape.mdx index 25e846e4d9..c78c596971 100644 --- a/packages/react-native-sdk/docusaurus/docs/reactnative/common-content/ui-components/call/call-content/landscape.mdx +++ b/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 | | ------------------------ | diff --git a/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx b/packages/react-native-sdk/src/components/Call/CallContent/CallContent.tsx index e3f713bd39..f790ec425e 100644 --- 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 ( - + diff --git a/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx b/packages/react-native-sdk/src/components/Call/CallLayout/CallParticipantsGrid.tsx index c9c1fe8880..ad2cd09ee4 100644 --- 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 = ({ | 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 ( {connectedUser && ( - <> + - {LobbyControls && } - - )} - {LobbyFooter && ( - + )} + + {LobbyControls && } + {LobbyFooter && ( + + )} + ); }; @@ -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', diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx index a5f014e2e5..412b8dcbbf 100644 --- a/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx +++ b/packages/react-native-sdk/src/components/Call/RingingCallContent/IncomingCall.tsx @@ -1,5 +1,11 @@ import React from 'react'; -import { ImageBackground, StyleSheet, Text, View } from 'react-native'; +import { + ImageBackground, + StyleSheet, + Text, + View, + ViewStyle, +} from 'react-native'; import { useCallStateHooks, useConnectedUser, @@ -28,6 +34,11 @@ export type IncomingCallProps = IncomingCallControlsProps & { * Prop to customize the IncomingCall controls. */ IncomingCallControls?: React.ComponentType | null; + /** + * Check if device is in landscape mode. + * This will apply the landscape mode styles to the component. + */ + landscape?: boolean; }; /** @@ -39,45 +50,59 @@ export const IncomingCall = ({ onRejectCallHandler, CallTopView = DefaultCallTopView, IncomingCallControls = DefaultIncomingCallControls, + landscape, }: IncomingCallProps) => { const { t } = useI18n(); const { theme: { colors, incomingCall, typefaces }, } = useTheme(); + const landscapeContentStyles: ViewStyle = { + flexDirection: landscape ? 'row' : 'column', + }; + return ( {CallTopView && } - - - - {t('Incoming Call...')} - - - {IncomingCallControls && ( - - )} + + + + {t('Incoming Call...')} + + + + + {IncomingCallControls && ( + + )} + + ); }; -const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({ - children, -}) => { +const Background: React.FunctionComponent<{ + children: React.ReactNode; +}> = ({ children }) => { const { theme: { colors, incomingCall }, } = useTheme(); @@ -99,7 +124,6 @@ const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({ uri: avatarsToShow[0], }} style={[ - StyleSheet.absoluteFill, styles.background, { backgroundColor: colors.static_grey }, incomingCall.background, @@ -112,7 +136,6 @@ const Background: React.FunctionComponent<{ children: React.ReactNode }> = ({ return ( | null; + /** + * Check if device is in landscape mode. + * This will apply the landscape mode styles to the component. + */ + landscape?: boolean; }; /** @@ -40,12 +45,17 @@ export type OutgoingCallProps = OutgoingCallControlsProps & { export const OutgoingCall = ({ CallTopView = DefaultCallTopView, OutgoingCallControls = DefaultOutgoingCallControls, + landscape, }: OutgoingCallProps) => { const { theme: { colors, typefaces, outgoingCall }, } = useTheme(); const { t } = useI18n(); + const landscapeContentStyles: ViewStyle = { + flexDirection: landscape ? 'row' : 'column', + }; + return ( <> {CallTopView && } - - - - {t('Calling...')} - - - {OutgoingCallControls && } + + + + {t('Calling...')} + + + + + {OutgoingCallControls && } + + + ); @@ -133,17 +150,16 @@ const styles = StyleSheet.create({ container: { zIndex: Z_INDEX.IN_MIDDLE, }, + topContainer: { flex: 1 }, content: { - paddingTop: 8, + flex: 1, }, callingText: { marginTop: 16, textAlign: 'center', }, + bottomContainer: { flex: 1, alignSelf: 'center', justifyContent: 'center' }, outgoingCallControls: { - position: 'absolute', - bottom: 64, - left: 0, - right: 0, + justifyContent: 'center', }, }); diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/RingingCallContent.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/RingingCallContent.tsx index e005c04d7a..1e0ecac017 100644 --- a/packages/react-native-sdk/src/components/Call/RingingCallContent/RingingCallContent.tsx +++ b/packages/react-native-sdk/src/components/Call/RingingCallContent/RingingCallContent.tsx @@ -55,7 +55,7 @@ const RingingCallPanel = ({ CallContent = DefaultCallContent, JoiningCallIndicator = DefaultJoiningCallIndicator, CallTopView, - landscape, + landscape = false, }: RingingCallContentProps) => { const call = useCall(); const isCallCreatedByMe = call?.isCreatedByMe; @@ -66,8 +66,12 @@ const RingingCallPanel = ({ switch (callingState) { case CallingState.RINGING: return isCallCreatedByMe - ? OutgoingCall && - : IncomingCall && ; + ? OutgoingCall && ( + + ) + : IncomingCall && ( + + ); case CallingState.JOINED: return ( CallContent && ( diff --git a/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx b/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx index a6d51c9edd..4e7f3bd97f 100644 --- a/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx +++ b/packages/react-native-sdk/src/components/Call/RingingCallContent/UserInfo.tsx @@ -134,6 +134,6 @@ const styles = StyleSheet.create({ }, name: { textAlign: 'center', - marginTop: 32, + marginTop: 16, }, }); diff --git a/packages/react-native-sdk/src/constants/index.ts b/packages/react-native-sdk/src/constants/index.ts index 337d0715b6..42241a3ef0 100644 --- a/packages/react-native-sdk/src/constants/index.ts +++ b/packages/react-native-sdk/src/constants/index.ts @@ -6,7 +6,7 @@ export const FLOATING_VIDEO_VIEW_STYLE = { borderRadius: 10, }; -export const LOBBY_VIDEO_VIEW_HEIGHT = 280; +export const LOBBY_VIDEO_VIEW_HEIGHT = 240; export const defaultEmojiReactions: StreamReactionType[] = [ { diff --git a/packages/react-native-sdk/src/theme/theme.ts b/packages/react-native-sdk/src/theme/theme.ts index fbe63b20a6..f28b9030b3 100644 --- a/packages/react-native-sdk/src/theme/theme.ts +++ b/packages/react-native-sdk/src/theme/theme.ts @@ -101,9 +101,11 @@ export type Theme = { }; lobby: { container: ViewStyle; + topContainer: ViewStyle; heading: TextStyle; subHeading: TextStyle; videoContainer: ViewStyle; + bottomContainer: ViewStyle; infoContainer: ViewStyle; infoText: TextStyle; participantStatusContainer: ViewStyle; @@ -148,8 +150,10 @@ export type Theme = { incomingCall: { background: ViewStyle; content: ViewStyle; + topContainer: ViewStyle; incomingCallText: TextStyle; incomingCallControls: ViewStyle; + bottomContainer: ViewStyle; buttonGroup: ViewStyle; }; joiningCallIndicator: { @@ -159,8 +163,10 @@ export type Theme = { container: ViewStyle; background: ViewStyle; content: ViewStyle; + topContainer: ViewStyle; callingText: TextStyle; outgoingCallControls: ViewStyle; + bottomContainer: ViewStyle; buttonGroup: ViewStyle; deviceControlButtons: ViewStyle; }; @@ -213,10 +219,10 @@ export const defaultTheme: Theme = { }, avatarSizes: { xs: 50, - sm: 100, - md: 120, - lg: 180, - xl: 80, + sm: 90, + md: 100, + lg: 160, + xl: 180, }, }, typefaces: { @@ -318,8 +324,10 @@ export const defaultTheme: Theme = { }, lobby: { container: {}, + topContainer: {}, heading: {}, subHeading: {}, + bottomContainer: {}, videoContainer: {}, infoContainer: {}, infoText: {}, @@ -373,16 +381,20 @@ export const defaultTheme: Theme = { incomingCall: { background: {}, content: {}, + topContainer: {}, incomingCallText: {}, incomingCallControls: {}, + bottomContainer: {}, buttonGroup: {}, }, outgoingCall: { container: {}, background: {}, content: {}, + topContainer: {}, callingText: {}, outgoingCallControls: {}, + bottomContainer: {}, buttonGroup: {}, deviceControlButtons: {}, }, diff --git a/sample-apps/react-native/dogfood/ios/Podfile.lock b/sample-apps/react-native/dogfood/ios/Podfile.lock index e9af40f754..4acb7a2aec 100644 --- a/sample-apps/react-native/dogfood/ios/Podfile.lock +++ b/sample-apps/react-native/dogfood/ios/Podfile.lock @@ -523,7 +523,7 @@ PODS: - stream-react-native-webrtc (104.0.1): - React-Core - WebRTC-SDK (= 104.5112.17) - - stream-video-react-native (0.0.28): + - stream-video-react-native (0.1.4): - React-Core - stream-react-native-webrtc - TOCropViewController (2.6.1) @@ -834,7 +834,7 @@ SPEC CHECKSUMS: RNVoipPushNotification: 1617f5a07be24066830213ae9252cb790b53886f SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17 stream-react-native-webrtc: 3e45950d539248d24c1a0a3eafa0f98b5a343ab3 - stream-video-react-native: 9561dc08c83157d1ed8b12eee97417d0df7fcd75 + stream-video-react-native: 88fb5445bc4eb134d60b45a052534f3632734629 TOCropViewController: edfd4f25713d56905ad1e0b9f5be3fbe0f59c863 WebRTC-SDK: 082ae4893212534a779ca233f19a9df8efd5f3bd Yoga: f7decafdc5e8c125e6fa0da38a687e35238420fa diff --git a/sample-apps/react-native/dogfood/src/components/CallControlsComponent.tsx b/sample-apps/react-native/dogfood/src/components/CallControlsComponent.tsx index 8ba6e5bbb8..16aa79eb07 100644 --- a/sample-apps/react-native/dogfood/src/components/CallControlsComponent.tsx +++ b/sample-apps/react-native/dogfood/src/components/CallControlsComponent.tsx @@ -30,7 +30,7 @@ export const CallControlsComponent = ({ landscape, }: CallControlsComponentProps) => { const { bottom } = useSafeAreaInsets(); - const landScapeStyles: ViewStyle = { + const landscapeStyles: ViewStyle = { flexDirection: landscape ? 'column-reverse' : 'row', paddingHorizontal: landscape ? 12 : 0, paddingVertical: landscape ? 0 : 12, @@ -38,7 +38,7 @@ export const CallControlsComponent = ({ }; return ( - + { const { t } = useI18n(); + const orientation = useOrientation(); const JoinCallButtonComponent = useCallback(() => { - return ; - }, [onJoinCallHandler]); + return ( + <> + + {route.name === 'MeetingScreen' ? ( + { + navigation.navigate('GuestModeScreen', { callId }); + }} + > + + {t('Join as Guest or Anonymously')} + + + ) : ( + { + navigation.navigate('MeetingScreen', { callId }); + }} + > + + {t('Join with your Stream Account')} + + + )} + + ); + }, [onJoinCallHandler, callId, navigation, route.name, t]); return ( - - {route.name === 'MeetingScreen' ? ( - { - navigation.navigate('GuestModeScreen', { callId }); - }} - > - - {t('Join as Guest or Anonymously')} - - - ) : ( - { - navigation.navigate('MeetingScreen', { callId }); - }} - > - - {t('Join with your Stream Account')} - - - )} + ); }; @@ -65,11 +74,7 @@ const styles = StyleSheet.create({ backgroundColor: appTheme.colors.static_grey, }, anonymousButton: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - marginBottom: appTheme.spacing.lg, + marginTop: 8, }, anonymousButtonText: { fontSize: 20, diff --git a/sample-apps/react-native/dogfood/src/navigators/Call.tsx b/sample-apps/react-native/dogfood/src/navigators/Call.tsx index 80d3e846e3..60d8af70fb 100644 --- a/sample-apps/react-native/dogfood/src/navigators/Call.tsx +++ b/sample-apps/react-native/dogfood/src/navigators/Call.tsx @@ -14,12 +14,14 @@ import { SafeAreaView, useSafeAreaInsets, } from 'react-native-safe-area-context'; +import { useOrientation } from '../hooks/useOrientation'; const CallStack = createNativeStackNavigator(); const Calls = () => { const calls = useCalls(); const { top } = useSafeAreaInsets(); + const orientation = useOrientation(); const handleMoreCalls = useCallback(async () => { const lastCallCreatedBy = calls[1]?.state.createdBy; @@ -52,7 +54,7 @@ const Calls = () => { }} > - + ); diff --git a/sample-apps/react-native/dogfood/src/screens/Call/JoinCallScreen.tsx b/sample-apps/react-native/dogfood/src/screens/Call/JoinCallScreen.tsx index cb8743ae2b..db384b7500 100644 --- a/sample-apps/react-native/dogfood/src/screens/Call/JoinCallScreen.tsx +++ b/sample-apps/react-native/dogfood/src/screens/Call/JoinCallScreen.tsx @@ -8,6 +8,7 @@ import { StyleSheet, Text, View, + ViewStyle, } from 'react-native'; import { useAppGlobalStoreValue } from '../../contexts/AppContext'; import { @@ -20,6 +21,7 @@ import { Button } from '../../components/Button'; import { TextInput } from '../../components/TextInput'; import { KnownUsers } from '../../constants/KnownUsers'; import { randomId } from '../../modules/helpers/randomId'; +import { useOrientation } from '../../hooks/useOrientation'; const JoinCallScreen = () => { const [ringingUserIdsText, setRingingUserIdsText] = useState(''); @@ -27,6 +29,7 @@ const JoinCallScreen = () => { const [ringingUsers, setRingingUsers] = useState([]); const videoClient = useStreamVideoClient(); const { t } = useI18n(); + const orientation = useOrientation(); const startCallHandler = useCallback(async () => { let ringingUserIds = !ringingUserIdsText @@ -71,12 +74,16 @@ const JoinCallScreen = () => { } }; + const landscapeStyles: ViewStyle = { + flexDirection: orientation === 'landscape' ? 'row' : 'column', + }; + return ( - + {t('Select Participants')} {KnownUsers.filter((user) => user.id !== userId).map((user) => { return ( @@ -99,6 +106,8 @@ const JoinCallScreen = () => { ); })} + + {t('OR')} { }} style={styles.textInputStyle} /> +