1 line
30 KiB
Plaintext
1 line
30 KiB
Plaintext
{"version":3,"sources":["webpack:///status/media_gallery.js","webpack:///./app/javascript/mastodon/components/media_gallery.js"],"names":["webpackJsonp","155","module","__webpack_exports__","__webpack_require__","Object","defineProperty","value","d","MediaGallery","_class","_temp2","_class2","_class3","_temp4","__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx__","__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default","n","__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__","__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck___default","__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn__","__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn___default","__WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits__","__WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits___default","__WEBPACK_IMPORTED_MODULE_4_react__","__WEBPACK_IMPORTED_MODULE_4_react___default","__WEBPACK_IMPORTED_MODULE_5_immutable__","__WEBPACK_IMPORTED_MODULE_6__icon_button__","__WEBPACK_IMPORTED_MODULE_7_react_intl__","__WEBPACK_IMPORTED_MODULE_8__is_mobile__","__WEBPACK_IMPORTED_MODULE_9_classnames__","__WEBPACK_IMPORTED_MODULE_9_classnames___default","__WEBPACK_IMPORTED_MODULE_10__initial_state__","messages","toggle_visible","id","defaultMessage","Item","_React$PureComponent","_temp","_this","_ret","this","_len","arguments","length","args","Array","_key","call","apply","concat","handleMouseEnter","e","hoverToPlay","target","play","handleMouseLeave","pause","currentTime","handleClick","_this$props","props","index","onClick","button","preventDefault","stopPropagation","prototype","attachment","get","render","_props","size","standalone","width","height","top","left","bottom","right","thumbnail","previewUrl","previewWidth","getIn","originalUrl","originalWidth","hasSize","srcSet","sizes","focusX","focusY","x","y","className","href","src","alt","title","style","objectPosition","autoPlay","autoplay","aria-label","role","onMouseEnter","onMouseLeave","loop","muted","a","PureComponent","defaultProps","_React$PureComponent2","_temp3","_this2","_ret2","_len2","_key2","state","visible","sensitive","handleOpen","setState","onOpenMedia","media","handleRef","node","offsetWidth","componentWillReceiveProps","nextProps","isStandaloneEligible","_props2","_this3","_props3","intl","_state","children","take","map","i","warning","createElement","type","ref","spoiler-button--visible","formatMessage","icon","overlay"],"mappings":"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","file":"status/media_gallery.js","sourcesContent":["webpackJsonp([26],{\n\n/***/ 155:\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"default\", function() { return MediaGallery; });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx__ = __webpack_require__(2);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__ = __webpack_require__(1);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn__ = __webpack_require__(3);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits__ = __webpack_require__(4);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react__ = __webpack_require__(0);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_4_react__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_immutable__ = __webpack_require__(8);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_immutable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_immutable__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__icon_button__ = __webpack_require__(23);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7_react_intl__ = __webpack_require__(6);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__is_mobile__ = __webpack_require__(35);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_classnames__ = __webpack_require__(10);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_classnames___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_9_classnames__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__initial_state__ = __webpack_require__(11);\n\n\n\n\n\nvar _class, _temp2, _class2, _class3, _temp4;\n\n\n\n\n\n\n\n\n\n\nvar messages = Object(__WEBPACK_IMPORTED_MODULE_7_react_intl__[\"f\" /* defineMessages */])({\n toggle_visible: {\n 'id': 'media_gallery.toggle_visible',\n 'defaultMessage': 'Toggle visibility'\n }\n});\n\nvar Item = (_temp2 = _class = function (_React$PureComponent) {\n __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits___default()(Item, _React$PureComponent);\n\n function Item() {\n var _temp, _this, _ret;\n\n __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck___default()(this, Item);\n\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n return _ret = (_temp = (_this = __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn___default()(this, _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args))), _this), _this.handleMouseEnter = function (e) {\n if (_this.hoverToPlay()) {\n e.target.play();\n }\n }, _this.handleMouseLeave = function (e) {\n if (_this.hoverToPlay()) {\n e.target.pause();\n e.target.currentTime = 0;\n }\n }, _this.handleClick = function (e) {\n var _this$props = _this.props,\n index = _this$props.index,\n onClick = _this$props.onClick;\n\n\n if (e.button === 0) {\n e.preventDefault();\n onClick(index);\n }\n\n e.stopPropagation();\n }, _temp), __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn___default()(_this, _ret);\n }\n\n Item.prototype.hoverToPlay = function hoverToPlay() {\n var attachment = this.props.attachment;\n\n return !__WEBPACK_IMPORTED_MODULE_10__initial_state__[\"a\" /* autoPlayGif */] && attachment.get('type') === 'gifv';\n };\n\n Item.prototype.render = function render() {\n var _props = this.props,\n attachment = _props.attachment,\n index = _props.index,\n size = _props.size,\n standalone = _props.standalone;\n\n\n var width = 50;\n var height = 100;\n var top = 'auto';\n var left = 'auto';\n var bottom = 'auto';\n var right = 'auto';\n\n if (size === 1) {\n width = 100;\n }\n\n if (size === 4 || size === 3 && index > 0) {\n height = 50;\n }\n\n if (size === 2) {\n if (index === 0) {\n right = '2px';\n } else {\n left = '2px';\n }\n } else if (size === 3) {\n if (index === 0) {\n right = '2px';\n } else if (index > 0) {\n left = '2px';\n }\n\n if (index === 1) {\n bottom = '2px';\n } else if (index > 1) {\n top = '2px';\n }\n } else if (size === 4) {\n if (index === 0 || index === 2) {\n right = '2px';\n }\n\n if (index === 1 || index === 3) {\n left = '2px';\n }\n\n if (index < 2) {\n bottom = '2px';\n } else {\n top = '2px';\n }\n }\n\n var thumbnail = '';\n\n if (attachment.get('type') === 'image') {\n var previewUrl = attachment.get('preview_url');\n var previewWidth = attachment.getIn(['meta', 'small', 'width']);\n\n var originalUrl = attachment.get('url');\n var originalWidth = attachment.getIn(['meta', 'original', 'width']);\n\n var hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';\n\n var srcSet = hasSize ? originalUrl + ' ' + originalWidth + 'w, ' + previewUrl + ' ' + previewWidth + 'w' : null;\n var sizes = hasSize ? '(min-width: 1025px) ' + 320 * (width / 100) + 'px, ' + width + 'vw' : null;\n\n var focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;\n var focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;\n var x = (focusX / 2 + .5) * 100;\n var y = (focusY / -2 + .5) * 100;\n\n thumbnail = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('a', {\n className: 'media-gallery__item-thumbnail',\n href: attachment.get('remote_url') || originalUrl,\n onClick: this.handleClick,\n target: '_blank'\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('img', {\n src: previewUrl,\n srcSet: srcSet,\n sizes: sizes,\n alt: attachment.get('description'),\n title: attachment.get('description'),\n style: { objectPosition: x + '% ' + y + '%' }\n }));\n } else if (attachment.get('type') === 'gifv') {\n var autoPlay = !Object(__WEBPACK_IMPORTED_MODULE_8__is_mobile__[\"a\" /* isIOS */])() && __WEBPACK_IMPORTED_MODULE_10__initial_state__[\"a\" /* autoPlayGif */];\n\n thumbnail = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('div', {\n className: __WEBPACK_IMPORTED_MODULE_9_classnames___default()('media-gallery__gifv', { autoplay: autoPlay })\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('video', {\n className: 'media-gallery__item-gifv-thumbnail',\n 'aria-label': attachment.get('description'),\n role: 'application',\n src: attachment.get('url'),\n onClick: this.handleClick,\n onMouseEnter: this.handleMouseEnter,\n onMouseLeave: this.handleMouseLeave,\n autoPlay: autoPlay,\n loop: true,\n muted: true\n }), __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('span', {\n className: 'media-gallery__gifv__label'\n }, void 0, 'GIF'));\n }\n\n return __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('div', {\n className: __WEBPACK_IMPORTED_MODULE_9_classnames___default()('media-gallery__item', { standalone: standalone }),\n style: { left: left, top: top, right: right, bottom: bottom, width: width + '%', height: height + '%' }\n }, attachment.get('id'), thumbnail);\n };\n\n return Item;\n}(__WEBPACK_IMPORTED_MODULE_4_react___default.a.PureComponent), _class.defaultProps = {\n standalone: false,\n index: 0,\n size: 1\n}, _temp2);\n\nvar MediaGallery = Object(__WEBPACK_IMPORTED_MODULE_7_react_intl__[\"g\" /* injectIntl */])(_class2 = (_temp4 = _class3 = function (_React$PureComponent2) {\n __WEBPACK_IMPORTED_MODULE_3_babel_runtime_helpers_inherits___default()(MediaGallery, _React$PureComponent2);\n\n function MediaGallery() {\n var _temp3, _this2, _ret2;\n\n __WEBPACK_IMPORTED_MODULE_1_babel_runtime_helpers_classCallCheck___default()(this, MediaGallery);\n\n for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return _ret2 = (_temp3 = (_this2 = __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn___default()(this, _React$PureComponent2.call.apply(_React$PureComponent2, [this].concat(args))), _this2), _this2.state = {\n visible: !_this2.props.sensitive || __WEBPACK_IMPORTED_MODULE_10__initial_state__[\"f\" /* displaySensitiveMedia */]\n }, _this2.handleOpen = function () {\n _this2.setState({ visible: !_this2.state.visible });\n }, _this2.handleClick = function (index) {\n _this2.props.onOpenMedia(_this2.props.media, index);\n }, _this2.handleRef = function (node) {\n if (node /*&& this.isStandaloneEligible()*/) {\n // offsetWidth triggers a layout, so only calculate when we need to\n _this2.setState({\n width: node.offsetWidth\n });\n }\n }, _temp3), __WEBPACK_IMPORTED_MODULE_2_babel_runtime_helpers_possibleConstructorReturn___default()(_this2, _ret2);\n }\n\n MediaGallery.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {\n if (!Object(__WEBPACK_IMPORTED_MODULE_5_immutable__[\"is\"])(nextProps.media, this.props.media)) {\n this.setState({ visible: !nextProps.sensitive });\n }\n };\n\n MediaGallery.prototype.isStandaloneEligible = function isStandaloneEligible() {\n var _props2 = this.props,\n media = _props2.media,\n standalone = _props2.standalone;\n\n return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);\n };\n\n MediaGallery.prototype.render = function render() {\n var _this3 = this;\n\n var _props3 = this.props,\n media = _props3.media,\n intl = _props3.intl,\n sensitive = _props3.sensitive,\n height = _props3.height;\n var _state = this.state,\n width = _state.width,\n visible = _state.visible;\n\n\n var children = void 0;\n\n var style = {};\n\n if (this.isStandaloneEligible()) {\n if (width) {\n style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);\n }\n } else if (width) {\n style.height = width / (16 / 9);\n } else {\n style.height = height;\n }\n\n if (!visible) {\n var warning = void 0;\n\n if (sensitive) {\n warning = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(__WEBPACK_IMPORTED_MODULE_7_react_intl__[\"b\" /* FormattedMessage */], {\n id: 'status.sensitive_warning',\n defaultMessage: 'Sensitive content'\n });\n } else {\n warning = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(__WEBPACK_IMPORTED_MODULE_7_react_intl__[\"b\" /* FormattedMessage */], {\n id: 'status.media_hidden',\n defaultMessage: 'Media hidden'\n });\n }\n\n children = __WEBPACK_IMPORTED_MODULE_4_react___default.a.createElement(\n 'button',\n { type: 'button', className: 'media-spoiler', onClick: this.handleOpen, style: style, ref: this.handleRef },\n __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('span', {\n className: 'media-spoiler__warning'\n }, void 0, warning),\n __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('span', {\n className: 'media-spoiler__trigger'\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(__WEBPACK_IMPORTED_MODULE_7_react_intl__[\"b\" /* FormattedMessage */], {\n id: 'status.sensitive_toggle',\n defaultMessage: 'Click to view'\n }))\n );\n } else {\n var size = media.take(4).size;\n\n if (this.isStandaloneEligible()) {\n children = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(Item, {\n standalone: true,\n onClick: this.handleClick,\n attachment: media.get(0)\n });\n } else {\n children = media.take(4).map(function (attachment, i) {\n return __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(Item, {\n onClick: _this3.handleClick,\n attachment: attachment,\n index: i,\n size: size\n }, attachment.get('id'));\n });\n }\n }\n\n return __WEBPACK_IMPORTED_MODULE_4_react___default.a.createElement(\n 'div',\n { className: 'media-gallery', style: style, ref: this.handleRef },\n __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('div', {\n className: __WEBPACK_IMPORTED_MODULE_9_classnames___default()('spoiler-button', { 'spoiler-button--visible': visible })\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(__WEBPACK_IMPORTED_MODULE_6__icon_button__[\"a\" /* default */], {\n title: intl.formatMessage(messages.toggle_visible),\n icon: visible ? 'eye' : 'eye-slash',\n overlay: true,\n onClick: this.handleOpen\n })),\n children\n );\n };\n\n return MediaGallery;\n}(__WEBPACK_IMPORTED_MODULE_4_react___default.a.PureComponent), _class3.defaultProps = {\n standalone: false\n}, _temp4)) || _class2;\n\n\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// status/media_gallery.js","import React from 'react';\nimport ImmutablePropTypes from 'react-immutable-proptypes';\nimport PropTypes from 'prop-types';\nimport { is } from 'immutable';\nimport IconButton from './icon_button';\nimport { defineMessages, injectIntl, FormattedMessage } from 'react-intl';\nimport { isIOS } from '../is_mobile';\nimport classNames from 'classnames';\nimport { autoPlayGif, displaySensitiveMedia } from '../initial_state';\n\nconst messages = defineMessages({\n toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },\n});\n\nclass Item extends React.PureComponent {\n\n static propTypes = {\n attachment: ImmutablePropTypes.map.isRequired,\n standalone: PropTypes.bool,\n index: PropTypes.number.isRequired,\n size: PropTypes.number.isRequired,\n onClick: PropTypes.func.isRequired,\n };\n\n static defaultProps = {\n standalone: false,\n index: 0,\n size: 1,\n };\n\n handleMouseEnter = (e) => {\n if (this.hoverToPlay()) {\n e.target.play();\n }\n }\n\n handleMouseLeave = (e) => {\n if (this.hoverToPlay()) {\n e.target.pause();\n e.target.currentTime = 0;\n }\n }\n\n hoverToPlay () {\n const { attachment } = this.props;\n return !autoPlayGif && attachment.get('type') === 'gifv';\n }\n\n handleClick = (e) => {\n const { index, onClick } = this.props;\n\n if (e.button === 0) {\n e.preventDefault();\n onClick(index);\n }\n\n e.stopPropagation();\n }\n\n render () {\n const { attachment, index, size, standalone } = this.props;\n\n let width = 50;\n let height = 100;\n let top = 'auto';\n let left = 'auto';\n let bottom = 'auto';\n let right = 'auto';\n\n if (size === 1) {\n width = 100;\n }\n\n if (size === 4 || (size === 3 && index > 0)) {\n height = 50;\n }\n\n if (size === 2) {\n if (index === 0) {\n right = '2px';\n } else {\n left = '2px';\n }\n } else if (size === 3) {\n if (index === 0) {\n right = '2px';\n } else if (index > 0) {\n left = '2px';\n }\n\n if (index === 1) {\n bottom = '2px';\n } else if (index > 1) {\n top = '2px';\n }\n } else if (size === 4) {\n if (index === 0 || index === 2) {\n right = '2px';\n }\n\n if (index === 1 || index === 3) {\n left = '2px';\n }\n\n if (index < 2) {\n bottom = '2px';\n } else {\n top = '2px';\n }\n }\n\n let thumbnail = '';\n\n if (attachment.get('type') === 'image') {\n const previewUrl = attachment.get('preview_url');\n const previewWidth = attachment.getIn(['meta', 'small', 'width']);\n\n const originalUrl = attachment.get('url');\n const originalWidth = attachment.getIn(['meta', 'original', 'width']);\n\n const hasSize = typeof originalWidth === 'number' && typeof previewWidth === 'number';\n\n const srcSet = hasSize ? `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w` : null;\n const sizes = hasSize ? `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw` : null;\n\n const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;\n const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;\n const x = ((focusX / 2) + .5) * 100;\n const y = ((focusY / -2) + .5) * 100;\n\n thumbnail = (\n <a\n className='media-gallery__item-thumbnail'\n href={attachment.get('remote_url') || originalUrl}\n onClick={this.handleClick}\n target='_blank'\n >\n <img\n src={previewUrl}\n srcSet={srcSet}\n sizes={sizes}\n alt={attachment.get('description')}\n title={attachment.get('description')}\n style={{ objectPosition: `${x}% ${y}%` }}\n />\n </a>\n );\n } else if (attachment.get('type') === 'gifv') {\n const autoPlay = !isIOS() && autoPlayGif;\n\n thumbnail = (\n <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>\n <video\n className='media-gallery__item-gifv-thumbnail'\n aria-label={attachment.get('description')}\n role='application'\n src={attachment.get('url')}\n onClick={this.handleClick}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\n autoPlay={autoPlay}\n loop\n muted\n />\n\n <span className='media-gallery__gifv__label'>GIF</span>\n </div>\n );\n }\n\n return (\n <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>\n {thumbnail}\n </div>\n );\n }\n\n}\n\n@injectIntl\nexport default class MediaGallery extends React.PureComponent {\n\n static propTypes = {\n sensitive: PropTypes.bool,\n standalone: PropTypes.bool,\n media: ImmutablePropTypes.list.isRequired,\n size: PropTypes.object,\n height: PropTypes.number.isRequired,\n onOpenMedia: PropTypes.func.isRequired,\n intl: PropTypes.object.isRequired,\n };\n\n static defaultProps = {\n standalone: false,\n };\n\n state = {\n visible: !this.props.sensitive || displaySensitiveMedia,\n };\n\n componentWillReceiveProps (nextProps) {\n if (!is(nextProps.media, this.props.media)) {\n this.setState({ visible: !nextProps.sensitive });\n }\n }\n\n handleOpen = () => {\n this.setState({ visible: !this.state.visible });\n }\n\n handleClick = (index) => {\n this.props.onOpenMedia(this.props.media, index);\n }\n\n handleRef = (node) => {\n if (node /*&& this.isStandaloneEligible()*/) {\n // offsetWidth triggers a layout, so only calculate when we need to\n this.setState({\n width: node.offsetWidth,\n });\n }\n }\n\n isStandaloneEligible() {\n const { media, standalone } = this.props;\n return standalone && media.size === 1 && media.getIn([0, 'meta', 'small', 'aspect']);\n }\n\n render () {\n const { media, intl, sensitive, height } = this.props;\n const { width, visible } = this.state;\n\n let children;\n\n const style = {};\n\n if (this.isStandaloneEligible()) {\n if (width) {\n style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);\n }\n } else if (width) {\n style.height = width / (16/9);\n } else {\n style.height = height;\n }\n\n if (!visible) {\n let warning;\n\n if (sensitive) {\n warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;\n } else {\n warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;\n }\n\n children = (\n <button type='button' className='media-spoiler' onClick={this.handleOpen} style={style} ref={this.handleRef}>\n <span className='media-spoiler__warning'>{warning}</span>\n <span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>\n </button>\n );\n } else {\n const size = media.take(4).size;\n\n if (this.isStandaloneEligible()) {\n children = <Item standalone onClick={this.handleClick} attachment={media.get(0)} />;\n } else {\n children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} />);\n }\n }\n\n return (\n <div className='media-gallery' style={style} ref={this.handleRef}>\n <div className={classNames('spoiler-button', { 'spoiler-button--visible': visible })}>\n <IconButton title={intl.formatMessage(messages.toggle_visible)} icon={visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />\n </div>\n\n {children}\n </div>\n );\n }\n\n}\n\n\n\n// WEBPACK FOOTER //\n// ./app/javascript/mastodon/components/media_gallery.js"],"sourceRoot":""} |