diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx index 02ea972..199293b 100644 --- a/src/components/icons/index.tsx +++ b/src/components/icons/index.tsx @@ -118,7 +118,15 @@ export const IconAddCircle = ({style, className}: IconProps) => ( fill="currentColor"/> ) +export const IconRollbackCircle = ({style, className}: IconProps) => ( + + + + + +) export const IconWarningCircle = ({style, className}: IconProps) => ( diff --git a/src/components/video/video-list-item.tsx b/src/components/video/video-list-item.tsx index e4d3374..638123c 100644 --- a/src/components/video/video-list-item.tsx +++ b/src/components/video/video-list-item.tsx @@ -9,7 +9,7 @@ import { IconEdit, IconGenerateFailed, IconGenerating, - IconPlaying, IconRegenerate, + IconPlaying, IconRegenerate, IconRollbackCircle, IconWarningCircle } from "@/components/icons"; import {VideoStatus} from "@/service/api/video.ts"; @@ -31,7 +31,8 @@ type Props = { onRegenerate?: () => void; hideCheckBox?: boolean; onItemClick?: () => void; - onRemove?: () => void; + onRemove?: (action?:'delete' | 'rollback') => void; + removeIcon?: React.ReactNode; id: number; className?: string; type?: 'live' | 'create' @@ -39,7 +40,7 @@ type Props = { export const VideoListItem = ( { - id, video, onRemove, checked,playing, + id, video, onRemove,removeIcon, checked,playing, onCheckedChange, onEdit, active, editable, className, sortable, type, index,onItemClick, additionOperation,onRegenerate,hideCheckBox @@ -141,8 +142,8 @@ export const VideoListItem = ( icon={} title={t('video.delete_confirm_title')} // description={`删除后需从重新${type == 'create' ? '生成' : '推流'}`} - onConfirm={onRemove} - >} + onConfirm={() => onRemove(failed ? 'rollback' : 'delete')} + >} {hideCheckBox ? : { if (onCheckedChange) { onCheckedChange(!state.checked) diff --git a/src/pages/video/index.tsx b/src/pages/video/index.tsx index c634e12..1b91f46 100644 --- a/src/pages/video/index.tsx +++ b/src/pages/video/index.tsx @@ -14,15 +14,15 @@ 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"; import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx"; -import {IconDelete, IconEdit} from "@/components/icons"; -import {useLocation} from "react-router-dom"; +import {IconDelete} from "@/components/icons"; +import {useLocation, useNavigate} from "react-router-dom"; import {useTranslation} from "react-i18next"; -import {find} from "lodash"; export default function VideoIndex() { const {t} = useTranslation() const [editId, setEditId] = useState(-1) const loc = useLocation() + const navigate = useNavigate() const [videoData, setVideoData] = useState([]) const player = useRef(null) const scrollerRef = useRef(null) @@ -117,15 +117,15 @@ export default function VideoIndex() { } // useEffect(loadList, []) - const totalDuration = useMemo(() => { - if (!videoData || videoData.length == 0) return 0; - const v = state.playingId == -1 ? null : videoData.find(s=>s.id == state.playingId) - if (!v) return 0 - //const v = videoData[state.playingIndex] as VideoInfo; - return Math.ceil(v.duration / 1000) - // 计算总时长 - //return videoData.reduce((sum, v) => sum + Math.ceil(v.duration / 1000), 0); - }, [videoData, state.playingId]) + // const totalDuration = useMemo(() => { + // if (!videoData || videoData.length == 0) return 0; + // const v = state.playingId == -1 ? null : videoData.find(s=>s.id == state.playingId) + // if (!v) return 0 + // //const v = videoData[state.playingIndex] as VideoInfo; + // return Math.ceil(v.duration / 1000) + // // 计算总时长 + // //return videoData.reduce((sum, v) => sum + Math.ceil(v.duration / 1000), 0); + // }, [videoData, state.playingId]) useEffect(() => { if (loc.state == 'push-success' && !state.showStatePos && videoData.length && scrollerRef.current) { @@ -136,10 +136,16 @@ export default function VideoIndex() { } } }, [videoData, scrollerRef]) - const processDeleteVideo = async (ids: Id[]) => { + const processDeleteVideo = async (ids: Id[],action ?: string) => { deleteFromList(ids).then(() => { showToast(t('delete_success'), 'success') - loadList() + if(action == 'rollback'){ + navigate('/edit',{ + state: {action: 'rollback',id: ids[0]}, + }) + }else{ + loadList() + } }).catch(showErrorToast) } const processGenerateVideo = async (video: VideoInfo) => { @@ -251,7 +257,7 @@ export default function VideoIndex() { }) }} onItemClick={() => playVideo(v)} - onRemove={() => processDeleteVideo([v.id])} + onRemove={(action) => processDeleteVideo([v.id],action)} onEdit={v.status == VideoStatus.Generated ? () => { setEditId(v.article_id) }:undefined}