[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/components/media_gallery.jsx

@@ -11,7 +11,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { debounce } from 'lodash';
 
 import { Blurhash } from 'flavours/glitch/components/blurhash';
-import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
+import { autoPlayGif, displayMedia } from 'flavours/glitch/initial_state';
 
 import { IconButton } from './icon_button';
 
@@ -51,6 +51,7 @@ class Item extends PureComponent {
     displayWidth: PropTypes.number,
     visible: PropTypes.bool.isRequired,
     autoplay: PropTypes.bool,
+    useBlurhash: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -105,7 +106,17 @@ class Item extends PureComponent {
   };
 
   render () {
-    const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props;
+    const {
+      attachment,
+      lang,
+      index,
+      size,
+      standalone,
+      letterbox,
+      displayWidth,
+      visible,
+      useBlurhash,
+    } = this.props;
 
     let badges = [], thumbnail;
 
@@ -243,6 +254,7 @@ class MediaGallery extends PureComponent {
     visible: PropTypes.bool,
     autoplay: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
+    useBlurhash: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -326,7 +338,7 @@ class MediaGallery extends PureComponent {
   }
 
   render () {
-    const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay } = this.props;
+    const { media, lang, intl, sensitive, letterbox, fullwidth, defaultWidth, autoplay, useBlurhash } = this.props;
     const { visible } = this.state;
     const size     = media.take(4).size;
     const uncached = media.every(attachment => attachment.get('type') === 'unknown');
@@ -346,9 +358,33 @@ class MediaGallery extends PureComponent {
     }
 
     if (this.isStandaloneEligible()) {
-      children = <Item standalone autoplay={autoplay} onClick={this.handleClick} attachment={media.get(0)} lang={lang} displayWidth={width} visible={visible} />;
+      children = (
+        <Item
+          standalone
+          autoplay={autoplay}
+          onClick={this.handleClick}
+          attachment={media.get(0)}
+          lang={lang}
+          displayWidth={width}
+          visible={visible}
+          useBlurhash={useBlurhash}
+        />
+      );
     } else {
-      children = media.take(4).map((attachment, i) => <Item key={attachment.get('id')} autoplay={autoplay} onClick={this.handleClick} attachment={attachment} index={i} lang={lang} size={size} letterbox={letterbox} displayWidth={width} visible={visible || uncached} />);
+      children = media.take(4).map((attachment, i) => (
+        <Item
+          key={attachment.get('id')}
+          autoplay={autoplay}
+          onClick={this.handleClick}
+          attachment={attachment}
+          index={i}
+          lang={lang}
+          size={size}
+          letterbox={letterbox}
+          displayWidth={width}
+          visible={visible || uncached}
+          useBlurhash={useBlurhash} />
+      ));
     }
 
     if (uncached) {

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

@@ -667,6 +667,7 @@ class Status extends ImmutablePureComponent {
                 blurhash={attachment.get('blurhash')}
                 visible={this.state.showMedia}
                 onToggleVisibility={this.handleToggleMediaVisibility}
+                useBlurhash={settings.getIn(['media', 'use_blurhash'])}
               />
             )}
           </Bundle>,
@@ -694,6 +695,7 @@ class Status extends ImmutablePureComponent {
               deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
               visible={this.state.showMedia}
               onToggleVisibility={this.handleToggleMediaVisibility}
+              useBlurhash={settings.getIn(['media', 'use_blurhash'])}
             />)}
           </Bundle>,
         );
@@ -714,6 +716,7 @@ class Status extends ImmutablePureComponent {
                 defaultWidth={this.props.cachedMediaWidth}
                 visible={this.state.showMedia}
                 onToggleVisibility={this.handleToggleMediaVisibility}
+                useBlurhash={settings.getIn(['media', 'use_blurhash'])}
               />
             )}
           </Bundle>,
@@ -731,6 +734,7 @@ class Status extends ImmutablePureComponent {
           card={status.get('card')}
           compact
           sensitive={status.get('sensitive')}
+          useBlurhash={settings.getIn(['media', 'use_blurhash'])}
         />,
       );
       mediaIcons.push('link');