add profile media panel

app/soapbox/features/ui/components/profile_media_panel.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+import { getAccountGallery } from 'soapbox/selectors';
+import { openModal } from 'soapbox/actions/modal';
+import { expandAccountMediaTimeline } from '../../../actions/timelines';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import MediaItem from '../../account_gallery/components/media_item';
+import Icon from 'soapbox/components/icon';
+
+class ProfileMediaPanel extends ImmutablePureComponent {
+
+  static propTypes = {
+    account: ImmutablePropTypes.map,
+    attachments: ImmutablePropTypes.list,
+    dispatch: PropTypes.func.isRequired,
+  };
+
+  state = {
+    width: 255,
+  };
+
+  handleOpenMedia = attachment => {
+    if (attachment.get('type') === 'video') {
+      this.props.dispatch(openModal('VIDEO', { media: attachment, status: attachment.get('status') }));
+    } else {
+      const media = attachment.getIn(['status', 'media_attachments']);
+      const index = media.findIndex(x => x.get('id') === attachment.get('id'));
+
+      this.props.dispatch(openModal('MEDIA', { media, index, status: attachment.get('status'), account: attachment.get('account') }));
+    }
+  }
+
+  componentDidMount() {
+    const { account } = this.props;
+    const accountId = account.get('id');
+    this.props.dispatch(expandAccountMediaTimeline(accountId));
+  }
+
+  render() {
+    const { attachments } = this.props;
+    const { width } = this.state;
+    const nineAttachments = attachments.slice(0, 9);
+
+    if (attachments.isEmpty()) {
+      return null;
+    }
+
+    return (
+      <div className='media-panel'>
+        <div className='media-panel-header'>
+          <Icon id='camera' className='media-panel-header__icon' />
+          <span className='media-panel-header__label'>
+            <FormattedMessage id='media_panel.title' defaultMessage='Media' />
+          </span>
+        </div>
+        <div className='media-panel__content'>
+          <div className='media-panel__list'>
+            {nineAttachments.map((attachment, index) => (
+              <MediaItem
+                key={`${attachment.getIn(['status', 'id'])}+${attachment.get('id')}`}
+                attachment={attachment}
+                displayWidth={width}
+                onOpenMedia={this.handleOpenMedia}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+};
+
+const mapStateToProps = (state, { account }) => ({
+  attachments: getAccountGallery(state, account.get('id')),
+});
+
+export default injectIntl(
+  connect(mapStateToProps, null, null, {
+    forwardRef: true,
+  }
+  )(ProfileMediaPanel));

app/soapbox/pages/profile_page.js

@@ -9,9 +9,11 @@ import WhoToFollowPanel from '../features/ui/components/who_to_follow_panel';
 import LinkFooter from '../features/ui/components/link_footer';
 import SignUpPanel from '../features/ui/components/sign_up_panel';
 import ProfileInfoPanel from '../features/ui/components/profile_info_panel';
+import ProfileMediaPanel from '../features/ui/components/profile_media_panel';
 import { acctFull } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 import { makeGetAccount } from '../selectors';
+import { debounce } from 'lodash';
 
 const mapStateToProps = (state, { params: { username }, withReplies = false }) => {
   const accounts = state.getIn(['accounts']);
@@ -48,9 +50,28 @@ class ProfilePage extends ImmutablePureComponent {
     features: PropTypes.object,
   };
 
+  state = {
+    isSmallScreen: (window.innerWidth <= 1200),
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.handleResize, { passive: true });
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+  }
+
+  handleResize = debounce(() => {
+    this.setState({ isSmallScreen: (window.innerWidth <= 1200) });
+  }, 5, {
+    trailing: true,
+  });
+
   render() {
     const { children, accountId, account, accountUsername, features } = this.props;
     const bg = account ? account.getIn(['customizations', 'background']) : undefined;
+    const { isSmallScreen } = this.state;
 
     return (
       <div className={bg && `page page--customization page--${bg}` || 'page'}>
@@ -68,6 +89,7 @@ class ProfilePage extends ImmutablePureComponent {
             <div className='columns-area__panels__pane columns-area__panels__pane--left'>
               <div className='columns-area__panels__pane__inner'>
                 <ProfileInfoPanel username={accountUsername} account={account} />
+                {isSmallScreen && account && <ProfileMediaPanel account={account} />}
               </div>
             </div>
 
@@ -81,6 +103,7 @@ class ProfilePage extends ImmutablePureComponent {
               <div className='columns-area__panels__pane__inner'>
                 <SignUpPanel />
                 {features.suggestions && <WhoToFollowPanel />}
+                {account && <ProfileMediaPanel account={account} />}
                 <LinkFooter />
               </div>
             </div>

app/styles/application.scss

@@ -65,6 +65,7 @@
 @import 'components/theme-toggle';
 @import 'components/trends';
 @import 'components/wtf-panel';
+@import 'components/profile-media-panel';
 @import 'components/profile-info-panel';
 @import 'components/setting-toggle';
 @import 'components/spoiler-button';

app/styles/components/profile-media-panel.scss

@@ -0,0 +1,48 @@
+.media-panel {
+  @include standard-panel-shadow;
+  display: flex;
+  width: 100%;
+  border-radius: 10px;
+  flex-direction: column;
+  height: auto;
+  box-sizing: border-box;
+  background: var(--foreground-color);
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 10px;
+  }
+
+  .media-panel-header {
+    display: flex;
+    align-items: baseline;
+    margin-bottom: 10px;
+    padding: 15px 15px 0;
+
+    &__icon {
+      margin-right: 10px;
+    }
+
+    &__label {
+      flex: 1 1;
+      color: var(--primary-text-color);
+      font-size: 16px;
+      font-weight: bold;
+      line-height: 19px;
+    }
+  }
+
+  &__content {
+    width: 100%;
+    padding: 8px 0;
+  }
+
+  &__list {
+    padding: 0 5px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+}