Concept of new navigation for example app

example/src/App.tsx

@@ -2,26 +2,11 @@ import React, { Component } from 'react';
 import { KeyboardAvoidingView, Platform, StatusBar } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
-import DolbyIOProvider from '@components/DolbyIOProvider';
-import FilePresentationHandler, {
-  FilePresentationProvider,
-} from '@components/FilePresentationHandler';
-import InvitationHandler from '@components/InvitationHandler';
-import ConferenceCreatedHandler from '@components/ConferenceCreatedHandler';
-import ConferenceEndedHandler from '@components/ConferenceEndedHandler';
-import MessageHandler from '@components/MessageHandler';
-import RecordingProvider from '@components/RecordingProvider';
-import VideoPresentationHandler from '@components/VideoPresentationHandler';
 import COLORS from '@constants/colors.constants';
 
-import Main from './Main';
-import ConferenceStatusHandler from '@components/ConferenceStatusHandler';
-import ParticipantJoinedHandler from '@components/ParticipantJoinedHandler';
-import ParticipantLeftHandler from '@components/ParticipantLeftHandler';
-import ActiveParticipantsHandler from '@components/ActiveParticipantsHandler';
-
 import FloatingButton from '@ui/FloatingButton';
 import LoggerView from '@utils/Logger/LoggerView';
+import NavigationProvider from './navigation/NavigationProvider';
 
 export interface Props {}
 
@@ -47,28 +32,12 @@ export default class App extends Component<Props, State> {
           behavior={Platform.OS === 'ios' ? 'padding' : undefined}
         >
           <StatusBar backgroundColor={COLORS.BLACK} />
-          <DolbyIOProvider>
-            <RecordingProvider>
-              <FilePresentationProvider>
-                <Main />
-                <LoggerView isVisible={this.state.isOverlayVisible} isTouchable={this.state.isOverlayTouchable} />
-                <FloatingButton 
-                onPress={() => {this.setState({isOverlayVisible: !this.state.isOverlayVisible})}}
-                onLongPress={() => {this.setState({isOverlayTouchable: !this.state.isOverlayTouchable})}}
-                />
-                <FilePresentationHandler />
-              </FilePresentationProvider>
-            </RecordingProvider>
-            <VideoPresentationHandler />
-            <MessageHandler />
-            <InvitationHandler />
-            <ConferenceStatusHandler />
-            <ConferenceCreatedHandler />
-            <ConferenceEndedHandler />
-            <ParticipantJoinedHandler />
-            <ParticipantLeftHandler />
-            <ActiveParticipantsHandler />
-          </DolbyIOProvider>
+          <NavigationProvider />
+          <LoggerView isVisible={this.state.isOverlayVisible} isTouchable={this.state.isOverlayTouchable} />
+          <FloatingButton 
+            onPress={() => {this.setState({isOverlayVisible: !this.state.isOverlayVisible})}}
+            onLongPress={() => {this.setState({isOverlayTouchable: !this.state.isOverlayTouchable})}}
+          />
         </KeyboardAvoidingView>
       </GestureHandlerRootView>
     );

example/src/components/DolbyIOProvider/DolbyIOProvider.tsx

@@ -33,7 +33,6 @@ import Logger from '@utils/Logger/Logger';
 
 export interface IDolbyIOProvider {
   isInitialized?: Boolean;
-  isAudioPreviewScreen: Boolean;
   me?: Participant;
   conference?: Conference;
   conferenceStatus?: ConferenceStatus;
@@ -48,7 +47,6 @@ export interface IDolbyIOProvider {
   joinWithId: (conferenceId: string) => void;
   replay: () => void;
   getCurrentConference: () => void;
-  goToAudioPreviewScreen: (isVisible: boolean) => void;
   leave: (leaveRoom: boolean) => void;
   setSessionParticipant: () => void;
   setBottomSheetVisibility: (isVisible: boolean) => void;
@@ -60,7 +58,6 @@ export const DolbyIOContext = React.createContext<IDolbyIOProvider>({
   me: undefined,
   conference: undefined,
   conferenceStatus: undefined,
-  isAudioPreviewScreen: false,
   participants: [],
   initialize: () => {},
   openSession: () => { return Promise.resolve(); },
@@ -72,7 +69,6 @@ export const DolbyIOContext = React.createContext<IDolbyIOProvider>({
   replay: () => {},
   leave: () => {},
   getCurrentConference: () => {},
-  goToAudioPreviewScreen: () => {},
   setSessionParticipant: () => {},
   setBottomSheetVisibility: () => {},
 });
@@ -85,7 +81,6 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
   const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [me, setMe] = useState<Participant | undefined>(undefined);
-  const [isAudioPreviewScreen, setIsAudioPreviewScreen] = useState(false);
   const [conference, setConference] = useState<Conference | undefined>(
     undefined
   );
@@ -447,18 +442,13 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
     }
   }
 
-  const goToAudioPreviewScreen = (isVisible: boolean) => {
-    setIsAudioPreviewScreen(isVisible);
-  }
-
   const setBottomSheetVisibility = (isVisible: boolean) => {
     setIsBottomSheetVisible(isVisible);
   }
 
   const contextValue = {
     isInitialized,
     isBottomSheetVisible,
-    isAudioPreviewScreen,
     me,
     conference,
     conferenceStatus,
@@ -473,7 +463,6 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
     replay,
     leave,
     getCurrentConference,
-    goToAudioPreviewScreen,
     setSessionParticipant,
     setBottomSheetVisibility,
   };

example/src/navigation/NavigationProvider.tsx

@@ -0,0 +1,59 @@
+import ActiveParticipantsHandler from "@components/ActiveParticipantsHandler";
+import ConferenceCreatedHandler from "@components/ConferenceCreatedHandler";
+import ConferenceEndedHandler from "@components/ConferenceEndedHandler";
+import ConferenceStatusHandler from "@components/ConferenceStatusHandler";
+import DolbyIOProvider from "@components/DolbyIOProvider";
+import FilePresentationHandler, { FilePresentationProvider } from "@components/FilePresentationHandler";
+import InvitationHandler from "@components/InvitationHandler";
+import MessageHandler from "@components/MessageHandler";
+import ParticipantJoinedHandler from "@components/ParticipantJoinedHandler";
+import ParticipantLeftHandler from "@components/ParticipantLeftHandler";
+import RecordingProvider from "@components/RecordingProvider";
+import VideoPresentationHandler from "@components/VideoPresentationHandler";
+import React, { useState } from "react";
+import { Screens, Screen } from "./ScreenFactory";
+
+
+
+export interface INavigationProvider {
+    currentScreen: Screen,
+    setScreen: (screen: Screen) => void
+}
+
+export const NavigationContext = React.createContext<INavigationProvider>({
+    currentScreen: Screens.InputTokenScreen,
+    setScreen: (_: Screen) => undefined
+});
+
+const NavigationProvider: React.FC = () => {
+    const [currentScreen, setScreen] = useState(Screens.InputTokenScreen);
+    const data = {
+        currentScreen: currentScreen,
+        setScreen: setScreen
+    };
+
+    return (
+        <NavigationContext.Provider value={data}>
+            <DolbyIOProvider>
+            <RecordingProvider>
+              <FilePresentationProvider>
+                {currentScreen.create()}
+                <FilePresentationHandler />
+              </FilePresentationProvider>
+            </RecordingProvider>
+            <VideoPresentationHandler />
+            <MessageHandler />
+            <InvitationHandler />
+            <ConferenceStatusHandler />
+            <ConferenceCreatedHandler />
+            <ConferenceEndedHandler />
+            <ParticipantJoinedHandler />
+            <ParticipantLeftHandler />
+            <ActiveParticipantsHandler />
+          </DolbyIOProvider>
+
+        </NavigationContext.Provider>
+    );
+};
+
+export default NavigationProvider;

example/src/navigation/ScreenFactory.tsx

@@ -0,0 +1,30 @@
+import AudioPreviewScreen from "@screens/AudioPreviewScreen"
+import ConferenceScreen from "@screens/ConferenceScreen"
+import InputTokenScreen from "@screens/InputTokenScreen"
+import JoinScreen from "@screens/JoinScreen"
+import LoginScreen from "@screens/LoginScreen"
+import React from "react"
+
+export interface Screen {
+    create(): React.ReactElement
+};
+
+class ScreenFactory implements Screen {
+    private _factoryClousure: () => React.ReactElement;
+
+    constructor(factoryClousure: () => React.ReactElement ) {
+        this._factoryClousure = factoryClousure;
+    }
+
+    create(): React.ReactElement {
+        return this._factoryClousure();
+    }
+}
+
+export const Screens = {
+    InputTokenScreen: new ScreenFactory(() => <InputTokenScreen/>) as Screen,
+    LoginScreen: new ScreenFactory(() => <LoginScreen/>) as Screen,
+    JoinScreen: new ScreenFactory(() => <JoinScreen/>) as Screen,
+    AudioPreviewScreen: new ScreenFactory(() => <AudioPreviewScreen/>) as Screen,
+    ConferenceScreen: new ScreenFactory(() => <ConferenceScreen/>) as Screen,
+}

example/src/screens/AudioPreviewScreen/AudioPreviewScreen.tsx

@@ -11,7 +11,6 @@ import COLORS from '@constants/colors.constants';
 import Space from '@ui/Space';
 import Text from '@ui/Text';
 import Button from '@ui/Button';
-import { DolbyIOContext } from '@components/DolbyIOProvider';
 import {
   VoiceFont,
   AudioCaptureMode,
@@ -30,13 +29,15 @@ import type { Options } from '@ui/MenuOptionsButton/MenuOptionsButton';
 import { View } from 'react-native';
 import MenuOptionsButton from '@ui/MenuOptionsButton';
 import { MenuProvider } from 'react-native-popup-menu';
+import { NavigationContext } from '../../navigation/NavigationProvider';
+import { Screens } from '../../navigation/ScreenFactory';
 
 
 const AudioPreviewScreen: FunctionComponent = () => {
-  const { goToAudioPreviewScreen } = useContext(DolbyIOContext);
+  const { setScreen } = useContext(NavigationContext);
 
   const onBackButton = () => {
-    goToAudioPreviewScreen(false);
+    setScreen(Screens.JoinScreen);
   };
 
   const voiceFontAction: (voiceFont: VoiceFont) => void = (voiceFont) => {

example/src/screens/ConferenceScreen/ConferenceScreen.tsx

@@ -4,6 +4,8 @@ import LinearGradient from 'react-native-linear-gradient';
 import { MenuProvider } from 'react-native-popup-menu';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { DolbyIOContext } from '@components/DolbyIOProvider';
+import { NavigationContext } from '../../navigation/NavigationProvider';
+import { Screens } from '../../navigation/ScreenFactory';
 import { FilePresentationContext } from '@components/FilePresentationHandler';
 import { RecordingContext } from '@components/RecordingProvider';
 import COLORS from '@constants/colors.constants';
@@ -25,7 +27,8 @@ const DISPLAYED_STATUSES: ParticipantStatus[] = [
 ];
 
 const ConferenceScreen: FunctionComponent = () => {
-  const { me, conference, participants, isBottomSheetVisible, setBottomSheetVisibility } = useContext(DolbyIOContext);
+  const { me, conference, participants, leave, isBottomSheetVisible, setBottomSheetVisibility } = useContext(DolbyIOContext);
+  const { setScreen } = useContext(NavigationContext);
   const { isRecording } = useContext(RecordingContext);
   const { fileSrc, isPresentingFile, fileOwnerName } = useContext(
     FilePresentationContext
@@ -65,6 +68,16 @@ const ConferenceScreen: FunctionComponent = () => {
     setIsMuted(!isMuted);
   };
 
+  const onPressLeaveButton = async (closeSession: boolean) => {
+    await leave(closeSession);
+    if (closeSession) {
+      setScreen(Screens.LoginScreen)
+    } else {
+      setScreen(Screens.JoinScreen);
+    }
+
+  }
+
   return (
     <LinearGradient colors={COLORS.GRADIENT} style={styles.wrapper}>
       <View style={styles.layerInfo}>
@@ -81,8 +94,9 @@ const ConferenceScreen: FunctionComponent = () => {
                     <Text size="s" align="center">
                       Conference: <Text weight="bold">{conference.alias}</Text>
                     </Text>
+
                   </Space>
-                  <LeaveConferenceButton />
+                  <LeaveConferenceButton onPress={onPressLeaveButton} />
                 </Space>
                 {isRecording ? (
                   <RecordingDotsText text="Conference is being recorded" />

example/src/screens/ConferenceScreen/LeaveConferenceButton.tsx

@@ -1,30 +1,27 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { View } from 'react-native';
-
-import { DolbyIOContext } from '@components/DolbyIOProvider';
 import COLORS from '@constants/colors.constants';
 import MenuOptionsButton from '@ui/MenuOptionsButton';
 import type { Options } from '@ui/MenuOptionsButton/MenuOptionsButton';
 import Text from '@ui/Text';
 
 import styles from './ConferenceScreen.style';
 
-const LeaveConferenceButton = () => {
-  const { leave } = useContext(DolbyIOContext);
+type LeaveBtnProps = {
+  onPress: (closeSession: boolean) => void
+};
+
+const LeaveConferenceButton: React.FC<LeaveBtnProps> = ({ onPress }) => {
   const leaveOptions: Options = [
     {
       text: 'Leave and close session',
       value: 'leaveAndCloseSession',
-      onSelect: async () => {
-        await leave(true);
-      },
+      onSelect: () => onPress(true),
     },
     {
       text: 'Leave without closing session',
       value: 'leaveWithoutClosingSession',
-      onSelect: async () => {
-        await leave(false);
-      },
+      onSelect: () => onPress(false),
     },
   ];
 

example/src/screens/InputTokenScreen/InputTokenScreen.tsx

@@ -7,6 +7,8 @@ import React, {
   import { SafeAreaView } from 'react-native-safe-area-context';
 
   import { DolbyIOContext } from '@components/DolbyIOProvider';
+  import { NavigationContext } from '../../navigation/NavigationProvider';
+  import { Screens } from '../../navigation/ScreenFactory';
   import COLORS from '@constants/colors.constants';
   import Input from '@ui/Input';
   import Space from '@ui/Space';
@@ -17,7 +19,13 @@ import React, {
 
   const InputTokenScreen: FunctionComponent = () => {
     const { initialize } = useContext(DolbyIOContext);
+    const { setScreen } = useContext(NavigationContext);
     const [token, setToken] = useState('');
+
+    const onInitialize = async () => {
+      await initialize(token, async () => token);
+      setScreen(Screens.LoginScreen);
+    }
 
     return (
         <LinearGradient colors={COLORS.GRADIENT} style={styles.wrapper}>
@@ -41,7 +49,7 @@ import React, {
                 <Input label="Your token" onChange={setToken} value={token} />
               </Space>
               <Space mt="m">
-                <Button text="Initialize" onPress={() => initialize(token, async () => token)} />
+                <Button text="Initialize" onPress={onInitialize} />
               </Space>
             </Space>
           </SafeAreaView>