From 22a78e24ca0b1861e135e689c21bcde752b8a729 Mon Sep 17 00:00:00 2001
From: Alexandre Umbelino <alexandre.umbelino@tecnico.ulisboa.pt>
Date: Thu, 4 Apr 2024 18:29:49 +0100
Subject: [PATCH 1/3] Fix #29431: "Always hide media" now hides
 images/thumbnails from links

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"
---
 .../features/status/components/card.jsx       | 56 +++++++++++++------
 .../status/components/detailed_status.jsx     |  2 +-
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
index f0ae40cbc41..73796f314ff 100644
--- a/app/javascript/mastodon/features/status/components/card.jsx
+++ b/app/javascript/mastodon/features/status/components/card.jsx
@@ -18,7 +18,8 @@ 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';
+import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 
 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 (!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 = (
-      <button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
-        <span className='spoiler-button__overlay__label'>
-          <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>
-    );
+    if (visible) {
+      spoilerButton = (
+        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
+          <Icon id='eye-slash' icon={VisibilityOffIcon} />
+        </button>);
+    } else {
+      spoilerButton = (
+        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
+          <span className='spoiler-button__overlay__label'>
+            {revealed ? <FormattedMessage id='status.status_hidden' defaultMessage='Status 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>
       );
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx
index bc81fd2dfb1..fce5e23a976 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.jsx
+++ b/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')) {

From 770ad5649475dc2c896302b3fe0142ce3b6c0d15 Mon Sep 17 00:00:00 2001
From: Alexandre Umbelino <alexandre.umbelino@tecnico.ulisboa.pt>
Date: Fri, 12 Apr 2024 18:01:26 +0100
Subject: [PATCH 2/3] fix of errors

---
 app/javascript/mastodon/features/status/components/card.jsx | 6 +++---
 .../mastodon/features/status/components/detailed_status.jsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
index 73796f314ff..cb7d2f26b57 100644
--- a/app/javascript/mastodon/features/status/components/card.jsx
+++ b/app/javascript/mastodon/features/status/components/card.jsx
@@ -14,12 +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 { displayMedia, useBlurhash } from 'mastodon/initial_state';
-import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?react';
 
 const IDNA_PREFIX = 'xn--';
 
@@ -86,7 +86,7 @@ export default class Card extends PureComponent {
 
     if (nextProps.visible === undefined) {
       this.setState({ visible: displayMedia !== 'hide_all' && !nextProps.sensitive || displayMedia === 'show_all' });
-    } else if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
+    } else if (!Immutable.is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
       this.setState({ visible: nextProps.visible });
     }
   }
@@ -204,7 +204,7 @@ export default class Card extends PureComponent {
       spoilerButton = (
         <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
           <span className='spoiler-button__overlay__label'>
-            {revealed ? <FormattedMessage id='status.status_hidden' defaultMessage='Status hidden' /> : <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />}
+            {revealed ? <FormattedMessage id='status.media_hidden' defaultMessage='Midea 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>
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx
index fce5e23a976..4331f1b0505 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.jsx
+++ b/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 visible={this.props.showMedia} 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')) {

From 9511daab0501b851eb1c68f6477bd19caa536d96 Mon Sep 17 00:00:00 2001
From: Alexandre Umbelino <alexandre.umbelino@tecnico.ulisboa.pt>
Date: Fri, 12 Apr 2024 18:24:27 +0100
Subject: [PATCH 3/3] fix small mistake

---
 app/javascript/mastodon/features/status/components/card.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
index cb7d2f26b57..a64cb783d3f 100644
--- a/app/javascript/mastodon/features/status/components/card.jsx
+++ b/app/javascript/mastodon/features/status/components/card.jsx
@@ -204,7 +204,7 @@ export default class Card extends PureComponent {
       spoilerButton = (
         <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
           <span className='spoiler-button__overlay__label'>
-            {revealed ? <FormattedMessage id='status.media_hidden' defaultMessage='Midea hidden' /> : <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />}
+            {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>