添加播放时间更新

src/components/video/player.tsx

@@ -21,6 +21,7 @@ type Props = {
 	url?: string; cover?: string; showControls?: boolean; className?: string;
 	poster?: string;
 	onChange?: (state: State) => void;
+	onProgress?: (current:number,duration:number) => void;
 	muted?: boolean;
 }
 export type PlayerInstance = {
@@ -84,6 +85,9 @@ export const Player = React.forwardRef<PlayerInstance, Props>((props, ref) => {
 		player.on('ended', () => {
 			setState({end: true, playing: false, error: false})
 		})
+		player.on('timeupdate', () => {
+			props.onProgress?.(player.currentTime(), player.duration())
+		})
 		player.on('error', () => {
 			setState({end: false, playing: false, error: true})
 		})

src/pages/live/index.tsx

@@ -32,7 +32,8 @@ export default function LiveIndex() {
 		muted: true,
 		showToTop: false,
 		checkedAll: false,
-		originSort:''
+		originSort: '',
+		playProgress: 0
 	})
 	const activeIndex = useRef(state.activeIndex)
 	useEffect(() => {
@@ -178,8 +179,11 @@ export default function LiveIndex() {
 	const currentTotalDuration = useMemo(() => {
 		if (state.activeIndex == -1 || !videoData || videoData.length == 0) return 0;
 		// 计算总时长
-		return videoData.filter((_,index)=>(index <= state.activeIndex)).reduce((sum, v) => sum + Math.ceil(v.video_duration / 1000), 0);
+		return videoData
-	}, [videoData])
+			.filter((_, index) => (index < state.activeIndex))
+			.reduce((sum, v) => sum + Math.ceil(v.video_duration / 1000), 0) + state.playProgress
+			;
+	}, [videoData, state.playProgress])
 
 	const currentSelectedId = useMemo(() => {
 		if (state.activeIndex < 0 || state.activeIndex >= videoData.length) return [];
@@ -192,12 +196,18 @@ export default function LiveIndex() {
 		<div className="flex">
 			<div className="video-player-container mr-8 flex flex-col">
 				<div className="text-center text-base">
-					<span>{formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}</span>
+					<span>视频时长: {formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}</span>
 				</div>
 				<div className="video-player flex justify-center flex-1 mt-5">
 					<div className="live-player relative rounded overflow-hidden w-[360px] h-[636px]"
 					     style={{backgroundColor: 'hsl(210, 100%, 48%)'}}>
-						<Player ref={player} className="w-[360px] h-[636px] bg-white" muted={true}/>
+						<Player
+							ref={player} className="w-[360px] h-[636px] bg-white"
+							muted={true}
+							onProgress={(progress) => {
+								setState({playProgress: progress})
+							}}
+						/>
 					</div>
 				</div>
 			</div>
@@ -241,7 +251,8 @@ export default function LiveIndex() {
 						<InfiniteScroller
 							ref={scrollerRef}
 							onScroll={top => setState({showToTop: top > 30})}
-							onCallback={()=>{}}
+							onCallback={() => {
+							}}
 						>
 							<div className="sort-list-container flex-1">
 								<DndContext onDragEnd={(e) => {

src/pages/video/index.tsx

@@ -16,6 +16,7 @@ import ButtonToTop from "@/components/scoller/button-to-top.tsx";
 import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
 import {IconDelete} from "@/components/icons";
 import {useLocation} from "react-router-dom";
+import {playState} from "@/service/api/live.ts";
 
 export default function VideoIndex() {
 	const [editId, setEditId] = useState(-1)
@@ -27,7 +28,11 @@ export default function VideoIndex() {
 		checkedAll: false,
 		playingIndex: -1,
 		showToTop: false,
-		showStatePos: false
+		showStatePos: false,
+		playState: {
+			current: -1,
+			total: -1
+		}
 	})
 	const [checkedIdArray, setCheckedIdArray] = useState<Id[]>([])
 
@@ -56,13 +61,13 @@ export default function VideoIndex() {
 			return;
 		}
 		if (video.status == VideoStatus.Generating) return;
-		setState({playingIndex})
-		player.current?.play('https://staticplus.gachafun.com/ai-collect/composite_video/2024-12-17/1186196465916190720.flv',30)
-		//
-		// if (video.oss_video_url && video.status !== 1) {
 		// setState({playingIndex})
-		// 	player.current?.play(video.oss_video_url, 0)
+		// player.current?.play('https://staticplus.gachafun.com/ai-collect/composite_video/2024-12-17/1186196465916190720.flv', 30)
-		// }
+		//
+		if (video.oss_video_url && video.status !== 1) {
+			setState({playingIndex})
+			player.current?.play(video.oss_video_url, 0)
+		}
 	}
 	// 处理全选
 	const handleAllCheckedChange = () => {
@@ -116,12 +121,21 @@ export default function VideoIndex() {
 						<Player
 							ref={player} url={videoData[state.playingIndex]?.oss_video_url}
 							onChange={(state) => {
+								console.log(state)
 								if (state.end || state.error) setState({playingIndex: -1})
 							}}
+							onProgress={(current, duration) => {
+								setState({
+									playState: {
+										current: current,
+										total: duration
+									}
+								})
+							}}
 							className="w-[360px] h-[640px] bg-white"/>
 					</div>
 				</div>
-				<div className="text-center text-sm mt-4 text-gray-400">视频时长: {formatDuration(totalDuration)}</div>
+				<div className="text-center text-sm mt-4 text-gray-400">{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}</div>
 			</div>
 			<div className="video-list-container rounded flex flex-col flex-1">
 				<div className="live-control flex justify-between">

src/util/strings.ts

@@ -90,6 +90,10 @@ export function calcContentLengthLikeWord(str:string) {
 
 // 将时长转换成 时:分:秒
 export function formatDuration(duration: number) {
+    if(duration < 0 || isNaN(duration)){
+        return '00:00:00';
+    }
+    duration = Math.ceil(duration);
     const hour = Math.floor(duration / 3600);
     const minute = Math.floor((duration - hour * 3600) / 60);
     const second = duration - hour * 3600 - minute * 60;