[feature] Move use_blurhash to app settings, enable by default (#5)

Does what it says on the tin! This serves as a decent model (imo) for how to move something from Mastodon's rather opaque server-side settings to client settings.

Reviewed-on: https://codeberg.org/superseriousbusiness/masto-fe-standalone/pulls/5
Co-authored-by: tobi <tobi.smethurst@protonmail.com>
Co-committed-by: tobi <tobi.smethurst@protonmail.com>

app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx

@@ -7,9 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon } from 'flavours/glitch/components/icon';
-import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
-
-
+import { autoPlayGif, displayMedia } from 'flavours/glitch/initial_state';
 
 export default class MediaItem extends ImmutablePureComponent {
 
@@ -17,6 +15,7 @@ export default class MediaItem extends ImmutablePureComponent {
     attachment: ImmutablePropTypes.map.isRequired,
     displayWidth: PropTypes.number.isRequired,
     onOpenMedia: PropTypes.func.isRequired,
+    useBlurhash: PropTypes.bool,
   };
 
   state = {
@@ -58,7 +57,7 @@ export default class MediaItem extends ImmutablePureComponent {
   };
 
   render () {
-    const { attachment, displayWidth } = this.props;
+    const { attachment, displayWidth, useBlurhash } = this.props;
     const { visible, loaded } = this.state;
 
     const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;

app/javascript/flavours/glitch/features/account_gallery/index.jsx

@@ -32,6 +32,7 @@ const mapStateToProps = (state, { params: { acct, id } }) => {
 
   return {
     accountId,
+    settings: state.get('local_settings'),
     isAccount: !!state.getIn(['accounts', accountId]),
     attachments: getAccountGallery(state, accountId),
     isLoading: state.getIn(['timelines', `account:${accountId}:media`, 'isLoading']),
@@ -69,6 +70,7 @@ class AccountGallery extends ImmutablePureComponent {
       acct: PropTypes.string,
       id: PropTypes.string,
     }).isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
     accountId: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
     attachments: ImmutablePropTypes.list.isRequired,
@@ -175,7 +177,7 @@ class AccountGallery extends ImmutablePureComponent {
   };
 
   render () {
-    const { attachments, isLoading, hasMore, isAccount, multiColumn, suspended } = this.props;
+    const { attachments, isLoading, hasMore, isAccount, settings, multiColumn, suspended } = this.props;
     const { width } = this.state;
 
     if (!isAccount) {
@@ -215,7 +217,13 @@ class AccountGallery extends ImmutablePureComponent {
                 {attachments.map((attachment, index) => attachment === null ? (
                   <LoadMoreMedia key={'more:' + attachments.getIn(index + 1, 'id')} maxId={index > 0 ? attachments.getIn(index - 1, 'id') : null} onLoadMore={this.handleLoadMore} />
                 ) : (
-                  <MediaItem key={attachment.get('id')} attachment={attachment} displayWidth={width} onOpenMedia={this.handleOpenMedia} />
+                  <MediaItem
+                    key={attachment.get('id')}
+                    attachment={attachment}
+                    displayWidth={width}
+                    onOpenMedia={this.handleOpenMedia}
+                    useBlurhash={settings.getIn(['media', 'use_blurhash'])}
+                  />
                 ))}
 
                 {loadOlder}

app/javascript/flavours/glitch/features/audio/index.jsx

@@ -12,7 +12,7 @@ import { throttle, debounce } from 'lodash';
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon } from 'flavours/glitch/components/icon';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';
-import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+import { displayMedia } from 'flavours/glitch/initial_state';
 
 import Visualizer from './visualizer';
 
@@ -56,6 +56,7 @@ class Audio extends PureComponent {
     volume: PropTypes.number,
     muted: PropTypes.bool,
     deployPictureInPicture: PropTypes.func,
+    useBlurhash: PropTypes.bool,
   };
 
   state = {
@@ -472,7 +473,7 @@ class Audio extends PureComponent {
   };
 
   render () {
-    const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash } = this.props;
+    const { src, intl, alt, lang, editable, autoPlay, sensitive, blurhash, useBlurhash } = this.props;
     const { paused, volume, currentTime, duration, buffer, dragging, revealed } = this.state;
     const progress = Math.min((currentTime / duration) * 100, 100);
     const muted = this.state.muted || volume === 0;

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

@@ -466,6 +466,14 @@ class LocalSettingsPage extends PureComponent {
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings__page media'>
         <h1><FormattedMessage id='settings.media' defaultMessage='Media' /></h1>
+        <LocalSettingsPageItem
+          settings={settings}
+          item={['media', 'use_blurhash']}
+          id='mastodon-settings--media-use-blurhash'
+          onChange={onChange}
+        >
+          <FormattedMessage id='setting_use_blurhash' defaultMessage='Show colorful gradients for hidden media' />
+        </LocalSettingsPageItem>
         <LocalSettingsPageItem
           settings={settings}
           item={['media', 'letterbox']}

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

@@ -10,7 +10,6 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon } from 'flavours/glitch/components/icon';
-import { useBlurhash } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 
 const getHostname = url => {
@@ -49,6 +48,7 @@ export default class Card extends PureComponent {
     onOpenMedia: PropTypes.func.isRequired,
     compact: PropTypes.bool,
     sensitive: PropTypes.bool,
+    useBlurhash: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -138,7 +138,7 @@ export default class Card extends PureComponent {
   }
 
   render () {
-    const { card, compact } = this.props;
+    const { card, compact, useBlurhash } = this.props;
     const { embedded, revealed } = this.state;
 
     if (card === null) {

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

@@ -185,6 +185,7 @@ class DetailedStatus extends ImmutablePureComponent {
             blurhash={attachment.get('blurhash')}
             height={150}
             onToggleVisibility={this.props.onToggleMediaVisibility}
+            useBlurhash={settings.getIn(['media', 'use_blurhash'])}
           />,
         );
         mediaIcons.push('music');
@@ -209,6 +210,7 @@ class DetailedStatus extends ImmutablePureComponent {
             autoplay
             visible={this.props.showMedia}
             onToggleVisibility={this.props.onToggleMediaVisibility}
+            useBlurhash={settings.getIn(['media', 'use_blurhash'])}
           />,
         );
         mediaIcons.push('video-camera');
@@ -225,12 +227,19 @@ class DetailedStatus extends ImmutablePureComponent {
             onOpenMedia={this.props.onOpenMedia}
             visible={this.props.showMedia}
             onToggleVisibility={this.props.onToggleMediaVisibility}
+            useBlurhash={settings.getIn(['media', 'use_blurhash'])}
           />,
         );
         mediaIcons.push('picture-o');
       }
     } else if (status.get('card')) {
-      media.push(<Card sensitive={status.get('sensitive')} onOpenMedia={this.props.onOpenMedia} card={status.get('card')} />);
+      media.push(
+        <Card
+          sensitive={status.get('sensitive')}
+          onOpenMedia={this.props.onOpenMedia}
+          card={status.get('card')}
+          useBlurhash={settings.getIn(['media', 'use_blurhash'])} />
+      );
       mediaIcons.push('link');
     }
 

app/javascript/flavours/glitch/features/video/index.jsx

@@ -11,7 +11,7 @@ import { throttle } from 'lodash';
 
 import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { Icon } from 'flavours/glitch/components/icon';
-import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+import { displayMedia } from 'flavours/glitch/initial_state';
 
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
@@ -129,6 +129,7 @@ class Video extends PureComponent {
     muted: PropTypes.bool,
     componentIndex: PropTypes.number,
     autoFocus: PropTypes.bool,
+    useBlurhash: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -509,8 +510,35 @@ class Video extends PureComponent {
   }
 
   render () {
-    const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props;
-    const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, revealed } = this.state;
+    const {
+      preview,
+      src,
+      inline,
+      onOpenVideo,
+      onCloseVideo,
+      intl,
+      alt,
+      lang,
+      letterbox,
+      fullwidth,
+      detailed,
+      sensitive,
+      editable,
+      blurhash,
+      autoFocus,
+      useBlurhash
+    } = this.props;
+    const {
+      currentTime,
+      duration,
+      volume,
+      buffer,
+      dragging,
+      paused,
+      fullscreen,
+      hovered,
+      revealed
+    } = this.state;
     const progress = Math.min((currentTime / duration) * 100, 100);
     const muted = this.state.muted || volume === 0;