fix: resume audio

remvze · Jan 28, 2024 · 8e4d053 · 8e4d053
1 parent cd05704
commit 8e4d053
Showing 1 changed file with 18 additions and 1 deletion.
diff --git a/src/components/app/app.tsx b/src/components/app/app.tsx
@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
+import { Howler } from 'howler';
 
 import { useSoundStore } from '@/store';
 
@@ -36,6 +37,22 @@ export function App() {
     );
   }, [favorites, categories]);
 
+  useEffect(() => {
+    const onChange = () => {
+      const { ctx } = Howler;
+
+      if (ctx && !document.hidden) {
+        setTimeout(() => {
+          ctx.resume();
+        }, 100);
+      }
+    };
+
+    document.addEventListener('visibilitychange', onChange, false);
+
+    return () => document.removeEventListener('visibilitychange', onChange);
+  }, []);
+
   const allCategories = useMemo(() => {
     const favorites = [];