feat(9-medias): support max to 9 images

Author: mashirozx

app/javascript/mastodon/actions/compose.js

@@ -278,7 +278,7 @@ export function submitComposeFail(error) {
 
 export function uploadCompose(files) {
   return function (dispatch, getState) {
-    const uploadLimit = 4;
+    const uploadLimit = 9;
     const media = getState().getIn(['compose', 'media_attachments']);
     const pending = getState().getIn(['compose', 'pending_media_attachments']);
     const progress = new Array(files.length).fill(0);
@@ -298,7 +298,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 > 8) break;
 
       const data = new FormData();
       data.append('file', file);

app/javascript/mastodon/components/media_gallery.jsx

@@ -102,6 +102,15 @@ class Item extends PureComponent {
       height = 50;
     }
 
+    if (size > 5) {
+      width = 100 / 3;
+      height = 50;
+
+      if (size > 6) {
+        height = 100 / 3;
+      }
+    }
+
     if (attachment.get('description')?.length > 0) {
       badges.push(<span key='alt' className='media-gallery__alt__label'>ALT</span>);
     }
@@ -305,13 +314,13 @@ class MediaGallery extends PureComponent {
       style.aspectRatio = '3 / 2';
     }
 
-    const size     = media.take(4).size;
+    const size     = media.take(9).size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
 
     if (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(9).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) {
@@ -336,6 +345,15 @@ class MediaGallery extends PureComponent {
       );
     }
 
+    if (size > 4) {
+      style.gridTemplateColumns = 'repeat(3, 1fr)';
+      style.aspectRatio = '1 /1';
+
+      if (size > 6) {
+        style.gridTemplateRows = 'repeat(3, 1fr)';
+      }
+    }
+
     return (
       <div className='media-gallery' style={style} ref={this.handleRef}>
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>

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

@@ -1,16 +1,26 @@
-import { connect } from 'react-redux';
+import {connect} from 'react-redux';
 
-import { uploadCompose } from '../../../actions/compose';
+import {uploadCompose} from '../../../actions/compose';
 import UploadButton from '../components/upload_button';
 
-const mapStateToProps = state => ({
-  disabled: state.getIn(['compose', 'poll']) !== null || 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')))),
-  resetFileKey: state.getIn(['compose', 'resetFileKey']),
-});
+const mapStateToProps = state => {
+  const isPoll = state.getIn(['compose', 'poll']) !== null;
+  const isUploading = state.getIn(['compose', 'is_uploading']);
+  const readyAttachmentsSize = state.getIn(['compose', 'media_attachments']).size ?? 0;
+  const pendingAttachmentsSize = state.getIn(['compose', 'pending_media_attachments']).size ?? 0;
+  const attachmentsSize = readyAttachmentsSize + pendingAttachmentsSize;
+  const isOverLimit = attachmentsSize > 8;
+  const hasVideoOrAudio = state.getIn(['compose', 'media_attachments']).some(m => ['video', 'audio'].includes(m.get('type')));
+
+  return {
+    disabled: isPoll || isUploading || isOverLimit || hasVideoOrAudio,
+    resetFileKey: state.getIn(['compose', 'resetFileKey']),
+  };
+};
 
 const mapDispatchToProps = dispatch => ({
 
-  onSelectFile (files) {
+  onSelectFile(files) {
     dispatch(uploadCompose(files));
   },
 

app/lib/activitypub/activity/create.rb

@@ -110,7 +110,7 @@ def find_existing_status
   def process_status_params
     @status_parser = ActivityPub::Parser::StatusParser.new(@json, followers_collection: @account.followers_url, object: @object)
 
-    attachment_ids = process_attachments.take(4).map(&:id)
+    attachment_ids = process_attachments.take(9).map(&:id)
 
     @params = {
       uri: @status_parser.uri,
@@ -260,7 +260,7 @@ def process_attachments
     as_array(@object['attachment']).each do |attachment|
       media_attachment_parser = ActivityPub::Parser::MediaAttachmentParser.new(attachment)
 
-      next if media_attachment_parser.remote_url.blank? || media_attachments.size >= 4
+      next if media_attachment_parser.remote_url.blank? || media_attachments.size >= 9
 
       begin
         media_attachment = MediaAttachment.create(

app/services/post_status_service.rb

@@ -130,9 +130,9 @@ def validate_media!
       return
     end
 
-    raise Mastodon::ValidationError, I18n.t('media_attachments.validations.too_many') if @options[:media_ids].size > 4 || @options[:poll].present?
+    raise Mastodon::ValidationError, I18n.t('media_attachments.validations.too_many') if @options[:media_ids].size > 9 || @options[:poll].present?
 
-    @media = @account.media_attachments.where(status_id: nil).where(id: @options[:media_ids].take(4).map(&:to_i))
+    @media = @account.media_attachments.where(status_id: nil).where(id: @options[:media_ids].take(9).map(&:to_i))
 
     raise Mastodon::ValidationError, I18n.t('media_attachments.validations.images_and_video') if @media.size > 1 && @media.find(&:audio_or_video?)
     raise Mastodon::ValidationError, I18n.t('media_attachments.validations.not_ready') if @media.any?(&:not_processed?)