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

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

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

@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 interface SegmentedProgressBarProps {
   totalSegments: number;
   currentIndex: number;
@@ -5,14 +7,37 @@ interface SegmentedProgressBarProps {
   onSeek: (ratio: number) => void;
 }
 
-export function SegmentedProgressBar({
+const SegmentBarItem = memo(function SegmentBarItem({
+  index,
+  fill,
+}: {
+  index: number;
+  fill: number;
+}) {
+  return (
+    <div
+      aria-label={`第 ${index + 1} 段`}
+      className="relative flex-1 h-full rounded-full bg-white/25 overflow-hidden"
+    >
+      <div
+        className="h-full origin-left bg-white will-change-transform"
+        style={{
+          transform: `scaleX(${Math.max(0, Math.min(1, fill))})`,
+        }}
+      />
+    </div>
+  );
+});
+
+export const SegmentedProgressBar = memo(function SegmentedProgressBar({
   totalSegments,
   currentIndex,
   segmentProgress,
   onSeek,
 }: SegmentedProgressBarProps) {
-  const seekFromClientX = (clientX: number, element: HTMLElement) => {
+  const seekFromClientX = (clientX: number, element: HTMLElement): void => {
     const rect = element.getBoundingClientRect();
+    if (rect.width <= 0) return;
     onSeek((clientX - rect.left) / rect.width);
   };
 
@@ -47,22 +72,9 @@ export function SegmentedProgressBar({
           let fill = 0;
           if (i < currentIndex) fill = 1;
           else if (i === currentIndex) fill = segmentProgress;
-          return (
-            <div
-              key={i}
-              aria-label={`第 ${i + 1} 段`}
-              className="relative flex-1 h-full rounded-full bg-white/25 overflow-hidden"
-            >
-              <div
-                className="h-full origin-left bg-white"
-                style={{
-                  transform: `scaleX(${Math.max(0, Math.min(1, fill))})`,
-                }}
-              />
-            </div>
-          );
+          return <SegmentBarItem key={`seg-${i}`} index={i} fill={fill} />;
         })}
       </div>
     </div>
   );
-}
+});