From 1e7229403d3ee5b28ee8dc350505b87fdf9b020d Mon Sep 17 00:00:00 2001
From: Songkeys <i@song.work>
Date: Fri, 26 Jul 2024 18:08:58 +0800
Subject: [PATCH] fix: audio play cover using css hovering instead of state

---
 .../modules/entry-column/list-item-template.tsx   | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/modules/entry-column/list-item-template.tsx b/src/renderer/src/modules/entry-column/list-item-template.tsx
index c9f5fc683f..0692ad239e 100644
--- a/src/renderer/src/modules/entry-column/list-item-template.tsx
+++ b/src/renderer/src/modules/entry-column/list-item-template.tsx
@@ -9,7 +9,6 @@ import { cn } from "@renderer/lib/utils"
 import { EntryTranslation } from "@renderer/modules/entry-column/translation"
 import { useEntry } from "@renderer/store/entry/hooks"
 import { useFeedById } from "@renderer/store/feed"
-import { useState } from "react"
 
 import { ReactVirtuosoItemPlaceholder } from "../../components/ui/placeholder"
 import { StarIcon } from "./star-icon"
@@ -35,8 +34,6 @@ export function ListItem({
 
   const feed = useFeedById(entry?.feedId) || entryPreview?.feeds
 
-  const [isHovered, setIsHovered] = useState(false)
-
   // NOTE: prevent 0 height element, react virtuoso will not stop render any more
   if (!entry || !feed) return <ReactVirtuosoItemPlaceholder />
 
@@ -45,10 +42,8 @@ export function ListItem({
     entry.entries.publishedAt
   return (
     <div
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
       className={cn(
-        "relative flex py-4 pl-3 pr-2",
+        "group relative flex py-4 pl-3 pr-2",
         !asRead &&
         "before:absolute before:-left-0.5 before:top-[18px] before:block before:size-2 before:rounded-full before:bg-theme-accent",
       )}
@@ -118,7 +113,6 @@ export function ListItem({
             10,
           )}
           feedIcon={<FeedIcon feed={feed} entry={entry.entries} size={80} />}
-          isHovered={isHovered}
         />
       )}
 
@@ -144,18 +138,15 @@ function AudioCover({
   src,
   durationInSeconds,
   feedIcon,
-  isHovered,
 }: {
   entryId: string
   src: string
   durationInSeconds?: number
   feedIcon: React.ReactNode
-  isHovered: boolean
 }) {
   const playerValue = usePlayerAtomValue()
 
   const isMeActive = playerValue.src === src
-  const shouldShowPlayButton = isHovered || isMeActive
 
   const estimatedMins = durationInSeconds ?
     Math.floor(durationInSeconds / 60) :
@@ -182,8 +173,8 @@ function AudioCover({
 
       <div
         className={cn(
-          "center absolute inset-0 w-full transition-all duration-200 ease-in-out",
-          shouldShowPlayButton ? "opacity-100" : "opacity-0",
+          "center absolute inset-0 w-full transition-all duration-200 ease-in-out group-hover:opacity-100",
+          isMeActive ? "opacity-100" : "opacity-0",
         )}
         onClick={handleClickPlay}
       >