update 删除

src/components/video/video-list-item.tsx

@@ -2,7 +2,7 @@ import {useSortable} from "@dnd-kit/sortable";
 import {useSetState} from "ahooks";
 import React, {useEffect} from "react";
 import {clsx} from "clsx";
-import {Checkbox, Popconfirm} from "antd";
+import {App, Checkbox, Popconfirm} from "antd";
 import {CheckCircleFilled, MenuOutlined, MinusCircleFilled, LoadingOutlined} from "@ant-design/icons";
 
 import ImageCover from '@/assets/images/cover.png'
@@ -17,6 +17,7 @@ type Props = {
 	index?: number;
 	checked?: boolean;
 	active?: boolean;
+	playing?: boolean;
 	onCheckedChange?: (checked: boolean) => void;
 	onPlay?: () => void;
 	onEdit?: () => void;
@@ -29,7 +30,7 @@ type Props = {
 
 export const VideoListItem = (
 	{
-		id, video, onRemove, checked,
+		id, video, onRemove, checked,playing,
 		onCheckedChange, onEdit, active, editable,
 		className, sortable, type, index,onItemClick
 	}: Props) => {
@@ -45,11 +46,19 @@ export const VideoListItem = (
 	}, [checked])
 
 	const generating = (type == 'create' && video.status == VideoStatus.Generating  )
-
+	const {modal} = App.useApp()
+	const handleDelete = () => {
+		if(!onRemove) return;
+		modal.confirm({
+			title: '提示',
+			centered: true,
+			content: '是否要删除该视频',
+			onOk: onRemove,
+		})
+	}
 	return <div
 		className={`video-item ${className}`}
 		ref={setNodeRef} style={{transform: `translateY(${transform?.y || 0}px)`,}}
-		onClick={onItemClick}
 	>
 		<div className={`list-row ${generating ? 'disabled' : ''} ${active?'playing':''}`}>
 			<div
@@ -57,7 +66,7 @@ export const VideoListItem = (
 			     {... (sortable && !generating?listeners:{})}
 			     {... (sortable && !generating?attributes:{})}
 			>{index}</div>
-			<div className="col cover cursor-pointer">
+			<div className="col cover cursor-pointer" onClick={onItemClick}>
 				<div className="relative">
 					<img className="w-[100px] h-[56px] object-cover" src={video.cover || ImageCover}/>
 					{generating &&
@@ -66,7 +75,7 @@ export const VideoListItem = (
                         </div>
 					}
 					{/* && active*/}
-					{!generating && active && <div className={'absolute rounded inset-0 bg-black/30 text-sm text-white flex items-center justify-center'}>
+					{!generating && playing && <div className={'absolute rounded inset-0 bg-black/30 text-sm text-white flex items-center justify-center'}>
                         <div className="text-center">
                             <IconPlaying className="inline-block text-xl" />
                             <div>播放中</div>
@@ -104,14 +113,7 @@ export const VideoListItem = (
                             <IconEdit/>
                         </button>}
 
-					{onRemove && <Popconfirm
+					{onRemove && <button className="hover:text-blue-500" onClick={handleDelete}><IconDelete/></button>}
-                        title={<div style={{minWidth: 150}}><span>请确认删除此视频?</span></div>}
-                        onConfirm={onRemove}
-                        okText="删除"
-                        cancelText="取消"
-                    >
-                        <button className="hover:text-blue-500"><IconDelete/></button>
-                    </Popconfirm>}
 					<Checkbox checked={state.checked} onChange={() => {
 						if (onCheckedChange) {
 							onCheckedChange(!state.checked)

src/pages/live/index.tsx

@@ -174,6 +174,12 @@ export default function LiveIndex() {
 		// 计算总时长
 		return videoData.reduce((sum, v) => sum + Math.ceil(v.video_duration / 1000), 0);
 	}, [videoData])
+	// 根据当前播放index计算已经播放时长
+	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);
+	}, [videoData])
 
 	const currentSelectedId = useMemo(() => {
 		if (state.activeIndex < 0 || state.activeIndex >= videoData.length) return [];
@@ -185,16 +191,15 @@ export default function LiveIndex() {
 		{contextHolder}
 		<div className="flex">
 			<div className="video-player-container mr-8 flex flex-col">
-				<div className="text-center text-base">数字人直播间</div>
+				<div className="text-center text-base">
+					<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}/>
 					</div>
 				</div>
-				<div className="mt-4 text-center text-sm">
-					<span>视频时长: {formatDuration(totalDuration)}</span>
-				</div>
 			</div>
 
 			<div className="video-list-container video-list-sort-container flex-1">
@@ -282,17 +287,17 @@ export default function LiveIndex() {
 		</div>
 		<div className="page-action">
 			<ButtonToTop visible={state.showToTop} onClick={() => scrollerRef.current?.scrollToPosition(0)}/>
-			<ButtonBatch
+			{checkedIdArray.length > 0 && <ButtonBatch
-				className='bg-gray-300 hover:bg-gray-400 text-white'
+                className='bg-gray-300 hover:bg-gray-400 text-white'
-				selected={currentSelectedId}
+                selected={checkedIdArray}
-				emptyMessage={`请选择要删除的视频`}
+                emptyMessage={`请选择要删除的视频`}
-				confirmMessage={`是否删除当前的${currentSelectedId.length}条视频？`}
+                confirmMessage={`是否删除当前的${checkedIdArray.length}条视频？`}
-				onSuccess={loadList}
+                onSuccess={loadList}
-				onProcess={processDeleteVideo}
+                onProcess={processDeleteVideo}
-			>
+            >
-				<span className={'text'}>批量删除</span>
+                <span className={'text'}>批量删除</span>
-				<IconDelete/>
+                <IconDelete/>
-			</ButtonBatch>
+            </ButtonBatch>}
 		</div>
 	</div>)
 }

src/pages/video/index.tsx

@@ -1,4 +1,4 @@
-import {Checkbox, Empty, Modal} from "antd";
+import {Checkbox, Empty} from "antd";
 import React, {useEffect, useMemo, useRef, useState} from "react";
 import {DndContext} from "@dnd-kit/core";
 import {arrayMove, SortableContext} from "@dnd-kit/sortable";
@@ -9,7 +9,7 @@ import ArticleEditModal from "@/components/article/edit-modal.tsx";
 import {deleteByIds, getList, modifyOrder, VideoStatus} from "@/service/api/video.ts";
 import {formatDuration} from "@/util/strings.ts";
 import ButtonBatch from "@/components/button-batch.tsx";
-import {showToast} from "@/components/message.ts";
+import {showErrorToast, showToast} from "@/components/message.ts";
 import {Player, PlayerInstance} from "@/components/video/player.tsx";
 import ButtonPush2Room from "@/pages/video/components/button-push2room.tsx";
 import ButtonToTop from "@/components/scoller/button-to-top.tsx";
@@ -21,7 +21,6 @@ export default function VideoIndex() {
 	const [editId, setEditId] = useState(-1)
 	const loc = useLocation()
 	const [videoData, setVideoData] = useState<VideoInfo[]>([])
-	const [modal, contextHolder] = Modal.useModal()
 	const player = useRef<PlayerInstance | null>(null)
 	const scrollerRef = useRef<InfiniteScrollerRef|null>(null)
 	const [state, setState] = useSetState({
@@ -101,9 +100,14 @@ export default function VideoIndex() {
 			}
 		}
 	},[videoData,scrollerRef])
+	const processDeleteVideo = async (ids: Id[]) => {
+		deleteByIds(ids).then(() => {
+			showToast('删除成功!', 'success')
+			loadList()
+		}).catch(showErrorToast)
+	}
 
 	return (<div className="container py-10 page-live">
-		{contextHolder}
 		<div className="flex">
 			<div className="video-player-container mr-16 w-[360px] flex flex-col">
 				<div className="text-center text-base text-gray-400">预览视频 - 点击视频列表播放</div>
@@ -176,7 +180,8 @@ export default function VideoIndex() {
 													id={v.id}
 													key={index}
 													type={'create'}
-													active={state.playingIndex == index}
+													active={checkedIdArray.includes(v.id)}
+													playing={state.playingIndex == index}
 													checked={checkedIdArray.includes(v.id)}
 													className={`list-item-${index} mt-3 mb-2 list-item-state-${v.status}`}
 													onCheckedChange={(checked) => {
@@ -187,7 +192,7 @@ export default function VideoIndex() {
 														})
 													}}
 													onItemClick={ () => playVideo(v, index)}
-													onRemove={()=>{}}
+													onRemove={() => processDeleteVideo([v.id])}
 													onEdit={v.status == VideoStatus.Generating ? undefined : () => {
 														setEditId(v.article_id)
 													}}