From 81ef21a0c802f1d905f37a2a818544a8b400793c Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Sat, 25 Feb 2023 14:34:32 +0100 Subject: [Glitch] Rename JSX files with proper `.jsx` extension Port 44a7d87cb1f5df953b6c14c16c59e2e4ead1bcb9 to glitch-soc Signed-off-by: Claire --- .../glitch/containers/account_container.js | 72 ------------ .../glitch/containers/account_container.jsx | 72 ++++++++++++ .../flavours/glitch/containers/admin_component.js | 26 ----- .../flavours/glitch/containers/admin_component.jsx | 26 +++++ .../glitch/containers/compose_container.js | 41 ------- .../glitch/containers/compose_container.jsx | 41 +++++++ .../flavours/glitch/containers/domain_container.js | 33 ------ .../glitch/containers/domain_container.jsx | 33 ++++++ .../flavours/glitch/containers/mastodon.js | 102 ----------------- .../flavours/glitch/containers/mastodon.jsx | 102 +++++++++++++++++ .../flavours/glitch/containers/media_container.js | 121 --------------------- .../flavours/glitch/containers/media_container.jsx | 121 +++++++++++++++++++++ 12 files changed, 395 insertions(+), 395 deletions(-) delete mode 100644 app/javascript/flavours/glitch/containers/account_container.js create mode 100644 app/javascript/flavours/glitch/containers/account_container.jsx delete mode 100644 app/javascript/flavours/glitch/containers/admin_component.js create mode 100644 app/javascript/flavours/glitch/containers/admin_component.jsx delete mode 100644 app/javascript/flavours/glitch/containers/compose_container.js create mode 100644 app/javascript/flavours/glitch/containers/compose_container.jsx delete mode 100644 app/javascript/flavours/glitch/containers/domain_container.js create mode 100644 app/javascript/flavours/glitch/containers/domain_container.jsx delete mode 100644 app/javascript/flavours/glitch/containers/mastodon.js create mode 100644 app/javascript/flavours/glitch/containers/mastodon.jsx delete mode 100644 app/javascript/flavours/glitch/containers/media_container.js create mode 100644 app/javascript/flavours/glitch/containers/media_container.jsx (limited to 'app/javascript/flavours/glitch/containers') diff --git a/app/javascript/flavours/glitch/containers/account_container.js b/app/javascript/flavours/glitch/containers/account_container.js deleted file mode 100644 index 5b57d730f..000000000 --- a/app/javascript/flavours/glitch/containers/account_container.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import { makeGetAccount } from 'flavours/glitch/selectors'; -import Account from 'flavours/glitch/components/account'; -import { - followAccount, - unfollowAccount, - blockAccount, - unblockAccount, - muteAccount, - unmuteAccount, -} from 'flavours/glitch/actions/accounts'; -import { openModal } from 'flavours/glitch/actions/modal'; -import { initMuteModal } from 'flavours/glitch/actions/mutes'; -import { unfollowModal } from 'flavours/glitch/initial_state'; - -const messages = defineMessages({ - unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, -}); - -const makeMapStateToProps = () => { - const getAccount = makeGetAccount(); - - const mapStateToProps = (state, props) => ({ - account: getAccount(state, props.id), - }); - - return mapStateToProps; -}; - -const mapDispatchToProps = (dispatch, { intl }) => ({ - - onFollow (account) { - if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { - if (unfollowModal) { - dispatch(openModal('CONFIRM', { - message: @{account.get('acct')} }} />, - confirm: intl.formatMessage(messages.unfollowConfirm), - onConfirm: () => dispatch(unfollowAccount(account.get('id'))), - })); - } else { - dispatch(unfollowAccount(account.get('id'))); - } - } else { - dispatch(followAccount(account.get('id'))); - } - }, - - onBlock (account) { - if (account.getIn(['relationship', 'blocking'])) { - dispatch(unblockAccount(account.get('id'))); - } else { - dispatch(blockAccount(account.get('id'))); - } - }, - - onMute (account) { - if (account.getIn(['relationship', 'muting'])) { - dispatch(unmuteAccount(account.get('id'))); - } else { - dispatch(initMuteModal(account)); - } - }, - - - onMuteNotifications (account, notifications) { - dispatch(muteAccount(account.get('id'), notifications)); - }, -}); - -export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account)); diff --git a/app/javascript/flavours/glitch/containers/account_container.jsx b/app/javascript/flavours/glitch/containers/account_container.jsx new file mode 100644 index 000000000..5b57d730f --- /dev/null +++ b/app/javascript/flavours/glitch/containers/account_container.jsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { makeGetAccount } from 'flavours/glitch/selectors'; +import Account from 'flavours/glitch/components/account'; +import { + followAccount, + unfollowAccount, + blockAccount, + unblockAccount, + muteAccount, + unmuteAccount, +} from 'flavours/glitch/actions/accounts'; +import { openModal } from 'flavours/glitch/actions/modal'; +import { initMuteModal } from 'flavours/glitch/actions/mutes'; +import { unfollowModal } from 'flavours/glitch/initial_state'; + +const messages = defineMessages({ + unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' }, +}); + +const makeMapStateToProps = () => { + const getAccount = makeGetAccount(); + + const mapStateToProps = (state, props) => ({ + account: getAccount(state, props.id), + }); + + return mapStateToProps; +}; + +const mapDispatchToProps = (dispatch, { intl }) => ({ + + onFollow (account) { + if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { + if (unfollowModal) { + dispatch(openModal('CONFIRM', { + message: @{account.get('acct')} }} />, + confirm: intl.formatMessage(messages.unfollowConfirm), + onConfirm: () => dispatch(unfollowAccount(account.get('id'))), + })); + } else { + dispatch(unfollowAccount(account.get('id'))); + } + } else { + dispatch(followAccount(account.get('id'))); + } + }, + + onBlock (account) { + if (account.getIn(['relationship', 'blocking'])) { + dispatch(unblockAccount(account.get('id'))); + } else { + dispatch(blockAccount(account.get('id'))); + } + }, + + onMute (account) { + if (account.getIn(['relationship', 'muting'])) { + dispatch(unmuteAccount(account.get('id'))); + } else { + dispatch(initMuteModal(account)); + } + }, + + + onMuteNotifications (account, notifications) { + dispatch(muteAccount(account.get('id'), notifications)); + }, +}); + +export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account)); diff --git a/app/javascript/flavours/glitch/containers/admin_component.js b/app/javascript/flavours/glitch/containers/admin_component.js deleted file mode 100644 index 64dabac8b..000000000 --- a/app/javascript/flavours/glitch/containers/admin_component.js +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import { IntlProvider, addLocaleData } from 'react-intl'; -import { getLocale } from 'mastodon/locales'; - -const { localeData, messages } = getLocale(); -addLocaleData(localeData); - -export default class AdminComponent extends React.PureComponent { - - static propTypes = { - locale: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, - }; - - render () { - const { locale, children } = this.props; - - return ( - - {children} - - ); - } - -} diff --git a/app/javascript/flavours/glitch/containers/admin_component.jsx b/app/javascript/flavours/glitch/containers/admin_component.jsx new file mode 100644 index 000000000..64dabac8b --- /dev/null +++ b/app/javascript/flavours/glitch/containers/admin_component.jsx @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { IntlProvider, addLocaleData } from 'react-intl'; +import { getLocale } from 'mastodon/locales'; + +const { localeData, messages } = getLocale(); +addLocaleData(localeData); + +export default class AdminComponent extends React.PureComponent { + + static propTypes = { + locale: PropTypes.string.isRequired, + children: PropTypes.node.isRequired, + }; + + render () { + const { locale, children } = this.props; + + return ( + + {children} + + ); + } + +} diff --git a/app/javascript/flavours/glitch/containers/compose_container.js b/app/javascript/flavours/glitch/containers/compose_container.js deleted file mode 100644 index 1e49b89a0..000000000 --- a/app/javascript/flavours/glitch/containers/compose_container.js +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import { Provider } from 'react-redux'; -import PropTypes from 'prop-types'; -import configureStore from 'flavours/glitch/store/configureStore'; -import { hydrateStore } from 'flavours/glitch/actions/store'; -import { IntlProvider, addLocaleData } from 'react-intl'; -import { getLocale } from 'mastodon/locales'; -import Compose from 'flavours/glitch/features/standalone/compose'; -import initialState from 'flavours/glitch/initial_state'; -import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis'; - -const { localeData, messages } = getLocale(); -addLocaleData(localeData); - -const store = configureStore(); - -if (initialState) { - store.dispatch(hydrateStore(initialState)); -} - -store.dispatch(fetchCustomEmojis()); - -export default class TimelineContainer extends React.PureComponent { - - static propTypes = { - locale: PropTypes.string.isRequired, - }; - - render () { - const { locale } = this.props; - - return ( - - - - - - ); - } - -} diff --git a/app/javascript/flavours/glitch/containers/compose_container.jsx b/app/javascript/flavours/glitch/containers/compose_container.jsx new file mode 100644 index 000000000..1e49b89a0 --- /dev/null +++ b/app/javascript/flavours/glitch/containers/compose_container.jsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { Provider } from 'react-redux'; +import PropTypes from 'prop-types'; +import configureStore from 'flavours/glitch/store/configureStore'; +import { hydrateStore } from 'flavours/glitch/actions/store'; +import { IntlProvider, addLocaleData } from 'react-intl'; +import { getLocale } from 'mastodon/locales'; +import Compose from 'flavours/glitch/features/standalone/compose'; +import initialState from 'flavours/glitch/initial_state'; +import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis'; + +const { localeData, messages } = getLocale(); +addLocaleData(localeData); + +const store = configureStore(); + +if (initialState) { + store.dispatch(hydrateStore(initialState)); +} + +store.dispatch(fetchCustomEmojis()); + +export default class TimelineContainer extends React.PureComponent { + + static propTypes = { + locale: PropTypes.string.isRequired, + }; + + render () { + const { locale } = this.props; + + return ( + + + + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/containers/domain_container.js b/app/javascript/flavours/glitch/containers/domain_container.js deleted file mode 100644 index e92e102ab..000000000 --- a/app/javascript/flavours/glitch/containers/domain_container.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { connect } from 'react-redux'; -import { blockDomain, unblockDomain } from '../actions/domain_blocks'; -import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; -import Domain from '../components/domain'; -import { openModal } from '../actions/modal'; - -const messages = defineMessages({ - blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, -}); - -const makeMapStateToProps = () => { - const mapStateToProps = (state, { }) => ({ - }); - - return mapStateToProps; -}; - -const mapDispatchToProps = (dispatch, { intl }) => ({ - onBlockDomain (domain) { - dispatch(openModal('CONFIRM', { - message: {domain} }} />, - confirm: intl.formatMessage(messages.blockDomainConfirm), - onConfirm: () => dispatch(blockDomain(domain)), - })); - }, - - onUnblockDomain (domain) { - dispatch(unblockDomain(domain)); - }, -}); - -export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain)); diff --git a/app/javascript/flavours/glitch/containers/domain_container.jsx b/app/javascript/flavours/glitch/containers/domain_container.jsx new file mode 100644 index 000000000..e92e102ab --- /dev/null +++ b/app/javascript/flavours/glitch/containers/domain_container.jsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { blockDomain, unblockDomain } from '../actions/domain_blocks'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import Domain from '../components/domain'; +import { openModal } from '../actions/modal'; + +const messages = defineMessages({ + blockDomainConfirm: { id: 'confirmations.domain_block.confirm', defaultMessage: 'Block entire domain' }, +}); + +const makeMapStateToProps = () => { + const mapStateToProps = (state, { }) => ({ + }); + + return mapStateToProps; +}; + +const mapDispatchToProps = (dispatch, { intl }) => ({ + onBlockDomain (domain) { + dispatch(openModal('CONFIRM', { + message: {domain} }} />, + confirm: intl.formatMessage(messages.blockDomainConfirm), + onConfirm: () => dispatch(blockDomain(domain)), + })); + }, + + onUnblockDomain (domain) { + dispatch(unblockDomain(domain)); + }, +}); + +export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Domain)); diff --git a/app/javascript/flavours/glitch/containers/mastodon.js b/app/javascript/flavours/glitch/containers/mastodon.js deleted file mode 100644 index dd7623a81..000000000 --- a/app/javascript/flavours/glitch/containers/mastodon.js +++ /dev/null @@ -1,102 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import { Helmet } from 'react-helmet'; -import { IntlProvider, addLocaleData } from 'react-intl'; -import { Provider as ReduxProvider } from 'react-redux'; -import { BrowserRouter, Route } from 'react-router-dom'; -import { ScrollContext } from 'react-router-scroll-4'; -import configureStore from 'flavours/glitch/store/configureStore'; -import UI from 'flavours/glitch/features/ui'; -import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis'; -import { hydrateStore } from 'flavours/glitch/actions/store'; -import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_settings'; -import { connectUserStream } from 'flavours/glitch/actions/streaming'; -import ErrorBoundary from 'flavours/glitch/components/error_boundary'; -import initialState, { title as siteTitle } from 'flavours/glitch/initial_state'; -import { getLocale } from 'locales'; - -const { localeData, messages } = getLocale(); -addLocaleData(localeData); - -const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`; - -export const store = configureStore(); -const hydrateAction = hydrateStore(initialState); -store.dispatch(hydrateAction); - -// check for deprecated local settings -store.dispatch(checkDeprecatedLocalSettings()); - -if (initialState.meta.me) { - store.dispatch(fetchCustomEmojis()); -} - -const createIdentityContext = state => ({ - signedIn: !!state.meta.me, - accountId: state.meta.me, - disabledAccountId: state.meta.disabled_account_id, - accessToken: state.meta.access_token, - permissions: state.role ? state.role.permissions : 0, -}); - -export default class Mastodon extends React.PureComponent { - - static propTypes = { - locale: PropTypes.string.isRequired, - }; - - static childContextTypes = { - identity: PropTypes.shape({ - signedIn: PropTypes.bool.isRequired, - accountId: PropTypes.string, - disabledAccountId: PropTypes.string, - accessToken: PropTypes.string, - }).isRequired, - }; - - identity = createIdentityContext(initialState); - - getChildContext() { - return { - identity: this.identity, - }; - } - - componentDidMount() { - if (this.identity.signedIn) { - this.disconnect = store.dispatch(connectUserStream()); - } - } - - componentWillUnmount () { - if (this.disconnect) { - this.disconnect(); - this.disconnect = null; - } - } - - shouldUpdateScroll (_, { location }) { - return !(location.state?.mastodonModalKey); - } - - render () { - const { locale } = this.props; - - return ( - - - - - - - - - - - - - - ); - } - -} diff --git a/app/javascript/flavours/glitch/containers/mastodon.jsx b/app/javascript/flavours/glitch/containers/mastodon.jsx new file mode 100644 index 000000000..dd7623a81 --- /dev/null +++ b/app/javascript/flavours/glitch/containers/mastodon.jsx @@ -0,0 +1,102 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { Helmet } from 'react-helmet'; +import { IntlProvider, addLocaleData } from 'react-intl'; +import { Provider as ReduxProvider } from 'react-redux'; +import { BrowserRouter, Route } from 'react-router-dom'; +import { ScrollContext } from 'react-router-scroll-4'; +import configureStore from 'flavours/glitch/store/configureStore'; +import UI from 'flavours/glitch/features/ui'; +import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis'; +import { hydrateStore } from 'flavours/glitch/actions/store'; +import { checkDeprecatedLocalSettings } from 'flavours/glitch/actions/local_settings'; +import { connectUserStream } from 'flavours/glitch/actions/streaming'; +import ErrorBoundary from 'flavours/glitch/components/error_boundary'; +import initialState, { title as siteTitle } from 'flavours/glitch/initial_state'; +import { getLocale } from 'locales'; + +const { localeData, messages } = getLocale(); +addLocaleData(localeData); + +const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`; + +export const store = configureStore(); +const hydrateAction = hydrateStore(initialState); +store.dispatch(hydrateAction); + +// check for deprecated local settings +store.dispatch(checkDeprecatedLocalSettings()); + +if (initialState.meta.me) { + store.dispatch(fetchCustomEmojis()); +} + +const createIdentityContext = state => ({ + signedIn: !!state.meta.me, + accountId: state.meta.me, + disabledAccountId: state.meta.disabled_account_id, + accessToken: state.meta.access_token, + permissions: state.role ? state.role.permissions : 0, +}); + +export default class Mastodon extends React.PureComponent { + + static propTypes = { + locale: PropTypes.string.isRequired, + }; + + static childContextTypes = { + identity: PropTypes.shape({ + signedIn: PropTypes.bool.isRequired, + accountId: PropTypes.string, + disabledAccountId: PropTypes.string, + accessToken: PropTypes.string, + }).isRequired, + }; + + identity = createIdentityContext(initialState); + + getChildContext() { + return { + identity: this.identity, + }; + } + + componentDidMount() { + if (this.identity.signedIn) { + this.disconnect = store.dispatch(connectUserStream()); + } + } + + componentWillUnmount () { + if (this.disconnect) { + this.disconnect(); + this.disconnect = null; + } + } + + shouldUpdateScroll (_, { location }) { + return !(location.state?.mastodonModalKey); + } + + render () { + const { locale } = this.props; + + return ( + + + + + + + + + + + + + + ); + } + +} diff --git a/app/javascript/flavours/glitch/containers/media_container.js b/app/javascript/flavours/glitch/containers/media_container.js deleted file mode 100644 index 37b5484e6..000000000 --- a/app/javascript/flavours/glitch/containers/media_container.js +++ /dev/null @@ -1,121 +0,0 @@ -import React, { PureComponent, Fragment } from 'react'; -import ReactDOM from 'react-dom'; -import PropTypes from 'prop-types'; -import { IntlProvider, addLocaleData } from 'react-intl'; -import { fromJS } from 'immutable'; -import { getLocale } from 'mastodon/locales'; -import { getScrollbarWidth } from 'flavours/glitch/utils/scrollbar'; -import MediaGallery from 'flavours/glitch/components/media_gallery'; -import Poll from 'flavours/glitch/components/poll'; -import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'; -import ModalRoot from 'flavours/glitch/components/modal_root'; -import MediaModal from 'flavours/glitch/features/ui/components/media_modal'; -import Video from 'flavours/glitch/features/video'; -import Card from 'flavours/glitch/features/status/components/card'; -import Audio from 'flavours/glitch/features/audio'; - -const { localeData, messages } = getLocale(); -addLocaleData(localeData); - -const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio }; - -export default class MediaContainer extends PureComponent { - - static propTypes = { - locale: PropTypes.string.isRequired, - components: PropTypes.object.isRequired, - }; - - state = { - media: null, - index: null, - time: null, - backgroundColor: null, - options: null, - }; - - handleOpenMedia = (media, index) => { - document.body.classList.add('with-modals--active'); - document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; - - this.setState({ media, index }); - }; - - handleOpenVideo = (options) => { - const { components } = this.props; - const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props')); - const mediaList = fromJS(media); - - document.body.classList.add('with-modals--active'); - document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; - - this.setState({ media: mediaList, options }); - }; - - handleCloseMedia = () => { - document.body.classList.remove('with-modals--active'); - document.documentElement.style.marginRight = 0; - - this.setState({ - media: null, - index: null, - time: null, - backgroundColor: null, - options: null, - }); - }; - - setBackgroundColor = color => { - this.setState({ backgroundColor: color }); - }; - - render () { - const { locale, components } = this.props; - - return ( - - - {[].map.call(components, (component, i) => { - const componentName = component.getAttribute('data-component'); - const Component = MEDIA_COMPONENTS[componentName]; - const { media, card, poll, hashtag, ...props } = JSON.parse(component.getAttribute('data-props')); - - Object.assign(props, { - ...(media ? { media: fromJS(media) } : {}), - ...(card ? { card: fromJS(card) } : {}), - ...(poll ? { poll: fromJS(poll) } : {}), - ...(hashtag ? { hashtag: fromJS(hashtag) } : {}), - - ...(componentName === 'Video' ? { - componentIndex: i, - onOpenVideo: this.handleOpenVideo, - } : { - onOpenMedia: this.handleOpenMedia, - }), - }); - - return ReactDOM.createPortal( - , - component, - ); - })} - - - {this.state.media && ( - - )} - - - - ); - } - -} diff --git a/app/javascript/flavours/glitch/containers/media_container.jsx b/app/javascript/flavours/glitch/containers/media_container.jsx new file mode 100644 index 000000000..37b5484e6 --- /dev/null +++ b/app/javascript/flavours/glitch/containers/media_container.jsx @@ -0,0 +1,121 @@ +import React, { PureComponent, Fragment } from 'react'; +import ReactDOM from 'react-dom'; +import PropTypes from 'prop-types'; +import { IntlProvider, addLocaleData } from 'react-intl'; +import { fromJS } from 'immutable'; +import { getLocale } from 'mastodon/locales'; +import { getScrollbarWidth } from 'flavours/glitch/utils/scrollbar'; +import MediaGallery from 'flavours/glitch/components/media_gallery'; +import Poll from 'flavours/glitch/components/poll'; +import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag'; +import ModalRoot from 'flavours/glitch/components/modal_root'; +import MediaModal from 'flavours/glitch/features/ui/components/media_modal'; +import Video from 'flavours/glitch/features/video'; +import Card from 'flavours/glitch/features/status/components/card'; +import Audio from 'flavours/glitch/features/audio'; + +const { localeData, messages } = getLocale(); +addLocaleData(localeData); + +const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio }; + +export default class MediaContainer extends PureComponent { + + static propTypes = { + locale: PropTypes.string.isRequired, + components: PropTypes.object.isRequired, + }; + + state = { + media: null, + index: null, + time: null, + backgroundColor: null, + options: null, + }; + + handleOpenMedia = (media, index) => { + document.body.classList.add('with-modals--active'); + document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; + + this.setState({ media, index }); + }; + + handleOpenVideo = (options) => { + const { components } = this.props; + const { media } = JSON.parse(components[options.componentIndex].getAttribute('data-props')); + const mediaList = fromJS(media); + + document.body.classList.add('with-modals--active'); + document.documentElement.style.marginRight = `${getScrollbarWidth()}px`; + + this.setState({ media: mediaList, options }); + }; + + handleCloseMedia = () => { + document.body.classList.remove('with-modals--active'); + document.documentElement.style.marginRight = 0; + + this.setState({ + media: null, + index: null, + time: null, + backgroundColor: null, + options: null, + }); + }; + + setBackgroundColor = color => { + this.setState({ backgroundColor: color }); + }; + + render () { + const { locale, components } = this.props; + + return ( + + + {[].map.call(components, (component, i) => { + const componentName = component.getAttribute('data-component'); + const Component = MEDIA_COMPONENTS[componentName]; + const { media, card, poll, hashtag, ...props } = JSON.parse(component.getAttribute('data-props')); + + Object.assign(props, { + ...(media ? { media: fromJS(media) } : {}), + ...(card ? { card: fromJS(card) } : {}), + ...(poll ? { poll: fromJS(poll) } : {}), + ...(hashtag ? { hashtag: fromJS(hashtag) } : {}), + + ...(componentName === 'Video' ? { + componentIndex: i, + onOpenVideo: this.handleOpenVideo, + } : { + onOpenMedia: this.handleOpenMedia, + }), + }); + + return ReactDOM.createPortal( + , + component, + ); + })} + + + {this.state.media && ( + + )} + + + + ); + } + +} -- cgit