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

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

app/aweme/[awemeId]/hooks/useNavigation.ts

@@ -1,6 +1,6 @@
-import { useEffect, useRef } from "react";
-import type { RefObject } from "react";
 import { useRouter } from "next/navigation";
+import type { RefObject } from "react";
+import { useEffect, useRef } from "react";
 import type { Neighbors } from "../types.ts";
 
 interface UseNavigationProps {
@@ -21,7 +21,7 @@ export function useNavigation({
   prevImg,
   nextImg,
   togglePlay,
-}: UseNavigationProps) {
+}: UseNavigationProps): void {
   const router = useRouter();
   const wheelCooldownRef = useRef<number>(0);
 
@@ -37,7 +37,7 @@ export function useNavigation({
     const el = mediaContainerRef.current;
     if (!el) return;
 
-    const onWheel = (e: WheelEvent) => {
+    const onWheel = (e: WheelEvent): void => {
       if (e.ctrlKey) return;
       const now = performance.now();
       if (now - wheelCooldownRef.current < 700) return;
@@ -58,17 +58,18 @@ export function useNavigation({
     };
 
     el.addEventListener("wheel", onWheel, { passive: false });
-    return () => el.removeEventListener("wheel", onWheel as any);
+    return () => el.removeEventListener("wheel", onWheel);
   }, [neighbors, mediaContainerRef, router]);
 
   // 键盘快捷键
   useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
-      const target = e.target as HTMLElement;
+    const onKeyDown = (e: KeyboardEvent): void => {
+      const target = e.target as HTMLElement | null;
       if (
-        target.tagName === "INPUT" ||
-        target.tagName === "TEXTAREA" ||
-        target.isContentEditable
+        target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable)
       ) {
         return;
       }
@@ -121,17 +122,25 @@ export function useNavigation({
     return () => window.removeEventListener("keydown", onKeyDown);
   }, [isVideo, neighbors, router, videoRef, prevImg, nextImg, togglePlay]);
 
-  // 浏览器返回事件
+  // 仅在无历史记录的独立新标签页首次进入时注入一次返回兜底，避免连续刷视频时无限叠加 history 栈
   useEffect(() => {
-    window.history.pushState({ interceptBack: true }, "");
+    const currentState = window.history.state as
+      | { interceptBack?: boolean }
+      | null
+      | undefined;
+    if (window.history.length <= 1 && !currentState?.interceptBack) {
+      window.history.pushState({ ...currentState, interceptBack: true }, "");
+    }
 
-    const handlePopState = () => {
-      window.close();
-      setTimeout(() => {
-        if (!document.hidden) {
-          router.push("/");
-        }
-      }, 100);
+    const handlePopState = (): void => {
+      if (window.history.length <= 1) {
+        window.close();
+        setTimeout(() => {
+          if (!document.hidden) {
+            router.push("/");
+          }
+        }, 100);
+      }
     };
 
     window.addEventListener("popstate", handlePopState);