diff --git a/src/settings/Settings.ts b/src/settings/Settings.ts index 4476bd2871..ca5e2f1d04 100644 --- a/src/settings/Settings.ts +++ b/src/settings/Settings.ts @@ -37,6 +37,7 @@ import UIFeatureController from "./controllers/UIFeatureController"; import { UIFeature } from "./UIFeature"; import { OrderedMultiController } from "./controllers/OrderedMultiController"; import {Layout} from "./Layout"; +import ReducedMotionController from './controllers/ReducedMotionController'; // These are just a bunch of helper arrays to avoid copy/pasting a bunch of times const LEVELS_ROOM_SETTINGS = [ @@ -652,6 +653,7 @@ export const SETTINGS: {[setting: string]: ISetting} = { supportedLevels: LEVELS_ACCOUNT_SETTINGS, displayName: _td("Show chat effects (animations when receiving e.g. confetti)"), default: true, + controller: new ReducedMotionController(), }, "Widgets.pinned": { // deprecated supportedLevels: LEVELS_ROOM_OR_ACCOUNT, diff --git a/src/settings/controllers/ReducedMotionController.ts b/src/settings/controllers/ReducedMotionController.ts new file mode 100644 index 0000000000..d98ca16513 --- /dev/null +++ b/src/settings/controllers/ReducedMotionController.ts @@ -0,0 +1,45 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import SettingController from "./SettingController"; +import { SettingLevel } from "../SettingLevel"; + +/** + * For animation-like settings, this controller checks whether the user has + * indicated they prefer reduced motion via browser or OS level settings. + * If they have, this forces the setting value to false. + */ +export default class ReducedMotionController extends SettingController { + public getValueOverride( + level: SettingLevel, + roomId: string, + calculatedValue: any, + calculatedAtLevel: SettingLevel, + ): any { + if (this.prefersReducedMotion()) { + return false; + } + return null; // no override + } + + public get settingDisabled(): boolean { + return this.prefersReducedMotion(); + } + + private prefersReducedMotion(): boolean { + return window.matchMedia("(prefers-reduced-motion: reduce)").matches; + } +}