处理bug

web/src/components/LayoutUserMenu.tsx

@@ -55,7 +55,9 @@ export function LayoutUserMenu({
   const [menuPosition, setMenuPosition] = useState<MenuPosition | null>(null)
   const [isOtpOpen, setIsOtpOpen] = useState(false)
 
-  onCloseRef.current = onClose
+  useEffect(() => {
+    onCloseRef.current = onClose
+  }, [onClose])
 
   const updateMenuPosition = useCallback(() => {
     const trigger = triggerRef.current

web/src/components/ManageLibrariesDialogView.tsx

@@ -0,0 +1,34 @@
+import { X } from 'lucide-react'
+
+import { AdminLibraryPanel } from '../pages/AdminLibraryPanel'
+
+export function ManageLibrariesDialogView({ onClose }: { onClose: () => void }) {
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/35 p-2 sm:p-4 backdrop-blur-sm"
+      onClick={onClose}
+    >
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="flex h-[calc(100dvh-1rem)] sm:h-[85vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl sm:rounded-3xl border border-white/70 bg-white shadow-2xl"
+        onClick={(event) => event.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-gray-100 px-4 py-3 sm:px-6 sm:py-4">
+          <h3 className="font-display text-base sm:text-lg font-bold text-ink-600">管理媒体库</h3>
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-xl p-1.5 text-ink-50 transition hover:bg-gray-100 hover:text-ink-600"
+            title="关闭"
+          >
+            <X size={20} />
+          </button>
+        </div>
+        <div className="flex-1 overflow-y-auto p-3 sm:p-6">
+          <AdminLibraryPanel />
+        </div>
+      </div>
+    </div>
+  )
+}

web/src/components/PlayerControls.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import {
   Captions,
   CaptionsOff,
@@ -84,11 +84,11 @@ export function PlayerControls({
   streamOffset = 0,
   onSeekAbsolute,
 }: PlayerControlsProps) {
-  const video = () => videoRef.current
-  const container = () =>
+  const video = useCallback(() => videoRef.current, [videoRef])
+  const container = useCallback(() =>
     videoRef.current?.closest<HTMLElement>('[data-player-stage]') ??
     videoRef.current?.parentElement ??
-    null
+    null, [videoRef])
 
   const [playing, setPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)
@@ -255,15 +255,14 @@ export function PlayerControls({
       el.removeEventListener('leavepictureinpicture', syncPip)
       if (hideTimerRef.current) clearTimeout(hideTimerRef.current)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [videoRef, knownDuration, streamOffset, onUiVisibleChange])
+  }, [container, video, knownDuration, streamOffset, onUiVisibleChange])
 
   // Keep the scrubber max in sync when metadata duration arrives after mount.
   useEffect(() => {
     const el = video()
     const streamDur = el && Number.isFinite(el.duration) ? el.duration : 0
     setDuration(Math.max(knownDuration || 0, streamOffset + streamDur))
-  }, [knownDuration, streamOffset])
+  }, [knownDuration, streamOffset, video])
 
   // 当悬停或菜单状态改变时，更新控制栏计时器
   useEffect(() => {
@@ -277,7 +276,7 @@ export function PlayerControls({
         hideTimerRef.current = setTimeout(() => onUiVisibleChange(false), 3000)
       }
     }
-  }, [controlsHovered, isScrubbing, subtitleMenuOpen, danmakuOpen, playlistOpen, onUiVisibleChange])
+  }, [controlsHovered, isScrubbing, subtitleMenuOpen, danmakuOpen, playlistOpen, onUiVisibleChange, video])
 
   const togglePlay = () => {
     const el = video()

web/src/components/manageLibrariesDialog.tsx

@@ -1,7 +1,6 @@
 import { createRoot } from 'react-dom/client'
-import { X } from 'lucide-react'
 
-import { AdminLibraryPanel } from '../pages/AdminLibraryPanel'
+import { ManageLibrariesDialogView } from './ManageLibrariesDialogView'
 
 export function openManageLibrariesDialog(): Promise<void> {
   return new Promise((resolve) => {
@@ -15,37 +14,6 @@ export function openManageLibrariesDialog(): Promise<void> {
       resolve()
     }
 
-    root.render(<ManageLibrariesDialog onClose={close} />)
+    root.render(<ManageLibrariesDialogView onClose={close} />)
   })
-}
-
-function ManageLibrariesDialog({ onClose }: { onClose: () => void }) {
-  return (
-    <div
-      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/35 p-2 sm:p-4 backdrop-blur-sm"
-      onClick={onClose}
-    >
-      <div
-        role="dialog"
-        aria-modal="true"
-        className="flex h-[calc(100dvh-1rem)] sm:h-[85vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl sm:rounded-3xl border border-white/70 bg-white shadow-2xl"
-        onClick={(event) => event.stopPropagation()}
-      >
-        <div className="flex items-center justify-between border-b border-gray-100 px-4 py-3 sm:px-6 sm:py-4">
-          <h3 className="font-display text-base sm:text-lg font-bold text-ink-600">管理媒体库</h3>
-          <button
-            type="button"
-            onClick={onClose}
-            className="rounded-xl p-1.5 text-ink-50 transition hover:bg-gray-100 hover:text-ink-600"
-            title="关闭"
-          >
-            <X size={20} />
-          </button>
-        </div>
-        <div className="flex-1 overflow-y-auto p-3 sm:p-6">
-          <AdminLibraryPanel />
-        </div>
-      </div>
-    </div>
-  )
 }