Merge pull request #343 from vim-jp-radio/feature/340

prefersReducedMotion runeを使う
vim-jp-radio · Dec 29, 2024 · 41969fd · 41969fd
2 parents 1c9cbab + ae839f0
commit 41969fd
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 43 deletions.
diff --git a/src/lib/Backgroud/Backgroud.svelte b/src/lib/Backgroud/Backgroud.svelte
@@ -1,5 +1,5 @@
 <script lang='ts'>
-	import { PrefersReducedMotion } from '$lib/utils/runes.svelte.js';
+	import { prefersReducedMotion } from 'svelte/motion';
 	import { animate, cancelAnimate, createCircles } from './circle.js';
 
 	/**
@@ -16,8 +16,6 @@
 		minSpeed?: number;
 		maxSpeed?: number;
 	} = $props();
-	/** media queryのprefers-reduced-motionを取得 */
-	const prefersReducedMotionRune = new PrefersReducedMotion();
 
 	let canvas = $state<HTMLCanvasElement | undefined>(undefined);
 	const ctx = $derived.by(() => canvas?.getContext('2d'));
@@ -28,7 +26,7 @@
 	let jsLoaded = $state(false);
 
 	const circles = $derived.by(() =>
-		canvas != null && ctx != null ? createCircles(circleNum, canvas, ctx, minSpeed, maxSpeed, prefersReducedMotionRune.isReduced) : [],
+		canvas != null && ctx != null ? createCircles(circleNum, canvas, ctx, minSpeed, maxSpeed, prefersReducedMotion.current) : [],
 	);
 
 	/** js が読み込まれたらオンになる */

diff --git a/src/lib/utils/runes.svelte.ts b/src/lib/utils/runes.svelte.ts