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; }