haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref: change JitsiModal to better fit to needs

This commit is contained in:
Bettenbuk Zoltan 2020-04-06 17:14:32 +02:00 committed by Zoltan Bettenbuk
parent 84714ba3bd
commit 678ed605d7
12 changed files with 77 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
react/features/app/components/AbstractApp.js
View File

@ -89,22 +89,10 @@ export class AbstractApp extends BaseApp<Props, *> {
return (
<Fragment>
<OverlayContainer />
{ this._createExtraPlatformSpecificElement() }
</Fragment>
);
}
/**
* Renders platform specific extra elements to be added alongside with the main element, if need be.
*
* NOTE: Overridden by child components.
*
* @returns {React$Element}
*/
_createExtraPlatformSpecificElement() {
return null;
}
_createMainElement: (React$Element<*>, Object) => ?React$Element<*>;
/**

12
react/features/app/components/App.native.js
View File

@ -12,7 +12,6 @@ import { Platform } from '../../base/react';
import '../../base/responsive-ui';
import { updateSettings } from '../../base/settings';
import '../../google-api';
import { HelpView } from '../../help';
import '../../mobile/audio-mode';
import '../../mobile/back-button';
import '../../mobile/background';
@ -108,17 +107,6 @@ export class App extends AbstractApp {
});
}
/**
* Renders platform specific extra elements to be added alongside with the main element, if need be.
*
* @inheritdoc
*/
_createExtraPlatformSpecificElement() {
return (
<HelpView />
);
}
/**
* Attempts to disable the use of React Native
* {@link ExceptionsManager#handleException} on platforms and in

4
react/features/base/modal/actions.js
View File

@ -6,14 +6,16 @@ import { SET_ACTIVE_MODAL_ID } from './actionTypes';
* Action to set the ID of the active modal (or undefined if needs to be hidden).
*
* @param {string} activeModalId - The new modal ID or undefined.
* @param {Object} modalProps - The props to pass to the modal.
* @returns {{
* activeModalId: string,
* type: SET_ACTIVE_MODAL_ID
* }}
*/
export function setActiveModalId(activeModalId: ?string) {
export function setActiveModalId(activeModalId: ?string, modalProps: Object = {}) {
return {
activeModalId,
modalProps,
type: SET_ACTIVE_MODAL_ID
};
}

40
react/features/base/modal/components/JitsiModal.js
View File

@ -1,7 +1,7 @@
// @flow
import React, { PureComponent } from 'react';
import { SafeAreaView, View } from 'react-native';
import { KeyboardAvoidingView, SafeAreaView } from 'react-native';
import { ColorSchemeRegistry } from '../../color-scheme';
import { HeaderWithNavigation, SlidingView } from '../../react';
@ -40,9 +40,16 @@ type Props = {
dispatch: Function,
/**
* The i18n label key of the header title.
* Optional function that renders a footer component, if needed.
*/
headerLabelKey: string,
footerComponent?: Function,
/**
* Props to be passed over to the header.
*
* See {@code HeaderWithNavigation} for more details.
*/
headerProps: Object,
/**
* The ID of the modal that is being rendered. This is used to show/hide the modal.
@ -58,7 +65,12 @@ type Props = {
* The position from where the modal should be opened. This is derived from the
* props of the {@code SlidingView} with the same name.
*/
position?: string
position?: string,
/**
* Additional style to be appended to the View containing the content of the modal.
*/
style?: StyleType
};
/**
@ -87,25 +99,28 @@ class JitsiModal extends PureComponent<Props> {
* @inheritdoc
*/
render() {
const { _headerStyles, _show, _styles, children, headerLabelKey, position } = this.props;
const { _headerStyles, _show, _styles, children, footerComponent, headerProps, position, style } = this.props;
return (
<SlidingView
onHide = { this._onRequestClose }
position = { position }
show = { _show }>
<View
<KeyboardAvoidingView
behavior = 'padding'
style = { [
_headerStyles.page,
_styles.page
_styles.page,
style
] }>
<HeaderWithNavigation
headerLabelKey = { headerLabelKey }
{ ...headerProps }
onPressBack = { this._onRequestClose } />
<SafeAreaView style = { styles.safeArea }>
{ children }
</SafeAreaView>
</View>
{ footerComponent && footerComponent() }
</KeyboardAvoidingView>
</SlidingView>
);
}
@ -119,14 +134,15 @@ class JitsiModal extends PureComponent<Props> {
*/
_onRequestClose() {
const { _show, dispatch, onClose } = this.props;
let shouldCloseModal = true;
if (_show) {
if (typeof onClose === 'function') {
onClose();
shouldCloseModal = onClose();
}
dispatch(setActiveModalId());
shouldCloseModal && dispatch(setActiveModalId());
return true;
return shouldCloseModal;
}
return false;

1
react/features/base/modal/components/styles.js
View File

@ -10,6 +10,7 @@ export default {
ColorSchemeRegistry.register('Modal', {
page: {
alignItems: 'stretch',
backgroundColor: schemeColor('background')
}
});

3
react/features/base/modal/reducer.js
View File

@ -9,7 +9,8 @@ ReducerRegistry.register('features/base/modal', (state = {}, action) => {
case SET_ACTIVE_MODAL_ID:
return {
...state,
activeModalId: action.activeModalId
activeModalId: action.activeModalId,
modalProps: action.modalProps
};
}

16
react/features/chat/components/native/Chat.js
View File

@ -1,7 +1,6 @@
// @flow
import React from 'react';
import { KeyboardAvoidingView } from 'react-native';
import { translate } from '../../../base/i18n';
import { JitsiModal } from '../../../base/modal';
@ -18,7 +17,6 @@ import AbstractChat, {
import ChatInputBar from './ChatInputBar';
import MessageContainer from './MessageContainer';
import MessageRecipient from './MessageRecipient';
import styles from './styles';
/**
* Implements a React native component that renders the chat window (modal) of
@ -33,15 +31,13 @@ class Chat extends AbstractChat<Props> {
render() {
return (
<JitsiModal
headerLabelKey = 'chat.title'
headerProps = {{
headerLabelKey: 'chat.title'
}}
modalId = { CHAT_VIEW_MODAL_ID }>
<KeyboardAvoidingView
behavior = 'padding'
style = { styles.chatContainer }>
<MessageContainer messages = { this.props._messages } />
<MessageRecipient />
<ChatInputBar onSend = { this.props._onSendMessage } />
</KeyboardAvoidingView>
<MessageContainer messages = { this.props._messages } />
<MessageRecipient />
<ChatInputBar onSend = { this.props._onSendMessage } />
</JitsiModal>
);
}

6
react/features/chat/components/native/styles.js
View File

@ -23,12 +23,6 @@ export default {
width: 32
},
chatContainer: {
alignItems: 'stretch',
flex: 1,
flexDirection: 'column'
},
chatLink: {
color: ColorPalette.blue
},

19
react/features/conference/components/native/Conference.js
View File

@ -213,6 +213,19 @@ class Conference extends AbstractConference<Props, *> {
return true;
}
/**
* Renders JitsiModals that are supposed to be on the conference screen.
*
* @returns {Array<ReactElement>}
*/
_renderConferenceModals() {
return [
<AddPeopleDialog key = 'addPeopleDialog' />,
<Chat key = 'chat' />,
<SharedDocument key = 'sharedDocument' />
];
}
/**
* Renders the conference notification badge if the feature is enabled.
*
@ -252,10 +265,6 @@ class Conference extends AbstractConference<Props, *> {
return (
<>
<AddPeopleDialog />
<Chat />
<SharedDocument />
{/*
* The LargeVideo is the lowermost stacking layer.
*/
@ -335,6 +344,8 @@ class Conference extends AbstractConference<Props, *> {
<TestConnectionInfo />
{ this._renderConferenceNotification() }
{ this._renderConferenceModals() }
</>
);
}

4
react/features/conference/middleware.js
View File

@ -10,6 +10,7 @@ import {
setPreferredReceiverVideoQuality
} from '../base/conference';
import { hideDialog, isDialogOpen } from '../base/dialog';
import { setActiveModalId } from '../base/modal';
import { pinParticipant } from '../base/participants';
import { SET_REDUCED_UI } from '../base/responsive-ui';
import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
@ -84,5 +85,8 @@ StateListenerRegistry.register(
// dialog we might have open.
dispatch(hideDialog());
}
// We want to close all modals.
dispatch(setActiveModalId());
}
});

4
react/features/help/components/HelpView.js
View File

@ -31,7 +31,9 @@ class HelpView extends PureComponent<Props> {
render() {
return (
<JitsiModal
headerLabelKey = 'helpView.header'
headerProps = {{
headerLabelKey: 'helpView.header'
}}
modalId = { HELP_VIEW_MODAL_ID }>
<WebView source = {{ uri: this.props._url }} />
</JitsiModal>

17
react/features/welcome/components/WelcomePage.native.js
View File

@ -22,6 +22,7 @@ import {
createDesiredLocalTracks,
destroyLocalTracks
} from '../../base/tracks';
import { HelpView } from '../../help';
import { DialInSummary } from '../../invite';
import { SettingsView } from '../../settings';
@ -288,10 +289,9 @@ class WelcomePage extends AbstractWelcomePage {
</View>
</SafeAreaView>
<WelcomePageLists disabled = { this.state._fieldFocused } />
<SettingsView />
<DialInSummary />
</View>
<WelcomePageSideBar />
{ this._renderWelcomePageModals() }
</LocalVideoTrackUnderlay>
);
}
@ -312,6 +312,19 @@ class WelcomePage extends AbstractWelcomePage {
</View>
);
}
/**
* Renders JitsiModals that are supposed to be on the welcome page.
*
* @returns {Array<ReactElement>}
*/
_renderWelcomePageModals() {
return [
<HelpView key = 'helpView' />,
<DialInSummary key = 'dialInSummary' />,
<SettingsView key = 'settings' />
];
}
}
/**