feat(HelpButton): Mobile support.

This commit is contained in:
Hristo Terezov 2019-10-11 19:09:50 +01:00
parent f295f60bea
commit 0a06e256b7
10 changed files with 97 additions and 51 deletions

View File

@ -419,6 +419,10 @@ var config = {
// the menu has option to flip the locally seen video for local presentations
// disableLocalVideoFlip: false
// If specified a 'Help' button will be displayed in the overflow menu with a link to the specified URL for
// user documentation.
// userDocumentationURL: 'https://docs.example.com/video-meetings.html'
// List of undocumented settings used in jitsi-meet
/**
_immediateReloadThreshold

View File

@ -189,12 +189,6 @@ var interfaceConfig = {
*/
AUTO_PIN_LATEST_SCREEN_SHARE: 'remote-only'
/**
* The link to the user documentation.
*/
// HELP_LINK: 'https://docs.example.com/video-meetings.html',
/**
* How many columns the tile view can expand to. The respected range is
* between 1 and 5.

View File

@ -1,4 +1,5 @@
export * from './helpers';
export * from './httpUtils';
export * from './loadScript';
export * from './openURLInBrowser';
export * from './uri';

View File

@ -0,0 +1,5 @@
// @flow
import { getLogger } from '../logging/functions';
export default getLogger('features/base/util');

View File

@ -0,0 +1,17 @@
// @flow
import { Linking } from 'react-native';
import logger from './logger';
/**
* Opens URL in the browser.
*
* @param {string} url - The URL to be opened.
* @returns {void}
*/
export function openURLInBrowser(url: string) {
Linking.openURL(url).catch(error => {
logger.error(`An error occurred while trying to open ${url}`, error);
});
}

View File

@ -0,0 +1,11 @@
// @flow
/**
* Opens URL in the browser.
*
* @param {string} url - The URL to be opened.
* @returns {void}
*/
export function openURLInBrowser(url: string) {
window.open(url, '', 'noopener');
}

View File

@ -0,0 +1,56 @@
// @flow
import { createToolbarEvent, sendAnalytics } from '../../analytics';
import { translate } from '../../base/i18n';
import { IconHelp } from '../../base/icons';
import { connect } from '../../base/redux';
import { openURLInBrowser } from '../../base/util';
import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox';
type Props = AbstractButtonProps & {
/**
* The URL to the user documenation.
*/
_userDocumentationURL: string
};
/**
* Implements an {@link AbstractButton} to open the user documentation in a new window.
*/
class HelpButton extends AbstractButton<Props, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.help';
icon = IconHelp;
label = 'toolbar.help';
/**
* Handles clicking / pressing the button, and opens a new window with the user documentation.
*
* @private
* @returns {void}
*/
_handleClick() {
sendAnalytics(createToolbarEvent('help.pressed'));
openURLInBrowser(this.props._userDocumentationURL);
}
}
/**
* Maps part of the redux state to the component's props.
*
* @param {Object} state - The redux store/state.
* @returns {Object}
*/
function _mapStateToProps(state: Object) {
const { userDocumentationURL } = state['features/base/config'];
const visible = typeof userDocumentationURL === 'string';
return {
_userDocumentationURL: userDocumentationURL,
visible
};
}
export default translate(connect(_mapStateToProps)(HelpButton));

View File

@ -17,6 +17,7 @@ import { ClosedCaptionButton } from '../../../subtitles';
import { TileViewButton } from '../../../video-layout';
import AudioOnlyButton from './AudioOnlyButton';
import HelpButton from '../HelpButton';
import RaiseHandButton from './RaiseHandButton';
import ToggleCameraButton from './ToggleCameraButton';
@ -110,6 +111,7 @@ class OverflowMenu extends Component<Props> {
}
<RaiseHandButton { ...buttonProps } />
<SharedDocumentButton { ...buttonProps } />
<HelpButton { ...buttonProps } />
</BottomSheet>
);
}

View File

@ -1,44 +0,0 @@
// @flow
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import { translate } from '../../../base/i18n';
import { IconHelp } from '../../../base/icons';
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox';
declare var interfaceConfig: Object;
/**
* Implements an {@link AbstractButton} to open the user documentation in a new window.
*/
class HelpButton extends AbstractButton<AbstractButtonProps, *> {
accessibilityLabel = 'toolbar.accessibilityLabel.help';
icon = IconHelp;
label = 'toolbar.help';
/**
* Handles clicking / pressing the button, and opens a new window with the user documentation.
*
* @private
* @returns {void}
*/
_handleClick() {
sendAnalytics(createToolbarEvent('help.pressed'));
window.open(interfaceConfig.HELP_LINK);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {React$Node}
*/
render(): React$Node {
if (typeof interfaceConfig.HELP_LINK === 'string') {
return super.render();
}
return null;
}
}
export default translate(HelpButton);

View File

@ -71,7 +71,7 @@ import {
import AudioMuteButton from '../AudioMuteButton';
import { isToolboxVisible } from '../../functions';
import HangupButton from '../HangupButton';
import HelpButton from './HelpButton';
import HelpButton from '../HelpButton';
import OverflowMenuButton from './OverflowMenuButton';
import OverflowMenuProfileItem from './OverflowMenuProfileItem';
import ToolbarButton from './ToolbarButton';