From b398001533493389f6bcf0db6351968ee5754214 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 29 Nov 2022 18:40:12 -0800
Subject: [PATCH] moved reduced motion query to script

---
 package.json                                  |  2 +-
 packages/client/src/components/MkSparkle.vue  |  4 +-
 .../global/MkMisskeyFlavoredMarkdown.vue      |  6 ---
 packages/client/src/components/mfm.ts         | 40 ++++++++++---------
 packages/client/src/scripts/reduced-motion.ts |  3 ++
 5 files changed, 27 insertions(+), 28 deletions(-)
 create mode 100644 packages/client/src/scripts/reduced-motion.ts

diff --git a/package.json b/package.json
index b587e2d9f8..48ea31199e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.119.0-calc.18-rc.3",
+	"version": "12.119.0-calc.18-rc.4",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkSparkle.vue b/packages/client/src/components/MkSparkle.vue
index ba6089ab66..2311adce83 100644
--- a/packages/client/src/components/MkSparkle.vue
+++ b/packages/client/src/components/MkSparkle.vue
@@ -65,18 +65,18 @@
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref } from 'vue';
+import { reducedMotion } from '@/scripts/reduced-motion';
 
 const particles = ref([]);
 const el = ref<HTMLElement>();
 const width = ref(0);
 const height = ref(0);
 const colors = ['#eb6f92', '#9ccfd8', '#f6c177', '#f6c177', '#f6c177'];
-const reducedQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
 let stop = false;
 let ro: ResizeObserver | undefined;
 
 onMounted(() => {
-	if (!reducedQuery.matches) {
+	if (!reducedMotion()) {
 		ro = new ResizeObserver((entries, observer) => {
 			width.value = el.value?.offsetWidth + 64;
 			height.value = el.value?.offsetHeight + 64;
diff --git a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
index f527b7dc4d..70d0108e9f 100644
--- a/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
+++ b/packages/client/src/components/global/MkMisskeyFlavoredMarkdown.vue
@@ -156,12 +156,6 @@ const props = withDefaults(defineProps<{
 	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
 	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
 }
-
-@media(prefers-reduced-motion) {
-	span[class^='mfm'], span[class*=' mfm'] {
-		animation: none !important;
-	}
-}
 </style>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts
index 5b1e6839c9..fc48812555 100644
--- a/packages/client/src/components/mfm.ts
+++ b/packages/client/src/components/mfm.ts
@@ -1,5 +1,6 @@
-import { VNode, defineComponent, h } from 'vue';
+import { defineComponent, h } from 'vue';
 import * as mfm from 'mfm-js';
+import type { VNode } from 'vue';
 import MkUrl from '@/components/global/MkUrl.vue';
 import MkLink from '@/components/MkLink.vue';
 import MkMention from '@/components/MkMention.vue';
@@ -12,6 +13,7 @@ import MkSparkle from '@/components/MkSparkle.vue';
 import MkA from '@/components/global/MkA.vue';
 import { host } from '@/config';
 import { MFM_TAGS } from '@/scripts/mfm-tags';
+import { reducedMotion } from '@/scripts/reduced-motion';
 
 export default defineComponent({
 	props: {
@@ -92,22 +94,22 @@ export default defineComponent({
 					switch (token.props.name) {
 						case 'tada': {
 							const speed = validTime(token.props.args.speed) || '1s';
-							style = 'font-size: 150%;' + (this.$store.state.animatedMfm ? `animation: tada ${speed} linear infinite both;` : '');
+							style = 'font-size: 150%;' + (this.$store.state.animatedMfm && !reducedMotion() ? `animation: tada ${speed} linear infinite both;` : '');
 							break;
 						}
 						case 'jelly': {
 							const speed = validTime(token.props.args.speed) || '1s';
-							style = (this.$store.state.animatedMfm ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
+							style = (this.$store.state.animatedMfm && !reducedMotion() ? `animation: mfm-rubberBand ${speed} linear infinite both;` : '');
 							break;
 						}
 						case 'twitch': {
 							const speed = validTime(token.props.args.speed) || '0.5s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-twitch ${speed} ease infinite;` : '';
+							style = this.$store.state.animatedMfm && !reducedMotion() ? `animation: mfm-twitch ${speed} ease infinite;` : '';
 							break;
 						}
 						case 'shake': {
 							const speed = validTime(token.props.args.speed) || '0.5s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-shake ${speed} ease infinite;` : '';
+							style = this.$store.state.animatedMfm && !reducedMotion() ? `animation: mfm-shake ${speed} ease infinite;` : '';
 							break;
 						}
 						case 'spin': {
@@ -120,19 +122,30 @@ export default defineComponent({
 								token.props.args.y ? 'mfm-spinY' :
 								'mfm-spin';
 							const speed = validTime(token.props.args.speed) || '1.5s';
-							style = this.$store.state.animatedMfm ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
+							style = this.$store.state.animatedMfm && !reducedMotion() ? `animation: ${anime} ${speed} linear infinite; animation-direction: ${direction};` : '';
 							break;
 						}
 						case 'jump': {
 							const speed = validTime(token.props.args.speed) || '0.75s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-jump ${speed} linear infinite;` : '';
+							style = this.$store.state.animatedMfm && !reducedMotion() ? `animation: mfm-jump ${speed} linear infinite;` : '';
 							break;
 						}
 						case 'bounce': {
 							const speed = validTime(token.props.args.speed) || '0.75s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
+							style = this.$store.state.animatedMfm && !reducedMotion() ? `animation: mfm-bounce ${speed} linear infinite; transform-origin: center bottom;` : '';
 							break;
 						}
+						case 'rainbow': {
+							const speed = validTime(token.props.args.speed) || '1s';
+							style = this.$store.state.animatedMfm && !reducedMotion() ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
+							break;
+						}
+						case 'sparkle': {
+							if (!this.$store.state.animatedMfm && !reducedMotion()) {
+								return genEl(token.children);
+							}
+							return h(MkSparkle, {}, genEl(token.children));
+						}
 						case 'flip': {
 							const transform =
 								(token.props.args.h && token.props.args.v) ? 'scale(-1, -1)' :
@@ -173,17 +186,6 @@ export default defineComponent({
 								class: '_mfm_blur_',
 							}, genEl(token.children));
 						}
-						case 'rainbow': {
-							const speed = validTime(token.props.args.speed) || '1s';
-							style = this.$store.state.animatedMfm ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
-							break;
-						}
-						case 'sparkle': {
-							if (!this.$store.state.animatedMfm) {
-								return genEl(token.children);
-							}
-							return h(MkSparkle, {}, genEl(token.children));
-						}
 						case 'rotate': {
 							const rotate =
 								token.props.args.x ? 'perspective(128px) rotateX' :
diff --git a/packages/client/src/scripts/reduced-motion.ts b/packages/client/src/scripts/reduced-motion.ts
new file mode 100644
index 0000000000..cccbb2cabb
--- /dev/null
+++ b/packages/client/src/scripts/reduced-motion.ts
@@ -0,0 +1,3 @@
+export function reducedMotion(): boolean {
+	return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}