[bugfix] only play animations when prefers-reduced-motion: no-preference

this can be generalised further i think but for now it does what i need it to do.

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

@@ -6,7 +6,6 @@ import { defineMessages, FormattedMessage, injectIntl } from "react-intl";
 
 import ImmutablePropTypes from "react-immutable-proptypes";
 
-import { languages as preloadedLanguages } from "flavours/glitch/initial_state";
 
 //  Our imports
 import LocalSettingsPageItem from "./item";
@@ -36,12 +35,6 @@ const messages = defineMessages({
   direct: { id: "privacy.direct.short", defaultMessage: "Mentioned people only" },
 });
 
-const langs = []
-
-for (const lang of preloadedLanguages) {
-  langs.push({"value": lang[0], "label": lang[1]})
-}
-
 class LocalSettingsPage extends PureComponent {
 
   static propTypes = {
@@ -210,16 +203,6 @@ class LocalSettingsPage extends PureComponent {
     ({ intl, onChange, settings }) => (
       <div className='glitch local-settings__page compose_box_opts'>
         <h1><FormattedMessage id='settings.compose_box_opts' defaultMessage='Compose box' /></h1>
-        <LocalSettingsPageItem
-          settings={settings}
-          item={["default_language"]}
-          id='mastodon-settings--default-language'
-          select={langs}
-          onChange={onChange}
-        >
-          <FormattedMessage id='settings.default_language' defaultMessage='Default language for new toots' />
-        </LocalSettingsPageItem>
-
         <LocalSettingsPageItem
           settings={settings}
           item={["always_show_spoilers_field"]}

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

@@ -39,7 +39,7 @@ export default class LocalSettingsPageItem extends PureComponent {
 
   render () {
     const { handleChange } = this;
-    const { settings, item, id, inputProps, select, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
+    const { settings, item, id, inputProps, options, children, dependsOn, dependsOnNot, placeholder, disabled } = this.props;
     let enabled = !disabled;
 
     if (dependsOn) {
@@ -52,31 +52,6 @@ export default class LocalSettingsPageItem extends PureComponent {
         enabled = enabled && !settings.getIn(dependsOnNot[i]);
       }
     }
-    
-    if (select && select.length > 0) {
-      const currentValue = settings.getIn(item);
-      const optionElems = select && select.length > 0 && select.map((opt) => {
-        return (
-          <option
-            value={opt.value}
-            selected={currentValue === opt.value}
-          >
-            {opt.label}
-          </option>
-        )
-      })
-      return (
-        <div className='glitch local-settings__page__item select'>
-          <fieldset>
-            <label>Default language:
-              <select>
-                {optionElems}
-              </select>
-            </label>
-          </fieldset>
-        </div>
-      );
-    }
 
     if (options && options.length > 0) {
       const currentValue = settings.getIn(item);

app/javascript/flavours/glitch/main.jsx

@@ -5,6 +5,7 @@ import Mastodon from "flavours/glitch/containers/mastodon";
 import { me } from "flavours/glitch/initial_state";
 import * as perf from "flavours/glitch/performance";
 import ready from "flavours/glitch/ready";
+import { setReducedMotionBodyClass } from "flavours/glitch/utils/accessibility";
 import { store } from "flavours/glitch/store";
 
 /**
@@ -12,6 +13,7 @@ import { store } from "flavours/glitch/store";
  */
 function main() {
   perf.start("main()");
+  setReducedMotionBodyClass();
 
   return ready(async () => {
     const mountNode = document.getElementById("mastodon");

app/javascript/flavours/glitch/styles/tangerine/status-bar.scss

@@ -1,12 +1,12 @@
 /* 🚥 Status Bar */
-.status-favourite.active svg {
+.no-reduce-motion .status-favourite.active svg {
     animation: bounce 0.4s ease-out;
 }
 
-.status-boost.active svg {
+.no-reduce-motion .status-boost.active svg {
     animation: launch 1.2s ease-in 1;
 }
 
-.status-bookmark.active svg {
+.no-reduce-motion .status-bookmark.active svg {
     animation: bounce-vertical 0.4s ease-out;
 }

app/javascript/flavours/glitch/utils/accessibility.js

@@ -0,0 +1,26 @@
+import ready from "../ready";
+
+ready(() => {
+  setReducedMotionBodyClass();
+});
+
+export function setMediaQueryBodyClass(query, className) {
+  if (query.matches) {
+    document.body.classList.add(className.true);
+    document.body.classList.remove(className.false);
+  } else {
+    document.body.classList.add(className.false);
+    document.body.classList.remove(className.true);
+  }
+}
+
+export function setReducedMotionBodyClass() {
+  const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const className = {
+    true: "reduce-motion",
+    false: "no-reduce-motion",
+  };
+
+  setMediaQueryBodyClass(prefersReducedMotion, className);
+  prefersReducedMotion.addEventListener("change", () => setReducedMotionBodyClass(prefersReducedMotion));
+}

public/index.html

@@ -26,7 +26,7 @@
 
     <script src="/packs/js/flavours/glitch/home.js"></script>
 </head>
-<body class='app-body no-reduce-motion system-font'>
+<body class='app-body system-font'>
 <div class='app-holder' data-props='{&quot;locale&quot;:&quot;en&quot;}' id='mastodon'>
 </div>
 </body>