Add user-controlled animation preferences and reduce motion support
- Persist prefersReducedMotion and animationSpeedMultiplier in user profile - Provide UI controls to toggle reduce motion and adjust animation speed globally - Centralize animation preferences via provider and useAnimationPreferences hook - Apply preferences to charts’ animations (duration, enabled/disabled) - Inline script in layout to apply preferences early and avoid FOUC - Update CSS to respect user preference with reduced motion overrides and variable animation speeds
This commit is contained in:
@@ -0,0 +1,460 @@
|
||||
"use client";
|
||||
|
||||
/**
|
||||
* AnimationPreferencesProvider
|
||||
*
|
||||
* Centralized manager for user animation / motion preferences:
|
||||
* - prefersReducedMotion (boolean)
|
||||
* - animationSpeedMultiplier (0.25x – 4x)
|
||||
*
|
||||
* Responsibilities:
|
||||
* 1. Hydrate from (priority):
|
||||
* - Inline early localStorage value (if already written by an inline script in layout)
|
||||
* - Existing localStorage value
|
||||
* - Server value (tRPC - user profile)
|
||||
* - Initial props (e.g. server-fetched)
|
||||
* - System media query (prefers-reduced-motion)
|
||||
* 2. Apply preferences to:
|
||||
* - documentElement class list (adds / removes .user-reduce-motion)
|
||||
* - CSS custom properties: --animation-speed-fast/normal/slow
|
||||
* 3. Persist to localStorage
|
||||
* 4. Sync to server via tRPC mutation (debounced & resilient)
|
||||
*
|
||||
* Usage:
|
||||
* <AnimationPreferencesProvider
|
||||
* initial={{
|
||||
* prefersReducedMotion: serverValue.prefersReducedMotion,
|
||||
* animationSpeedMultiplier: serverValue.animationSpeedMultiplier
|
||||
* }}
|
||||
* >
|
||||
* <App />
|
||||
* </AnimationPreferencesProvider>
|
||||
*
|
||||
* const {
|
||||
* prefersReducedMotion,
|
||||
* animationSpeedMultiplier,
|
||||
* updatePreferences,
|
||||
* isUpdating
|
||||
* } = useAnimationPreferences();
|
||||
*
|
||||
* updatePreferences({ animationSpeedMultiplier: 1.5 });
|
||||
*
|
||||
* NOTE: After integrating this provider, remove the duplicated logic
|
||||
* from the settings page (SettingsContent) and call updatePreferences()
|
||||
* instead of directly manipulating DOM / CSS variables there.
|
||||
*/
|
||||
|
||||
import React, {
|
||||
createContext,
|
||||
useCallback,
|
||||
useContext,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { api } from "~/trpc/react";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
||||
type AnimationPreferences = {
|
||||
prefersReducedMotion: boolean;
|
||||
animationSpeedMultiplier: number;
|
||||
};
|
||||
|
||||
type PartialPrefs = Partial<AnimationPreferences>;
|
||||
|
||||
interface AnimationPreferencesContextValue extends AnimationPreferences {
|
||||
updatePreferences: (patch: PartialPrefs, opts?: { sync?: boolean }) => void;
|
||||
setPrefersReducedMotion: (val: boolean) => void;
|
||||
setAnimationSpeedMultiplier: (val: number) => void;
|
||||
isUpdating: boolean;
|
||||
lastSyncedAt: number | null;
|
||||
}
|
||||
|
||||
interface AnimationPreferencesProviderProps {
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* Optional initial values (e.g. from server / tRPC prefetch).
|
||||
*/
|
||||
initial?: PartialPrefs;
|
||||
/**
|
||||
* Disable auto-sync to server (mostly for test environments).
|
||||
*/
|
||||
autoSync?: boolean;
|
||||
}
|
||||
|
||||
const STORAGE_KEY = "bv.animation.prefs";
|
||||
const MIN_SPEED = 0.25;
|
||||
const MAX_SPEED = 4;
|
||||
const DEFAULT_SPEED = 1;
|
||||
const DEFAULT_PREFERS_REDUCED = false;
|
||||
|
||||
const AnimationPreferencesContext =
|
||||
createContext<AnimationPreferencesContextValue | null>(null);
|
||||
|
||||
function clampSpeed(value: number): number {
|
||||
if (Number.isNaN(value)) return DEFAULT_SPEED;
|
||||
return Math.min(MAX_SPEED, Math.max(MIN_SPEED, value));
|
||||
}
|
||||
|
||||
function readLocalStorage(): PartialPrefs | null {
|
||||
try {
|
||||
const raw = localStorage.getItem(STORAGE_KEY);
|
||||
if (!raw) return null;
|
||||
const parsed = JSON.parse(raw) as PartialPrefs;
|
||||
if (
|
||||
typeof parsed === "object" &&
|
||||
parsed !== null &&
|
||||
("prefersReducedMotion" in parsed || "animationSpeedMultiplier" in parsed)
|
||||
) {
|
||||
return {
|
||||
prefersReducedMotion:
|
||||
typeof parsed.prefersReducedMotion === "boolean"
|
||||
? parsed.prefersReducedMotion
|
||||
: undefined,
|
||||
animationSpeedMultiplier:
|
||||
typeof parsed.animationSpeedMultiplier === "number"
|
||||
? clampSpeed(parsed.animationSpeedMultiplier)
|
||||
: undefined,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function writeLocalStorage(prefs: AnimationPreferences) {
|
||||
try {
|
||||
localStorage.setItem(
|
||||
STORAGE_KEY,
|
||||
JSON.stringify({
|
||||
prefersReducedMotion: prefs.prefersReducedMotion,
|
||||
animationSpeedMultiplier: prefs.animationSpeedMultiplier,
|
||||
}),
|
||||
);
|
||||
} catch {
|
||||
// Fail silently; storage may be unavailable
|
||||
}
|
||||
}
|
||||
|
||||
function applyPreferencesToDOM(prefs: AnimationPreferences) {
|
||||
if (typeof document === "undefined") return;
|
||||
const root = document.documentElement;
|
||||
|
||||
// Class toggle
|
||||
if (prefs.prefersReducedMotion) {
|
||||
root.classList.add("user-reduce-motion");
|
||||
} else {
|
||||
root.classList.remove("user-reduce-motion");
|
||||
}
|
||||
|
||||
// Derive effective speeds
|
||||
const multiplier = prefs.animationSpeedMultiplier || 1;
|
||||
|
||||
const fast = prefs.prefersReducedMotion
|
||||
? 0.01
|
||||
: parseFloat((0.15 / multiplier).toFixed(4));
|
||||
const normal = prefs.prefersReducedMotion
|
||||
? 0.01
|
||||
: parseFloat((0.3 / multiplier).toFixed(4));
|
||||
const slow = prefs.prefersReducedMotion
|
||||
? 0.01
|
||||
: parseFloat((0.5 / multiplier).toFixed(4));
|
||||
|
||||
root.style.setProperty("--animation-speed-fast", `${fast}s`);
|
||||
root.style.setProperty("--animation-speed-normal", `${normal}s`);
|
||||
root.style.setProperty("--animation-speed-slow", `${slow}s`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Provider component
|
||||
*/
|
||||
export function AnimationPreferencesProvider({
|
||||
children,
|
||||
initial,
|
||||
autoSync = true,
|
||||
}: AnimationPreferencesProviderProps) {
|
||||
const updateMutation = api.settings.updateAnimationPreferences.useMutation();
|
||||
const { data: session } = useSession();
|
||||
const isAuthed = !!session?.user;
|
||||
// Server query only when authenticated
|
||||
const { data: serverPrefs } = api.settings.getAnimationPreferences.useQuery(
|
||||
undefined,
|
||||
{
|
||||
enabled: isAuthed,
|
||||
refetchOnWindowFocus: false,
|
||||
staleTime: 60_000,
|
||||
},
|
||||
);
|
||||
|
||||
const [prefersReducedMotion, setPrefersReducedMotion] = useState<boolean>(
|
||||
initial?.prefersReducedMotion ?? DEFAULT_PREFERS_REDUCED,
|
||||
);
|
||||
const [animationSpeedMultiplier, setAnimationSpeedMultiplier] =
|
||||
useState<number>(
|
||||
clampSpeed(initial?.animationSpeedMultiplier ?? DEFAULT_SPEED),
|
||||
);
|
||||
const [lastSyncedAt, setLastSyncedAt] = useState<number | null>(null);
|
||||
const pendingSyncRef = useRef<PartialPrefs | null>(null);
|
||||
const isHydratedRef = useRef(false);
|
||||
const serverHydratedRef = useRef(false);
|
||||
const [isUpdating, setIsUpdating] = useState(false);
|
||||
|
||||
// Hydration: run once on mount (local + system + initial)
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const stored = readLocalStorage();
|
||||
|
||||
const systemReduced =
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
|
||||
const finalPrefers =
|
||||
stored?.prefersReducedMotion ??
|
||||
initial?.prefersReducedMotion ??
|
||||
systemReduced ??
|
||||
DEFAULT_PREFERS_REDUCED;
|
||||
const finalSpeed = clampSpeed(
|
||||
stored?.animationSpeedMultiplier ??
|
||||
initial?.animationSpeedMultiplier ??
|
||||
DEFAULT_SPEED,
|
||||
);
|
||||
|
||||
setPrefersReducedMotion(finalPrefers);
|
||||
setAnimationSpeedMultiplier(finalSpeed);
|
||||
applyPreferencesToDOM({
|
||||
prefersReducedMotion: finalPrefers,
|
||||
animationSpeedMultiplier: finalSpeed,
|
||||
});
|
||||
isHydratedRef.current = true;
|
||||
}, [initial?.prefersReducedMotion, initial?.animationSpeedMultiplier]);
|
||||
|
||||
/**
|
||||
* Core updater
|
||||
*/
|
||||
const performUpdate = useCallback(
|
||||
(patch: PartialPrefs, opts?: { sync?: boolean }) => {
|
||||
setIsUpdating(true);
|
||||
setPrefersReducedMotion((prev) => patch.prefersReducedMotion ?? prev);
|
||||
setAnimationSpeedMultiplier((prev) =>
|
||||
clampSpeed(patch.animationSpeedMultiplier ?? prev),
|
||||
);
|
||||
|
||||
// Normalize patch (avoid mutating the original function argument directly)
|
||||
const normalizedPatch: PartialPrefs = { ...patch };
|
||||
|
||||
// If user enables reduced motion, force the animation speed multiplier to 1x (unless already specified)
|
||||
if (
|
||||
normalizedPatch.prefersReducedMotion === true &&
|
||||
normalizedPatch.animationSpeedMultiplier === undefined &&
|
||||
animationSpeedMultiplier !== 1
|
||||
) {
|
||||
normalizedPatch.animationSpeedMultiplier = 1;
|
||||
}
|
||||
|
||||
const nextReduced =
|
||||
normalizedPatch.prefersReducedMotion ?? prefersReducedMotion;
|
||||
|
||||
let nextSpeed = clampSpeed(
|
||||
normalizedPatch.animationSpeedMultiplier ?? animationSpeedMultiplier,
|
||||
);
|
||||
|
||||
// Enforce 1x when reduced motion is active
|
||||
if (nextReduced && nextSpeed !== 1) {
|
||||
nextSpeed = 1;
|
||||
normalizedPatch.animationSpeedMultiplier ??= 1;
|
||||
}
|
||||
|
||||
const newPrefs: AnimationPreferences = {
|
||||
prefersReducedMotion: nextReduced,
|
||||
animationSpeedMultiplier: nextSpeed,
|
||||
};
|
||||
|
||||
// Apply to DOM immediately
|
||||
applyPreferencesToDOM(newPrefs);
|
||||
|
||||
// Persist locally
|
||||
writeLocalStorage(newPrefs);
|
||||
|
||||
// Optionally sync to server
|
||||
const shouldSync = opts?.sync ?? autoSync;
|
||||
|
||||
if (shouldSync && isAuthed) {
|
||||
pendingSyncRef.current = {
|
||||
prefersReducedMotion: patch.prefersReducedMotion,
|
||||
animationSpeedMultiplier: patch.animationSpeedMultiplier,
|
||||
};
|
||||
updateMutation.mutate(
|
||||
{
|
||||
...(normalizedPatch.prefersReducedMotion !== undefined && {
|
||||
prefersReducedMotion: normalizedPatch.prefersReducedMotion,
|
||||
}),
|
||||
...(normalizedPatch.animationSpeedMultiplier !== undefined && {
|
||||
animationSpeedMultiplier: clampSpeed(
|
||||
normalizedPatch.animationSpeedMultiplier,
|
||||
),
|
||||
}),
|
||||
},
|
||||
{
|
||||
onSuccess: () => {
|
||||
setLastSyncedAt(Date.now());
|
||||
pendingSyncRef.current = null;
|
||||
setIsUpdating(false);
|
||||
},
|
||||
onError: () => {
|
||||
setIsUpdating(false);
|
||||
},
|
||||
},
|
||||
);
|
||||
} else {
|
||||
setIsUpdating(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
prefersReducedMotion,
|
||||
animationSpeedMultiplier,
|
||||
autoSync,
|
||||
updateMutation,
|
||||
isAuthed,
|
||||
],
|
||||
);
|
||||
|
||||
// Secondary hydration: apply server values if they differ AND user hasn't customized locally yet.
|
||||
useEffect(() => {
|
||||
if (!isHydratedRef.current) return;
|
||||
if (serverHydratedRef.current) return;
|
||||
if (!isAuthed || !serverPrefs) return;
|
||||
|
||||
const localIsDefault =
|
||||
prefersReducedMotion === DEFAULT_PREFERS_REDUCED &&
|
||||
animationSpeedMultiplier === DEFAULT_SPEED;
|
||||
|
||||
const differs =
|
||||
serverPrefs.prefersReducedMotion !== prefersReducedMotion ||
|
||||
serverPrefs.animationSpeedMultiplier !== animationSpeedMultiplier;
|
||||
|
||||
if (localIsDefault || differs) {
|
||||
performUpdate(
|
||||
{
|
||||
prefersReducedMotion: serverPrefs.prefersReducedMotion,
|
||||
animationSpeedMultiplier: serverPrefs.animationSpeedMultiplier,
|
||||
},
|
||||
{ sync: false }, // Do not echo immediately back to server
|
||||
);
|
||||
}
|
||||
serverHydratedRef.current = true;
|
||||
}, [
|
||||
serverPrefs,
|
||||
performUpdate,
|
||||
prefersReducedMotion,
|
||||
animationSpeedMultiplier,
|
||||
isAuthed,
|
||||
]);
|
||||
|
||||
const updatePreferences = useCallback<
|
||||
AnimationPreferencesContextValue["updatePreferences"]
|
||||
>(
|
||||
(patch, opts) => {
|
||||
performUpdate(patch, opts);
|
||||
},
|
||||
[performUpdate],
|
||||
);
|
||||
|
||||
// Dedicated setters (they sync by default)
|
||||
const handleSetReduced = useCallback(
|
||||
(val: boolean) => {
|
||||
updatePreferences({ prefersReducedMotion: val });
|
||||
},
|
||||
[updatePreferences],
|
||||
);
|
||||
|
||||
const handleSetSpeed = useCallback(
|
||||
(val: number) => {
|
||||
updatePreferences({ animationSpeedMultiplier: clampSpeed(val) });
|
||||
},
|
||||
[updatePreferences],
|
||||
);
|
||||
|
||||
const value: AnimationPreferencesContextValue = {
|
||||
prefersReducedMotion,
|
||||
animationSpeedMultiplier,
|
||||
updatePreferences,
|
||||
setPrefersReducedMotion: handleSetReduced,
|
||||
setAnimationSpeedMultiplier: handleSetSpeed,
|
||||
isUpdating: isUpdating || updateMutation.isPending,
|
||||
lastSyncedAt,
|
||||
};
|
||||
|
||||
return (
|
||||
<AnimationPreferencesContext.Provider value={value}>
|
||||
{children}
|
||||
</AnimationPreferencesContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hook consumer
|
||||
*/
|
||||
export function useAnimationPreferences(): AnimationPreferencesContextValue {
|
||||
const ctx = useContext(AnimationPreferencesContext);
|
||||
if (!ctx) {
|
||||
throw new Error(
|
||||
"useAnimationPreferences must be used within an AnimationPreferencesProvider",
|
||||
);
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper: Inline script snippet (for layout) to minimize FOUC.
|
||||
* (Not executed here—copy the string contents into a <script dangerouslySetInnerHTML={{__html: ...}} /> early in <head>.)
|
||||
*
|
||||
* Example usage in layout.tsx (before loading CSS-heavy content):
|
||||
*
|
||||
* <script
|
||||
* dangerouslySetInnerHTML={{ __html: getInlineAnimationPrefsScript() }}
|
||||
* />
|
||||
*/
|
||||
export function getInlineAnimationPrefsScript(): string {
|
||||
return `
|
||||
(function(){
|
||||
try {
|
||||
var STORAGE_KEY = '${STORAGE_KEY}';
|
||||
var raw = localStorage.getItem(STORAGE_KEY);
|
||||
var prefersReduced = false;
|
||||
var speed = 1;
|
||||
if (raw) {
|
||||
try {
|
||||
var parsed = JSON.parse(raw);
|
||||
if (typeof parsed.prefersReducedMotion === 'boolean') {
|
||||
prefersReduced = parsed.prefersReducedMotion;
|
||||
} else {
|
||||
// fallback to system preference if available
|
||||
prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
if (typeof parsed.animationSpeedMultiplier === 'number') {
|
||||
speed = parsed.animationSpeedMultiplier;
|
||||
if (isNaN(speed) || speed < ${MIN_SPEED} || speed > ${MAX_SPEED}) speed = 1;
|
||||
}
|
||||
} catch (_e) {}
|
||||
} else {
|
||||
prefersReduced = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
}
|
||||
var root = document.documentElement;
|
||||
if (prefersReduced) root.classList.add('user-reduce-motion');
|
||||
function apply(fast, normal, slow){
|
||||
root.style.setProperty('--animation-speed-fast', fast + 's');
|
||||
root.style.setProperty('--animation-speed-normal', normal + 's');
|
||||
root.style.setProperty('--animation-speed-slow', slow + 's');
|
||||
}
|
||||
if (prefersReduced) {
|
||||
apply(0.01,0.01,0.01);
|
||||
} else {
|
||||
var fast = (0.15 / speed).toFixed(4);
|
||||
var normal = (0.30 / speed).toFixed(4);
|
||||
var slow = (0.50 / speed).toFixed(4);
|
||||
apply(fast, normal, slow);
|
||||
}
|
||||
} catch(_e){}
|
||||
})();`.trim();
|
||||
}
|
||||
Reference in New Issue
Block a user