app/javascript/mastodon/containers/media_container.js

   1 import React, { PureComponent, Fragment } from 'react';
   2 import ReactDOM from 'react-dom';
   3 import PropTypes from 'prop-types';
   4 import { IntlProvider, addLocaleData } from 'react-intl';
   5 import { fromJS } from 'immutable';
   6 import { getLocale } from 'mastodon/locales';
   7 import { getScrollbarWidth } from 'mastodon/utils/scrollbar';
   8 import MediaGallery from 'mastodon/components/media_gallery';
   9 import Poll from 'mastodon/components/poll';
  10 import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
  11 import ModalRoot from 'mastodon/components/modal_root';
  12 import MediaModal from 'mastodon/features/ui/components/media_modal';
  13 import Video from 'mastodon/features/video';
  14 import Card from 'mastodon/features/status/components/card';
  15 import Audio from 'mastodon/features/audio';
  16
  17 const { localeData, messages } = getLocale();
  18 addLocaleData(localeData);
  19
  20 const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll, Hashtag, Audio };
  21
  22 export default class MediaContainer extends PureComponent {
  23
  24   static propTypes = {
  25     locale: PropTypes.string.isRequired,
  26     components: PropTypes.object.isRequired,
  27   };
  28
  29   state = {
  30     media: null,
  31     index: null,
  32     time: null,
  33     backgroundColor: null,
  34     options: null,
  35   };
  36
  37   handleOpenMedia = (media, index) => {
  38     document.body.classList.add('with-modals--active');
  39     document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
  40
  41     this.setState({ media, index });
  42   }
  43
  44   handleOpenVideo = (options) => {
  45     const { components } = this.props;
  46     const { media } = JSON.parse(components[options.componetIndex].getAttribute('data-props'));
  47     const mediaList = fromJS(media);
  48
  49     document.body.classList.add('with-modals--active');
  50     document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
  51
  52     this.setState({ media: mediaList, options });
  53   }
  54
  55   handleCloseMedia = () => {
  56     document.body.classList.remove('with-modals--active');
  57     document.documentElement.style.marginRight = 0;
  58
  59     this.setState({
  60       media: null,
  61       index: null,
  62       time: null,
  63       backgroundColor: null,
  64       options: null,
  65     });
  66   }
  67
  68   setBackgroundColor = color => {
  69     this.setState({ backgroundColor: color });
  70   }
  71
  72   render () {
  73     const { locale, components } = this.props;
  74
  75     return (
  76       <IntlProvider locale={locale} messages={messages}>
  77         <Fragment>
  78           {[].map.call(components, (component, i) => {
  79             const componentName = component.getAttribute('data-component');
  80             const Component = MEDIA_COMPONENTS[componentName];
  81             const { media, card, poll, hashtag, ...props } = JSON.parse(component.getAttribute('data-props'));
  82
  83             Object.assign(props, {
  84               ...(media   ? { media:   fromJS(media)   } : {}),
  85               ...(card    ? { card:    fromJS(card)    } : {}),
  86               ...(poll    ? { poll:    fromJS(poll)    } : {}),
  87               ...(hashtag ? { hashtag: fromJS(hashtag) } : {}),
  88
  89               ...(componentName === 'Video' ? {
  90                 componetIndex: i,
  91                 onOpenVideo: this.handleOpenVideo,
  92               } : {
  93                 onOpenMedia: this.handleOpenMedia,
  94               }),
  95             });
  96
  97             return ReactDOM.createPortal(
  98               <Component {...props} key={`media-${i}`} />,
  99               component,
 100             );
 101           })}
 102
 103           <ModalRoot backgroundColor={this.state.backgroundColor} onClose={this.handleCloseMedia}>
 104             {this.state.media && (
 105               <MediaModal
 106                 media={this.state.media}
 107                 index={this.state.index || 0}
 108                 currentTime={this.state.options?.startTime}
 109                 autoPlay={this.state.options?.autoPlay}
 110                 volume={this.state.options?.defaultVolume}
 111                 onClose={this.handleCloseMedia}
 112                 onChangeBackgroundColor={this.setBackgroundColor}
 113               />
 114             )}
 115           </ModalRoot>
 116         </Fragment>
 117       </IntlProvider>
 118     );
 119   }
 120
 121 }