updated

src/components/video/player.tsx

@@ -25,6 +25,7 @@ type Props = {
 }
 export type PlayerInstance = {
 	play: (url: string, currentTime: number) => void;
+	pause: () => void;
 	getState: () => State;
 }
 export const Player = React.forwardRef<PlayerInstance, Props>((props, ref) => {
@@ -96,6 +97,10 @@ export const Player = React.forwardRef<PlayerInstance, Props>((props, ref) => {
 	}, [])
 	React.useImperativeHandle(ref, () => {
 		return {
+			pause(){
+				if (!tcPlayer) return;
+				tcPlayer.pause()
+			},
 			play: (url, currentTime = 0) => {
 				console.log('play', url, currentTime)
 				if (!tcPlayer) return;

src/components/video/video-list-item.tsx

@@ -57,11 +57,7 @@ export const VideoListItem = (
 			     {... (sortable && !generating?listeners:{})}
 			     {... (sortable && !generating?attributes:{})}
 			>{index}</div>
-			<div
-				className="col cover"
-			     {... (sortable && !generating?listeners:{})}
-			     {... (sortable && !generating?attributes:{})}
-			>
+			<div className="col cover cursor-pointer">
 				<div className="relative">
 					<img className="w-[100px] h-[56px] object-cover" src={video.cover || ImageCover}/>
 					{generating &&

src/pages/live/index.tsx

@@ -20,6 +20,7 @@ const cache: { flvPlayer?: FlvJs.Player, timerPlayNext?: any, timerLoadState?: a
 export default function LiveIndex() {
 
 	const player = useRef<PlayerInstance | null>(null)
+
 	const [videoData, setVideoData] = useState<LiveVideoInfo[]>([])
 	const [modal, contextHolder] = Modal.useModal()
 	const [checkedIdArray, setCheckedIdArray] = useState<number[]>([])
@@ -31,6 +32,7 @@ export default function LiveIndex() {
 		muted: true,
 		showToTop: false,
 		checkedAll: false,
+		originSort:''
 	})
 	const activeIndex = useRef(state.activeIndex)
 	useEffect(() => {
@@ -111,6 +113,9 @@ export default function LiveIndex() {
 		getList().then(res => {
 			// console.log('origin list', res.list.map(s => s.id))
 			setVideoData(() => (res.list || []))
+			setState({
+				originSort: res.list?res.list.map(s => s.id).join(','):''
+			})
 			setCheckedIdArray([])
 		});
 	}
@@ -132,16 +137,22 @@ export default function LiveIndex() {
 			setEditable(true)
 			return;
 		}
+		const newSort = videoData.map(s => s.id).join(',')
+		if(newSort == state.originSort){
+			setEditable(false)
+			return;
+		}
 		modal.confirm({
 			title: '提示',
 			content: '是否采纳移动视频位置操作？',
+			centered: true,
 			onOk: () => {
 				//showToast('编辑成功!!!', 'info');
 				modifyOrder(videoData.map(s => s.id)).then(() => {
+					showToast('已完成直播队列的修改！','success')
 					setEditable(false)
-					loadList()
 				}).catch(() => {
-					showToast('调整视频顺序失败,请重试!')
+					showToast('调整视频顺序失败,请重试!','warning')
 				})
 			},
 			onCancel: () => {

src/pages/video/index.tsx

@@ -51,12 +51,19 @@ export default function VideoIndex() {
 
 	// 播放视频
 	const playVideo = (video: VideoInfo, playingIndex: number) => {
-		console.log(video)
-		if(video.status == VideoStatus.Generating ) return;
-		if (video.oss_video_url && video.status !== 1) {
-			setState({playingIndex})
-			player.current?.play(video.oss_video_url, 0)
+		if(state.playingIndex == playingIndex){
+			player.current?.pause();
+			setState({playingIndex: -1})
+			return;
 		}
+		if(video.status == VideoStatus.Generating ) return;
+		setState({playingIndex})
+		player.current?.play('https://staticplus.gachafun.com/ai-collect/composite_video/2024-12-17/1186196465916190720.flv',30)
+		//
+		// if (video.oss_video_url && video.status !== 1) {
+		// 	setState({playingIndex})
+		// 	player.current?.play(video.oss_video_url, 0)
+		// }
 	}
 	// 处理全选
 	const handleAllCheckedChange = () => {
@@ -66,10 +73,10 @@ export default function VideoIndex() {
 		})
 	}
 	const handleModifySort = (items:VideoInfo[]) => {
-		// .then(() => {
-		// 			showToast('调整视频顺序成功!','success')
-		// 		})
-		modifyOrder(items.map(s => s.id)).catch(()=>{
+
+		modifyOrder(items.map(s => s.id)).then(() => {
+			showToast('调整视频顺序成功!','success')
+		}).catch(()=>{
 			loadList();
 			showToast('调整视频顺序失败,请重试!','warning')
 		})
@@ -105,7 +112,7 @@ export default function VideoIndex() {
 						<Player
 							ref={player} url={videoData[state.playingIndex]?.oss_video_url}
 							onChange={(state) => {
-								if (state.end || state.end) setState({playingIndex: -1})
+								if (state.end || state.error) setState({playingIndex: -1})
 							}}
 							className="w-[360px] h-[640px] bg-white"/>
 					</div>