feat(mobile/navigation): reorganized transitions and added carmode ti…

…le view case
jitsi · Nov 18, 2024 · 54e16d3 · 54e16d3
1 parent 50e9413
commit 54e16d3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/...ures/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx b/...ures/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx
@@ -16,7 +16,7 @@ import Conference from '../../../../../conference/components/native/Conference';
 // @ts-ignore
 import CarMode from '../../../../../conference/components/native/carmode/CarMode';
 // @ts-ignore
-import { arePollsDisabled } from '../../../../../conference/functions';
+import { arePollsDisabled } from '../../../../../conference/functions.native';
 // @ts-ignore
 import SharedDocument from '../../../../../etherpad/components/native/SharedDocument';
 // @ts-ignore
@@ -43,12 +43,14 @@ import SpeakerStats
 import LanguageSelectorDialog
 // @ts-ignore
     from '../../../../../subtitles/components/native/LanguageSelectorDialog';
+import { shouldDisplayTileView } from '../../../../../video-layout/functions.native';
 import Whiteboard from '../../../../../whiteboard/components/native/Whiteboard';
 // @ts-ignore
 import { screen } from '../../../routes';
 import {
     breakoutRoomsScreenOptions,
     carmodeScreenOptions,
+    carmodeScreenOptionsInTileView,
     chatScreenOptions,
     conferenceScreenOptions,
     gifsMenuOptions,
@@ -84,9 +86,11 @@ const ConferenceStack = createStackNavigator();
 
 const ConferenceNavigationContainer = () => {
     const isPollsDisabled = useSelector(arePollsDisabled);
+    const isInTileview = useSelector(shouldDisplayTileView);
     let ChatScreen;
     let chatScreenName;
     let chatTitleString;
+    let carModeScreenOptions;
 
     if (isPollsDisabled) {
         ChatScreen = Chat;
@@ -97,6 +101,12 @@ const ConferenceNavigationContainer = () => {
         chatScreenName = screen.conference.chatandpolls.main;
         chatTitleString = 'chat.titleWithPolls';
     }
+
+    if (isInTileview) {
+        carModeScreenOptions = carmodeScreenOptionsInTileView;
+    } else {
+        carModeScreenOptions = carmodeScreenOptions;
+    }
     const { t } = useTranslation();
 
     return (
@@ -199,7 +209,7 @@ const ConferenceNavigationContainer = () => {
                     component = { CarMode }
                     name = { screen.conference.carmode }
                     options = {{
-                        ...carmodeScreenOptions,
+                        ...carModeScreenOptions,
                         title: t('carmode.labels.title')
                     }} />
                 <ConferenceStack.Screen

diff --git a/react/features/mobile/navigation/screenOptions.ts b/react/features/mobile/navigation/screenOptions.ts
@@ -1,6 +1,7 @@
-import { TransitionPresets } from '@react-navigation/stack';
+import { TransitionPresets } from '@react-navigation/stack'
 import { Platform } from 'react-native';
 
+
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
 import { goBack } from './components/conference/ConferenceNavigationContainerRef';
@@ -10,22 +11,30 @@ import { goBack as goBackToWelcomeScreen } from './rootNavigationContainerRef';
 
 
 /**
- * Default modal transition for the current platform.
+ * Modal transition for the current platform.
  */
-export const modalPresentation = Platform.select({
+const modalPresentation = Platform.select({
     ios: TransitionPresets.ModalPresentationIOS,
     default: TransitionPresets.DefaultTransition
 });
 
 /**
- * Screen options and transition types.
+ * Full Screen options.
  */
-export const fullScreenOptions = {
+const fullScreenOptions = {
     ...TransitionPresets.ModalTransition,
     gestureEnabled: false,
     headerShown: false
 };
 
+/**
+ * Transition type for the current platform.
+ */
+const carmodeTileViewTransition = Platform.select({
+    ios: TransitionPresets.SlideFromRightIOS,
+    default: TransitionPresets.DefaultTransition
+});
+
 /**
  * Navigation container theme.
  */
@@ -40,11 +49,6 @@ export const navigationContainerTheme = {
  */
 export const welcomeScreenOptions = {
     ...TransitionPresets.ModalTransition,
-    gestureEnabled: false,
-    headerShown: true,
-    headerStyle: {
-        backgroundColor: BaseTheme.palette.ui01
-    },
     headerTitleStyle: {
         color: BaseTheme.palette.text01
     }
@@ -101,6 +105,22 @@ export const breakoutRoomsScreenOptions = presentationScreenOptions;
  */
 export const carmodeScreenOptions = presentationScreenOptions;
 
+/**
+ * Screen options for car mode in tile view.
+ */
+export const carmodeScreenOptionsInTileView = {
+    ...carmodeTileViewTransition,
+    gestureEnabled: true,
+    headerLeft: () => screenHeaderCloseButton(goBack),
+    headerShown: true,
+    headerStyle: {
+        backgroundColor: BaseTheme.palette.ui01
+    },
+    headerTitleStyle: {
+        color: BaseTheme.palette.text01
+    }
+};
+
 /**
  * Screen options for chat.
  */