From b1830e8b64e9d5239e7ae66bb4bd97c7d79ff7d1 Mon Sep 17 00:00:00 2001 From: kbetl-dlb Date: Thu, 7 Sep 2023 15:51:03 +0200 Subject: [PATCH 1/2] New navigation for example app based on enum states --- example/src/App.tsx | 45 ++-------- example/src/Main.tsx | 27 ------ .../DolbyIOProvider/DolbyIOProvider.tsx | 11 --- example/src/navigation/NavigationProvider.tsx | 84 +++++++++++++++++++ .../AudioPreviewScreen/AudioPreviewScreen.tsx | 6 +- .../ConferenceScreen/ConferenceScreen.tsx | 17 +++- .../LeaveConferenceButton.tsx | 19 ++--- .../InputTokenScreen/InputTokenScreen.tsx | 9 +- example/src/screens/JoinScreen/JoinScreen.tsx | 7 +- .../src/screens/LoginScreen/LoginScreen.tsx | 3 + 10 files changed, 133 insertions(+), 95 deletions(-) delete mode 100644 example/src/Main.tsx create mode 100644 example/src/navigation/NavigationProvider.tsx diff --git a/example/src/App.tsx b/example/src/App.tsx index 4986ed1c..1d9127c2 100644 --- a/example/src/App.tsx +++ b/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 { behavior={Platform.OS === 'ios' ? 'padding' : undefined} > - - - -
- - {this.setState({isOverlayVisible: !this.state.isOverlayVisible})}} - onLongPress={() => {this.setState({isOverlayTouchable: !this.state.isOverlayTouchable})}} - /> - - - - - - - - - - - - - + + + {this.setState({isOverlayVisible: !this.state.isOverlayVisible})}} + onLongPress={() => {this.setState({isOverlayTouchable: !this.state.isOverlayTouchable})}} + /> ); diff --git a/example/src/Main.tsx b/example/src/Main.tsx deleted file mode 100644 index 5b12523f..00000000 --- a/example/src/Main.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React, { useContext } from 'react'; - -import { DolbyIOContext } from '@components/DolbyIOProvider'; - -import ConferenceScreen from './screens/ConferenceScreen'; -import JoinScreen from './screens/JoinScreen'; -import LoginScreen from './screens/LoginScreen'; -import InputTokenScreen from './screens/InputTokenScreen' -import AudioPreviewScreen from '@screens/AudioPreviewScreen'; - -const Main = () => { - const { isInitialized, me, conference, isAudioPreviewScreen } = useContext(DolbyIOContext); - - if (!isInitialized) { - return ; - } else if (!me) { - return ; - } else if (!conference && !isAudioPreviewScreen) { - return ; - } else if (isAudioPreviewScreen) { - return ; - } else { - return ; - } -}; - -export default Main; diff --git a/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx b/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx index 9a46a04b..add0524c 100644 --- a/example/src/components/DolbyIOProvider/DolbyIOProvider.tsx +++ b/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({ me: undefined, conference: undefined, conferenceStatus: undefined, - isAudioPreviewScreen: false, participants: [], initialize: () => {}, openSession: () => { return Promise.resolve(); }, @@ -72,7 +69,6 @@ export const DolbyIOContext = React.createContext({ replay: () => {}, leave: () => {}, getCurrentConference: () => {}, - goToAudioPreviewScreen: () => {}, setSessionParticipant: () => {}, setBottomSheetVisibility: () => {}, }); @@ -85,7 +81,6 @@ const DolbyIOProvider: React.FC = ({ children }) => { const [isBottomSheetVisible, setIsBottomSheetVisible] = useState(false); const [isInitialized, setIsInitialized] = useState(false); const [me, setMe] = useState(undefined); - const [isAudioPreviewScreen, setIsAudioPreviewScreen] = useState(false); const [conference, setConference] = useState( undefined ); @@ -447,10 +442,6 @@ const DolbyIOProvider: React.FC = ({ children }) => { } } - const goToAudioPreviewScreen = (isVisible: boolean) => { - setIsAudioPreviewScreen(isVisible); - } - const setBottomSheetVisibility = (isVisible: boolean) => { setIsBottomSheetVisible(isVisible); } @@ -458,7 +449,6 @@ const DolbyIOProvider: React.FC = ({ children }) => { const contextValue = { isInitialized, isBottomSheetVisible, - isAudioPreviewScreen, me, conference, conferenceStatus, @@ -473,7 +463,6 @@ const DolbyIOProvider: React.FC = ({ children }) => { replay, leave, getCurrentConference, - goToAudioPreviewScreen, setSessionParticipant, setBottomSheetVisibility, }; diff --git a/example/src/navigation/NavigationProvider.tsx b/example/src/navigation/NavigationProvider.tsx new file mode 100644 index 00000000..545a1f7e --- /dev/null +++ b/example/src/navigation/NavigationProvider.tsx @@ -0,0 +1,84 @@ +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 AudioPreviewScreen from "@screens/AudioPreviewScreen/AudioPreviewScreen"; +import ConferenceScreen from "@screens/ConferenceScreen"; +import InputTokenScreen from "@screens/InputTokenScreen/InputTokenScreen"; +import JoinScreen from "@screens/JoinScreen/JoinScreen"; +import LoginScreen from "@screens/LoginScreen"; +import React, { useState } from "react"; + +export enum ScreenType { + InputTokenScreen, + LoginScreen, + JoinScreen, + AudioPreviewScreen, + ConferenceScreen +} + +export interface INavigationProvider { + currentScreen: ScreenType, + setScreen: (screen: ScreenType) => void +} + +export const NavigationContext = React.createContext({ + currentScreen: ScreenType.InputTokenScreen, + setScreen: (_: ScreenType) => undefined +}); + +const NavigationProvider: React.FC = () => { + const [currentScreen, setScreen] = useState(ScreenType.InputTokenScreen); + const data = { + currentScreen: currentScreen, + setScreen: setScreen + }; + + const getScreen = (screen: ScreenType) => { + switch(screen) { + case ScreenType.InputTokenScreen: + return + case ScreenType.LoginScreen: + return + case ScreenType.JoinScreen: + return + case ScreenType.ConferenceScreen: + return + case ScreenType.AudioPreviewScreen: + return + } + } + + return ( + + + + + {getScreen(currentScreen)} + + + + + + + + + + + + + + + + ); +}; + +export default NavigationProvider; \ No newline at end of file diff --git a/example/src/screens/AudioPreviewScreen/AudioPreviewScreen.tsx b/example/src/screens/AudioPreviewScreen/AudioPreviewScreen.tsx index 50b8ab3d..5b20084d 100644 --- a/example/src/screens/AudioPreviewScreen/AudioPreviewScreen.tsx +++ b/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,14 @@ 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, ScreenType } from '../../navigation/NavigationProvider'; const AudioPreviewScreen: FunctionComponent = () => { - const { goToAudioPreviewScreen } = useContext(DolbyIOContext); + const { setScreen } = useContext(NavigationContext); const onBackButton = () => { - goToAudioPreviewScreen(false); + setScreen(ScreenType.JoinScreen); }; const voiceFontAction: (voiceFont: VoiceFont) => void = (voiceFont) => { diff --git a/example/src/screens/ConferenceScreen/ConferenceScreen.tsx b/example/src/screens/ConferenceScreen/ConferenceScreen.tsx index 9d643b13..3a479f1c 100644 --- a/example/src/screens/ConferenceScreen/ConferenceScreen.tsx +++ b/example/src/screens/ConferenceScreen/ConferenceScreen.tsx @@ -4,6 +4,7 @@ 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, ScreenType } from '../../navigation/NavigationProvider'; import { FilePresentationContext } from '@components/FilePresentationHandler'; import { RecordingContext } from '@components/RecordingProvider'; import COLORS from '@constants/colors.constants'; @@ -25,7 +26,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 +67,16 @@ const ConferenceScreen: FunctionComponent = () => { setIsMuted(!isMuted); }; + const onPressLeaveButton = async (closeSession: boolean) => { + await leave(closeSession); + if (closeSession) { + setScreen(ScreenType.LoginScreen) + } else { + setScreen(ScreenType.JoinScreen); + } + + } + return ( @@ -81,8 +93,9 @@ const ConferenceScreen: FunctionComponent = () => { Conference: {conference.alias} + - + {isRecording ? ( diff --git a/example/src/screens/ConferenceScreen/LeaveConferenceButton.tsx b/example/src/screens/ConferenceScreen/LeaveConferenceButton.tsx index a0e09169..b50ffd1e 100644 --- a/example/src/screens/ConferenceScreen/LeaveConferenceButton.tsx +++ b/example/src/screens/ConferenceScreen/LeaveConferenceButton.tsx @@ -1,7 +1,5 @@ -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'; @@ -9,22 +7,21 @@ 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 = ({ 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), }, ]; diff --git a/example/src/screens/InputTokenScreen/InputTokenScreen.tsx b/example/src/screens/InputTokenScreen/InputTokenScreen.tsx index b823551d..71b6654a 100644 --- a/example/src/screens/InputTokenScreen/InputTokenScreen.tsx +++ b/example/src/screens/InputTokenScreen/InputTokenScreen.tsx @@ -7,6 +7,7 @@ import React, { import { SafeAreaView } from 'react-native-safe-area-context'; import { DolbyIOContext } from '@components/DolbyIOProvider'; + import { NavigationContext, ScreenType } from '../../navigation/NavigationProvider'; import COLORS from '@constants/colors.constants'; import Input from '@ui/Input'; import Space from '@ui/Space'; @@ -17,7 +18,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(ScreenType.LoginScreen); + } return ( @@ -41,7 +48,7 @@ import React, { -