Merge 3ca447bd8d into a50c8e951f

* Remove remote media count limit

* Show >4 images in a grid

* Fix gallery for <4 media

* Don't use weirdly wide images in media gallery

Also support cols > 4 (size > 16)

* Use 3/2 ratio

* Port to glitch

app/javascript/mastodon/api_types/notifications.ts

@@ -60,7 +60,7 @@ export interface BaseNotificationGroupJSON {
 
 interface NotificationGroupWithStatusJSON extends BaseNotificationGroupJSON {
   type: NotificationWithStatusType;
-  status: ApiStatusJSON;
+  status_id: string;
 }
 
 interface NotificationWithStatusJSON extends BaseNotificationJSON {

app/javascript/mastodon/components/media_gallery.jsx

@@ -21,6 +21,14 @@ const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
 });
 
+const colCount = function(size) {
+  return Math.max(Math.ceil(Math.sqrt(size)), 2);
+};
+
+const rowCount = function(size) {
+  return Math.ceil(size / colCount(size));
+};
+
 class Item extends PureComponent {
 
   static propTypes = {
@@ -92,14 +100,18 @@ class Item extends PureComponent {
     let badges = [], thumbnail;
 
     let width  = 50;
-    let height = 100;
+    let height = 50;
 
-    if (size === 1) {
+    const cols = colCount(size);
+    const remaining = (-size % cols + cols) % cols;
+    const largeCount = Math.floor(remaining / 3); // width=2, height=2
+    const mediumCount = remaining % 3; // height=2
+
+    if (size === 1 || index < largeCount) {
       width = 100;
-    }
-
-    if (size === 4 || (size === 3 && index > 0)) {
-      height = 50;
+      height = 100;
+    } else if (size === 2 || index < largeCount + mediumCount) {
+      height = 100;
     }
 
     if (attachment.get('description')?.length > 0) {
@@ -302,6 +314,11 @@ class MediaGallery extends PureComponent {
     if (this.isFullSizeEligible()) {
       style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;
     } else {
+      const cols = colCount(media.size);
+      const rows = rowCount(media.size);
+      style.gridTemplateColumns = `repeat(${cols}, 1fr)`;
+      style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+
       style.aspectRatio = '3 / 2';
     }
 

app/javascript/mastodon/features/notifications/components/filtered_notifications_banner.tsx

@@ -49,21 +49,14 @@ export const FilteredNotificationsBanner: React.FC = () => {
         <span>
           <FormattedMessage
             id='filtered_notifications_banner.pending_requests'
-            defaultMessage='Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know'
+            defaultMessage='From {count, plural, =0 {no one} one {one person} other {# people}} you may know'
             values={{ count: policy.summary.pending_requests_count }}
           />
         </span>
       </div>
 
       <div className='filtered-notifications-banner__badge'>
-        <div className='filtered-notifications-banner__badge__badge'>
-          {toCappedNumber(policy.summary.pending_notifications_count)}
-        </div>
-        <FormattedMessage
-          id='filtered_notifications_banner.mentions'
-          defaultMessage='{count, plural, one {mention} other {mentions}}'
-          values={{ count: policy.summary.pending_notifications_count }}
-        />
+        {toCappedNumber(policy.summary.pending_notifications_count)}
       </div>
     </Link>
   );

app/javascript/mastodon/locales/en.json

@@ -300,8 +300,7 @@
   "filter_modal.select_filter.subtitle": "Use an existing category or create a new one",
   "filter_modal.select_filter.title": "Filter this post",
   "filter_modal.title.status": "Filter a post",
-  "filtered_notifications_banner.mentions": "{count, plural, one {mention} other {mentions}}",
-  "filtered_notifications_banner.pending_requests": "Notifications from {count, plural, =0 {no one} one {one person} other {# people}} you may know",
+  "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know",
   "filtered_notifications_banner.title": "Filtered notifications",
   "firehose.all": "All",
   "firehose.local": "This server",

app/javascript/mastodon/models/notification_group.ts

@@ -124,9 +124,9 @@ export function createNotificationGroupFromJSON(
     case 'mention':
     case 'poll':
     case 'update': {
-      const { status, ...groupWithoutStatus } = group;
+      const { status_id: statusId, ...groupWithoutStatus } = group;
       return {
-        statusId: status.id,
+        statusId,
         sampleAccountIds,
         ...groupWithoutStatus,
       };

app/javascript/styles/mastodon/components.scss

@@ -10171,25 +10171,10 @@ noscript {
   }
 
   &__badge {
-    display: flex;
-    align-items: center;
-    border-radius: 999px;
-    background: var(--background-border-color);
-    color: $darker-text-color;
-    padding: 4px;
-    padding-inline-end: 8px;
-    gap: 6px;
-    font-weight: 500;
-    font-size: 11px;
-    line-height: 16px;
-    word-break: keep-all;
-
-    &__badge {
-      background: $ui-button-background-color;
-      color: $white;
-      border-radius: 100px;
-      padding: 2px 8px;
-    }
+    background: $ui-button-background-color;
+    color: $white;
+    border-radius: 100px;
+    padding: 2px 8px;
   }
 }
 

app/lib/activitypub/activity/create.rb

@@ -110,7 +110,7 @@ class ActivityPub::Activity::Create < ActivityPub::Activity
   def process_status_params
     @status_parser = ActivityPub::Parser::StatusParser.new(@json, followers_collection: @account.followers_url, object: @object)
 
-    attachment_ids = process_attachments.take(Status::MEDIA_ATTACHMENTS_LIMIT).map(&:id)
+    attachment_ids = process_attachments.take(Status::REMOTE_MEDIA_ATTACHMENTS_LIMIT).map(&:id)
 
     @params = {
       uri: @status_parser.uri,
@@ -260,7 +260,7 @@ class ActivityPub::Activity::Create < ActivityPub::Activity
     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 >= Status::MEDIA_ATTACHMENTS_LIMIT
+      next if media_attachment_parser.remote_url.blank? || media_attachments.size >= Status::REMOTE_MEDIA_ATTACHMENTS_LIMIT
 
       begin
         media_attachment = MediaAttachment.create(

app/models/status.rb

@@ -40,6 +40,7 @@ class Status < ApplicationRecord
   include Status::ThreadingConcern
 
   MEDIA_ATTACHMENTS_LIMIT = 4
+  REMOTE_MEDIA_ATTACHMENTS_LIMIT = 16
 
   rate_limit by: :account, family: :statuses
 
@@ -280,6 +281,10 @@ class Status < ApplicationRecord
     @emojis = CustomEmoji.from_text(fields.join(' '), account.domain)
   end
 
+  def media_attachments_limit
+    local? ? MEDIA_ATTACHMENTS_LIMIT : REMOTE_MEDIA_ATTACHMENTS_LIMIT
+  end
+
   def ordered_media_attachments
     if ordered_media_attachment_ids.nil?
       # NOTE: sort Ruby-side to avoid hitting the database when the status is
@@ -288,7 +293,7 @@ class Status < ApplicationRecord
     else
       map = media_attachments.index_by(&:id)
       ordered_media_attachment_ids.filter_map { |media_attachment_id| map[media_attachment_id] }
-    end.take(MEDIA_ATTACHMENTS_LIMIT)
+    end.take(media_attachments_limit)
   end
 
   def replies_count

app/models/status_edit.rb

@@ -60,7 +60,7 @@ class StatusEdit < ApplicationRecord
         map = status.media_attachments.index_by(&:id)
         ordered_media_attachment_ids.map.with_index { |media_attachment_id, index| PreservedMediaAttachment.new(media_attachment: map[media_attachment_id], description: media_descriptions[index]) }
       end
-    end.take(Status::MEDIA_ATTACHMENTS_LIMIT)
+    end.take(status.media_attachments_limit)
   end
 
   def proper

app/services/activitypub/process_status_update_service.rb

@@ -73,7 +73,7 @@ class ActivityPub::ProcessStatusUpdateService < BaseService
     as_array(@json['attachment']).each do |attachment|
       media_attachment_parser = ActivityPub::Parser::MediaAttachmentParser.new(attachment)
 
-      next if media_attachment_parser.remote_url.blank? || @next_media_attachments.size > Status::MEDIA_ATTACHMENTS_LIMIT
+      next if media_attachment_parser.remote_url.blank? || @next_media_attachments.size > Status::REMOTE_MEDIA_ATTACHMENTS_LIMIT
 
       begin
         media_attachment   = previous_media_attachments.find { |previous_media_attachment| previous_media_attachment.remote_url == media_attachment_parser.remote_url }