diff --git a/src/components/video/video-list-item.tsx b/src/components/video/video-list-item.tsx
index 70851f4..536ebf4 100644
--- a/src/components/video/video-list-item.tsx
+++ b/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
{index}
-
+

{generating &&
@@ -66,7 +75,7 @@ export const VideoListItem = (
}
{/* && active*/}
- {!generating && active &&
+ {!generating && playing &&
播放中
@@ -104,14 +113,7 @@ export const VideoListItem = (
}
- {onRemove &&
请确认删除此视频? }
- onConfirm={onRemove}
- okText="删除"
- cancelText="取消"
- >
-
- }
+ {onRemove &&
}
{
if (onCheckedChange) {
onCheckedChange(!state.checked)
diff --git a/src/pages/live/index.tsx b/src/pages/live/index.tsx
index 727e096..e8d148f 100644
--- a/src/pages/live/index.tsx
+++ b/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}
-
数字人直播间
+
+ {formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}
+
-
- 视频时长: {formatDuration(totalDuration)}
-
@@ -282,17 +287,17 @@ export default function LiveIndex() {
scrollerRef.current?.scrollToPosition(0)}/>
-
- 批量删除
-
-
+ {checkedIdArray.length > 0 &&
+ 批量删除
+
+ }
)
}
\ No newline at end of file
diff --git a/src/pages/video/index.tsx b/src/pages/video/index.tsx
index ba5820a..7e91721 100644
--- a/src/pages/video/index.tsx
+++ b/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([])
- const [modal, contextHolder] = Modal.useModal()
const player = useRef(null)
const scrollerRef = useRef(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 (
- {contextHolder}
预览视频 - 点击视频列表播放
@@ -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)
}}