From 4e16e23acd6db761ac7490c7a4c0b84cee490389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Mon, 27 Oct 2025 18:41:03 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20confetti=E3=81=AE=E5=AE=9F?=
 =?UTF-8?q?=E8=A1=8C=E3=81=8C=E3=82=A2=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E8=A8=AD=E5=AE=9A=E3=82=92=E8=80=83=E6=85=AE?=
 =?UTF-8?q?=E3=81=97=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84=E5=95=8F=E9=A1=8C?=
 =?UTF-8?q?=E3=82=92=E4=BF=AE=E6=AD=A3=20(#16714)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* Update Changelog

---------

Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 CHANGELOG.md                              |  2 +-
 packages/frontend-shared/js/config.ts     |  1 +
 packages/frontend/src/preferences/def.ts  |  7 ++++---
 packages/frontend/src/store.ts            |  7 ++++---
 packages/frontend/src/utility/confetti.ts | 12 ++++++++++--
 5 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 903724d99f..ea10fb9e87 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 -
 
 ### Client
--
+- Fix: 紙吹雪エフェクトがアニメーション設定を考慮せず常に表示される問題を修正
 
 ### Server
 -
diff --git a/packages/frontend-shared/js/config.ts b/packages/frontend-shared/js/config.ts
index 6272d3f6b9..8021c4f022 100644
--- a/packages/frontend-shared/js/config.ts
+++ b/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;
diff --git a/packages/frontend/src/preferences/def.ts b/packages/frontend/src/preferences/def.ts
index ebd031b240..915b192605 100644
--- a/packages/frontend/src/preferences/def.ts
+++ b/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
diff --git a/packages/frontend/src/store.ts b/packages/frontend/src/store.ts
index 87b2637a64..073fbba0fb 100644
--- a/packages/frontend/src/store.ts
+++ b/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',
diff --git a/packages/frontend/src/utility/confetti.ts b/packages/frontend/src/utility/confetti.ts
index c19149875f..b95c26345e 100644
--- a/packages/frontend/src/utility/confetti.ts
+++ b/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;
 	}