fixed: 视频播放时调整顺寻影响播放状态

.coding-ci.yml

@@ -11,6 +11,14 @@
     - name: build
       script: yarn run build
 
+dev/main:
+  push:
+    - <<: *pipeline
+
+main:
+  push:
+    - <<: *pipeline
+
 release:
   push:
     - <<: *pipeline

src/pages/video/index.tsx

@@ -17,6 +17,7 @@ import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infini
 import {IconDelete} from "@/components/icons";
 import {useLocation} from "react-router-dom";
 import {useTranslation} from "react-i18next";
+import {find} from "lodash";
 
 export default function VideoIndex() {
 	const {t} = useTranslation()
@@ -27,14 +28,15 @@ export default function VideoIndex() {
 	const scrollerRef = useRef<InfiniteScrollerRef | null>(null)
 	const [state, setState] = useSetState({
 		checkedAll: false,
-		playingIndex: -1,
+		playingId: -1,
 		showToTop: false,
 		showStatePos: false,
 		playState: {
 			current: -1,
 			total: -1
 		},
-		loading:false
+		loading:false,
+		playVideoUrl: ''
 	})
 	const [checkedIdArray, setCheckedIdArray] = useState<Id[]>([])
 	const [refreshTimer,setTimer] = useState(0)
@@ -52,7 +54,7 @@ export default function VideoIndex() {
 			setVideoData(list)
 			if (needReset) {
 				setCheckedIdArray([])
-				setState({checkedAll: false, playingIndex: -1})
+				setState({checkedAll: false, playingId: -1})
 			}
 			// 判断是否有生成中的视频
 			if (list.filter(s => s.status == VideoStatus.Generating).length > 0) {
@@ -73,10 +75,11 @@ export default function VideoIndex() {
 	}
 
 	// 播放视频
-	const playVideo = (video: VideoInfo, playingIndex: number) => {
-		if (state.playingIndex == playingIndex) {
+	const playVideo = (video: VideoInfo) => {
+		console.log('play video',video)
+		if (state.playingId == video.id) {
 			player.current?.pause();
-			setState({playingIndex: -1})
+			setState({playingId: -1})
 			return;
 		}
 		if (video.status == VideoStatus.Generating) return;
@@ -84,7 +87,7 @@ export default function VideoIndex() {
 		// 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})
+			setState({playingId: video.id})
 			player.current?.play(video.oss_video_url, 0)
 		}
 	}
@@ -116,12 +119,13 @@ export default function VideoIndex() {
 	useEffect(loadList, [])
 	const totalDuration = useMemo(() => {
 		if (!videoData || videoData.length == 0) return 0;
-		if (state.playingIndex == -1 || state.playingIndex >= videoData.length) return 0
-		const v = videoData[state.playingIndex] as VideoInfo;
+		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.playingIndex])
+	}, [videoData, state.playingId])
 
 	useEffect(() => {
 		if (loc.state == 'push-success' && !state.showStatePos && videoData.length && scrollerRef.current) {
@@ -147,10 +151,11 @@ export default function VideoIndex() {
 					<div className="text-center text-base text-gray-400">{t("generating.title")}</div>
 					<div className="video-player flex items-center mt-2">
 						<div className=" w-[360px] h-[636px] rounded overflow-hidden">
+							{/*videoData[state.playingIndex]?.oss_video_url*/}
 							<Player
-								ref={player} url={videoData[state.playingIndex]?.oss_video_url}
+								ref={player}
+								url={state.playVideoUrl}
 								onChange={(state) => {
-									console.log(state)
 									if (state.end || state.error) setState({playingIndex: -1})
 								}}
 								onProgress={(current, duration) => {
@@ -229,7 +234,7 @@ export default function VideoIndex() {
 													key={index}
 													type={'create'}
 													active={checkedIdArray.includes(v.id)}
-													playing={state.playingIndex == index}
+													playing={state.playingId == v.id}
 													checked={checkedIdArray.includes(v.id)}
 													className={`list-item-${index} mt-3 mb-2 list-item-state-${v.status}`}
 													onCheckedChange={(checked) => {
@@ -239,7 +244,7 @@ export default function VideoIndex() {
 															return newArr;
 														})
 													}}
-													onItemClick={() => playVideo(v, index)}
+													onItemClick={() => playVideo(v)}
 													onRemove={() => processDeleteVideo([v.id])}
 													onEdit={v.status == VideoStatus.Generating ? undefined : () => {
 														setEditId(v.article_id)

src/types/api.d.ts

@@ -101,6 +101,9 @@ declare interface VideoInfo {
 	publish_time?: number|string;
 	ctime?: number|string;
 }
+declare interface VideoListItem extends VideoInfo {
+	playing?: boolean;
+}
 // room live
 declare interface LiveVideoInfo {
 	id: number;