From 1d75726a758a5a43073fdfea8b714051b34c930c Mon Sep 17 00:00:00 2001
From: Germain Souquet <germain@souquet.com>
Date: Thu, 8 Apr 2021 11:05:45 +0100
Subject: [PATCH] Honour prefers reduced motion for read receipts

---
 res/css/_common.scss                | 10 ++++++++++
 res/css/views/rooms/_EventTile.scss |  4 ++--
 src/Velociraptor.js                 |  2 +-
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 0093bde0ab..0b363edaee 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -28,6 +28,16 @@ $MessageTimestamp_width_hover: calc($MessageTimestamp_width - 2 * $EventTile_e2e
 
 :root {
     font-size: 10px;
+
+    --transition-short: .1s;
+    --transition-standard: .3s;
+}
+
+@media (prefers-reduced-motion) {
+    :root {
+        --transition-short: 0;
+        --transition-standard: 0;
+    }
 }
 
 html {
diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss
index a82c894ac5..f455931f08 100644
--- a/res/css/views/rooms/_EventTile.scss
+++ b/res/css/views/rooms/_EventTile.scss
@@ -284,8 +284,8 @@ $left-gutter: 64px;
     width: $font-14px;
 
     transition:
-        left .1s ease-out,
-        top .3s ease-out;
+        left var(--transition-short) ease-out,
+        top var(--transition-standard) ease-out;
 }
 
 .mx_EventTile_readAvatarRemainder {
diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index 4fd9a23c82..c453f56fdb 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -73,7 +73,7 @@ export default class Velociraptor extends React.Component {
                             }
                         });
 
-                    console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
+                    // console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
                 }
                 if (oldNode && oldNode.style.visibility === 'hidden' && c.props.style.visibility === 'visible') {
                     oldNode.style.visibility = c.props.style.visibility;