feat: updates

packages/web/hooks/useIntersectionObserver.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect, RefObject } from 'react'
+
+const useIntersectionObserver = (
+  element: RefObject<Element>
+): { onScreen: boolean } => {
+  const [onScreen, setOnScreen] = useState(false)
+
+  useEffect(() => {
+    if (element.current) {
+      const observer = new IntersectionObserver(([entry]) =>
+        setOnScreen(entry.isIntersecting)
+      )
+      observer.observe(element.current)
+      return () => {
+        observer.disconnect()
+      }
+    }
+  }, [element, setOnScreen])
+
+  return {
+    onScreen,
+  }
+}
+
+export default useIntersectionObserver

packages/web/hooks/useVideoCover.ts

@@ -13,23 +13,21 @@ export default function useVideoCover(props: {
     async () => {
       if (!id || !name || !artist) return
 
-      const fromCache = window.ipcRenderer?.sendSync(
+      const fromMainProcess = await window.ipcRenderer?.invoke(
         IpcChannels.GetVideoCover,
         {
           id,
+          name,
+          artist,
         }
       )
-      if (fromCache) {
-        return fromCache === 'no' ? undefined : fromCache
+      if (fromMainProcess) {
+        return fromMainProcess
       }
 
       const fromRemote = await axios.get('/yesplaymusic/video-cover', {
         params: props,
       })
-      window.ipcRenderer?.send(IpcChannels.SetVideoCover, {
-        id,
-        url: fromRemote.data.url || '',
-      })
       if (fromRemote?.data?.url) {
         return fromRemote.data.url
       }