Feature #2 - bulk of the work for more images

More testing will be needed, but just trying to get things organized
cdp1337 · Jul 11, 2023 · ae5b5f4 · ae5b5f4
1 parent 3f5af76
commit ae5b5f4
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 26 deletions.
diff --git a/app/javascript/mastodon/actions/compose.js b/app/javascript/mastodon/actions/compose.js
@@ -256,7 +256,7 @@ export function submitComposeFail(error) {
 
 export function uploadCompose(files) {
   return function (dispatch, getState) {
-    const uploadLimit = 4;
+    const uploadLimit = 24;
     const media  = getState().getIn(['compose', 'media_attachments']);
     const pending  = getState().getIn(['compose', 'pending_media_attachments']);
     const progress = new Array(files.length).fill(0);
@@ -275,7 +275,7 @@ export function uploadCompose(files) {
     dispatch(uploadComposeRequest());
 
     for (const [i, f] of Array.from(files).entries()) {
-      if (media.size + i > 3) break;
+      if (media.size + i > 23) break;
 
       resizeImage(f).then(file => {
         const data = new FormData();

diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
@@ -204,8 +204,9 @@ class Item extends React.PureComponent {
       );
     }
 
+    // style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}
     return (
-      <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
+      <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')}>
         <Blurhash
           hash={attachment.get('blurhash')}
           dummy={!useBlurhash}
@@ -310,32 +311,20 @@ class MediaGallery extends React.PureComponent {
   }
 
   render () {
-    const { media, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props;
+    const { media, intl, sensitive, defaultWidth, standalone, autoplay } = this.props;
     const { visible } = this.state;
 
     const width = this.state.width || defaultWidth;
 
     let children, spoilerButton;
 
-    const style = {};
-
-    if (this.isFullSizeEligible() && (standalone || !cropImages)) {
-      if (width) {
-        style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
-      }
-    } else if (width) {
-      style.height = width / (16/9);
-    } else {
-      style.height = height;
-    }
-
-    const size     = media.take(4).size;
+    const size     = media.take(24).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)} 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} size={size} displayWidth={width} visible={visible || uncached} />);
+      children = media.take(24).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} size={size} displayWidth={width} visible={visible || uncached} />);
     }
 
     if (uncached) {
@@ -355,7 +344,7 @@ class MediaGallery extends React.PureComponent {
     }
 
     return (
-      <div className='media-gallery' style={style} ref={this.handleRef}>
+      <div className='media-gallery' data-total-items={size} ref={this.handleRef}>
         <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible && !uncached, 'spoiler-button--click-thru': uncached })}>
           {spoilerButton}
         </div>

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
@@ -1,3 +1,57 @@
+@mixin media-gallery {
+  margin-top: 16px;
+  display: flex;
+  gap: 2px;
+  flex-wrap: wrap;
+
+  &[data-total-items='1'] {
+    .media-gallery__item {
+      flex: 1 100%;
+    }
+  }
+
+  &[data-total-items='2'],
+  &[data-total-items='4'] {
+    // 2-elements per row
+    .media-gallery__item {
+      flex: 1 40%;
+    }
+  }
+
+  &[data-total-items='3'],
+  &[data-total-items='5'],
+  &[data-total-items='6'],
+  &[data-total-items='7'] {
+    // 3-elements per row
+    .media-gallery__item {
+      flex: 1 30%;
+    }
+  }
+
+  &[data-total-items='8'],
+  &[data-total-items='9'],
+  &[data-total-items='10'],
+  &[data-total-items='11'],
+  &[data-total-items='12'],
+  &[data-total-items='13'],
+  &[data-total-items='14'],
+  &[data-total-items='15'],
+  &[data-total-items='16'],
+  &[data-total-items='17'],
+  &[data-total-items='18'],
+  &[data-total-items='19'],
+  &[data-total-items='20'],
+  &[data-total-items='21'],
+  &[data-total-items='22'],
+  &[data-total-items='23'],
+  &[data-total-items='24'] {
+    // 4-elements per row
+    .media-gallery__item {
+      flex: 1 20%;
+    }
+  }
+}
+
 .app-body {
   -webkit-overflow-scrolling: touch;
   -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -1091,7 +1145,7 @@ body > [data-popper-placement] {
   .video-player,
   .audio-player,
   .attachment-list {
-    margin-top: 16px;
+    @include media-gallery;
   }
 
   &.light {
@@ -1297,7 +1351,7 @@ body > [data-popper-placement] {
   .media-gallery,
   .video-player,
   .audio-player {
-    margin-top: 16px;
+    @include media-gallery;
   }
 }
 

diff --git a/app/lib/activitypub/activity/create.rb b/app/lib/activitypub/activity/create.rb
@@ -124,7 +124,7 @@ def process_status_params
         visibility: @status_parser.visibility,
         thread: replied_to_status,
         conversation: conversation_from_uri(@object['conversation']),
-        media_attachment_ids: process_attachments.take(4).map(&:id),
+        media_attachment_ids: process_attachments.take(24).map(&:id),
         poll: process_poll,
       }
     end
@@ -257,7 +257,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 >= 24
 
       begin
         media_attachment = MediaAttachment.create(

diff --git a/app/services/post_status_service.rb b/app/services/post_status_service.rb
@@ -107,9 +107,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 > 24 || @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(24).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?)

diff --git a/app/services/update_status_service.rb b/app/services/update_status_service.rb
@@ -71,7 +71,7 @@ def validate_media!
 
     raise Mastodon::ValidationError, I18n.t('media_attachments.validations.too_many') if @options[:media_ids].size > 4 || @options[:poll].present?
 
-    media_attachments = @status.account.media_attachments.where(status_id: [nil, @status.id]).where(scheduled_status_id: nil).where(id: @options[:media_ids].take(4).map(&:to_i)).to_a
+    media_attachments = @status.account.media_attachments.where(status_id: [nil, @status.id]).where(scheduled_status_id: nil).where(id: @options[:media_ids].take(24).map(&:to_i)).to_a
 
     raise Mastodon::ValidationError, I18n.t('media_attachments.validations.images_and_video') if media_attachments.size > 1 && media_attachments.find(&:audio_or_video?)
     raise Mastodon::ValidationError, I18n.t('media_attachments.validations.not_ready') if media_attachments.any?(&:not_processed?)