99 lines
2.7 KiB
JavaScript
99 lines
2.7 KiB
JavaScript
|
/* global interfaceConfig */
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
import AbstractOverlay from './AbstractOverlay';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Implements a React Component for overlay with guidance how to proceed with
|
||
|
|
* gUM prompt.
|
||
|
|
*/
|
||
|
|
export default class UserMediaPermissionsOverlay extends AbstractOverlay {
|
||
|
|
/**
|
||
|
|
* UserMediaPermissionsOverlay component's property types.
|
||
|
|
*
|
||
|
|
* @static
|
||
|
|
*/
|
||
|
|
static propTypes = {
|
||
|
|
/**
|
||
|
|
* The browser which is used currently. The text is different for every
|
||
|
|
* browser.
|
||
|
|
* @public
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
browser: React.PropTypes.string
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Initializes a new SuspendedOverlay instance.
|
||
|
|
*
|
||
|
|
* @param {Object} props - The read-only properties with which the new
|
||
|
|
* instance is to be initialized.
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this.state = {
|
||
|
|
/**
|
||
|
|
* The src value of the image for the policy logo.
|
||
|
|
* @type {string}
|
||
|
|
*/
|
||
|
|
policyLogoSrc: interfaceConfig.POLICY_LOGO
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Constructs overlay body with the message with guidance how to proceed
|
||
|
|
* with gUM prompt.
|
||
|
|
*
|
||
|
|
* @returns {ReactElement|null}
|
||
|
|
* @override
|
||
|
|
* @protected
|
||
|
|
*/
|
||
|
|
_renderOverlayContent() {
|
||
|
|
const textKey = `userMedia.${this.props.browser}GrantPermissions`;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className = 'inlay'>
|
||
|
|
<span className = 'inlay__icon icon-microphone' />
|
||
|
|
<span className = 'inlay__icon icon-camera' />
|
||
|
|
<h3
|
||
|
|
className = 'inlay__title'
|
||
|
|
data-i18n = 'startupoverlay.title'
|
||
|
|
data-i18n-options
|
||
|
|
= '{"postProcess": "resolveAppName"}' />
|
||
|
|
<span
|
||
|
|
className = 'inlay__text'
|
||
|
|
data-i18n = { `[html]${textKey}` } />
|
||
|
|
</div>
|
||
|
|
<div className = 'policy overlay__policy'>
|
||
|
|
<p
|
||
|
|
className = 'policy__text'
|
||
|
|
data-i18n = '[html]startupoverlay.policyText' />
|
||
|
|
{ this._renderPolicyLogo() }
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders the policy logo.
|
||
|
|
*
|
||
|
|
* @returns {ReactElement|null}
|
||
|
|
* @private
|
||
|
|
*/
|
||
|
|
_renderPolicyLogo() {
|
||
|
|
if (this.state.policyLogoSrc) {
|
||
|
|
return (
|
||
|
|
<div className = 'policy__logo'>
|
||
|
|
<img src = { this.state.policyLogoSrc } />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|