{"version":3,"sources":["webpack:///status/media_gallery.js","webpack:///./app/javascript/mastodon/components/media_gallery.js"],"names":["webpackJsonp","154","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([25],{\n\n/***/ 154:\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__(12);\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":""}