💄 feat: 更新回滚图标
This commit is contained in:
parent
54056aec3a
commit
51e133b273
@ -118,7 +118,15 @@ export const IconAddCircle = ({style, className}: IconProps) => (
|
||||
fill="currentColor"/>
|
||||
</svg>
|
||||
)
|
||||
export const IconRollbackCircle = ({style, className}: IconProps) => (
|
||||
<svg className={`svg-icon ${className || ''} icon-warning`} style={style} xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em" height="1em" viewBox="0 0 21 21" version="1.1">
|
||||
<g>
|
||||
<path d="M6.35192 0.404738C6.35236 0.404738 6.35272 0.4051 6.35272 0.405547V3.78207H12.3726C14.6365 3.78177 16.8099 4.66937 18.4238 6.25343C20.0378 7.8375 20.963 9.99107 21 12.2496V12.3918C20.9999 14.6502 20.1103 16.818 18.5231 18.428C16.9359 20.0379 14.7782 20.9611 12.5151 20.9984L12.3726 21H4.16146C4.05408 21 3.9511 20.9574 3.87516 20.8817C3.79923 20.8059 3.75657 20.7032 3.75657 20.596V18.9801C3.75657 18.8729 3.79923 18.7702 3.87516 18.6944C3.9511 18.6186 4.05408 18.5761 4.16146 18.5761H12.3726C14.0164 18.5932 15.5998 17.9581 16.7743 16.8105C17.9488 15.6628 18.6183 14.0966 18.6354 12.4565C18.6526 10.8163 18.0161 9.23653 16.8659 8.06464C15.7157 6.89274 14.146 6.22475 12.5022 6.20761H0.405711C0.324927 6.20777 0.24594 6.18382 0.178909 6.13883C0.111878 6.09384 0.0598667 6.02988 0.0295641 5.95516C-0.000738426 5.88044 -0.00794696 5.79839 0.00886551 5.71955C0.025678 5.64071 0.0657426 5.56869 0.123908 5.51275L5.66279 0.115483C5.71978 0.0597486 5.792 0.0220586 5.87039 0.00714763C5.94878 -0.00776331 6.02983 0.000769782 6.10338 0.031675C6.17692 0.0625803 6.23967 0.114479 6.28374 0.180854C6.32767 0.247003 6.35109 0.324588 6.35111 0.403927C6.35111 0.404375 6.35147 0.404738 6.35192 0.404738Z" fill="#B6A8AB"/>
|
||||
</g>
|
||||
|
||||
</svg>
|
||||
)
|
||||
export const IconWarningCircle = ({style, className}: IconProps) => (
|
||||
<svg className={`svg-icon ${className || ''} icon-warning`} style={style} xmlns="http://www.w3.org/2000/svg"
|
||||
width="1em" height="1em" viewBox="0 0 22 22" version="1.1">
|
||||
|
||||
@ -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={<IconWarningCircle/>}
|
||||
title={t('video.delete_confirm_title')}
|
||||
// description={`删除后需从重新${type == 'create' ? '生成' : '推流'}`}
|
||||
onConfirm={onRemove}
|
||||
><button className="hover:text-blue-500"><IconDelete/></button></Popconfirm>}
|
||||
onConfirm={() => onRemove(failed ? 'rollback' : 'delete')}
|
||||
><button className="hover:text-blue-500">{removeIcon?removeIcon:(failed?<IconRollbackCircle />:<IconDelete/>)}</button></Popconfirm>}
|
||||
{hideCheckBox ? <span className={"inline-block w-[18px] h-1"}></span> : <Checkbox checked={state.checked} onChange={() => {
|
||||
if (onCheckedChange) {
|
||||
onCheckedChange(!state.checked)
|
||||
|
||||
@ -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<VideoInfo[]>([])
|
||||
const player = useRef<PlayerInstance | null>(null)
|
||||
const scrollerRef = useRef<InfiniteScrollerRef | null>(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}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user