fix: mobile check event listener leak

ThaUnknown · Feb 24, 2024 · 1f8a13b · 1f8a13b
1 parent b9f3042
commit 1f8a13b
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/common/Router.svelte b/common/Router.svelte
@@ -1,3 +1,12 @@
+<script context='module'>
+  const mql = matchMedia('(min-width: 769px)')
+  const isMobile = readable(!mql.matches, set => {
+    const check = ({ matches }) => set(!matches)
+    mql.addEventListener('change', check)
+    return () => mql.removeEventListener('change', check)
+  })
+</script>
+
 <script>
   import Home from './views/Home/Home.svelte'
   import MediaHandler from './views/Player/MediaHandler.svelte'
@@ -10,11 +19,6 @@
 
   export let page = 'home'
 
-  const mql = matchMedia('(min-width: 769px)')
-  const isMobile = readable(!mql.matches, set => {
-    mql.addEventListener('change', ({ matches }) => set(!matches))
-  })
-
   $: minwidth = $isMobile ? '200px' : '35rem'
   $: maxwidth = $isMobile ? '200px' : '60rem'
 </script>