feat: update

This commit is contained in:
LittleBoy 2024-12-15 18:45:28 +08:00
parent be22fc387a
commit 39f254c99b

View File

@ -8,10 +8,11 @@ import {clsx} from "clsx";
import {VideoListItem} from "@/components/video/video-list-item.tsx"; import {VideoListItem} from "@/components/video/video-list-item.tsx";
import ArticleEditModal from "@/components/article/edit-modal.tsx"; import ArticleEditModal from "@/components/article/edit-modal.tsx";
import {deleteByIds, getList} from "@/service/api/video.ts"; import {deleteByIds, getList, modifyOrder, push2room} from "@/service/api/video.ts";
import {formatDuration} from "@/util/strings.ts"; import {formatDuration} from "@/util/strings.ts";
import ButtonPush2Room from "@/pages/video/components/button-push2room.tsx"; import ButtonPush2Room from "@/pages/video/components/button-push2room.tsx";
import ButtonBatch from "@/components/button-batch.tsx"; import ButtonBatch from "@/components/button-batch.tsx";
import {showErrorToast, showToast} from "@/components/message.ts";
export default function VideoIndex() { export default function VideoIndex() {
@ -28,6 +29,8 @@ export default function VideoIndex() {
// 加载列表 // 加载列表
const loadList = () => { const loadList = () => {
getList().then((ret) => { getList().then((ret) => {
console.log('origin list', ret.list.map(s => s.id))
setCheckedIdArray([])
setVideoData(ret.list || []) setVideoData(ret.list || [])
setState({checkedAll: false, playingIndex: -1}) setState({checkedAll: false, playingIndex: -1})
}) })
@ -35,8 +38,8 @@ export default function VideoIndex() {
// 播放视频 // 播放视频
const playVideo = (video: VideoInfo, playingIndex: number) => { const playVideo = (video: VideoInfo, playingIndex: number) => {
setState({playingIndex})
if (videoRef.current && video.oss_video_url) { if (videoRef.current && video.oss_video_url) {
setState({playingIndex})
videoRef.current!.src = video.oss_video_url videoRef.current!.src = video.oss_video_url
} }
} }
@ -47,6 +50,15 @@ export default function VideoIndex() {
checkedAll: !state.checkedAll checkedAll: !state.checkedAll
}) })
} }
const handleModifySort = () => {
setVideoData((items) => {
modifyOrder(items.map(s => s.id)).catch(() => {
showToast('调整视频顺序失败,请重试!')
}).finally(loadList)
return items;
})
}
// //
useEffect(loadList, []) useEffect(loadList, [])
const totalDuration = useMemo(() => { const totalDuration = useMemo(() => {
@ -95,6 +107,7 @@ export default function VideoIndex() {
if (over && active.id !== over.id) { if (over && active.id !== over.id) {
let oldIndex = -1, newIndex = -1; let oldIndex = -1, newIndex = -1;
const originArr = [...videoData] const originArr = [...videoData]
console.log(originArr.map(s => s.id))
setVideoData((items) => { setVideoData((items) => {
oldIndex = items.findIndex(s => s.id == active.id); oldIndex = items.findIndex(s => s.id == active.id);
newIndex = items.findIndex(s => s.id == over.id); newIndex = items.findIndex(s => s.id == over.id);
@ -103,6 +116,7 @@ export default function VideoIndex() {
modal.confirm({ modal.confirm({
title: '提示', title: '提示',
content: '是否要移动到指定位置', content: '是否要移动到指定位置',
onOk: handleModifySort,
onCancel: () => { onCancel: () => {
setVideoData(originArr); setVideoData(originArr);
} }
@ -139,12 +153,20 @@ export default function VideoIndex() {
</div> </div>
</div> </div>
<div className="text-right mt-5"> <div className="text-right mt-5">
<ButtonPush2Room ids={checkedIdArray}/> <ButtonBatch
type={'primary'}
onProcess={push2room}
selected={checkedIdArray}
emptyMessage={`请选择要推流的新闻`}
confirmMessage={`是否确定一键推流选中新闻视频?`}
onSuccess={loadList}
></ButtonBatch>
{/*<ButtonPush2Room ids={checkedIdArray}/>*/}
</div> </div>
</div> </div>
<div className="video-player-container ml-6 w-[450px] flex flex-col"> <div className="video-player-container ml-16 min-w-[360px] flex flex-col">
<div className="text-center text-base mt-10"></div> <div className="text-center text-base mt-10"></div>
<div className="video-player flex items-center justify-center mt-20"> <div className="video-player flex items-center mt-20">
<div className=" rounded overflow-hidden"> <div className=" rounded overflow-hidden">
<video ref={videoRef} controls autoPlay className="w-full bg-white min-w-[360px]"></video> <video ref={videoRef} controls autoPlay className="w-full bg-white min-w-[360px]"></video>
</div> </div>