[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}