Merge ee9a40bec0 into 3b52dca405

* 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/helpers/context_helper.rb

@@ -26,6 +26,12 @@ module ContextHelper
     suspended: { 'toot' => 'http://joinmastodon.org/ns#', 'suspended' => 'toot:suspended' },
     attribution_domains: { 'toot' => 'http://joinmastodon.org/ns#', 'attributionDomains' => { '@id' => 'toot:attributionDomains', '@type' => '@id' } },
     quote_requests: { 'QuoteRequest' => 'https://w3id.org/fep/044f#QuoteRequest' },
+    quotes: {
+      'quote' => 'https://w3id.org/fep/044f#quote',
+      'quoteUri' => 'http://fedibird.com/ns#quoteUri',
+      '_misskey_quote' => 'https://misskey-hub.net/ns#_misskey_quote',
+      'quoteAuthorization' => 'https://w3id.org/fep/044f#quoteAuthorization',
+    },
     interaction_policies: {
       'gts' => 'https://gotosocial.org/ns#',
       'interactionPolicy' => { '@id' => 'gts:interactionPolicy', '@type' => '@id' },

app/javascript/mastodon/components/account_bio.tsx

@@ -1,12 +1,30 @@
+import { useCallback } from 'react';
+
 import { useLinks } from 'mastodon/hooks/useLinks';
 
-export const AccountBio: React.FC<{
+interface AccountBioProps {
   note: string;
   className: string;
-}> = ({ note, className }) => {
-  const handleClick = useLinks();
+  dropdownAccountId?: string;
+}
 
-  if (note.length === 0 || note === '<p></p>') {
+export const AccountBio: React.FC<AccountBioProps> = ({
+  note,
+  className,
+  dropdownAccountId,
+}) => {
+  const handleClick = useLinks(!!dropdownAccountId);
+  const handleNodeChange = useCallback(
+    (node: HTMLDivElement | null) => {
+      if (!dropdownAccountId || !node || node.childNodes.length === 0) {
+        return;
+      }
+      addDropdownToHashtags(node, dropdownAccountId);
+    },
+    [dropdownAccountId],
+  );
+
+  if (note.length === 0) {
     return null;
   }
 
@@ -15,6 +33,28 @@ export const AccountBio: React.FC<{
       className={`${className} translate`}
       dangerouslySetInnerHTML={{ __html: note }}
       onClickCapture={handleClick}
+      ref={handleNodeChange}
     />
   );
 };
+
+function addDropdownToHashtags(node: HTMLElement | null, accountId: string) {
+  if (!node) {
+    return;
+  }
+  for (const childNode of node.childNodes) {
+    if (!(childNode instanceof HTMLElement)) {
+      continue;
+    }
+    if (
+      childNode instanceof HTMLAnchorElement &&
+      (childNode.classList.contains('hashtag') ||
+        childNode.innerText.startsWith('#')) &&
+      !childNode.dataset.menuHashtag
+    ) {
+      childNode.dataset.menuHashtag = accountId;
+    } else if (childNode.childNodes.length > 0) {
+      addDropdownToHashtags(childNode, accountId);
+    }
+  }
+}

app/javascript/mastodon/components/media_gallery.jsx

@@ -17,6 +17,14 @@ import { formatTime } from 'mastodon/features/video';
 
 import { autoPlayGif, displayMedia, useBlurhash } from '../initial_state';
 
+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 = {
@@ -93,14 +101,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;
     }
 
     const description = attachment.getIn(['translation', 'description']) || attachment.get('description');
@@ -308,6 +320,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/account_timeline/components/account_header.tsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { NavLink } from 'react-router-dom';
 
+import { AccountBio } from '@/mastodon/components/account_bio';
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import LockIcon from '@/material-icons/400-24px/lock.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
@@ -773,7 +774,6 @@ export const AccountHeader: React.FC<{
     );
   }
 
-  const content = { __html: account.note_emojified };
   const displayNameHtml = { __html: account.display_name_html };
   const fields = account.fields;
   const isLocal = !account.acct.includes('@');
@@ -897,12 +897,11 @@ export const AccountHeader: React.FC<{
                   <AccountNote accountId={accountId} />
                 )}
 
-                {account.note.length > 0 && account.note !== '<p></p>' && (
-                  <div
-                    className='account__header__content translate'
-                    dangerouslySetInnerHTML={content}
-                  />
-                )}
+                <AccountBio
+                  note={account.note_emojified}
+                  dropdownAccountId={accountId}
+                  className='account__header__content'
+                />
 
                 <div className='account__header__fields'>
                   <dl>

app/javascript/mastodon/hooks/useLinks.ts

@@ -8,13 +8,14 @@ import { openURL } from 'mastodon/actions/search';
 import { useAppDispatch } from 'mastodon/store';
 
 const isMentionClick = (element: HTMLAnchorElement) =>
-  element.classList.contains('mention');
+  element.classList.contains('mention') &&
+  !element.classList.contains('hashtag');
 
 const isHashtagClick = (element: HTMLAnchorElement) =>
   element.textContent?.[0] === '#' ||
   element.previousSibling?.textContent?.endsWith('#');
 
-export const useLinks = () => {
+export const useLinks = (skipHashtags?: boolean) => {
   const history = useHistory();
   const dispatch = useAppDispatch();
 
@@ -61,12 +62,12 @@ export const useLinks = () => {
       if (isMentionClick(target)) {
         e.preventDefault();
         void handleMentionClick(target);
-      } else if (isHashtagClick(target)) {
+      } else if (isHashtagClick(target) && !skipHashtags) {
         e.preventDefault();
         handleHashtagClick(target);
       }
     },
-    [handleMentionClick, handleHashtagClick],
+    [skipHashtags, handleMentionClick, handleHashtagClick],
   );
 
   return handleClick;

app/javascript/mastodon/models/account.ts

@@ -126,6 +126,9 @@ export function createAccountFromServerJSON(serverJSON: ApiAccountJSON) {
       ? accountJSON.username
       : accountJSON.display_name;
 
+  const accountNote =
+    accountJSON.note && accountJSON.note !== '<p></p>' ? accountJSON.note : '';
+
   return AccountFactory({
     ...accountJSON,
     moved: moved?.id,
@@ -142,8 +145,8 @@ export function createAccountFromServerJSON(serverJSON: ApiAccountJSON) {
       escapeTextContentForBrowser(displayName),
       emojiMap,
     ),
-    note_emojified: emojify(accountJSON.note, emojiMap),
-    note_plain: unescapeHTML(accountJSON.note),
+    note_emojified: emojify(accountNote, emojiMap),
+    note_plain: unescapeHTML(accountNote),
     url:
       accountJSON.url.startsWith('http://') ||
       accountJSON.url.startsWith('https://')

app/lib/activitypub/activity/create.rb

@@ -90,7 +90,7 @@ class ActivityPub::Activity::Create < ActivityPub::Activity
       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,
@@ -285,7 +285,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

@@ -45,6 +45,7 @@ class Status < ApplicationRecord
   include Status::Visibility
 
   MEDIA_ATTACHMENTS_LIMIT = 4
+  REMOTE_MEDIA_ATTACHMENTS_LIMIT = 16
 
   QUOTE_APPROVAL_POLICY_FLAGS = {
     unknown: (1 << 0),
@@ -283,6 +284,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
@@ -291,7 +296,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

@@ -61,7 +61,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

@@ -82,7 +82,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 }