jiti-meet/react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js

355 lines
11 KiB
JavaScript
Raw Normal View History

// @flow
2020-07-09 07:17:23 +00:00
import { jitsiLocalStorage } from '@jitsi/js-utils';
import React, { PureComponent } from 'react';
import {
createChromeExtensionBannerEvent,
sendAnalytics
} from '../../analytics';
import { getCurrentConference } from '../../base/conference/functions';
2020-02-25 12:41:13 +00:00
import {
checkChromeExtensionsInstalled,
isMobileBrowser
} from '../../base/environment/utils';
2020-05-20 10:57:03 +00:00
import { translate } from '../../base/i18n';
import { Icon, IconClose } from '../../base/icons';
import { browser } from '../../base/lib-jitsi-meet';
import { connect } from '../../base/redux';
import { isVpaasMeeting } from '../../jaas/functions';
import logger from '../logger';
declare var interfaceConfig: Object;
const emptyObject = {};
/**
* Local storage key name for flag telling if user checked 'Don't show again' checkbox on the banner
* If the user checks this before closing the banner, next time he will access a jitsi domain
* the banner will not be shown regardless of extensions being installed or not.
*/
const DONT_SHOW_AGAIN_CHECKED = 'hide_chrome_extension_banner';
/**
* The type of the React {@code PureComponent} props of {@link ChromeExtensionBanner}.
*/
type Props = {
/**
2020-02-25 12:41:13 +00:00
* Contains info about installed/to be installed chrome extension(s).
*/
2020-02-25 12:41:13 +00:00
bannerCfg: Object,
/**
2021-11-04 21:10:43 +00:00
* Conference data, if any.
*/
2020-02-25 12:41:13 +00:00
conference: Object,
/**
* Whether I am the current recorder.
*/
iAmRecorder: boolean,
/**
* Whether it's a vpaas meeting or not.
*/
isVpaas: boolean,
/**
* Invoked to obtain translated strings.
*/
t: Function,
};
/**
* The type of the React {@link PureComponent} state of {@link ChromeExtensionBanner}.
*/
type State = {
/**
2021-11-04 21:10:43 +00:00
* Keeps the current value of dont show again checkbox.
*/
dontShowAgainChecked: boolean,
/**
* Tells whether user pressed install extension or close button.
*/
closePressed: boolean,
/**
* Tells whether should show the banner or not based on extension being installed or not.
*/
shouldShow: boolean,
};
/**
* Implements a React {@link PureComponent} which displays a banner having a link to the chrome extension.
2021-11-04 21:10:43 +00:00
*
* @class ChromeExtensionBanner
2021-11-04 21:10:43 +00:00
* @augments PureComponent
*/
class ChromeExtensionBanner extends PureComponent<Props, State> {
/**
* Initializes a new {@code ChromeExtensionBanner} instance.
*
* @param {Object} props - The read-only React {@code PureComponent} props with
* which the new instance is to be initialized.
*/
constructor(props: Props) {
super(props);
this.state = {
dontShowAgainChecked: false,
closePressed: false,
shouldShow: false
};
this.isEdge = /Edg(e)?/.test(navigator.userAgent);
this._onClosePressed = this._onClosePressed.bind(this);
this._onInstallExtensionClick = this._onInstallExtensionClick.bind(this);
this._shouldNotRender = this._shouldNotRender.bind(this);
this._onDontShowAgainChange = this._onDontShowAgainChange.bind(this);
this._onCloseKeyPress = this._onCloseKeyPress.bind(this);
this._onInstallExtensionKeyPress = this._onInstallExtensionKeyPress.bind(this);
}
/**
* Executed on component update.
* Checks whether any chrome extension from the config is installed.
*
* @inheritdoc
*/
async componentDidUpdate(prevProps) {
if (!this._isSupportedEnvironment()) {
return;
}
2020-02-25 12:41:13 +00:00
const { bannerCfg } = this.props;
const prevBannerCfg = prevProps.bannerCfg;
if (bannerCfg.url && !prevBannerCfg.url) {
logger.info('Chrome extension URL found.');
}
2020-02-25 12:41:13 +00:00
if ((bannerCfg.chromeExtensionsInfo || []).length && !(prevBannerCfg.chromeExtensionsInfo || []).length) {
logger.info('Chrome extension(s) info found.');
}
2020-02-25 12:41:13 +00:00
const hasExtensions = await checkChromeExtensionsInstalled(this.props.bannerCfg);
if (
hasExtensions
&& hasExtensions.length
&& hasExtensions.every(ext => !ext)
&& !this.state.shouldShow
) {
this.setState({ shouldShow: true }); // eslint-disable-line
}
}
/**
* Checks whether the feature is enabled and whether the environment(browser/os)
* supports it.
*
* @returns {boolean}
*/
_isSupportedEnvironment() {
return interfaceConfig.SHOW_CHROME_EXTENSION_BANNER
&& browser.isChrome()
&& !browser.isTwa()
&& !isMobileBrowser()
&& !this.props.isVpaas;
}
_onClosePressed: () => void;
/**
* Closes the banner for the current session.
*
* @returns {void}
*/
_onClosePressed() {
2020-02-25 12:41:13 +00:00
sendAnalytics(createChromeExtensionBannerEvent(false));
this.setState({ closePressed: true });
}
_onCloseKeyPress: (Object) => void;
/**
* KeyPress handler for accessibility.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onCloseKeyPress(e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this._onClosePressed();
}
}
_onInstallExtensionClick: () => void;
/**
* Opens the chrome extension page.
*
* @returns {void}
*/
_onInstallExtensionClick() {
const { edgeUrl, url } = this.props.bannerCfg;
2020-02-25 12:41:13 +00:00
sendAnalytics(createChromeExtensionBannerEvent(true));
window.open(this.isEdge && edgeUrl ? edgeUrl : url);
this.setState({ closePressed: true });
}
_onInstallExtensionKeyPress: (Object) => void;
/**
* KeyPress handler for accessibility.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onInstallExtensionKeyPress(e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
this._onClosePressed();
}
}
_shouldNotRender: () => boolean;
/**
* Checks whether the banner should not be rendered.
*
2020-01-23 14:20:04 +00:00
* @returns {boolean} Whether to show the banner or not.
*/
_shouldNotRender() {
if (!this._isSupportedEnvironment()) {
return true;
}
const dontShowAgain = jitsiLocalStorage.getItem(DONT_SHOW_AGAIN_CHECKED) === 'true';
2020-02-25 12:41:13 +00:00
return !this.props.bannerCfg.url
|| dontShowAgain
|| this.state.closePressed
|| !this.state.shouldShow
|| this.props.iAmRecorder;
}
_onDontShowAgainChange: (object: Object) => void;
/**
* Handles the current `don't show again` checkbox state.
*
* @param {Object} event - Input change event.
* @returns {void}
*/
_onDontShowAgainChange(event) {
this.setState({ dontShowAgainChecked: event.target.checked });
}
/**
* Implements React's {@link PureComponent#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
if (this._shouldNotRender()) {
if (this.state.dontShowAgainChecked) {
jitsiLocalStorage.setItem(DONT_SHOW_AGAIN_CHECKED, 'true');
}
return null;
}
const { bannerCfg, t } = this.props;
const mainClassNames = this.props.conference
? 'chrome-extension-banner chrome-extension-banner__pos_in_meeting'
: 'chrome-extension-banner';
return (
<div className = { mainClassNames }>
<div
aria-aria-describedby = 'chrome-extension-banner__text-container'
className = 'chrome-extension-banner__container'
role = 'banner'>
<div className = 'chrome-extension-banner__icon-container' />
<div
className = 'chrome-extension-banner__text-container'
id = 'chrome-extension-banner__text-container'>
{ t('chromeExtensionBanner.installExtensionText') }
</div>
<div
aria-label = { t('chromeExtensionBanner.close') }
className = 'chrome-extension-banner__close-container'
onClick = { this._onClosePressed }
onKeyPress = { this._onCloseKeyPress }
role = 'button'
tabIndex = { 0 }>
<Icon
className = 'gray'
size = { 12 }
src = { IconClose } />
</div>
</div>
<div
className = 'chrome-extension-banner__button-container'>
<div
aria-labelledby = 'chrome-extension-banner__button-text'
className = 'chrome-extension-banner__button-open-url'
onClick = { this._onInstallExtensionClick }
onKeyPress = { this._onInstallExtensionKeyPress }
role = 'button'
tabIndex = { 0 }>
<div
className = 'chrome-extension-banner__button-text'
id = 'chrome-extension-banner__button-text'>
{ t(this.isEdge && bannerCfg.edgeUrl
? 'chromeExtensionBanner.buttonTextEdge'
: 'chromeExtensionBanner.buttonText')
}
</div>
</div>
</div>
<div className = 'chrome-extension-banner__checkbox-container'>
<label
className = 'chrome-extension-banner__checkbox-label'
htmlFor = 'chrome-extension-banner__checkbox'
id = 'chrome-extension-banner__checkbox-label'>
<input
aria-labelledby = 'chrome-extension-banner__checkbox-label'
checked = { this.state.dontShowAgainChecked }
id = 'chrome-extension-banner__checkbox'
onChange = { this._onDontShowAgainChange }
type = 'checkbox' />
&nbsp;{ t('chromeExtensionBanner.dontShowAgain') }
</label>
</div>
</div>
);
}
}
/**
* Function that maps parts of Redux state tree into component props.
*
* @param {Object} state - Redux state.
* @returns {Object}
*/
const _mapStateToProps = state => {
return {
// Using emptyObject so that we don't change the reference every time when _mapStateToProps is called.
bannerCfg: state['features/base/config'].chromeExtensionBanner || emptyObject,
conference: getCurrentConference(state),
iAmRecorder: state['features/base/config'].iAmRecorder,
2021-07-16 12:14:37 +00:00
isVpaas: isVpaasMeeting(state)
};
};
export default translate(connect(_mapStateToProps)(ChromeExtensionBanner));