From 43b49d86192bdf026b9aa551db4d5b17f8f62cfc Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Tue, 11 Feb 2025 16:17:27 +0800
Subject: [PATCH] refactor: simplify preview media action overlay animation

- Replace Framer Motion animation with direct CSS styling
- Remove unnecessary animation controller
- Improve transition and hover effects for action buttons
- Maintain existing layout and functionality

Signed-off-by: Innei <tukon479@gmail.com>
---
 .../src/components/ui/media/preview-media.tsx | 29 +++++--------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/apps/renderer/src/components/ui/media/preview-media.tsx b/apps/renderer/src/components/ui/media/preview-media.tsx
index 7230e1bff..87f1c039b 100644
--- a/apps/renderer/src/components/ui/media/preview-media.tsx
+++ b/apps/renderer/src/components/ui/media/preview-media.tsx
@@ -7,7 +7,6 @@ import { stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import useEmblaCarousel from "embla-carousel-react"
 import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
-import { useAnimationControls } from "framer-motion"
 import type { FC } from "react"
 import { Fragment, useCallback, useEffect, useRef, useState } from "react"
 import { Blurhash } from "react-blurhash"
@@ -60,22 +59,6 @@ const Wrapper: Component<{
     }
   }, [sideContent])
 
-  const animateController = useAnimationControls()
-
-  useEffect(() => {
-    if (showActionOverlay) {
-      animateController.start({
-        opacity: 1,
-        transform: "translateY(0)",
-      })
-    } else {
-      animateController.start({
-        opacity: 0,
-        transform: "translateY(50px)",
-      })
-    }
-  }, [showActionOverlay, animateController])
-
   return (
     <div
       className="center relative size-full py-12 lg:px-20 lg:pb-8 lg:pt-10"
@@ -111,10 +94,14 @@ const Wrapper: Component<{
           {children}
           <RootPortal to={sideContent ? null : undefined}>
             <div className="pointer-events-none absolute inset-x-0 bottom-0 z-[99] overflow-hidden">
-              <m.div
-                animate={animateController}
+              <div
+                style={{
+                  opacity: showActionOverlay ? 1 : 0,
+                  transform: showActionOverlay ? "translateY(0)" : "translateY(50px)",
+                }}
                 className={cn(
-                  "flex justify-end gap-3 p-2 text-white/70 [&_button]:hover:text-white",
+                  "flex justify-end gap-3 p-2 text-white/70 duration-200 [&_button]:hover:text-white",
+                  "hover:!transform-none hover:!opacity-100",
 
                   sideContent ? "rounded-bl-xl" : "rounded-xl",
                   "bg-black/30",
@@ -143,7 +130,7 @@ const Wrapper: Component<{
                     </ActionButton>
                   </Fragment>
                 )}
-              </m.div>
+              </div>
             </div>
           </RootPortal>
         </div>