From 7503febf8dc4f4c30a8cfd38fb9e560ec06e5aa1 Mon Sep 17 00:00:00 2001 From: Calin-Teodor Date: Mon, 1 Apr 2024 13:54:58 +0300 Subject: [PATCH 1/5] feat(mobile/navigation): moved Whiteboard to Conference navigation and fixed screen options --- .../navigation/components/RootNavigationContainer.tsx | 8 +------- .../components/ConferenceNavigationContainer.tsx | 11 ++++++++++- react/features/mobile/navigation/screenOptions.ts | 10 +--------- 3 files changed, 12 insertions(+), 17 deletions(-) diff --git a/react/features/mobile/navigation/components/RootNavigationContainer.tsx b/react/features/mobile/navigation/components/RootNavigationContainer.tsx index 77c32ed71dbb..47e8b7619260 100644 --- a/react/features/mobile/navigation/components/RootNavigationContainer.tsx +++ b/react/features/mobile/navigation/components/RootNavigationContainer.tsx @@ -13,7 +13,6 @@ import { isUnsafeRoomWarningEnabled } from '../../../prejoin/functions'; // @ts-ignore import WelcomePage from '../../../welcome/components/WelcomePage'; import { isWelcomePageEnabled } from '../../../welcome/functions'; -import Whiteboard from '../../../whiteboard/components/native/Whiteboard'; import { _ROOT_NAVIGATION_READY } from '../actionTypes'; import { rootNavigationRef } from '../rootNavigationContainerRef'; import { screen } from '../routes'; @@ -24,8 +23,7 @@ import { navigationContainerTheme, preJoinScreenOptions, unsafeMeetingScreenOptions, - welcomeScreenOptions, - whiteboardScreenOptions + welcomeScreenOptions } from '../screenOptions'; import ConnectingPage from './ConnectingPage'; @@ -96,10 +94,6 @@ const RootNavigationContainer = ({ dispatch, isUnsafeRoomWarningAvailable, isWel component = { ConnectingPage } name = { screen.connecting } options = { connectingScreenOptions } /> - { ...breakoutRoomsScreenOptions, title: t('breakoutRooms.title') }} /> + ); diff --git a/react/features/mobile/navigation/screenOptions.ts b/react/features/mobile/navigation/screenOptions.ts index c013d11b1664..2eafbf05bbd4 100644 --- a/react/features/mobile/navigation/screenOptions.ts +++ b/react/features/mobile/navigation/screenOptions.ts @@ -191,15 +191,7 @@ export const connectingScreenOptions = { /** * Screen options for the whiteboard screen. */ -export const whiteboardScreenOptions = { - gestureEnabled: true, - headerStyle: { - backgroundColor: BaseTheme.palette.ui01 - }, - headerTitleStyle: { - color: BaseTheme.palette.text01 - } -}; +export const whiteboardScreenOptions = presentationScreenOptions; /** * Screen options for pre-join screen. From 3a589f7bd72bc660f74b69be895301072a83242a Mon Sep 17 00:00:00 2001 From: Calin-Teodor Date: Mon, 1 Apr 2024 13:57:15 +0300 Subject: [PATCH 2/5] feat(whiteboard): fixed go back handler on screen --- react/features/whiteboard/actions.native.ts | 6 ++- .../components/native/Whiteboard.tsx | 40 +++++++++++++++---- react/features/whiteboard/middleware.any.ts | 1 - .../features/whiteboard/middleware.native.ts | 10 +++-- 4 files changed, 44 insertions(+), 13 deletions(-) diff --git a/react/features/whiteboard/actions.native.ts b/react/features/whiteboard/actions.native.ts index b0f248015b96..a1ff5107ffb1 100644 --- a/react/features/whiteboard/actions.native.ts +++ b/react/features/whiteboard/actions.native.ts @@ -1,8 +1,10 @@ import { createRestrictWhiteboardEvent } from '../analytics/AnalyticsEvents'; import { sendAnalytics } from '../analytics/functions'; import { IStore } from '../app/types'; -import { navigateRoot } from '../mobile/navigation/rootNavigationContainerRef'; import { screen } from '../mobile/navigation/routes'; +import { + navigate +} from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; import { resetWhiteboard } from './actions.any'; @@ -16,7 +18,7 @@ export * from './actions.any'; */ export const restrictWhiteboard = (shouldCloseWhiteboard = true) => (dispatch: IStore['dispatch']) => { if (shouldCloseWhiteboard) { - navigateRoot(screen.conference.root); + navigate(screen.conference.root); } dispatch(resetWhiteboard()); sendAnalytics(createRestrictWhiteboardEvent()); diff --git a/react/features/whiteboard/components/native/Whiteboard.tsx b/react/features/whiteboard/components/native/Whiteboard.tsx index 7b6bc6552006..e6fff514e26e 100644 --- a/react/features/whiteboard/components/native/Whiteboard.tsx +++ b/react/features/whiteboard/components/native/Whiteboard.tsx @@ -1,7 +1,7 @@ import { Route } from '@react-navigation/native'; import React, { PureComponent } from 'react'; import { WithTranslation } from 'react-i18next'; -import { View, ViewStyle } from 'react-native'; +import {Platform, View, ViewStyle} from 'react-native'; import { WebView } from 'react-native-webview'; import { connect } from 'react-redux'; @@ -10,16 +10,23 @@ import { getCurrentConference } from '../../../base/conference/functions'; import { IJitsiConference } from '../../../base/conference/reducer'; import { openDialog } from '../../../base/dialog/actions'; import { translate } from '../../../base/i18n/functions'; +import { IconCloseLarge } from '../../../base/icons/svg'; import JitsiScreen from '../../../base/modal/components/JitsiScreen'; import LoadingIndicator from '../../../base/react/components/native/LoadingIndicator'; import { safeDecodeURIComponent } from '../../../base/util/uri'; -import { setupWhiteboard } from '../../actions.any'; +import HeaderNavigationButton + from '../../../mobile/navigation/components/HeaderNavigationButton'; +import { + goBack +} from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; +import { setupWhiteboard, setWhiteboardOpen } from '../../actions.native'; import { WHITEBOARD_ID } from '../../constants'; import { getCollabServerUrl, getWhiteboardInfoForURIString } from '../../functions'; import WhiteboardErrorDialog from './WhiteboardErrorDialog'; import styles, { INDICATOR_COLOR } from './styles'; + interface IProps extends WithTranslation { /** @@ -84,11 +91,30 @@ class Whiteboard extends PureComponent { * @returns {void} */ componentDidMount() { - const { navigation, t } = this.props; - - navigation.setOptions({ - headerTitle: t('whiteboard.screenTitle') - }); + const { dispatch, navigation, t } = this.props; + const headerLeft = () => { + if (Platform.OS === 'ios') { + return ( + { + dispatch(setWhiteboardOpen(false)); + goBack(); + }} /> + ); + } + + return ( + { + dispatch(setWhiteboardOpen(false)); + goBack(); + }} + src = { IconCloseLarge } /> + ); + }; + + navigation.setOptions({ headerLeft }); } /** diff --git a/react/features/whiteboard/middleware.any.ts b/react/features/whiteboard/middleware.any.ts index abd911c964a6..87660fcae90c 100644 --- a/react/features/whiteboard/middleware.any.ts +++ b/react/features/whiteboard/middleware.any.ts @@ -45,7 +45,6 @@ MiddlewareRegistry.register((store: IStore) => next => action => { store.dispatch(setupWhiteboard({ collabDetails: metadata[WHITEBOARD_ID].collabDetails })); - store.dispatch(setWhiteboardOpen(true)); } break; diff --git a/react/features/whiteboard/middleware.native.ts b/react/features/whiteboard/middleware.native.ts index f2c64f29c910..1a2439e9acf4 100644 --- a/react/features/whiteboard/middleware.native.ts +++ b/react/features/whiteboard/middleware.native.ts @@ -5,7 +5,6 @@ import { hideDialog, openDialog } from '../base/dialog/actions'; import { isDialogOpen } from '../base/dialog/functions'; import { getLocalParticipant } from '../base/participants/functions'; import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; -import { navigateRoot } from '../mobile/navigation/rootNavigationContainerRef'; import { screen } from '../mobile/navigation/routes'; import { SET_WHITEBOARD_OPEN } from './actionTypes'; @@ -21,6 +20,9 @@ import { shouldNotifyUserLimit } from './functions'; import './middleware.any'; +import { + navigate +} from "../mobile/navigation/components/conference/ConferenceNavigationContainerRef"; /** * Middleware which intercepts whiteboard actions to handle changes to the related state. @@ -34,6 +36,8 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action switch (action.type) { case SET_WHITEBOARD_OPEN: { + const { isOpen } = action; + const enforceUserLimit = shouldEnforceUserLimit(state); const notifyUserLimit = shouldNotifyUserLimit(state); @@ -44,7 +48,7 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action return next(action); } - if (action.isOpen) { + if (isOpen) { if (enforceUserLimit) { dispatch(restrictWhiteboard()); @@ -63,7 +67,7 @@ MiddlewareRegistry.register((store: IStore) => (next: Function) => async (action const collabServerUrl = getCollabServerUrl(state); const localParticipantName = getLocalParticipant(state)?.name; - navigateRoot(screen.conference.whiteboard, { + navigate(screen.conference.whiteboard, { collabDetails, collabServerUrl, localParticipantName From af4020430c3ed4a81d6109e887a3b832711338cd Mon Sep 17 00:00:00 2001 From: Calin-Teodor Date: Mon, 1 Apr 2024 14:09:49 +0300 Subject: [PATCH 3/5] feat(whiteboard): fixed linter --- .../components/ConferenceNavigationContainer.tsx | 5 +++-- react/features/whiteboard/actions.native.ts | 3 ++- .../whiteboard/components/native/Whiteboard.tsx | 16 ++++++++++------ react/features/whiteboard/middleware.any.ts | 1 - react/features/whiteboard/middleware.native.ts | 7 ++++--- 5 files changed, 19 insertions(+), 13 deletions(-) diff --git a/react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx b/react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx index 36a0dfbc3698..6e96218cde59 100644 --- a/react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx +++ b/react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.tsx @@ -43,6 +43,7 @@ import SpeakerStats import LanguageSelectorDialog // @ts-ignore from '../../../../../subtitles/components/native/LanguageSelectorDialog'; +import Whiteboard from '../../../../../whiteboard/components/native/Whiteboard'; // @ts-ignore import { screen } from '../../../routes'; import { @@ -62,7 +63,8 @@ import { settingsNavigationContainerScreenOptions, sharedDocumentScreenOptions, speakerStatsScreenOptions, - subtitlesScreenOptions, whiteboardScreenOptions + subtitlesScreenOptions, + whiteboardScreenOptions // @ts-ignore } from '../../../screenOptions'; // @ts-ignore @@ -75,7 +77,6 @@ import { conferenceNavigationRef // @ts-ignore } from '../ConferenceNavigationContainerRef'; -import Whiteboard from "../../../../../whiteboard/components/native/Whiteboard"; const ConferenceStack = createStackNavigator(); diff --git a/react/features/whiteboard/actions.native.ts b/react/features/whiteboard/actions.native.ts index a1ff5107ffb1..84d3c7200c95 100644 --- a/react/features/whiteboard/actions.native.ts +++ b/react/features/whiteboard/actions.native.ts @@ -1,10 +1,11 @@ import { createRestrictWhiteboardEvent } from '../analytics/AnalyticsEvents'; import { sendAnalytics } from '../analytics/functions'; import { IStore } from '../app/types'; -import { screen } from '../mobile/navigation/routes'; import { navigate } from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; +import { screen } from '../mobile/navigation/routes'; + import { resetWhiteboard } from './actions.any'; diff --git a/react/features/whiteboard/components/native/Whiteboard.tsx b/react/features/whiteboard/components/native/Whiteboard.tsx index e6fff514e26e..2515278846f9 100644 --- a/react/features/whiteboard/components/native/Whiteboard.tsx +++ b/react/features/whiteboard/components/native/Whiteboard.tsx @@ -1,7 +1,7 @@ import { Route } from '@react-navigation/native'; import React, { PureComponent } from 'react'; import { WithTranslation } from 'react-i18next'; -import {Platform, View, ViewStyle} from 'react-native'; +import { Platform, View, ViewStyle } from 'react-native'; import { WebView } from 'react-native-webview'; import { connect } from 'react-redux'; @@ -19,7 +19,7 @@ import HeaderNavigationButton import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; -import { setupWhiteboard, setWhiteboardOpen } from '../../actions.native'; +import { setWhiteboardOpen, setupWhiteboard } from '../../actions.native'; import { WHITEBOARD_ID } from '../../constants'; import { getCollabServerUrl, getWhiteboardInfoForURIString } from '../../functions'; @@ -97,19 +97,23 @@ class Whiteboard extends PureComponent { return ( { + + /* eslint-disable react/jsx-no-bind */ + onPress = { () => { dispatch(setWhiteboardOpen(false)); goBack(); - }} /> + } } /> ); } return ( { + + /* eslint-disable react/jsx-no-bind */ + onPress = { () => { dispatch(setWhiteboardOpen(false)); goBack(); - }} + } } src = { IconCloseLarge } /> ); }; diff --git a/react/features/whiteboard/middleware.any.ts b/react/features/whiteboard/middleware.any.ts index 87660fcae90c..bc17964cdcd0 100644 --- a/react/features/whiteboard/middleware.any.ts +++ b/react/features/whiteboard/middleware.any.ts @@ -11,7 +11,6 @@ import { notifyWhiteboardLimit, resetWhiteboard, restrictWhiteboard, - setWhiteboardOpen, setupWhiteboard } from './actions'; import { WHITEBOARD_ID } from './constants'; diff --git a/react/features/whiteboard/middleware.native.ts b/react/features/whiteboard/middleware.native.ts index 1a2439e9acf4..b04b7c8ebf2e 100644 --- a/react/features/whiteboard/middleware.native.ts +++ b/react/features/whiteboard/middleware.native.ts @@ -5,6 +5,9 @@ import { hideDialog, openDialog } from '../base/dialog/actions'; import { isDialogOpen } from '../base/dialog/functions'; import { getLocalParticipant } from '../base/participants/functions'; import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; +import { + navigate +} from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; import { screen } from '../mobile/navigation/routes'; import { SET_WHITEBOARD_OPEN } from './actionTypes'; @@ -20,9 +23,7 @@ import { shouldNotifyUserLimit } from './functions'; import './middleware.any'; -import { - navigate -} from "../mobile/navigation/components/conference/ConferenceNavigationContainerRef"; + /** * Middleware which intercepts whiteboard actions to handle changes to the related state. From fbbb092b5c5d91f349575eee0ec540754dd469c9 Mon Sep 17 00:00:00 2001 From: Calin-Teodor Date: Tue, 2 Apr 2024 12:48:13 +0300 Subject: [PATCH 4/5] feat(whiteboard): revert state changes regarding screen visibility --- .../whiteboard/components/native/Whiteboard.tsx | 16 +++------------- react/features/whiteboard/middleware.any.ts | 2 ++ 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/react/features/whiteboard/components/native/Whiteboard.tsx b/react/features/whiteboard/components/native/Whiteboard.tsx index 2515278846f9..36064ba532e7 100644 --- a/react/features/whiteboard/components/native/Whiteboard.tsx +++ b/react/features/whiteboard/components/native/Whiteboard.tsx @@ -19,7 +19,7 @@ import HeaderNavigationButton import { goBack } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef'; -import { setWhiteboardOpen, setupWhiteboard } from '../../actions.native'; +import { setupWhiteboard } from '../../actions.native'; import { WHITEBOARD_ID } from '../../constants'; import { getCollabServerUrl, getWhiteboardInfoForURIString } from '../../functions'; @@ -97,23 +97,13 @@ class Whiteboard extends PureComponent { return ( { - dispatch(setWhiteboardOpen(false)); - goBack(); - } } /> + onPress = { goBack } /> ); } return ( { - dispatch(setWhiteboardOpen(false)); - goBack(); - } } + onPress = { goBack } src = { IconCloseLarge } /> ); }; diff --git a/react/features/whiteboard/middleware.any.ts b/react/features/whiteboard/middleware.any.ts index bc17964cdcd0..abd911c964a6 100644 --- a/react/features/whiteboard/middleware.any.ts +++ b/react/features/whiteboard/middleware.any.ts @@ -11,6 +11,7 @@ import { notifyWhiteboardLimit, resetWhiteboard, restrictWhiteboard, + setWhiteboardOpen, setupWhiteboard } from './actions'; import { WHITEBOARD_ID } from './constants'; @@ -44,6 +45,7 @@ MiddlewareRegistry.register((store: IStore) => next => action => { store.dispatch(setupWhiteboard({ collabDetails: metadata[WHITEBOARD_ID].collabDetails })); + store.dispatch(setWhiteboardOpen(true)); } break; From a17bef1c28b2f7de856008efff9b47b16190faf6 Mon Sep 17 00:00:00 2001 From: Calin-Teodor Date: Tue, 2 Apr 2024 12:54:22 +0300 Subject: [PATCH 5/5] feat(whiteboard): fixed linter --- react/features/whiteboard/components/native/Whiteboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/react/features/whiteboard/components/native/Whiteboard.tsx b/react/features/whiteboard/components/native/Whiteboard.tsx index 36064ba532e7..0c3206dc5d5c 100644 --- a/react/features/whiteboard/components/native/Whiteboard.tsx +++ b/react/features/whiteboard/components/native/Whiteboard.tsx @@ -91,7 +91,7 @@ class Whiteboard extends PureComponent { * @returns {void} */ componentDidMount() { - const { dispatch, navigation, t } = this.props; + const { navigation, t } = this.props; const headerLeft = () => { if (Platform.OS === 'ios') { return (