Merge e3d9b4405b into 6d62581da1

app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx

@@ -19,6 +19,11 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { EmbeddedStatusContent } from './embedded_status_content';
 
 export type Mention = RecordOf<{ url: string; acct: string }>;
+export type MediaAttachment = RecordOf<{
+  id: string;
+  type: string;
+  description?: string;
+}>;
 
 export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   statusId,
@@ -120,9 +125,14 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
   const language = status.get('language') as string;
   const mentions = status.get('mentions') as ImmutableList<Mention>;
   const expanded = !status.get('hidden') || !contentWarning;
-  const mediaAttachmentsSize = (
-    status.get('media_attachments') as ImmutableList<unknown>
-  ).size;
+  const mediaAttachments = status.get(
+    'media_attachments',
+  ) as ImmutableList<MediaAttachment>;
+  const mediaAttachmentsWithDescription = mediaAttachments.filter(
+    (attachment) => !!attachment.get('description'),
+  );
+  const uncaptionedMediaCount =
+    mediaAttachments.size - mediaAttachmentsWithDescription.size;
 
   return (
     <div
@@ -156,26 +166,46 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         />
       )}
 
-      {expanded && (poll || mediaAttachmentsSize > 0) && (
-        <div className='notification-group__embedded-status__attachments reply-indicator__attachments'>
-          {!!poll && (
-            <>
-              <Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
-              <FormattedMessage
-                id='reply_indicator.poll'
-                defaultMessage='Poll'
-              />
-            </>
-          )}
-          {mediaAttachmentsSize > 0 && (
-            <>
-              <Icon icon={PhotoLibraryIcon} id='photo-library' />
-              <FormattedMessage
-                id='reply_indicator.attachments'
-                defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
-                values={{ count: mediaAttachmentsSize }}
-              />
-            </>
+      {expanded && !!poll && (
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='poll-indicator'
+        >
+          <Icon icon={BarChart4BarsIcon} id='bar-chart-4-bars' />
+          <FormattedMessage id='reply_indicator.poll' defaultMessage='Poll' />
+        </div>
+      )}
+
+      {expanded &&
+        mediaAttachmentsWithDescription.size > 0 &&
+        mediaAttachmentsWithDescription.map((attachment) => (
+          <div
+            className='notification-group__embedded-status__attachments reply-indicator__attachments'
+            key={`media-description-${attachment.get('id')}}`}
+          >
+            <Icon icon={PhotoLibraryIcon} id='photo-library' />
+            <span>{attachment.get('description')}</span>
+          </div>
+        ))}
+
+      {expanded && uncaptionedMediaCount > 0 && (
+        <div
+          className='notification-group__embedded-status__attachments reply-indicator__attachments'
+          key='uncaptioned-media-indicator'
+        >
+          <Icon icon={PhotoLibraryIcon} id='photo-library' />
+          {mediaAttachmentsWithDescription.size > 0 ? (
+            <FormattedMessage
+              id='reply_indicator.other_attachments'
+              defaultMessage='{count, plural, one {# other attachment} other {# other attachments}}'
+              values={{ count: uncaptionedMediaCount }}
+            />
+          ) : (
+            <FormattedMessage
+              id='reply_indicator.attachments'
+              defaultMessage='{count, plural, one {# attachment} other {# attachments}}'
+              values={{ count: uncaptionedMediaCount }}
+            />
           )}
         </div>
       )}

app/javascript/mastodon/locales/en.json

@@ -729,6 +729,7 @@
   "relative_time.today": "today",
   "reply_indicator.attachments": "{count, plural, one {# attachment} other {# attachments}}",
   "reply_indicator.cancel": "Cancel",
+  "reply_indicator.other_attachments": "{count, plural, one {# other attachment} other {# other attachments}}",
   "reply_indicator.poll": "Poll",
   "report.block": "Block",
   "report.block_explanation": "You will not see their posts. They will not be able to see your posts or follow you. They will be able to tell that they are blocked.",

app/javascript/styles/mastodon/components.scss

@@ -10743,6 +10743,12 @@ noscript {
       font-size: 15px;
       line-height: 22px;
       color: $dark-text-color;
+
+      span {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }