From 1cc091e8d851e77f5062bc4a247da423cce818dd Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Wed, 29 Jul 2026 22:04:43 +0800
Subject: [PATCH 1/3] =?UTF-8?q?refactor(products):=20VideoPlayer=20?=
 =?UTF-8?q?=E6=94=B9=E7=94=A8=20useVideoPlayer=20Hook=20=E6=B6=88=E9=99=A4?=
 =?UTF-8?q?=E9=87=8D=E5=A4=8D=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/products/components/VideoPlayer.tsx | 67 +++++--------------
 1 file changed, 17 insertions(+), 50 deletions(-)

diff --git a/apps/web/src/pages/products/components/VideoPlayer.tsx b/apps/web/src/pages/products/components/VideoPlayer.tsx
index 5e5ac79d3..d767ee70b 100644
--- a/apps/web/src/pages/products/components/VideoPlayer.tsx
+++ b/apps/web/src/pages/products/components/VideoPlayer.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useCallback } from "react"
+import React, { useEffect } from "react"
 import {
   VideoCameraOutlined,
   PlayCircleOutlined,
@@ -11,6 +11,7 @@ import {
 import { Button } from "@/components/ui"
 import type { ProductItem } from "../types"
 import { formatTime, formatSize } from "../utils"
+import { useVideoPlayer } from "../hooks/useVideoPlayer"
 
 interface VideoPlayerProps {
   product: ProductItem
@@ -27,52 +28,19 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
   onShare,
   onViewDetail,
 }) => {
-  const videoRef = useRef<HTMLVideoElement>(null)
-  const progressRef = useRef<HTMLDivElement>(null)
-  const [isPlaying, setIsPlaying] = useState(false)
-  const [currentTime, setCurrentTime] = useState(0)
-  const [duration, setDuration] = useState(product.duration)
+  const {
+    videoRef,
+    progressRef,
+    isPlaying,
+    currentTime,
+    duration,
+    progress,
+    togglePlay,
+    handleSeek,
+  } = useVideoPlayer()
 
   const hasVideo = !!product.videoUrl
-
-  /** 播放/暂停 */
-  const handlePlayPause = useCallback(() => {
-    const video = videoRef.current
-    if (!video) return
-    if (isPlaying) {
-      video.pause()
-    } else {
-      video.play().catch(() => {})
-    }
-    setIsPlaying(!isPlaying)
-  }, [isPlaying])
-
-  /** 视频事件监听 */
-  useEffect(() => {
-    const video = videoRef.current
-    if (!video) return
-    const onTime = () => setCurrentTime(video.currentTime)
-    const onDur = () => setDuration(video.duration || product.duration)
-    const onEnd = () => setIsPlaying(false)
-    video.addEventListener("timeupdate", onTime)
-    video.addEventListener("loadedmetadata", onDur)
-    video.addEventListener("ended", onEnd)
-    return () => {
-      video.removeEventListener("timeupdate", onTime)
-      video.removeEventListener("loadedmetadata", onDur)
-      video.removeEventListener("ended", onEnd)
-    }
-  }, [product.duration])
-
-  /** 进度条点击 */
-  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (!progressRef.current) return
-    const rect = progressRef.current.getBoundingClientRect()
-    const percent = (e.clientX - rect.left) / rect.width
-    const newTime = percent * duration
-    setCurrentTime(newTime)
-    if (videoRef.current) videoRef.current.currentTime = newTime
-  }
+  const displayDuration = duration || product.duration
 
   /** ESC 关闭 */
   useEffect(() => {
@@ -83,8 +51,6 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     return () => window.removeEventListener("keydown", handleKey)
   }, [onClose])
 
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0
-
   return (
     <div className="xx-player-overlay" onClick={onClose}>
       <div className="xx-player-container" onClick={(e) => e.stopPropagation()}>
@@ -114,7 +80,7 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
           )}
 
           {/* 播放/暂停按钮 */}
-          <button className="xx-player-play-btn" onClick={handlePlayPause}>
+          <button className="xx-player-play-btn" onClick={togglePlay}>
             {isPlaying ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
           </button>
 
@@ -125,12 +91,12 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
 
           {/* 进度条 */}
           <div className="xx-player-progress-wrap">
-            <div ref={progressRef} className="xx-player-progress" onClick={handleProgressClick}>
+            <div ref={progressRef} className="xx-player-progress" onClick={handleSeek}>
               <div className="xx-player-progress-bar" style={{ width: `${progress}%` }} />
             </div>
             <div className="xx-player-time">
               <span>{formatTime(currentTime)}</span>
-              <span>{formatTime(duration)}</span>
+              <span>{formatTime(displayDuration)}</span>
             </div>
           </div>
         </div>
@@ -197,3 +163,4 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     </div>
   )
 }
+
-- 
2.54.0


From effd1dfdd9465975bf0b035fea893797a3473974 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Wed, 29 Jul 2026 22:05:04 +0800
Subject: [PATCH 2/3] =?UTF-8?q?test(products):=20=E8=A1=A5=E5=85=85=20useV?=
 =?UTF-8?q?ideoPlayer=20smoke=20test?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/test/pages/products/smoke.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/apps/web/src/test/pages/products/smoke.test.tsx b/apps/web/src/test/pages/products/smoke.test.tsx
index fbe1b7dbc..3c2f117eb 100644
--- a/apps/web/src/test/pages/products/smoke.test.tsx
+++ b/apps/web/src/test/pages/products/smoke.test.tsx
@@ -22,6 +22,7 @@ import "@/pages/products/components/VideoPlayer"
 // Hooks
 import "@/pages/products/hooks/useProductList"
 import "@/pages/products/hooks/useProductActions"
+import "@/pages/products/hooks/useVideoPlayer"
 
 describe("ProductLibrary module smoke test", () => {
   it("should load all product modules", () => {
-- 
2.54.0


From 65a80f2b0121821bed51c619d7549347acfdd172 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Wed, 29 Jul 2026 22:30:12 +0800
Subject: [PATCH 3/3] fix(lint): Prettier format VideoPlayer

---
 apps/web/src/pages/products/components/VideoPlayer.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/pages/products/components/VideoPlayer.tsx b/apps/web/src/pages/products/components/VideoPlayer.tsx
index d767ee70b..db8a3b503 100644
--- a/apps/web/src/pages/products/components/VideoPlayer.tsx
+++ b/apps/web/src/pages/products/components/VideoPlayer.tsx
@@ -163,4 +163,3 @@ export const VideoPlayer: React.FC<VideoPlayerProps> = ({
     </div>
   )
 }
-
-- 
2.54.0