Merge 9511daab05 into a50c8e951f

The images/videos that are automatically loaded by links do not blur
when the option is selected in the preferences/appearance, as is it a
different class from the ones uploaded by the devices of users.
So i used a variable called visible to check what is the option selected
for the display_media, then i modified the spoilerbutton in a way that
allows to hide, by bluring, the images/thumbnails and as a mini
spoilerButton if the person wants to hide it but it is in the option
"Always Show media"

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/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)}
-          {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 }}
-        />
       </div>
     </Link>
   );

app/javascript/mastodon/features/status/components/card.jsx

@@ -14,11 +14,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react';
 import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
 import { MoreFromAuthor } from 'mastodon/components/more_from_author';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
-import { useBlurhash } from 'mastodon/initial_state';
+import { displayMedia, useBlurhash } from 'mastodon/initial_state';
 
 const IDNA_PREFIX = 'xn--';
 
@@ -64,12 +65,14 @@ export default class Card extends PureComponent {
     card: ImmutablePropTypes.map,
     onOpenMedia: PropTypes.func.isRequired,
     sensitive: PropTypes.bool,
+    visible: PropTypes.bool,
   };
 
   state = {
     previewLoaded: false,
     embedded: false,
     revealed: !this.props.sensitive,
+    visible: this.props.visible !== undefined ? this.props.visible : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
   };
 
   UNSAFE_componentWillReceiveProps (nextProps) {
@@ -80,6 +83,12 @@ export default class Card extends PureComponent {
     if (this.props.sensitive !== nextProps.sensitive) {
       this.setState({ revealed: !nextProps.sensitive });
     }
+
+    if (nextProps.visible === undefined) {
+      this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
+    } else if (!Immutable.is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+      this.setState({ visible: nextProps.visible });
+    }
   }
 
   componentDidMount () {
@@ -112,6 +121,12 @@ export default class Card extends PureComponent {
     this.setState({ revealed: true });
   };
 
+  handleOpen = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    this.setState({ visible: !this.state.visible });
+  };
+
   renderVideo () {
     const { card } = this.props;
     const content = { __html: addAutoPlay(card.get('html')) };
@@ -128,7 +143,7 @@ export default class Card extends PureComponent {
 
   render () {
     const { card } = this.props;
-    const { embedded, revealed } = this.state;
+    const { embedded, revealed, visible } = this.state;
 
     if (card === null) {
       return null;
@@ -165,14 +180,14 @@ export default class Card extends PureComponent {
       thumbnailStyle.aspectRatio = 1;
     }
 
-    let embed;
+    let embed, spoilerButton;
 
     let canvas = (
       <Blurhash
-        className={classNames('status-card__image-preview', {
-          'status-card__image-preview--hidden': revealed && this.state.previewLoaded,
-        })}
         hash={card.get('blurhash')}
+        className={classNames('status-card__image-preview', {
+          'status-card__image-preview--hidden': visible && this.state.previewLoaded,
+        })}
         dummy={!useBlurhash}
       />
     );
@@ -180,17 +195,24 @@ export default class Card extends PureComponent {
     const thumbnailDescription = card.get('image_description');
     const thumbnail = <img src={card.get('image')} alt={thumbnailDescription} title={thumbnailDescription} lang={language} style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
 
-    let spoilerButton = (
+    if (visible) {
-      <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
+      spoilerButton = (
-        <span className='spoiler-button__overlay__label'>
+        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
-          <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />
+          <Icon id='eye-slash' icon={VisibilityOffIcon} />
-          <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+        </button>);
-        </span>
+    } else {
-      </button>
+      spoilerButton = (
-    );
+        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
+          <span className='spoiler-button__overlay__label'>
+            {revealed ? <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /> : <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />}
+            <span className='spoiler-button__overlay__action'><FormattedMessage id='status.media.show' defaultMessage='Click to show' /></span>
+          </span>
+        </button>
+      );
+    }
 
     spoilerButton = (
-      <div className={classNames('spoiler-button', { 'spoiler-button--minified': revealed })}>
+      <div className={classNames('spoiler-button', { 'spoiler-button--minified': visible })}>
         {spoilerButton}
       </div>
     );
@@ -204,11 +226,12 @@ export default class Card extends PureComponent {
             {canvas}
             {thumbnail}
 
-            {revealed ? (
+            {visible ? (
               <div className='status-card__actions' onClick={this.handleEmbedClick} role='none'>
                 <div>
                   <button type='button' onClick={this.handleEmbedClick}><Icon id='play' icon={PlayArrowIcon} /></button>
                   <a href={card.get('url')} onClick={this.handleExternalLinkClick} target='_blank' rel='noopener noreferrer'><Icon id='external-link' icon={OpenInNewIcon} /></a>
+                  <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'><Icon id='eye-slash' icon={VisibilityOffIcon} /></button>
                 </div>
               </div>
             ) : spoilerButton}
@@ -226,6 +249,7 @@ export default class Card extends PureComponent {
       embed = (
         <div className='status-card__image'>
           {canvas}
+          {spoilerButton}
           {thumbnail}
         </div>
       );

app/javascript/mastodon/features/status/components/detailed_status.jsx

@@ -209,7 +209,7 @@ class DetailedStatus extends ImmutablePureComponent {
         );
       }
     } else if (status.get('spoiler_text').length === 0) {
-      media = <Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
+      media = <Card visible={this.props.showMedia} sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card', null)} />;
     }
 
     if (status.get('application')) {

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": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know",
-  "filtered_notifications_banner.pending_requests": "Notifications 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;
+    background: $ui-button-background-color;
-    align-items: center;
+    color: $white;
-    border-radius: 999px;
+    border-radius: 100px;
-    background: var(--background-border-color);
+    padding: 2px 8px;
-    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;
-    }
   }
 }