1 {"version":3,"sources":["webpack:///status/media_gallery-7642f779bf4243e58b78.js","webpack:///./app/javascript/mastodon/components/media_gallery.js"],"names":["webpackJsonp","159","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_prop_types__","__WEBPACK_IMPORTED_MODULE_5_prop_types___default","__WEBPACK_IMPORTED_MODULE_6_immutable__","__WEBPACK_IMPORTED_MODULE_7__icon_button__","__WEBPACK_IMPORTED_MODULE_8_react_intl__","__WEBPACK_IMPORTED_MODULE_9__is_mobile__","__WEBPACK_IMPORTED_MODULE_10_classnames__","__WEBPACK_IMPORTED_MODULE_10_classnames___default","__WEBPACK_IMPORTED_MODULE_11__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","context","router","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","className","href","src","alt","title","autoPlay","autoplay","aria-label","role","onMouseEnter","onMouseLeave","loop","muted","style","a","PureComponent","contextTypes","object","defaultProps","_React$PureComponent2","_temp3","_this2","_ret2","_len2","_key2","state","visible","sensitive","handleOpen","setState","onOpenMedia","media","handleRef","node","isStandaloneEligible","offsetWidth","componentWillReceiveProps","nextProps","_props2","_this3","_props3","intl","_state","children","take","map","i","warning","createElement","ref","spoiler-button--visible","formatMessage","icon","overlay"],"mappings":"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","file":"status/media_gallery-7642f779bf4243e58b78.js","sourcesContent":["webpackJsonp([26],{\n\n/***/ 159:\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_prop_types__ = __webpack_require__(5);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5_prop_types___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_5_prop_types__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_immutable__ = __webpack_require__(8);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6_immutable___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_6_immutable__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__icon_button__ = __webpack_require__(19);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8_react_intl__ = __webpack_require__(6);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__is_mobile__ = __webpack_require__(33);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_classnames__ = __webpack_require__(10);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_classnames___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_10_classnames__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__initial_state__ = __webpack_require__(18);\n\n\n\n\n\nvar _class, _temp2, _class2, _class3, _temp4;\n\n\n\n\n\n\n\n\n\n\n\nvar messages = Object(__WEBPACK_IMPORTED_MODULE_8_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 (_this.context.router && 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_11__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 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 }));\n } else if (attachment.get('type') === 'gifv') {\n var autoPlay = !Object(__WEBPACK_IMPORTED_MODULE_9__is_mobile__[\"a\" /* isIOS */])() && __WEBPACK_IMPORTED_MODULE_11__initial_state__[\"a\" /* autoPlayGif */];\n\n thumbnail = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('div', {\n className: __WEBPACK_IMPORTED_MODULE_10_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_10_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.contextTypes = {\n router: __WEBPACK_IMPORTED_MODULE_5_prop_types___default.a.object\n}, _class.defaultProps = {\n standalone: false,\n index: 0,\n size: 1\n}, _temp2);\n\nvar MediaGallery = Object(__WEBPACK_IMPORTED_MODULE_8_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\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 && _this2.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_6_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 (!visible && width) {\n // only need to forcibly set the height in \"sensitive\" mode\n style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);\n } else {\n // layout automatically, using image's natural aspect ratio\n style.height = '';\n }\n } else {\n // crop the image\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_8_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_8_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 { 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_8_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_0_babel_runtime_helpers_jsx___default()('div', {\n className: 'media-gallery',\n style: style\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('div', {\n className: __WEBPACK_IMPORTED_MODULE_10_classnames___default()('spoiler-button', { 'spoiler-button--visible': visible })\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()(__WEBPACK_IMPORTED_MODULE_7__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 })), children);\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-7642f779bf4243e58b78.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 } 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 contextTypes = {\n router: PropTypes.object,\n };\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 (this.context.router && 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 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 src={previewUrl} srcSet={srcSet} sizes={sizes} alt={attachment.get('description')} title={attachment.get('description')} />\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,\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 (!visible && width) {\n // only need to forcibly set the height in \"sensitive\" mode\n style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);\n } else {\n // layout automatically, using image's natural aspect ratio\n style.height = '';\n }\n } else {\n // crop the image\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 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}>\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":""}
projects / akkoma / blob