{"version":3,"sources":["webpack:///./app/javascript/mastodon/containers/media_container.js"],"names":["localeData","messages","getLocale","addLocaleData","MEDIA_COMPONENTS","MediaGallery","Video","Card","Poll","Hashtag","Audio","MediaContainer","PureComponent","state","media","index","time","backgroundColor","options","handleOpenMedia","document","body","classList","add","documentElement","style","marginRight","getScrollbarWidth","this","setState","handleOpenVideo","components","props","JSON","parse","componentIndex","getAttribute","mediaList","fromJS","handleCloseMedia","remove","setBackgroundColor","color","render","locale","map","call","component","i","componentName","Component","card","poll","hashtag","Object","assign","onOpenVideo","onOpenMedia","ReactDOM","createPortal","key","onClose","currentTime","startTime","autoPlay","volume","defaultVolume","onChangeBackgroundColor"],"mappings":"mSAgBA,MAAM,WAAEA,EAAF,SAAcC,GAAaC,sBACjCC,YAAcH,GAEd,MAAMI,EAAmB,CAAEC,uBAAcC,gBAAOC,SAAMC,SAAMC,YAASC,iBAEtD,MAAMC,UAAuBC,gBAAe,cAAD,yBAOxDC,MAAQ,CACNC,MAAO,KACPC,MAAO,KACPC,KAAM,KACNC,gBAAiB,KACjBC,QAAS,MAZ6C,KAexDC,gBAAkB,CAACL,EAAOC,KACxBK,SAASC,KAAKC,UAAUC,IAAI,uBAC5BH,SAASI,gBAAgBC,MAAMC,YAAiBC,cAAhD,KAEAC,KAAKC,SAAS,CAAEf,QAAOC,WAnB+B,KAsBxDe,gBAAmBZ,IACjB,MAAM,WAAEa,GAAeH,KAAKI,OACtB,MAAElB,GAAUmB,KAAKC,MAAMH,EAAWb,EAAQiB,gBAAgBC,aAAa,eACvEC,EAAYC,iBAAOxB,GAEzBM,SAASC,KAAKC,UAAUC,IAAI,uBAC5BH,SAASI,gBAAgBC,MAAMC,YAAiBC,cAAhD,KAEAC,KAAKC,SAAS,CAAEf,MAAOuB,EAAWnB,aA9BoB,KAiCxDqB,iBAAmB,KACjBnB,SAASC,KAAKC,UAAUkB,OAAO,uBAC/BpB,SAASI,gBAAgBC,MAAMC,YAAc,EAE7CE,KAAKC,SAAS,CACZf,MAAO,KACPC,MAAO,KACPC,KAAM,KACNC,gBAAiB,KACjBC,QAAS,QA1C2C,KA8CxDuB,mBAAqBC,IACnBd,KAAKC,SAAS,CAAEZ,gBAAiByB,KAGnCC,SAAW,IAAD,MACR,MAAM,OAAEC,EAAF,WAAUb,GAAeH,KAAKI,MAEpC,OACE,YAAC,IAAD,CAAcY,OAAQA,EAAQ3C,SAAUA,QAAxC,EACE,YAAC,WAAD,UACG,GAAG4C,IAAIC,KAAKf,GAAY,CAACgB,EAAWC,KACnC,MAAMC,EAAgBF,EAAUX,aAAa,kBACvCc,EAAY9C,EAAiB6C,IAC7B,MAAEnC,EAAF,KAASqC,EAAT,KAAeC,EAAf,QAAqBC,KAAYrB,GAAUC,KAAKC,MAAMa,EAAUX,aAAa,eAgBnF,OAdAkB,OAAOC,OAAOvB,EAAO,IACflB,EAAU,CAAEA,MAASwB,iBAAOxB,IAAa,MACzCqC,EAAU,CAAEA,KAASb,iBAAOa,IAAa,MACzCC,EAAU,CAAEA,KAASd,iBAAOc,IAAa,MACzCC,EAAU,CAAEA,QAASf,iBAAOe,IAAa,MAEvB,UAAlBJ,EAA4B,CAC9Bd,eAAgBa,EAChBQ,YAAa5B,KAAKE,iBAChB,CACF2B,YAAa7B,KAAKT,mBAIfuC,IAASC,aACd,kBAACT,EAAD,eAAelB,EAAf,CAAsB4B,IAAG,SAAWZ,KACpCD,MAIJ,YAAC,IAAD,CAAW9B,gBAAiBW,KAAKf,MAAMI,gBAAiB4C,QAASjC,KAAKW,uBAAtE,EACGX,KAAKf,MAAMC,OACV,YAAC,IAAD,CACEA,MAAOc,KAAKf,MAAMC,MAClBC,MAAOa,KAAKf,MAAME,OAAS,EAC3B+C,YAAW,SAAElC,KAAKf,MAAMK,cAAb,EAAE,EAAoB6C,UACjCC,SAAQ,SAAEpC,KAAKf,MAAMK,cAAb,EAAE,EAAoB8C,SAC9BC,OAAM,SAAErC,KAAKf,MAAMK,cAAb,EAAE,EAAoBgD,cAC5BL,QAASjC,KAAKW,iBACd4B,wBAAyBvC,KAAKa","file":"js/containers/media_container-07287e5a21c7baa2b7b7.chunk.js","sourcesContent":["import React, { PureComponent, Fragment } from 'react';\nimport ReactDOM from 'react-dom';\nimport PropTypes from 'prop-types';\nimport { IntlProvider, addLocaleData } from 'react-intl';\nimport { fromJS } from 'immutable';\nimport { getLocale } from 'mastodon/locales';\nimport { getScrollbarWidth } from 'mastodon/utils/scrollbar';\nimport MediaGallery from 'mastodon/components/media_gallery';\nimport Poll from 'mastodon/components/poll';\nimport { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';\nimport ModalRoot from 'mastodon/components/modal_root';\nimport MediaModal from 'mastodon/features/ui/components/media_modal';\nimport Video from 'mastodon/features/video';\nimport Card from 'mastodon/features/status/components/card';\nimport Audio from 'mastodon/features/audio';\n\nconst { localeData, messages } = getLocale();\naddLocaleData(localeData);\n\nconst MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };\n\nexport default class MediaContainer extends PureComponent {\n\n  static propTypes = {\n    locale: PropTypes.string.isRequired,\n    components: PropTypes.object.isRequired,\n  };\n\n  state = {\n    media: null,\n    index: null,\n    time: null,\n    backgroundColor: null,\n    options: null,\n  };\n\n  handleOpenMedia = (media, index) => {\n    document.body.classList.add('with-modals--active');\n    document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;\n\n    this.setState({ media, index });\n  }\n\n  handleOpenVideo = (options) => {\n    const { components } = this.props;\n    const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props'));\n    const mediaList = fromJS(media);\n\n    document.body.classList.add('with-modals--active');\n    document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;\n\n    this.setState({ media: mediaList, options });\n  }\n\n  handleCloseMedia = () => {\n    document.body.classList.remove('with-modals--active');\n    document.documentElement.style.marginRight = 0;\n\n    this.setState({\n      media: null,\n      index: null,\n      time: null,\n      backgroundColor: null,\n      options: null,\n    });\n  }\n\n  setBackgroundColor = color => {\n    this.setState({ backgroundColor: color });\n  }\n\n  render () {\n    const { locale, components } = this.props;\n\n    return (\n      <IntlProvider locale={locale} messages={messages}>\n        <Fragment>\n          {[].map.call(components, (component, i) => {\n            const componentName = component.getAttribute('data-component');\n            const Component = MEDIA_COMPONENTS[componentName];\n            const { media, card, poll, hashtag, ...props } = JSON.parse(component.getAttribute('data-props'));\n\n            Object.assign(props, {\n              ...(media   ? { media:   fromJS(media)   } : {}),\n              ...(card    ? { card:    fromJS(card)    } : {}),\n              ...(poll    ? { poll:    fromJS(poll)    } : {}),\n              ...(hashtag ? { hashtag: fromJS(hashtag) } : {}),\n\n              ...(componentName === 'Video' ? {\n                componentIndex: i,\n                onOpenVideo: this.handleOpenVideo,\n              } : {\n                onOpenMedia: this.handleOpenMedia,\n              }),\n            });\n\n            return ReactDOM.createPortal(\n              <Component {...props} key={`media-${i}`} />,\n              component,\n            );\n          })}\n\n          <ModalRoot backgroundColor={this.state.backgroundColor} onClose={this.handleCloseMedia}>\n            {this.state.media && (\n              <MediaModal\n                media={this.state.media}\n                index={this.state.index || 0}\n                currentTime={this.state.options?.startTime}\n                autoPlay={this.state.options?.autoPlay}\n                volume={this.state.options?.defaultVolume}\n                onClose={this.handleCloseMedia}\n                onChangeBackgroundColor={this.setBackgroundColor}\n              />\n            )}\n          </ModalRoot>\n        </Fragment>\n      </IntlProvider>\n    );\n  }\n\n}\n"],"sourceRoot":""}