fix(frontend): confettiの実行がアニメーション設定を考慮していない問題を修正 (#16714)

* fix(frontend): confettiの実行がアニメーション設定を考慮していない問題を修正

* Update Changelog

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>

CHANGELOG.md

@@ -4,7 +4,7 @@
 -
 
 ### Client
--
+- Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 
 ### Server
 -

packages/frontend-shared/js/config.ts

@@ -20,3 +20,4 @@ export const instanceName = (siteName === 'Misskey' || siteName == null) ? host
 export const ui = localStorage.getItem('ui');
 export const debug = localStorage.getItem('debug') === 'true';
 export const isSafeMode = localStorage.getItem('isSafeMode') === 'true';
+export const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion)').matches;

packages/frontend/src/preferences/def.ts

@@ -5,6 +5,7 @@
 
 import * as Misskey from 'misskey-js';
 import { hemisphere } from '@@/js/intl-const.js';
+import { prefersReducedMotion } from '@@/js/config.js';
 import { definePreferences } from './manager.js';
 import type { Theme } from '@/theme.js';
 import type { SoundType } from '@/utility/sound.js';
@@ -211,10 +212,10 @@ export const PREF_DEF = definePreferences({
 		default: false,
 	},
 	animation: {
-		default: !window.matchMedia('(prefers-reduced-motion)').matches,
+		default: !prefersReducedMotion,
 	},
 	animatedMfm: {
-		default: !window.matchMedia('(prefers-reduced-motion)').matches,
+		default: !prefersReducedMotion,
 	},
 	advancedMfm: {
 		default: true,
@@ -232,7 +233,7 @@ export const PREF_DEF = definePreferences({
 		default: false,
 	},
 	disableShowingAnimatedImages: {
-		default: window.matchMedia('(prefers-reduced-motion)').matches,
+		default: prefersReducedMotion,
 	},
 	emojiStyle: {
 		default: 'twemoji', // twemoji / fluentEmoji / native

packages/frontend/src/store.ts

@@ -7,6 +7,7 @@ import { markRaw, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import lightTheme from '@@/themes/l-light.json5';
 import darkTheme from '@@/themes/d-green-lime.json5';
+import { prefersReducedMotion } from '@@/js/config.js';
 import { hemisphere } from '@@/js/intl-const.js';
 import type { DeviceKind } from '@/utility/device-kind.js';
 import type { Plugin } from '@/plugin.js';
@@ -220,11 +221,11 @@ export const store = markRaw(new Pizzax('base', {
 	},
 	animation: {
 		where: 'device',
-		default: !window.matchMedia('(prefers-reduced-motion)').matches,
+		default: !prefersReducedMotion,
 	},
 	animatedMfm: {
 		where: 'device',
-		default: !window.matchMedia('(prefers-reduced-motion)').matches,
+		default: !prefersReducedMotion,
 	},
 	advancedMfm: {
 		where: 'device',
@@ -248,7 +249,7 @@ export const store = markRaw(new Pizzax('base', {
 	},
 	disableShowingAnimatedImages: {
 		where: 'device',
-		default: window.matchMedia('(prefers-reduced-motion)').matches,
+		default: prefersReducedMotion,
 	},
 	emojiStyle: {
 		where: 'device',

packages/frontend/src/utility/confetti.ts

@@ -5,13 +5,21 @@
 
 import _confetti from 'canvas-confetti';
 import * as os from '@/os.js';
+import { prefer } from '@/preferences.js';
 
 export function confetti(options: { duration?: number; } = {}) {
+	if (!prefer.s.animation) return;
+
 	const duration = options.duration ?? 1000 * 4;
 	const animationEnd = Date.now() + duration;
-	const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: os.claimZIndex('high') };
+	const defaults = {
+		startVelocity: 30,
+		spread: 360,
+		ticks: 60,
+		zIndex: os.claimZIndex('high'),
+	} satisfies _confetti.Options;
 
-	function randomInRange(min, max) {
+	function randomInRange(min: number, max: number) {
 		return Math.random() * (max - min) + min;
 	}