feat: 保留腾讯播放器

src/components/video/Mp4Player.tsx

@@ -23,6 +23,8 @@ type Props = {
 	poster?: string;
 	onChange?: (state: State) => void;
 	onProgress?: (current:number,duration:number) => void;
+	onPause?: () => void;
+	onPlay?: () => void;
 	muted?: boolean;
 	autoPlay?: boolean;
 }
@@ -35,6 +37,7 @@ export type PlayerInstance = {
 export const Mp4Player = React.forwardRef<PlayerInstance, Props>((props, ref) => {
 	const [tcPlayer, setTcPlayer] = useState<VideoPlayer | null>(null)
 	const [prevUrl, setPrevUrl] = useState<string | undefined>();
+
 	const [state, _setState] = useState<State>({
 		playing: false,
 		muted: false,
@@ -46,7 +49,6 @@ export const Mp4Player = React.forwardRef<PlayerInstance, Props>((props, ref) =>
 	})
 
 	const setState = (data: StateUpdate) => {
-		console.log('playstate change', data)
 		_setState(prev => {
 			const _state = typeof (data) === 'function' ? {...prev, ...data(prev)} : {...prev, ...data}
 			props.onChange?.(_state)
@@ -73,9 +75,11 @@ export const Mp4Player = React.forwardRef<PlayerInstance, Props>((props, ref) =>
 
 		player.on('pause', () => {
 			setState({playing: false, end: false, error: false})
+			props.onPause?.()
 		})
 		player.on('playing', () => {
 			setState({playing: true, end: false, error: false})
+			props.onPlay?.()
 		})
 		player.on('ended', () => {
 			setState({end: true, playing: false, error: false})

src/pages/live/index.tsx

@@ -11,13 +11,13 @@ import {deleteByIds, getList, modifyOrder, playState, restoreByIds} from "@/serv
 import {showErrorToast, showToast} from "@/components/message.ts";
 import ButtonBatch from "@/components/button-batch.tsx";
 import {formatDuration} from "@/util/strings.ts";
-import {Player, PlayerInstance} from "@/components/video/player.tsx";
+import {Mp4Player as Player, PlayerInstance} from "@/components/video/Mp4Player.tsx";
 import {IconDelete, IconLocked, IconRollbackCircle} from "@/components/icons";
 import InfiniteScroller, {InfiniteScrollerRef} from "@/components/scoller/infinite-scroller.tsx";
 import ButtonToTop from "@/components/scoller/button-to-top.tsx";
+import {ModalWarningIcon, ModalWarningTitle} from "@/components/icons/ModalWarning.tsx";
 
 import styles from "./style.module.scss"
-import {ModalWarningIcon, ModalWarningTitle} from "@/components/icons/ModalWarning.tsx";
 
 const cache: { flvPlayer?: FlvJs.Player, timerPlayNext?: any, timerLoadState?: any, prevUrl?: string } = {}
 
@@ -88,6 +88,7 @@ export default function LiveIndex() {
 			if (playedTime < 0 || playedTime > duration) { // 已播放时间大于总时长了
 				//initPlayingState() // 重新获取播放状态
 				console.log('已播放时间大于总时长')
+				cache.timerLoadState = setTimeout(initPlayingState, 5000)
 				return;
 			}
 			player.current?.play(video.video_oss_url, playedTime)

src/pages/video/index.tsx

@@ -1,8 +1,10 @@
 import {Checkbox, Empty, Space} from "antd";
-import React, {useEffect, useMemo, useRef, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {DndContext} from "@dnd-kit/core";
 import {arrayMove, SortableContext} from "@dnd-kit/sortable";
 import {useSetState} from "ahooks";
+import {useLocation, useNavigate} from "react-router-dom";
+import {useTranslation} from "react-i18next";
 
 import {VideoListItem} from "@/components/video/video-list-item.tsx";
 import ArticleEditModal from "@/components/article/edit-modal.tsx";
@@ -10,13 +12,11 @@ import {deleteFromList, getList, modifyOrder, regenerateById, VideoStatus} from
 import {formatDuration} from "@/util/strings.ts";
 import ButtonBatch from "@/components/button-batch.tsx";
 import {showErrorToast, showToast} from "@/components/message.ts";
-import {Player, PlayerInstance} from "@/components/video/player.tsx";
+import {Mp4Player as Player, PlayerInstance} from "@/components/video/Mp4Player.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} from "@/components/icons";
-import {useLocation, useNavigate} from "react-router-dom";
-import {useTranslation} from "react-i18next";
 
 export default function VideoIndex() {
 	const {t} = useTranslation()
@@ -29,6 +29,7 @@ export default function VideoIndex() {
 	const [state, setState] = useSetState({
 		checkedAll: false,
 		playingId: -1,
+		videoPlaying: false,
 		showToTop: false,
 		showStatePos: false,
 		playState: {
@@ -170,6 +171,12 @@ export default function VideoIndex() {
 								onChange={(state) => {
 									if (state.end || state.error) setState({playingId: -1})
 								}}
+								onPause={() => {
+									setState({videoPlaying:false})
+								}}
+								onPlay={() => {
+									setState({videoPlaying:true})
+								}}
 								onProgress={(current, duration) => {
 									setState({
 										playState: {
@@ -238,7 +245,7 @@ export default function VideoIndex() {
 													key={index}
 													type={'create'}
 													active={checkedIdArray.includes(v.id)}
-													playing={state.playingId == v.id}
+													playing={state.playingId == v.id && state.videoPlaying}
 													checked={checkedIdArray.includes(v.id)}
 													className={`list-item-${index} mt-3 mb-2 list-item-state-${v.status} `}
 													onCheckedChange={(checked) => {