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

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

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

@@ -4,6 +4,7 @@ import {
   MessageSquareText,
   ThumbsUp,
 } from "lucide-react";
+import { memo } from "react";
 import type { Neighbors } from "../types.ts";
 
 interface NavigationButtonsProps {
@@ -15,7 +16,7 @@ interface NavigationButtonsProps {
   onToggleComments: () => void;
 }
 
-export function NavigationButtons({
+export const NavigationButtons = memo(function NavigationButtons({
   neighbors,
   commentsCount,
   likesCount,
@@ -26,7 +27,10 @@ export function NavigationButtons({
   return (
     <>
       <div className="absolute right-4 top-8/14 flex flex-col items-center gap-8 z-10">
-        <button className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2">
+        <button
+          type="button"
+          className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2"
+        >
           <div className="grid place-items-center gap-1 drop-shadow-lg">
             <ThumbsUp size={40} className="" />
 
@@ -37,6 +41,7 @@ export function NavigationButtons({
         </button>
         {/* 评论开关（右侧中部） */}
         <button
+          type="button"
           className="grid place-items-center w-[54px] h-[54px] rounded-full -translate-y-1/2 cursor-pointer"
           onClick={onToggleComments}
           aria-label="切换评论"
@@ -59,8 +64,9 @@ export function NavigationButtons({
 
       {/* 上下切换按钮（右侧胶囊形状） */}
       <div className="absolute right-4 top-5/11 -translate-y-1/2 z-10">
-        <div className="flex flex-col rounded-full bg-black/40 backdrop-blur-sm border border-white/20 overflow-hidden">
+        <div className="flex flex-col rounded-full bg-black/55 border border-white/20 overflow-hidden">
           <button
+            type="button"
             className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors"
             onClick={onNavigatePrev}
             disabled={!neighbors.prev}
@@ -69,6 +75,7 @@ export function NavigationButtons({
             <ChevronUp size={24} />
           </button>
           <button
+            type="button"
             className="w-[44px] h-[44px] inline-flex items-center justify-center text-white disabled:opacity-40 cursor-pointer disabled:cursor-not-allowed hover:bg-white/10 transition-colors border-t border-white/20"
             onClick={onNavigateNext}
             disabled={!neighbors.next}
@@ -80,4 +87,4 @@ export function NavigationButtons({
       </div>
     </>
   );
-}
+});