Merge branch 'profile-media-panel' into 'develop'

Add profile media panel

Closes #294

See merge request soapbox-pub/soapbox-fe!162

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

@@ -0,0 +1,80 @@
+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,
+  };
+
+  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 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={255}
+                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,6 +9,7 @@ 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';
@@ -81,6 +82,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/media-gallery.scss

@@ -5,6 +5,7 @@
   border-radius: 4px;
   position: relative;
   width: 100%;
+  height: auto;
   background-color: var(--brand-color--faint);
 }
 
@@ -41,7 +42,7 @@
     width: 100%;
 
     img {
-      object-fit: contain;
+      object-fit: cover;
     }
   }
 
@@ -63,6 +64,18 @@
   }
 }
 
+.status__wrapper, .detailed-status__wrapper {
+  .media-gallery__item-thumbnail {
+    &,
+    .still-image {
+
+      img {
+        object-fit: contain;
+      }
+    }
+  }
+}
+
 .media-gallery__preview {
   width: 100%;
   height: 100%;

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;
+  }
+}