diff --git a/src/components/video/Mp4Player.tsx b/src/components/video/Mp4Player.tsx index ef56d0b..8763d1b 100644 --- a/src/components/video/Mp4Player.tsx +++ b/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((props, ref) => { const [tcPlayer, setTcPlayer] = useState(null) const [prevUrl, setPrevUrl] = useState(); + const [state, _setState] = useState({ playing: false, muted: false, @@ -46,7 +49,6 @@ export const Mp4Player = React.forwardRef((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((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}) diff --git a/src/pages/live/index.tsx b/src/pages/live/index.tsx index cbbcd53..353bc77 100644 --- a/src/pages/live/index.tsx +++ b/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) diff --git a/src/pages/video/index.tsx b/src/pages/video/index.tsx index aaa0471..fe50dea 100644 --- a/src/pages/video/index.tsx +++ b/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) => {