From 4cdcfb06369c34a6325d9f5676a48ea6be306c66 Mon Sep 17 00:00:00 2001 From: callmeyan Date: Mon, 23 Dec 2024 23:48:39 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=88=A0=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/video/video-list-item.tsx | 30 ++++++++++---------- src/pages/live/index.tsx | 35 ++++++++++++++---------- src/pages/video/index.tsx | 17 ++++++++---- 3 files changed, 47 insertions(+), 35 deletions(-) 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) }}