Skip to content
This repository has been archived by the owner on Aug 30, 2024. It is now read-only.

Commit

Permalink
New navigation concept Part 2
Browse files Browse the repository at this point in the history
  • Loading branch information
@kbetl-dlb
kbetl-dlb committed Aug 31, 2023
1 parent c408d38 commit ce9a544
Show file tree
Hide file tree
Showing 4 changed files with 75 additions and 21 deletions.
6 changes: 3 additions & 3 deletions example/src/Main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => <InputTokenScreen />, true);
routing.route("LoginScreen", () => <LoginScreen />);
routing.route("InputTokenScreen", () => <InputTokenScreen />);
routing.route("JoinScreen", () => <JoinScreen />);
routing.route("AudioPreviewScreen", () => <AudioPreviewScreen />);
routing.route("ConferenceScreen", () => <ConferenceScreen />);
routing.getContext()


return <NavigationComponent routing={ routing } />
Expand Down
17 changes: 17 additions & 0 deletions example/src/components/DolbyIOProvider/DolbyIOProvider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -53,6 +54,7 @@ export interface IDolbyIOProvider {
export const DolbyIOContext = React.createContext<IDolbyIOProvider>({
isInitialized: false,
me: undefined,
state: "InputTokenScreen",
conference: undefined,
conferenceStatus: undefined,
isAudioPreviewScreen: false,
Expand All @@ -77,6 +79,7 @@ type DolbyProps = {

const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
const [isInitialized, setIsInitialized] = useState(false);
const [_state, setState] = useState("InputTokenScreen");
const [me, setMe] = useState<Participant | undefined>(undefined);
const [isAudioPreviewScreen, setIsAudioPreviewScreen] = useState(false);
const [conference, setConference] = useState<Conference | undefined>(
Expand Down Expand Up @@ -149,6 +152,7 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
try {
await CommsAPI.initializeToken(token, refreshToken);
setIsInitialized(true);
setState("LoginScreen");
} catch (e: any) {
setIsInitialized(false);
Alert.alert('App not initialized', e);
Expand Down Expand Up @@ -178,6 +182,7 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
const setSessionParticipant = async () => {
try {
setMe(await CommsAPI.session.getParticipant());
setState("JoinScreen")
} catch (e: any) {
setMe(undefined);
}
Expand Down Expand Up @@ -242,6 +247,7 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
joinOptions
);
setConference(joinedConference);
setState("ConferenceScreen");
const participantsMap = new Map();
joinedConference.participants.forEach((p) =>
participantsMap.set(p.id, p)
Expand Down Expand Up @@ -359,10 +365,14 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
leaveActions();
if (leaveRoom) {
setMe(undefined);
setState("LoginScreen");
} else {
setState("JoinScreen");
}
} catch (e: any) {
Alert.alert('Conference leave with errors', e);
leaveActions();
setState("JoinScreen");
}
};

Expand Down Expand Up @@ -441,6 +451,12 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {

const goToAudioPreviewScreen = (isVisible: boolean) => {
setIsAudioPreviewScreen(isVisible);
if (isVisible) {
setState("AudioPreviewScreen");
} else {
setState("JoinScreen");
}

}

const contextValue = {
Expand All @@ -462,6 +478,7 @@ const DolbyIOProvider: React.FC<DolbyProps> = ({ children }) => {
getCurrentConference,
goToAudioPreviewScreen,
setSessionParticipant,
state: _state,
};

return (
Expand Down
52 changes: 38 additions & 14 deletions example/src/navigation/NavigationComponent.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<IDolbyIOProvider>
Expand All @@ -10,20 +11,43 @@ type NavigationComponentProps = {
export const NavigationComponent: FunctionComponent<NavigationComponentProps> = ({
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();
}
21 changes: 17 additions & 4 deletions example/src/navigation/Routing.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,23 @@
import type { Context } from "react";
import type React from "react";

export class Routing<T> {

static withContext<T>(context: Context<T>): Routing<T> {
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<T>;
}

static instance: Routing<any>;

_routing: Map<string, Function>;
_state: string = "undefinded";
// _mainScreen: undefined;
_state: string = "";

constructor(context: Context<T>) {
this._routing = new Map();
Expand All @@ -21,8 +31,11 @@ export class Routing<T> {
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) {
Expand Down

0 comments on commit ce9a544

Please sign in to comment.