1 line
No EOL
32 KiB
Text
1 line
No EOL
32 KiB
Text
{"version":3,"sources":["webpack:///status/media_gallery.js","webpack:///./app/javascript/mastodon/components/media_gallery.js"],"names":["webpackJsonp","820","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","displayWidth","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","aria-label","role","loop","controls","autoPlay","autoplay","onMouseEnter","onMouseLeave","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([33],{\n\n/***/ 820:\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__(7);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__is_mobile__ = __webpack_require__(43);\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__(13);\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 displayWidth = _props.displayWidth;\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 ? displayWidth * (width / 100) + 'px' : 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') === 'audio') {\n thumbnail = __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('div', {\n className: 'media-gallery__audio'\n }, void 0, __WEBPACK_IMPORTED_MODULE_0_babel_runtime_helpers_jsx___default()('audio', {\n className: 'media-gallery__item-audio-thumbnail',\n 'aria-label': attachment.get('description'),\n role: 'application',\n src: attachment.get('url'),\n loop: true,\n controls: true\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 displayWidth: width\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 displayWidth: width\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 displayWidth: PropTypes.number,\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, displayWidth } = 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 ? `${displayWidth * (width / 100)}px` : 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') === 'audio') {\n thumbnail = (\n <div className='media-gallery__audio'>\n <audio\n className='media-gallery__item-audio-thumbnail'\n aria-label={attachment.get('description')}\n role='application'\n src={attachment.get('url')}\n loop\n controls\n />\n </div>\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)} displayWidth={width} />;\n } else {\n children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} />);\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":""} |