From ce9a54452ac0f7479c6d6afeae711bd396c1501f Mon Sep 17 00:00:00 2001 From: kbetl-dlb Date: Thu, 31 Aug 2023 14:51:08 +0200 Subject: [PATCH] New navigation concept Part 2 --- example/src/Main.tsx | 6 +-- .../DolbyIOProvider/DolbyIOProvider.tsx | 17 ++++++ .../src/navigation/NavigationComponent.tsx | 52 ++++++++++++++----- example/src/navigation/Routing.ts | 21 ++++++-- 4 files changed, 75 insertions(+), 21 deletions(-) diff --git a/example/src/Main.tsx b/example/src/Main.tsx index 97b108ac..ec107ef2 100644 --- a/example/src/Main.tsx +++ b/example/src/Main.tsx @@ -9,22 +9,22 @@ import React from 'react'; // import AudioPreviewScreen from '@screens/AudioPreviewScreen'; // import { Navigation } from './navigation/Navigation'; import { NavigationComponent } from './navigation/NavigationComponent'; -import { Routing } from './navigation/Routing'; import { DolbyIOContext } from '@components/DolbyIOProvider'; import LoginScreen from '@screens/LoginScreen/LoginScreen'; import InputTokenScreen from '@screens/InputTokenScreen'; import JoinScreen from '@screens/JoinScreen'; import AudioPreviewScreen from '@screens/AudioPreviewScreen'; import ConferenceScreen from '@screens/ConferenceScreen'; +import { Routing } from './navigation/Routing'; const Main = () => { - // const { isInitialized, me, conference, isAudioPreviewScreen } = useContext(DolbyIOContext); var routing = Routing.withContext(DolbyIOContext); + routing.route("InputTokenScreen", () => , true); routing.route("LoginScreen", () => ); - routing.route("InputTokenScreen", () => ); routing.route("JoinScreen", () => ); routing.route("AudioPreviewScreen", () => ); routing.route("ConferenceScreen", () => ); + routing.getContext() return diff --git a/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx b/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx index 5a203593..18cc9cfb 100644 --- a/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx +++ b/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx @@ -32,6 +32,7 @@ import Logger from '@utils/Logger/Logger'; export interface IDolbyIOProvider { isInitialized?: Boolean; isAudioPreviewScreen: Boolean; + state: string; me?: Participant; conference?: Conference; conferenceStatus?: ConferenceStatus; @@ -53,6 +54,7 @@ export interface IDolbyIOProvider { export const DolbyIOContext = React.createContext({ isInitialized: false, me: undefined, + state: "InputTokenScreen", conference: undefined, conferenceStatus: undefined, isAudioPreviewScreen: false, @@ -77,6 +79,7 @@ type DolbyProps = { const DolbyIOProvider: React.FC = ({ children }) => { const [isInitialized, setIsInitialized] = useState(false); + const [_state, setState] = useState("InputTokenScreen"); const [me, setMe] = useState(undefined); const [isAudioPreviewScreen, setIsAudioPreviewScreen] = useState(false); const [conference, setConference] = useState( @@ -149,6 +152,7 @@ const DolbyIOProvider: React.FC = ({ children }) => { try { await CommsAPI.initializeToken(token, refreshToken); setIsInitialized(true); + setState("LoginScreen"); } catch (e: any) { setIsInitialized(false); Alert.alert('App not initialized', e); @@ -178,6 +182,7 @@ const DolbyIOProvider: React.FC = ({ children }) => { const setSessionParticipant = async () => { try { setMe(await CommsAPI.session.getParticipant()); + setState("JoinScreen") } catch (e: any) { setMe(undefined); } @@ -242,6 +247,7 @@ const DolbyIOProvider: React.FC = ({ children }) => { joinOptions ); setConference(joinedConference); + setState("ConferenceScreen"); const participantsMap = new Map(); joinedConference.participants.forEach((p) => participantsMap.set(p.id, p) @@ -359,10 +365,14 @@ const DolbyIOProvider: React.FC = ({ children }) => { leaveActions(); if (leaveRoom) { setMe(undefined); + setState("LoginScreen"); + } else { + setState("JoinScreen"); } } catch (e: any) { Alert.alert('Conference leave with errors', e); leaveActions(); + setState("JoinScreen"); } }; @@ -441,6 +451,12 @@ const DolbyIOProvider: React.FC = ({ children }) => { const goToAudioPreviewScreen = (isVisible: boolean) => { setIsAudioPreviewScreen(isVisible); + if (isVisible) { + setState("AudioPreviewScreen"); + } else { + setState("JoinScreen"); + } + } const contextValue = { @@ -462,6 +478,7 @@ const DolbyIOProvider: React.FC = ({ children }) => { getCurrentConference, goToAudioPreviewScreen, setSessionParticipant, + state: _state, }; return ( diff --git a/example/src/navigation/NavigationComponent.tsx b/example/src/navigation/NavigationComponent.tsx index 305c3fc9..1e23c79e 100644 --- a/example/src/navigation/NavigationComponent.tsx +++ b/example/src/navigation/NavigationComponent.tsx @@ -1,6 +1,7 @@ -import { FunctionComponent, useContext } from "react"; +import { useContext, type FunctionComponent } from "react"; import type { Routing } from "./Routing"; import type { IDolbyIOProvider } from "@components/DolbyIOProvider/DolbyIOProvider"; +// import { BackHandler } from "react-native"; type NavigationComponentProps = { routing: Routing @@ -10,20 +11,43 @@ type NavigationComponentProps = { export const NavigationComponent: FunctionComponent = ({ routing }) => { - const { isInitialized, me, conference, isAudioPreviewScreen } = useContext(routing.getContext()); + const { state } = useContext(routing.getContext()); + // BackHandler.addEventListener('hardwareBackPress', function () { + // /** + // * this.onMainScreen and this.goBack are just examples, + // * you need to use your own implementation here. + // * + // * Typically you would use the navigator here to go to the last state. + // */ + + // if (!routing.isMainScreen()) { + // routing.goBack(); + // /** + // * When true is returned the event will not be bubbled up + // * & no other back action will execute + // */ + // return true; + // } + // /** + // * Returning false will let the event to bubble up & let other event listeners + // * or the system's default back action to be executed. + // */ + // return false; + // }); - if (!isInitialized) { - routing.setState("InputTokenScreen"); - } else if (!me) { - routing.setState("LoginScreen"); - } else if (!conference && !isAudioPreviewScreen) { - routing.setState("JoinScreen"); - } else if (isAudioPreviewScreen) { - routing.setState("AudioPreviewScreen"); - } else { - routing.setState("ConferenceScreen"); - }; - + // if (!isInitialized) { + // routing.setState("InputTokenScreen"); + // } else if (!me) { + // routing.setState("LoginScreen"); + // } else if (!conference && !isAudioPreviewScreen) { + // routing.setState("JoinScreen"); + // } else if (isAudioPreviewScreen) { + // routing.setState("AudioPreviewScreen"); + // } else { + // routing.setState("ConferenceScreen"); + // }; + console.log("current state:" + state); + routing.setState(state); return routing.getStateElement(); } \ No newline at end of file diff --git a/example/src/navigation/Routing.ts b/example/src/navigation/Routing.ts index 7ab814be..0c5e8a0a 100644 --- a/example/src/navigation/Routing.ts +++ b/example/src/navigation/Routing.ts @@ -1,13 +1,23 @@ import type { Context } from "react"; -import type React from "react"; export class Routing { + static withContext(context: Context): Routing { - return new Routing(context); + if (this.instance == undefined) { + this.instance = new Routing(context); + } else { + if (typeof this.instance.getContext() != typeof context) { + this.instance = new Routing(context); + } + } + return this.instance as Routing; } + static instance: Routing; + _routing: Map; - _state: string = "undefinded"; + // _mainScreen: undefined; + _state: string = ""; constructor(context: Context) { this._routing = new Map(); @@ -21,8 +31,11 @@ export class Routing { throw new Error("init first"); }; - route(name: string, action:Function) { + route(name: string, action:Function, initState: boolean = false) { this._routing.set(name,action); + if (initState) { + this.setState(name); + } }; setState(name: string) {