feat: updates

packages/web/hooks/useIsMobile.ts

@@ -1,8 +1,9 @@
 import useBreakpoint from './useBreakpoint'
 
 const useIsMobile = () => {
-  const breakpoint = useBreakpoint()
-  return ['sm', 'md'].includes(breakpoint)
+  // const breakpoint = useBreakpoint()
+  // return ['sm', 'md'].includes(breakpoint)
+  return false
 }
 
 export default useIsMobile

packages/web/hooks/useSettings.ts

@@ -0,0 +1,9 @@
+import { useSnapshot } from 'valtio'
+import settings from '../states/settings'
+
+function useSettings() {
+  const settingsState = useSnapshot(settings)
+  return settingsState
+}
+
+export default useSettings

packages/web/hooks/useVideoCover.ts

@@ -1,6 +1,7 @@
 import axios from 'axios'
 import { useQuery } from '@tanstack/react-query'
 import { appName } from '../utils/const'
+import useSettings from './useSettings'
 
 export default function useVideoCover(props: {
   id?: number
@@ -8,24 +9,22 @@ export default function useVideoCover(props: {
   artist?: string
   enabled?: boolean
 }) {
+  const { playAnimatedArtworkFromApple } = useSettings()
   const { id, name, artist, enabled = true } = props
   return useQuery(
     ['useVideoCover', props],
     async () => {
       if (!id || !name || !artist) return
 
-      const fromRemote = await axios.get(
-        `/${appName.toLowerCase()}/video-cover`,
-        {
-          params: props,
-        }
-      )
+      const fromRemote = await axios.get(`/${appName.toLowerCase()}/video-cover`, {
+        params: props,
+      })
       if (fromRemote?.data?.url) {
         return fromRemote.data.url
       }
     },
     {
-      enabled: !!id && !!name && !!artist && enabled,
+      enabled: !!id && !!name && !!artist && enabled && !!playAnimatedArtworkFromApple,
       refetchOnWindowFocus: false,
       refetchInterval: false,
     }

packages/web/hooks/useWindowFocus.ts

@@ -0,0 +1,26 @@
+import { useState, useEffect } from 'react'
+
+const hasFocus = () => typeof document !== 'undefined' && document.hasFocus()
+
+const useWindowFocus = () => {
+  const [focused, setFocused] = useState(hasFocus)
+
+  useEffect(() => {
+    setFocused(hasFocus())
+
+    const onFocus = () => setFocused(true)
+    const onBlur = () => setFocused(false)
+
+    window.addEventListener('focus', onFocus)
+    window.addEventListener('blur', onBlur)
+
+    return () => {
+      window.removeEventListener('focus', onFocus)
+      window.removeEventListener('blur', onBlur)
+    }
+  }, [])
+
+  return focused
+}
+
+export default useWindowFocus