Spaces:
Runtime error
Runtime error
File size: 5,793 Bytes
8fd7a1d |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
import PropTypes from 'prop-types';
import React from 'react';
import Box from '../box/box.jsx';
import {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';
import Modal from '../../containers/windowed-modal.jsx';
import {
isRendererSupported,
isNewFunctionSupported,
findIncompatibleUserscripts
} from '../../lib/tw-environment-support-prober.js';
import unhappyBrowser from './unsupported-browser.svg';
const messages = defineMessages({
label: {
id: 'gui.unsupportedBrowser.label',
defaultMessage: 'Browser is not supported',
description: ''
}
});
const BrowserModal = ({intl, ...props}) => {
const label = messages.label;
const incompatibleUserscripts = findIncompatibleUserscripts();
return (
<Modal
id="browser-modal"
contentLabel={intl.formatMessage({...messages.label})}
onRequestClose={() => {}} // Prevent closing this critical modal
className="browser-modal"
>
<div dir={props.isRtl ? 'rtl' : 'ltr'} >
<Box className={styles.illustration}>
<img
src={unhappyBrowser}
draggable={false}
/>
</Box>
<Box className={styles.body}>
<h2>
<FormattedMessage {...label} />
</h2>
{/* eslint-disable max-len */}
{isNewFunctionSupported() ? null : (
// This message should only be seen by website operators, so we don't need to translate it
<p>
{'Unable to compile JavaScript with new Function(). This is most likely caused by an overly-strict Content-Security-Policy. The CSP must include \'unsafe-eval\'.'}
</p>
)}
{incompatibleUserscripts.length > 0 && (
<React.Fragment>
{incompatibleUserscripts.map((message, index) => (
<p key={index}>
{message}
</p>
))}
</React.Fragment>
)}
{!isRendererSupported() && (
<React.Fragment>
<p>
<FormattedMessage
defaultMessage="Your browser {webGlLink} which is needed for this site to run. Try updating your browser and graphics drivers or restarting your computer."
description="WebGL missing message. {webGLLink} is a link with the text 'does not support WebGL' from Scratch's translations"
id="tw.webglModal.description"
values={{
webGlLink: (
<a href="https://get.webgl.org/">
<FormattedMessage
defaultMessage="does not support WebGL"
description="link part of your browser does not support WebGL message"
id="gui.webglModal.webgllink"
/>
</a>
)
}}
/>
</p>
<p>
<FormattedMessage
defaultMessage="Make sure you're using a recent version of Google Chrome, Mozilla Firefox, Microsoft Edge, or Apple Safari."
description="A message that appears in the browser not supported modal"
id="tw.browserModal.desc"
/>
</p>
<p>
<FormattedMessage
defaultMessage="On Apple devices, you must disable {lockdownMode}."
description="Part of the browser not supported message. Lockdown Mode refers to https://support.apple.com/en-us/HT212650"
id="tw.lockdownMode"
values={{
lockdownMode: (
<a href="https://support.apple.com/en-us/HT212650">
<FormattedMessage
defaultMessage="Lockdown Mode"
description="Links to an Apple support page about Lockdown Mode: https://support.apple.com/en-us/HT212650 Try to translate this the same as Apple."
id="tw.lockdownMode2"
/>
</a>
)
}}
/>
</p>
</React.Fragment>
)}
</Box>
</div>
</Modal>
);
};
BrowserModal.propTypes = {
intl: intlShape.isRequired,
isRtl: PropTypes.bool
};
const WrappedBrowserModal = injectIntl(BrowserModal);
export default WrappedBrowserModal;
|