refactor: 重构作品播放页性能、媒体同步与内存管理

Co-authored-by: Cursor <cursoragent@cursor.com>

app/aweme/[awemeId]/components/ImageNavigationButtons.tsx

@@ -1,4 +1,5 @@
 import { ChevronLeft, ChevronRight } from "lucide-react";
+import { memo } from "react";
 
 interface ImageNavigationButtonsProps {
   onPrev: () => void;
@@ -7,7 +8,7 @@ interface ImageNavigationButtonsProps {
   totalImages: number;
 }
 
-export function ImageNavigationButtons({
+export const ImageNavigationButtons = memo(function ImageNavigationButtons({
   onPrev,
   onNext,
   currentIndex,
@@ -20,13 +21,14 @@ export function ImageNavigationButtons({
     <>
       {/* 左侧按钮 */}
       <button
+        type="button"
         className={`
           absolute left-4 top-6/17 -translate-y-1/2 z-20
           w-12 h-12 rounded-full
-          bg-black/40 backdrop-blur-sm border border-white/20
+          bg-black/55 border border-white/20
           flex items-center justify-center
-          text-white transition-all
-          ${hasPrev ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
+          text-white transition-opacity
+          ${hasPrev ? "opacity-100 hover:bg-black/70 cursor-pointer" : "opacity-30 cursor-not-allowed"}
         `}
         onClick={onPrev}
         disabled={!hasPrev}
@@ -37,13 +39,14 @@ export function ImageNavigationButtons({
 
       {/* 右侧按钮 */}
       <button
+        type="button"
         className={`
           absolute right-4 top-6/17 -translate-y-1/2 z-20
           w-12 h-12 rounded-full
-          bg-black/40 backdrop-blur-sm border border-white/20
+          bg-black/55 border border-white/20
           flex items-center justify-center
-          text-white transition-all
-          ${hasNext ? "opacity-100 hover:bg-black/60 cursor-pointer" : "opacity-30 cursor-not-allowed"}
+          text-white transition-opacity
+          ${hasNext ? "opacity-100 hover:bg-black/70 cursor-pointer" : "opacity-30 cursor-not-allowed"}
         `}
         onClick={onNext}
         disabled={!hasNext}
@@ -53,4 +56,4 @@ export function ImageNavigationButtons({
       </button>
     </>
   );
-}
+});