Merge remote-tracking branch 'origin/kb_development' into kb_migration

app/javascript/mastodon/actions/compose.js

@@ -277,7 +277,7 @@ export function uploadCompose(files) {
     dispatch(uploadComposeRequest());
 
     for (const [i, file] of Array.from(files).entries()) {
-      if (media.size + i > 3) break;
+      if (media.size + i >= 4) break;
 
       const data = new FormData();
       data.append('file', file);

app/javascript/mastodon/actions/importer/normalizer.js

@@ -66,7 +66,7 @@ export function normalizeStatus(status, normalOldStatus) {
     normalStatus.filtered = status.filtered.map(normalizeFilterResult);
   }
 
-  if (status.emoji_reactions && normalOldStatus) {
+  if (status.emoji_reactions && normalOldStatus && normalOldStatus.get('emoji_reactions')) {
     normalStatus.emoji_reactions = normalizeEmojiReactions(normalOldStatus.get('emoji_reactions').toArray());
   }
 

app/javascript/mastodon/components/media_gallery.jsx

@@ -5,7 +5,7 @@ import { is } from 'immutable';
 import IconButton from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state';
+import { autoPlayGif, cropImages, displayMedia, displayMediaExpand, useBlurhash } from '../initial_state';
 import { debounce } from 'lodash';
 import Blurhash from 'mastodon/components/blurhash';
 
@@ -96,6 +96,16 @@ class Item extends React.PureComponent {
       height = 50;
     }
 
+    if (size === 5 || size === 6) {
+      height = 33;
+    }
+    if (size === 7 || size === 8) {
+      height = 25;
+    }
+    if ((size === 5 && index === 4) || (size === 7 && index === 6)) {
+      width = 100;
+    }
+
     if (size === 2) {
       if (index === 0) {
         right = '2px';
@@ -128,6 +138,21 @@ class Item extends React.PureComponent {
       } else {
         top = '2px';
       }
+    } else {
+      if (index % 2 === 0) {
+        right = '2px';
+      }
+
+      if (index % 2 === 1) {
+        left = '2px';
+      }
+
+      if (index >= 2) {
+        top = '2px';
+      }
+      if (index < size - 1) {
+        bottom = '2px';
+      }
     }
 
     let thumbnail = '';
@@ -331,13 +356,16 @@ class MediaGallery extends React.PureComponent {
       style.height = height;
     }
 
-    const size     = media.take(4).size;
+    const maxSize = displayMediaExpand ? 8 : 4;
+    console.log(displayMediaExpand);
+
+    const size     = media.take(maxSize).size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
 
     if (standalone && this.isFullSizeEligible()) {
       children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />;
     } else {
-      children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} displayWidth={width} visible={visible || uncached} />);
+      children = media.take(maxSize).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} displayWidth={width} visible={visible || uncached} />);
     }
 
     if (uncached) {

app/javascript/mastodon/features/compose/containers/upload_button_container.js

@@ -3,7 +3,7 @@ import UploadButton from '../components/upload_button';
 import { uploadCompose } from '../../../actions/compose';
 
 const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) > 3 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
+  disabled: state.getIn(['compose', 'is_uploading']) || (state.getIn(['compose', 'media_attachments']).size + state.getIn(['compose', 'pending_media_attachments']) >= 4 || state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')))),
   unavailable: state.getIn(['compose', 'poll']) !== null,
   resetFileKey: state.getIn(['compose', 'resetFileKey']),
 });

app/javascript/mastodon/features/status/components/action_bar.jsx

@@ -42,6 +42,7 @@ const messages = defineMessages({
   unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' },
   unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' },
   openOriginalPage: { id: 'account.open_original_page', defaultMessage: 'Open original page' },
+  pickEmoji: { id: 'status.emoji_reaction.pick', defaultMessage: 'Pick emoji' },
 });
 
 const mapStateToProps = (state, { status }) => ({
@@ -268,7 +269,7 @@ class ActionBar extends React.PureComponent {
     );
 
     const emojiPickerButton = (
-      <IconButton icon='smile-o' onClick={this.handleEmojiPickInnerButton} />
+      <IconButton icon='smile-o' onClick={this.handleEmojiPickInnerButton} title={intl.formatMessage(messages.pickEmoji)} />
     );
 
     let replyIcon;

app/javascript/mastodon/initial_state.js

@@ -56,6 +56,7 @@
  * @property {boolean=} disable_swiping
  * @property {string=} disabled_account_id
  * @property {string} display_media
+ * @property {boolean} display_media_expand
  * @property {string} domain
  * @property {boolean=} expand_spoilers
  * @property {boolean} limited_federation_mode
@@ -108,6 +109,7 @@ export const deleteModal = getMeta('delete_modal');
 export const disableSwiping = getMeta('disable_swiping');
 export const disabledAccountId = getMeta('disabled_account_id');
 export const displayMedia = getMeta('display_media');
+export const displayMediaExpand = getMeta('display_media_expand');
 export const domain = getMeta('domain');
 export const expandSpoilers = getMeta('expand_spoilers');
 export const forceSingleColumn = !getMeta('advanced_layout');