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

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

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

@@ -1,11 +1,17 @@
+import { memo } from "react";
+
 interface ProgressBarProps {
   progress: number;
   onSeek: (ratio: number) => void;
 }
 
-export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
-  const seekFromClientX = (clientX: number, element: HTMLElement) => {
+export const ProgressBar = memo(function ProgressBar({
+  progress,
+  onSeek,
+}: ProgressBarProps) {
+  const seekFromClientX = (clientX: number, element: HTMLElement): void => {
     const rect = element.getBoundingClientRect();
+    if (rect.width <= 0) return;
     onSeek((clientX - rect.left) / rect.width);
   };
 
@@ -36,9 +42,9 @@ export function ProgressBar({ progress, onSeek }: ProgressBarProps) {
       }}
     >
       <div
-        className="origin-left h-full bg-white"
+        className="origin-left h-full bg-white will-change-transform"
         style={{ transform: `scaleX(${progress || 0})` }}
       />
     </div>
   );
-}
+});