Remove status background feature (#2640)

app/javascript/flavours/glitch/components/status.jsx

@@ -544,7 +544,6 @@ class Status extends ImmutablePureComponent {
       ...other
     } = this.props;
     const { isCollapsed } = this.state;
-    let background = null;
     let attachments = null;
 
     //  Depending on user settings, some media are considered as parts of the
@@ -622,21 +621,10 @@ class Status extends ImmutablePureComponent {
       );
     }
 
-    //  If user backgrounds for collapsed statuses are enabled, then we
-    //  initialize our background accordingly. This will only be rendered if
-    //  the status is collapsed.
-    if (settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])) {
-      background = status.getIn(['account', 'header']);
-    }
-
     //  This handles our media attachments.
     //  If a media file is of unknwon type or if the status is muted
     //  (notification), we show a list of links instead of embedded media.
 
-    //  After we have generated our appropriate media element and stored it in
-    //  `media`, we snatch the thumbnail to use as our `background` if media
-    //  backgrounds for collapsed statuses are enabled.
-
     attachments = status.get('media_attachments');
 
     if (pictureInPicture.get('inUse')) {
@@ -729,10 +717,6 @@ class Status extends ImmutablePureComponent {
         );
         mediaIcons.push('video-camera');
       }
-
-      if (!status.get('sensitive') && !(status.get('spoiler_text').length > 0) && settings.getIn(['collapsed', 'backgrounds', 'preview_images'])) {
-        background = attachments.getIn([0, 'preview_url']);
-      }
     } else if (status.get('card') && settings.get('inline_preview_cards') && !this.props.muted) {
       media.push(
         <Card
@@ -803,9 +787,8 @@ class Status extends ImmutablePureComponent {
           {!skipPrepend && prepend}
 
           <div
-            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted, 'has-background': isCollapsed && background })}
+            className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted })}
             data-id={status.get('id')}
-            style={isCollapsed && background ? { backgroundImage: `url(${background})` } : null}
           >
             {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}
 

app/javascript/flavours/glitch/features/local_settings/page/index.jsx

@@ -415,28 +415,6 @@ class LocalSettingsPage extends PureComponent {
             <FormattedMessage id='settings.auto_collapse_height' defaultMessage='Height (in pixels) for a toot to be considered lengthy' />
           </LocalSettingsPageItem>
         </section>
-        <section>
-          <h2><FormattedMessage id='settings.image_backgrounds' defaultMessage='Image backgrounds' /></h2>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'backgrounds', 'user_backgrounds']}
-            id='mastodon-settings--collapsed-user-backgrouns'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-          >
-            <FormattedMessage id='settings.image_backgrounds_users' defaultMessage='Give collapsed toots an image background' />
-          </LocalSettingsPageItem>
-          <LocalSettingsPageItem
-            settings={settings}
-            item={['collapsed', 'backgrounds', 'preview_images']}
-            id='mastodon-settings--collapsed-preview-images'
-            onChange={onChange}
-            dependsOn={[['collapsed', 'enabled']]}
-          >
-            <FormattedMessage id='settings.image_backgrounds_media' defaultMessage='Preview collapsed toot media' />
-            <span className='hint'><FormattedMessage id='settings.image_backgrounds_media_hint' defaultMessage='If the post has any media attachment, use the first one as a background' /></span>
-          </LocalSettingsPageItem>
-        </section>
       </div>
     ),
     ({ intl, onChange, settings }) => (

app/javascript/flavours/glitch/locales/en.json

@@ -90,10 +90,6 @@
   "settings.general": "General",
   "settings.hicolor_privacy_icons": "High color privacy icons",
   "settings.hicolor_privacy_icons.hint": "Display privacy icons in bright and easily distinguishable colors",
-  "settings.image_backgrounds": "Image backgrounds",
-  "settings.image_backgrounds_media": "Preview collapsed toot media",
-  "settings.image_backgrounds_media_hint": "If the post has any media attachment, use the first one as a background",
-  "settings.image_backgrounds_users": "Give collapsed toots an image background",
   "settings.inline_preview_cards": "Inline preview cards for external links",
   "settings.layout_opts": "Layout options",
   "settings.media": "Media",

app/javascript/flavours/glitch/reducers/local_settings.js

@@ -37,10 +37,6 @@ const initialState = ImmutableMap({
       media            : false,
       height           : 400,
     }),
-    backgrounds : ImmutableMap({
-      user_backgrounds : false,
-      preview_images   : false,
-    }),
     show_action_bar : true,
   }),
   media     : ImmutableMap({

app/javascript/flavours/glitch/styles/components.scss

@@ -1561,23 +1561,6 @@ body > [data-popper-placement] {
     min-height: 0;
   }
 
-  &.has-background::before {
-    display: block;
-    position: absolute;
-    inset-inline-start: 0;
-    inset-inline-end: 0;
-    top: 0;
-    bottom: 0;
-    background-image: linear-gradient(
-      to bottom,
-      rgba($base-shadow-color, 0.75),
-      rgba($base-shadow-color, 0.65) 24px,
-      rgba($base-shadow-color, 0.8)
-    );
-    pointer-events: none;
-    content: '';
-  }
-
   .display-name:hover .display-name__html {
     text-decoration: none;
   }