\n
\n \n );\n }\n}\n\nActionMenu.propTypes = {\n className: PropTypes.string,\n img: PropTypes.string,\n moreButtons: PropTypes.arrayOf(PropTypes.shape({\n img: PropTypes.string,\n title: PropTypes.node.isRequired,\n onClick: PropTypes.func, // Optional, \"coming soon\" if no callback provided\n fileAccept: PropTypes.string, // Optional, only for file upload\n fileChange: PropTypes.func, // Optional, only for file upload\n fileInput: PropTypes.func, // Optional, only for file upload\n fileMultiple: PropTypes.bool // Optional, only for file upload\n })),\n onClick: PropTypes.func.isRequired,\n title: PropTypes.node.isRequired,\n tooltipPlace: PropTypes.string\n};\n\nexport default ActionMenu;\n","module.exports = __webpack_public_path__ + \"static/assets/385aa4b73a425883b4f9e91501a52299.svg\";","module.exports = __webpack_public_path__ + \"static/assets/e587d9d7e9a2f1f28041ba5c15db7a40.svg\";","module.exports = __webpack_public_path__ + \"static/assets/94b06fb716871f81bec601724e29a457.svg\";","module.exports = __webpack_public_path__ + \"static/assets/551aae506dfa65ce3b45713b5300a678.svg\";","module.exports = __webpack_public_path__ + \"static/assets/497f797eeffe5fa7e6a626abc0db08a1.svg\";","module.exports = __webpack_public_path__ + \"static/assets/301439e2e5ab88b658368ee525e6752b.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./alert.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./alert.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./alert.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport {FormattedMessage} from 'react-intl';\n\nimport Box from '../box/box.jsx';\nimport CloseButton from '../close-button/close-button.jsx';\nimport Spinner from '../spinner/spinner.jsx';\nimport {AlertLevels} from '../../lib/alerts/index.jsx';\n\nimport styles from './alert.css';\n\nconst closeButtonColors = {\n [AlertLevels.SUCCESS]: CloseButton.COLOR_GREEN,\n [AlertLevels.WARN]: CloseButton.COLOR_ORANGE\n};\n\nconst AlertComponent = ({\n content,\n closeButton,\n extensionName,\n iconSpinner,\n iconURL,\n level,\n showDownload,\n showSaveNow,\n onCloseAlert,\n onDownload,\n onSaveNow,\n onReconnect,\n showReconnect\n}) => (\n \n {(moreButtons || []).map(({img, title, onClick: handleClick,\n fileAccept, fileChange, fileInput, fileMultiple}, keyId) => {\n const isComingSoon = !handleClick;\n const hasFileInput = fileInput;\n const tooltipId = `${this.mainTooltipId}-${title}`;\n return (\n
\n \n \n
\n );\n })}\n \n {iconSpinner && (\n
\n )}\n \n {extensionName ? (\n
\n \n {showSaveNow && (\n \n \n \n \n
\n \n);\n\nAlertComponent.propTypes = {\n closeButton: PropTypes.bool,\n content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),\n extensionName: PropTypes.string,\n iconSpinner: PropTypes.bool,\n iconURL: PropTypes.string,\n level: PropTypes.string,\n onCloseAlert: PropTypes.func.isRequired,\n onDownload: PropTypes.func,\n onReconnect: PropTypes.func,\n onSaveNow: PropTypes.func,\n showDownload: PropTypes.bool,\n showReconnect: PropTypes.bool,\n showSaveNow: PropTypes.bool\n};\n\nAlertComponent.defaultProps = {\n level: AlertLevels.WARN\n};\n\nexport default AlertComponent;\n","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./alerts.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./alerts.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./alerts.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport Box from '../box/box.jsx';\nimport Alert from '../../containers/alert.jsx';\n\nimport styles from './alerts.css';\n\nconst AlertsComponent = ({\n alertsList,\n className,\n onCloseAlert\n}) => (\n \n
\n);\n\nPlayhead.propTypes = {\n playbackPosition: PropTypes.number\n};\n\nexport default Playhead;\n","import PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\nimport Box from '../box/box.jsx';\nimport styles from './audio-trimmer.css';\nimport handleIcon from './icon--handle.svg';\n\nconst SelectionHandle = props => (\n \n \n {onToggle ? (\n \n
\n {expanded ? (\n \n
\n ) : (\n loading ? (\n {error}
\n \n
\n ) : (\n contents.length > 0 ? (\n \n {contents.map(item => (\n \n
\n ) : (\n \n
\n )\n )\n )}\n \n ) : null}\n \n);\n\nBackpack.propTypes = {\n blockDragOver: PropTypes.bool,\n containerRef: PropTypes.func,\n contents: PropTypes.arrayOf(PropTypes.shape({\n id: PropTypes.string,\n thumbnailUrl: PropTypes.string,\n type: PropTypes.string,\n name: PropTypes.string\n })),\n dragOver: PropTypes.bool,\n error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n expanded: PropTypes.bool,\n intl: intlShape,\n loading: PropTypes.bool,\n onDelete: PropTypes.func,\n onRename: PropTypes.func,\n onMore: PropTypes.func,\n onMouseEnter: PropTypes.func,\n onMouseLeave: PropTypes.func,\n onToggle: PropTypes.func,\n showMore: PropTypes.bool\n};\n\nBackpack.defaultProps = {\n blockDragOver: false,\n contents: [],\n dragOver: false,\n expanded: false,\n loading: false,\n showMore: false,\n onMore: null,\n onToggle: null\n};\n\nexport default injectIntl(Backpack);\n","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./blocks.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./blocks.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./blocks.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport React from 'react';\nimport Box from '../box/box.jsx';\nimport styles from './blocks.css';\n\nconst BlocksComponent = props => {\n const {\n containerRef,\n dragOver,\n ...componentProps\n } = props;\n return (\n \n \n 
\n \n\n \n \n
\n {/* eslint-disable max-len */}\n {canConstructNewFunctions() ? null : (\n // This message is only intended to be read by website operators\n // We don't need to make it translatable\n \n
\n \n );\n};\n\nBrowserModal.propTypes = {\n intl: intlShape.isRequired,\n isRtl: PropTypes.bool,\n onBack: PropTypes.func.isRequired\n};\n\nconst WrappedBrowserModal = injectIntl(BrowserModal);\n\nWrappedBrowserModal.setAppElement = ReactModal.setAppElement;\n\nexport default WrappedBrowserModal;\n","module.exports = __webpack_public_path__ + \"static/assets/89a5687599f173f2b910aa5fcd862b42.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./button.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./button.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./button.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport styles from './button.css';\n\nconst ButtonComponent = ({\n className,\n disabled,\n iconClassName,\n iconSrc,\n iconWidth,\n iconHeight,\n onClick,\n children,\n ...props\n}) => {\n\n if (disabled) {\n onClick = function () {};\n }\n\n const icon = iconSrc && (\n \n
\n {/* eslint-disable max-len */}\n {canConstructNewFunctions() ? null : (\n // This message is only intended to be read by website operators\n // We don't need to make it translatable\n \n {'This site is unable to compile arbitrary JavaScript. This is most likely caused by an overly-strict Content-Security-Policy set by the server.'}\n
\n )}\n\n
{children}
\n \n );\n};\n\nButtonComponent.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n disabled: PropTypes.bool,\n iconClassName: PropTypes.string,\n iconSrc: PropTypes.string,\n iconHeight: PropTypes.string,\n iconWidth: PropTypes.string,\n onClick: PropTypes.func\n};\n\nexport default ButtonComponent;\n","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./card.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./card.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./card.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport React, {Fragment} from 'react';\nimport classNames from 'classnames';\nimport {FormattedMessage} from 'react-intl';\nimport Draggable from 'react-draggable';\n\nimport styles from './card.css';\n\nimport shrinkIcon from './icon--shrink.svg';\nimport expandIcon from './icon--expand.svg';\n\nimport rightArrow from './icon--next.svg';\nimport leftArrow from './icon--prev.svg';\n\nimport helpIcon from '../../lib/assets/icon--tutorials.svg';\nimport closeIcon from './icon--close.svg';\n\nimport {translateVideo} from '../../lib/libraries/decks/translate-video.js';\nimport {translateImage} from '../../lib/libraries/decks/translate-image.js';\n\nconst CardHeader = ({onCloseCards, onShrinkExpandCards, onShowAll, totalSteps, step, expanded}) => (\n \n \n
\n {totalSteps > 1 ? (\n \n {Array(totalSteps).fill(0)\n .map((_, i) => (\n
\n ) : null}\n \n \n
\n \n \n \n
\n \n );\n }\n}\n\nVideoStep.propTypes = {\n expanded: PropTypes.bool.isRequired,\n video: PropTypes.string.isRequired\n};\n\nconst ImageStep = ({title, image}) => (\n \n {title}\n
\n \n
\n \n \n \n
\n \n ) : null}\n {onPrevStep ? (\n \n \n \n
\n \n ) : null}\n \n
\n \n {deckIds.slice(0, 2).map(id => (\n \n
\n ))}\n \n {content[id].name}
\n \n \n
\n \n \n
\n \n \n );\n};\n\nCards.propTypes = {\n activeDeckId: PropTypes.string.isRequired,\n content: PropTypes.shape({\n id: PropTypes.shape({\n name: PropTypes.node.isRequired,\n img: PropTypes.string.isRequired,\n steps: PropTypes.arrayOf(PropTypes.shape({\n title: PropTypes.node,\n image: PropTypes.string,\n video: PropTypes.string,\n deckIds: PropTypes.arrayOf(PropTypes.string)\n }))\n })\n }),\n dragging: PropTypes.bool.isRequired,\n expanded: PropTypes.bool.isRequired,\n isRtl: PropTypes.bool.isRequired,\n locale: PropTypes.string.isRequired,\n onActivateDeckFactory: PropTypes.func.isRequired,\n onCloseCards: PropTypes.func.isRequired,\n onDrag: PropTypes.func,\n onEndDrag: PropTypes.func,\n onNextStep: PropTypes.func.isRequired,\n onPrevStep: PropTypes.func.isRequired,\n onShowAll: PropTypes.func,\n onShrinkExpandCards: PropTypes.func.isRequired,\n onStartDrag: PropTypes.func,\n showVideos: PropTypes.bool,\n step: PropTypes.number.isRequired,\n x: PropTypes.number,\n y: PropTypes.number\n};\n\nCards.defaultProps = {\n showVideos: true\n};\n\nexport {\n Cards as default,\n // Others exported for testability\n ImageStep,\n VideoStep\n};\n","module.exports = __webpack_public_path__ + \"static/assets/a3e689235188ba10c5cfd75730cb88a7.svg\";","module.exports = __webpack_public_path__ + \"static/assets/04e28ba12fe914cf4f131dcb85ae82d6.svg\";","module.exports = __webpack_public_path__ + \"static/assets/a80790c977586cc0595b5fe2f0bcb39a.svg\";","module.exports = __webpack_public_path__ + \"static/assets/33592a76d0d0fdaa4a32b2ea41db5e16.svg\";","module.exports = __webpack_public_path__ + \"static/assets/76121b7f4eff7d7ca0d49a45479d3f3f.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./close-button.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./close-button.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./close-button.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport React from 'react';\nimport classNames from 'classnames';\n\nimport styles from './close-button.css';\nimport closeIcon from './icon--close.svg';\nimport closeIconOrange from './icon--close-orange.svg';\nimport backIcon from '../../lib/assets/icon--back.svg';\n\nlet closeIcons = {};\n\nconst CloseButton = props => (\n \n 0 ? onPrevStep : null}\n />\n
\n \n {steps[step].deckIds ? (\n
\n \n \n {props.children}\n
\n \n
\n \n {props.phase === PHASES.prescan && (\n \n \n )}\n {props.phase === PHASES.pressbutton && (\n \n \n )}\n {props.phase === PHASES.notfound && (\n \n \n )}\n
\n \n \n \n
\n )}\n {props.phase === PHASES.notfound && (\n \n
\n \n \n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n
\n ) : (\n \n
\n \n {props.peripheralList.map(peripheral =>\n (
\n )\n ) : (\n \n
\n \n
\n \n {'1'}\n
\n \n
\n \n
\n \n
\n \n {'2'}\n
\n \n
\n \n
\n \n \n \n \n
\n);\n\nCrashMessage.propTypes = {\n eventId: PropTypes.string,\n errorMessage: PropTypes.string,\n onReload: PropTypes.func.isRequired\n};\n\nexport default CrashMessage;\n","module.exports = __webpack_public_path__ + \"static/assets/dd98971c2c185caf86144b6b5234d0fa.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./custom-procedures.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./custom-procedures.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./custom-procedures.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport React from 'react';\nimport Modal from '../../containers/modal.jsx';\nimport Box from '../box/box.jsx';\nimport {defineMessages, injectIntl, intlShape, FormattedMessage} from 'react-intl';\n\nimport booleanInputIcon from './icon--boolean-input.svg';\nimport textInputIcon from './icon--text-input.svg';\nimport labelIcon from './icon--label.svg';\n\nimport styles from './custom-procedures.css';\n\nconst messages = defineMessages({\n myblockModalTitle: {\n defaultMessage: 'Make a Block',\n description: 'Title for the modal where you create a custom block.',\n id: 'gui.customProcedures.myblockModalTitle'\n }\n});\n\nconst CustomProcedures = props => (\n \n
\n
\n {props.errorMessage}\n
\n )}\n {props.eventId && (\n\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n \n
\n \n \n \n \n
\n \n
\n \n\n);\n\nDeleteButton.propTypes = {\n className: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n tabIndex: PropTypes.number\n};\n\nDeleteButton.defaultProps = {\n tabIndex: 0\n};\n\nexport default DeleteButton;\n","module.exports = __webpack_public_path__ + \"static/assets/a5787bb7364d8131ed49a8f53037d7f4.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./dial.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./dial.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./dial.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport bindAll from 'lodash.bindall';\nimport React from 'react';\nimport {getEventXY} from '../../lib/touch-utils';\n\nimport styles from './dial.css';\n\nimport dialFace from './icon--dial.svg';\nimport dialHandle from './icon--handle.svg';\n\nclass Dial extends React.Component {\n constructor (props) {\n super(props);\n bindAll(this, [\n 'handleMouseDown',\n 'handleMouseMove',\n 'containerRef',\n 'handleRef',\n 'unbindMouseEvents'\n ]);\n }\n\n componentDidMount () {\n // Manually add touch/mouse handlers so that preventDefault can be used\n // to prevent scrolling on touch.\n // Tracked as a react issue https://github.com/facebook/react/issues/6436\n this.handleElement.addEventListener('mousedown', this.handleMouseDown);\n this.handleElement.addEventListener('touchstart', this.handleMouseDown);\n }\n\n componentWillUnmount () {\n this.unbindMouseEvents();\n this.handleElement.removeEventListener('mousedown', this.handleMouseDown);\n this.handleElement.removeEventListener('touchstart', this.handleMouseDown);\n }\n\n /**\n * Get direction from dial center to mouse move event.\n * @param {Event} e - Mouse move event.\n * @returns {number} Direction in degrees, clockwise, 90=horizontal.\n */\n directionToMouseEvent (e) {\n const {x: mx, y: my} = getEventXY(e);\n const bbox = this.containerElement.getBoundingClientRect();\n const cy = bbox.top + (bbox.height / 2);\n const cx = bbox.left + (bbox.width / 2);\n const angle = Math.atan2(my - cy, mx - cx);\n const degrees = angle * (180 / Math.PI);\n return degrees + 90; // To correspond with scratch coordinate system\n }\n\n /**\n * Create SVG path data string for the dial \"gauge\", the overlaid arc slice.\n * @param {number} radius - The radius of the dial.\n * @param {number} direction - Direction in degrees, clockwise, 90=horizontal.\n * @returns {string} Path data string for the gauge.\n */\n gaugePath (radius, direction) {\n const rads = (direction) * (Math.PI / 180);\n const path = [];\n path.push(`M ${radius} 0`);\n path.push(`L ${radius} ${radius}`);\n path.push(`L ${radius + (radius * Math.sin(rads))} ${radius - (radius * Math.cos(rads))}`);\n path.push(`A ${radius} ${radius} 0 0 ${direction < 0 ? 1 : 0} ${radius} 0`);\n path.push(`Z`);\n return path.join(' ');\n }\n\n handleMouseMove (e) {\n this.props.onChange(this.directionToMouseEvent(e) + this.directionOffset);\n e.preventDefault();\n }\n\n unbindMouseEvents () {\n window.removeEventListener('mousemove', this.handleMouseMove);\n window.removeEventListener('mouseup', this.unbindMouseEvents);\n window.removeEventListener('touchmove', this.handleMouseMove);\n window.removeEventListener('touchend', this.unbindMouseEvents);\n }\n\n handleMouseDown (e) {\n // Because the drag handle is not a single point, there is some initial\n // difference between the current sprite direction and the direction to the mouse\n // Store this offset to prevent jumping when the mouse is moved.\n this.directionOffset = this.props.direction - this.directionToMouseEvent(e);\n window.addEventListener('mousemove', this.handleMouseMove);\n window.addEventListener('mouseup', this.unbindMouseEvents);\n window.addEventListener('touchmove', this.handleMouseMove);\n window.addEventListener('touchend', this.unbindMouseEvents);\n e.preventDefault();\n }\n\n containerRef (el) {\n this.containerElement = el;\n }\n\n handleRef (el) {\n this.handleElement = el;\n }\n\n render () {\n const {direction, radius} = this.props;\n return (\n \n \n \n
\n \n );\n }\n}\n\nDial.propTypes = {\n direction: PropTypes.number,\n onChange: PropTypes.func.isRequired,\n radius: PropTypes.number\n};\n\nDial.defaultProps = {\n direction: 90, // degrees\n radius: 56 // px\n};\n\nexport default Dial;\n","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./direction-picker.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./direction-picker.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./direction-picker.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport Popover from 'react-popover';\nimport {injectIntl, intlShape, defineMessages, FormattedMessage} from 'react-intl';\n\nimport Label from '../forms/label.jsx';\nimport Input from '../forms/input.jsx';\nimport BufferedInputHOC from '../forms/buffered-input-hoc.jsx';\nimport Dial from './dial.jsx';\n\nimport styles from './direction-picker.css';\n\nimport allAroundIcon from './icon--all-around.svg';\nimport leftRightIcon from './icon--left-right.svg';\nimport dontRotateIcon from './icon--dont-rotate.svg';\n\nconst BufferedInput = BufferedInputHOC(Input);\n\nconst directionLabel = (\n \n \n \n \n
\n \n }\n isOpen={props.popoverOpen}\n preferPlace=\"above\"\n onOuterAction={props.onClosePopover}\n >\n \n \n
\n \n) : null);\n\nDragLayer.propTypes = {\n currentOffset: PropTypes.shape({\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired\n }),\n dragging: PropTypes.bool.isRequired,\n img: PropTypes.string\n};\n\nexport default DragLayer;\n","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./filter.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./filter.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./filter.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import classNames from 'classnames';\nimport PropTypes from 'prop-types';\nimport React from 'react';\n\nimport filterIcon from './icon--filter.svg';\nimport xIcon from './icon--x.svg';\nimport styles from './filter.css';\n\nconst FilterComponent = props => {\n const {\n className,\n onChange,\n onClear,\n placeholderText,\n filterQuery,\n inputClassName\n } = props;\n return (\n \n {title}\n
\n \n);\n\nIconButton.propTypes = {\n className: PropTypes.string,\n disabled: PropTypes.bool,\n img: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n title: PropTypes.node.isRequired\n};\n\nexport default IconButton;\n","module.exports = __webpack_public_path__ + \"static/assets/1319094a51748798730f01d1dc0972ac.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./language-selector.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./language-selector.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./language-selector.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport locales from '@turbowarp/scratch-l10n';\nimport styles from './language-selector.css';\n\n// supported languages to exclude from the menu, but allow as a URL option\nconst ignore = [];\n\nconst LanguageSelector = ({currentLocale, label, onChange}) => (\n \n {this.props.disabled ? (\n
\n {this.props.insetIconURL ? (\n \n
\n ) : null}\n \n
\n ) : null}\n \n {this.props.description}\n \n\n {(this.props.docsURI || this.props.samples) && (\n
\n {this.props.docsURI && (\n \n \n
\n )}\n\n {this.props.credits && this.props.credits.length > 0 && (\n \n
\n )}\n\n {this.props.bluetoothRequired || this.props.internetConnectionRequired || this.props.collaborator ? (\n \n \n {credit}\n {index !== this.props.credits.length - 1 && (\n ', '\n )}\n \n ))}\n
\n \n
\n \n {this.props.bluetoothRequired || this.props.internetConnectionRequired ? (\n
\n ) : null}\n \n \n {this.props.bluetoothRequired ? (\n
\n \n
\n \n {this.props.collaborator ? (\n
\n ) : null}\n \n \n ) : null}\n\n {favorite}\n \n ) : (\n \n \n {this.props.collaborator}\n
\n \n
\n \n {this.props.filterable && (\n
\n )}\n \n {tagListPrefix.concat(this.props.tags).map((tagProps, id) => (\n
\n }\n \n
\n )}\n \n \n );\n }\n}\n\nLibraryComponent.propTypes = {\n data: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.oneOfType([\n /* eslint-disable react/no-unused-prop-types, lines-around-comment */\n // An item in the library\n PropTypes.shape({\n // @todo remove md5/rawURL prop from library, refactor to use storage\n md5: PropTypes.string,\n name: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.node\n ]),\n rawURL: PropTypes.string\n }),\n PropTypes.string\n /* eslint-enable react/no-unused-prop-types, lines-around-comment */\n ])),\n PropTypes.instanceOf(Promise)\n ]),\n filterable: PropTypes.bool,\n id: PropTypes.string.isRequired,\n persistableKey: PropTypes.string,\n intl: intlShape.isRequired,\n onItemMouseEnter: PropTypes.func,\n onItemMouseLeave: PropTypes.func,\n onItemSelected: PropTypes.func,\n onRequestClose: PropTypes.func,\n setStopHandler: PropTypes.func,\n showPlayButton: PropTypes.bool,\n tags: PropTypes.arrayOf(PropTypes.shape(TagButton.propTypes)),\n title: PropTypes.string.isRequired\n};\n\nLibraryComponent.defaultProps = {\n filterable: true,\n persistableKey: 'name',\n showPlayButton: false\n};\n\nexport default injectIntl(LibraryComponent);\n","module.exports = __webpack_public_path__ + \"static/assets/ce5820b006d753e4133f46ae776f4d96.svg\";","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./loader.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./loader.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./loader.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import React from 'react';\nimport {defineMessages, FormattedMessage, intlShape, injectIntl} from 'react-intl';\nimport classNames from 'classnames';\nimport styles from './loader.css';\nimport PropTypes from 'prop-types';\nimport bindAll from 'lodash.bindall';\n\nimport topBlock from './top-block.svg';\nimport middleBlock from './middle-block.svg';\nimport bottomBlock from './bottom-block.svg';\n\nimport * as progressMonitor from './tw-progress-monitor';\nimport isScratchDesktop from '../../lib/isScratchDesktop';\n\n// tw:\n// we make some rather large changes here:\n// - remove random message, replaced with message dependent on what is actually being loaded\n// - add a progress bar\n// - bring in intl so that we can translate everything\n// The way of doing this is extremely unusual and weird compared to how things are typically done for performance.\n// This is because react updates are too performance crippling to handle the progress bar rapidly updating.\n\nconst mainMessages = {\n 'gui.loader.headline': (\n \n
\n \n );\n }\n}\n\nLoaderComponent.propTypes = {\n isFullScreen: PropTypes.bool,\n intl: intlShape.isRequired,\n messageId: PropTypes.string\n};\nLoaderComponent.defaultProps = {\n isFullScreen: false,\n messageId: 'gui.loader.headline'\n};\n\nexport default injectIntl(LoaderComponent);\n","module.exports = __webpack_public_path__ + \"static/assets/f9dce53613d5f85b311ce9f84423c08b.svg\";","module.exports = __webpack_public_path__ + \"static/assets/bbbd98ae6a34eac772e34a57aaa5f977.svg\";","// This file implements some extremely terrible tricks to monitor project loading progress.\n// Please don't use this as a reference for \"good JS code\"\n\nlet total = 0;\nlet complete = 0;\n\n// 0 - none\n// 1 - load json\n// 2 - load assets\nlet state = 0;\n\nlet currentProgress = 0;\n\nlet progressHandler = (state, progress, complete, total) => {};\n\nexport const setProgressHandler = newHandler => {\n progressHandler = newHandler;\n progressHandler(state, currentProgress, complete, total);\n};\n\nlet progressHandlerTimeout = null;\nconst fireProgressHandler = () => {\n progressHandler(state, currentProgress, complete, total);\n progressHandlerTimeout = null;\n};\n\nconst queueProgressHandlerUpdate = () => {\n if (progressHandlerTimeout === null) {\n progressHandlerTimeout = requestAnimationFrame(fireProgressHandler);\n }\n};\n\nconst setProgress = progress => {\n if (progress < 0) {\n progress = 0;\n }\n if (progress > 1) {\n progress = 1;\n }\n currentProgress = progress;\n queueProgressHandlerUpdate();\n};\n\nconst setState = newState => {\n if (state === newState) {\n return;\n }\n state = newState;\n complete = 0;\n total = 0;\n setProgress(0);\n};\n\nexport const fetchWithProgress = url => {\n setState(1);\n return new Promise((resolve, reject) => {\n // fetch() does not support progress, so we use XMLHttpRequest\n const xhr = new XMLHttpRequest();\n xhr.responseType = 'blob';\n xhr.onload = () => {\n resolve(new Response(xhr.response, {\n status: xhr.status,\n statusText: xhr.statusText\n }));\n };\n xhr.onloadend = () => setProgress(1);\n xhr.onerror = () => reject(new Error('[tw-progress-monitor] xhr failed'));\n xhr.onprogress = e => {\n if (e.lengthComputable) {\n setProgress(e.loaded / e.total);\n }\n };\n xhr.open('GET', url);\n xhr.send();\n });\n};\n\n// Scratch uses fetch() to download the project JSON, so we override it to monitor when the project is being downloaded.\nconst originalFetch = window.fetch;\nwindow.fetch = (url, opts) => {\n const isGET = typeof opts === 'object' && opts && opts.method === 'GET';\n const isProjectURL = typeof url === 'string' && /^https:\\/\\/projects\\.scratch\\.mit\\.edu\\/\\d+$/.test(url);\n if (isGET && isProjectURL) {\n return fetchWithProgress(url);\n }\n return originalFetch(url, opts);\n};\n\nconst handleWorkerMessage = e => {\n const data = e.data;\n if (Array.isArray(data)) {\n complete += data.length;\n setProgress(complete / total);\n }\n};\n\nif (window.Worker) {\n let downloadWorker = null;\n const originalPostMessage = window.Worker.prototype.postMessage;\n window.Worker.prototype.postMessage = function (message) {\n if (downloadWorker === null) {\n if (message && message.url && message.id && message.options) {\n downloadWorker = this;\n downloadWorker.addEventListener('message', handleWorkerMessage);\n }\n }\n if (downloadWorker === this) {\n setState(2);\n total++;\n }\n originalPostMessage.call(this, message);\n };\n}\n","\nvar content = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./loupe.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../../../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./loupe.css\", function() {\n\t\tvar newContent = require(\"!!../../../node_modules/css-loader/index.js??ref--5-1!../../../node_modules/postcss-loader/src/index.js??postcss!./loupe.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","import PropTypes from 'prop-types';\nimport React from 'react';\nimport bindAll from 'lodash.bindall';\n\nimport Box from '../box/box.jsx';\nimport styles from './loupe.css';\n\nconst zoomScale = 3;\n\nclass LoupeComponent extends React.Component {\n constructor (props) {\n super(props);\n bindAll(this, [\n 'setCanvas'\n ]);\n }\n componentDidUpdate () {\n this.draw();\n }\n draw () {\n const boxSize = 6 / zoomScale;\n const boxLineWidth = 1 / zoomScale;\n const colorRingWidth = 15 / zoomScale;\n\n const ctx = this.canvas.getContext('2d');\n const {color, data, width, height} = this.props.colorInfo;\n this.canvas.width = zoomScale * width;\n this.canvas.height = zoomScale * height;\n\n // In order to scale the image data, must draw to a tmp canvas first\n const tmpCanvas = document.createElement('canvas');\n tmpCanvas.width = width;\n tmpCanvas.height = height;\n const tmpCtx = tmpCanvas.getContext('2d');\n const imageData = tmpCtx.createImageData(width, height);\n imageData.data.set(data);\n tmpCtx.putImageData(imageData, 0, 0);\n\n // Scale the loupe canvas and draw the zoomed image\n ctx.save();\n ctx.scale(zoomScale, zoomScale);\n ctx.drawImage(tmpCanvas, 0, 0, width, height);\n\n // Draw an outlined square at the cursor position (cursor is hidden)\n ctx.lineWidth = boxLineWidth;\n ctx.strokeStyle = 'black';\n ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;\n ctx.beginPath();\n ctx.rect((width / 2) - (boxSize / 2), (height / 2) - (boxSize / 2), boxSize, boxSize);\n ctx.fill();\n ctx.stroke();\n\n // Draw a thick ring around the loupe showing the current color\n ctx.strokeStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;\n ctx.lineWidth = colorRingWidth;\n ctx.beginPath();\n ctx.moveTo(width, height / 2);\n ctx.arc(width / 2, height / 2, width / 2, 0, 2 * Math.PI);\n ctx.stroke();\n ctx.restore();\n }\n setCanvas (element) {\n this.canvas = element;\n }\n render () {\n const {\n colorInfo,\n ...boxProps\n } = this.props;\n const x = colorInfo.x - ((zoomScale * colorInfo.width) / 2);\n const y = colorInfo.y - ((zoomScale * colorInfo.height) / 2);\n return (\n \n
\n \n {mainMessages[this.props.messageId]}\n
\n \n
\n {!isScratchDesktop() && (\n \n
\n )}\n \n
\n \n);\n\nActualAuthorInfo.propTypes = {\n className: PropTypes.string,\n imageUrl: PropTypes.string,\n projectTitle: PropTypes.string,\n userId: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),\n username: PropTypes.oneOfType([PropTypes.string, PropTypes.bool])\n};\n\nconst AuthorInfo = ({projectId, ...props}) => (\n projectId ? (\n \n {projectTitle}\n
\n\n \n {username} \n }}\n />\n \n
\n