feat: updates

packages/web/components/TrackListHeader/Actions.tsx

@@ -1,5 +1,8 @@
+import useHoverLightSpot from '@/web/hooks/useHoverLightSpot'
 import { openContextMenu } from '@/web/states/contextMenus'
-import { cx } from '@emotion/css'
+import { css, cx } from '@emotion/css'
+import { motion, useMotionValue } from 'framer-motion'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
 import Icon from '../Icon'
@@ -15,60 +18,101 @@ const Actions = ({
   onPlay: () => void
   onLike?: () => void
 }) => {
-  const params = useParams()
-  const { t } = useTranslation()
-
   return (
-    <div className='mt-11 flex items-end justify-between lg:mt-4 lg:justify-start'>
-      <div className='flex items-end'>
-        {/* Menu */}
-        <button
-          onClick={event => {
-            params?.id &&
-              openContextMenu({
-                event,
-                type: 'album',
-                dataSourceID: params.id,
-              })
-          }}
-          className={cx(
-            'mr-2.5 flex h-14 w-14 items-center justify-center rounded-full bg-white/10 transition duration-400',
-            isLoading
-              ? 'text-transparent'
-              : 'text-white/40 hover:text-white/70  hover:dark:bg-white/30'
-          )}
-        >
-          <Icon name='more' className='pointer-events-none h-7 w-7' />
-        </button>
-        {/* Like */}
-        {onLike && (
-          <button
-            onClick={() => onLike()}
-            className={cx(
-              'flex h-14 w-14 items-center justify-center rounded-full bg-white/10 transition duration-400  lg:mr-2.5',
-              isLoading
-                ? 'text-transparent'
-                : 'text-white/40 hover:text-white/70  hover:dark:bg-white/30'
-            )}
-          >
-            <Icon
-              name={isLiked ? 'heart' : 'heart-outline'}
-              className='h-7 w-7'
-            />
-          </button>
-        )}
+    <div className='mt-11 flex items-end justify-between lg:mt-4 lg:justify-start lg:gap-2.5'>
+      <div className='flex items-end gap-2.5'>
+        <MenuButton isLoading={isLoading} />
+        <LikeButton {...{ isLiked, isLoading, onLike }} />
       </div>
-      <button
-        onClick={() => onPlay()}
-        className={cx(
-          'h-14 rounded-full px-10 text-18 font-medium',
-          isLoading ? 'bg-white/10 text-transparent' : 'bg-brand-700 text-white'
-        )}
-      >
-        {t`player.play`}
-      </button>
+      <PlayButton onPlay={onPlay} isLoading={isLoading} />
     </div>
   )
 }
 
+const MenuButton = ({ isLoading }: { isLoading?: boolean }) => {
+  const params = useParams()
+
+  // hover animation
+  const { buttonRef, buttonStyle, LightSpot } = useHoverLightSpot({
+    opacity: 0.8,
+    size: 16,
+  })
+
+  return (
+    <motion.button
+      ref={buttonRef}
+      style={buttonStyle}
+      onClick={event => {
+        params?.id &&
+          openContextMenu({
+            event,
+            type: 'album',
+            dataSourceID: params.id,
+          })
+      }}
+      className={cx(
+        'relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-white/10 transition duration-300 ease-linear',
+        isLoading ? 'text-transparent' : 'text-white/40'
+      )}
+    >
+      <Icon name='more' className='pointer-events-none h-7 w-7' />
+      {LightSpot()}
+    </motion.button>
+  )
+}
+
+const LikeButton = ({
+  onLike,
+  isLiked,
+  isLoading,
+}: {
+  onLike?: () => void
+  isLiked?: boolean
+  isLoading?: boolean
+}) => {
+  // hover animation
+  const { buttonRef, buttonStyle, LightSpot } = useHoverLightSpot({
+    opacity: 0.8,
+    size: 16,
+  })
+
+  if (!onLike) return null
+  return (
+    <motion.button
+      ref={buttonRef}
+      onClick={() => onLike()}
+      style={buttonStyle}
+      className={cx(
+        'relative flex h-14 w-14 items-center justify-center overflow-hidden rounded-full bg-white/10 transition-transform duration-300 ease-linear',
+        isLoading ? 'text-transparent' : 'text-white/40 '
+      )}
+    >
+      <Icon name={isLiked ? 'heart' : 'heart-outline'} className='h-7 w-7' />
+      {LightSpot()}
+    </motion.button>
+  )
+}
+
+const PlayButton = ({ onPlay, isLoading }: { onPlay: () => void; isLoading?: boolean }) => {
+  const { t } = useTranslation()
+
+  // hover animation
+  const { buttonRef, buttonStyle, LightSpot } = useHoverLightSpot()
+
+  return (
+    <motion.button
+      ref={buttonRef}
+      style={buttonStyle}
+      onClick={() => onPlay()}
+      className={cx(
+        'relative h-14 overflow-hidden rounded-full px-10 text-18 font-medium transition-transform duration-300 ease-linear',
+        isLoading ? 'bg-white/10 text-transparent' : 'bg-brand-700 text-white'
+      )}
+    >
+      {t`player.play`}
+      {LightSpot()}
+    </motion.button>
+  )
+}
+
 export default Actions