feat: updates

packages/web/hooks/useHoverLightSpot.tsx

@@ -0,0 +1,75 @@
+import { css, cx } from '@emotion/css'
+import { motion, useMotionValue } from 'framer-motion'
+import { RefObject, useEffect, useRef } from 'react'
+
+const useHoverLightSpot = (
+  config: { opacity: number; size: number } = { opacity: 0.8, size: 32 }
+) => {
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const opacity = useMotionValue(0)
+  const x = useMotionValue(0)
+  const y = useMotionValue(0)
+  const buttonX = useMotionValue(0)
+  const buttonY = useMotionValue(0)
+
+  useEffect(() => {
+    if (!buttonRef.current) return
+    const button = buttonRef.current
+    const handleMouseOver = () => {
+      opacity.set(config.opacity)
+    }
+    const handleMouseOut = () => {
+      opacity.set(0)
+      buttonX.set(0)
+      buttonY.set(0)
+    }
+    const handleMouseMove = (event: MouseEvent) => {
+      if (!buttonRef.current) return
+      const spotSize = config.size / 2
+      const button = buttonRef.current.getBoundingClientRect()
+      const cursorX = event.clientX - button.x
+      const cursorY = event.clientY - button.y
+      const newSpotX = cursorX - spotSize
+      const newSpotY = cursorY - spotSize
+      x.set(newSpotX)
+      y.set(newSpotY)
+      buttonX.set((cursorX - button.width / 2) / 8)
+      buttonY.set((cursorY - button.height / 2) / 8)
+    }
+    button.addEventListener('mouseover', handleMouseOver)
+    button.addEventListener('mouseout', handleMouseOut)
+    button.addEventListener('mousemove', handleMouseMove)
+    return () => {
+      button.removeEventListener('mouseover', handleMouseOver)
+      button.removeEventListener('mouseout', handleMouseOut)
+      button.removeEventListener('mousemove', handleMouseMove)
+    }
+  }, [buttonRef.current])
+
+  const LightSpot = () => {
+    return (
+      <motion.div
+        initial={{ opacity: 0 }}
+        className={cx(
+          'pointer-events-none absolute top-0 left-0 rounded-full transition-opacity duration-400',
+          css`
+            filter: blur(16px);
+            background: rgb(255, 255, 255);
+          `
+        )}
+        style={{ opacity, x, y, height: config.size, width: config.size }}
+      ></motion.div>
+    )
+  }
+
+  return {
+    buttonRef,
+    LightSpot,
+    buttonStyle: {
+      x: buttonX,
+      y: buttonY,
+    },
+  }
+}
+
+export default useHoverLightSpot

packages/web/hooks/useVideoCover.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { useQuery } from '@tanstack/react-query'
+import { appName } from '../utils/const'
 
 export default function useVideoCover(props: {
   id?: number
@@ -13,9 +14,12 @@ export default function useVideoCover(props: {
     async () => {
       if (!id || !name || !artist) return
 
-      const fromRemote = await axios.get('/yesplaymusic/video-cover', {
-        params: props,
-      })
+      const fromRemote = await axios.get(
+        `/${appName.toLowerCase()}/video-cover`,
+        {
+          params: props,
+        }
+      )
       if (fromRemote?.data?.url) {
         return fromRemote.data.url
       }