diff --git a/src/pages/live/index.tsx b/src/pages/live/index.tsx index 40f0964..5d8f3f0 100644 --- a/src/pages/live/index.tsx +++ b/src/pages/live/index.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useMemo, useRef, useState} from "react"; +import React, {useCallback, useEffect, useMemo, useRef, useState} from "react"; import {Checkbox, Empty, Modal, Space} from "antd"; import {SortableContext, arrayMove} from '@dnd-kit/sortable'; import {DndContext} from "@dnd-kit/core"; @@ -29,7 +29,7 @@ export default function LiveIndex() { const scrollerRef = useRef(null) const [state, setState] = useSetState({ - activeIndex: -1, + playId:-1, muted: true, showToTop: false, checkedAll: false, @@ -37,15 +37,16 @@ export default function LiveIndex() { playProgress: 0, loading:false }) - const activeIndex = useRef(state.activeIndex) + const activeIndex = useRef(-1) useEffect(() => { - activeIndex.current = state.activeIndex - }, [state.activeIndex]) + activeIndex.current = videoData.findIndex(s=>s.id == state.playId) + }, [state.playId,videoData]) - const showVideoItem = (index: number) => { + // 显示当前播放视频对应 view item + const showVideoItem = (index: number,id: number) => { // 找到对应video item 并显示在视图可见区域 const container = document.querySelector('.live-video-list-sort-container') - const item = document.querySelector(`.list-item-${index}`) + const item = document.querySelector(`.list-item-${id}`) if (item && container) { // 获取容器数据 const containerRect = container.getBoundingClientRect() @@ -60,22 +61,25 @@ export default function LiveIndex() { }) } } - - const activeToNext = (index?: number) => { + // 播放下一个视频 + const activeToNext = useCallback( (index?: number) => { const endToFirst = index != undefined && index > -1 ? false : activeIndex.current >= videoData.length - 1 const _activeIndex = index != undefined && index > -1 ? index : (endToFirst ? 0 : activeIndex.current + 1) - setState({activeIndex: _activeIndex}) + const playVideo = videoData[_activeIndex]; + setState({playId: playVideo.id}); if (endToFirst) { showToast(t("live.play_first")); } // 找到对应video item 并显示在视图可见区域 - showVideoItem(_activeIndex) + showVideoItem(_activeIndex,playVideo.id) return _activeIndex; - } + }, [videoData, activeIndex]) + // 播放视频 const playVideo = (video: LiveVideoInfo, liveState: LiveState) => { if (player.current && video.video_oss_url) { if (cache.timerPlayNext) clearTimeout(cache.timerPlayNext) const duration = Math.ceil(video.video_duration / 1000) + // 计算已经播放时间 const playedTime = (Date.now() / 1000 >> 0) - liveState.live_start_time if (playedTime < 0 || playedTime > duration) { // 已播放时间大于总时长了 //initPlayingState() // 重新获取播放状态 @@ -89,19 +93,23 @@ export default function LiveIndex() { } } + // 初始化播放状态 const initPlayingState = () => { + player.current?.pause(); if (cache.timerLoadState) clearTimeout(cache.timerLoadState) - if (videoData.length == 0) { + if (!videoData || videoData.length == 0) { cache.timerLoadState = setTimeout(initPlayingState, 1000) return; } playState().then(liveState => { + // 获取当前播放视频 const video = videoData.find(v => v.id === liveState.id) if (video) { + // 开始播放 activeToNext(videoData.findIndex(v => v.id === liveState.id)) playVideo(video, liveState) } else { - setState({activeIndex: -1}) + setState({playId: -1}) cache.timerLoadState = setTimeout(initPlayingState, 5000) } }); @@ -142,12 +150,14 @@ export default function LiveIndex() { } }, []) + // 删除视频 const processDeleteVideo = async (ids: Id[]) => { deleteByIds(ids).then(() => { showToast(t('delete_success'), 'success') loadList() }).catch(showErrorToast) } + // const handleConfirm = () => { if (!editable) { setEditable(true) @@ -185,34 +195,35 @@ export default function LiveIndex() { }) } + // 视频相关时长 const totalDuration = useMemo(() => { if (!videoData || videoData.length == 0) return 0; // 计算总时长 return videoData.reduce((sum, v) => sum + Math.ceil(v.video_duration / 1000), 0); }, [videoData]) const currentVideoDuration = useMemo(()=>{ - return state.activeIndex <0 || state.activeIndex > videoData.length - 1 ? 0 : videoData[state.activeIndex].video_duration / 1000; - },[state.activeIndex, videoData]) - // 根据当前播放index计算已经播放时长 - const currentTotalDuration = useMemo(() => { - if (state.activeIndex == -1 || !videoData || videoData.length == 0) return 0; - // 计算总时长 - return videoData - .filter((_, index) => (index < state.activeIndex)) - .reduce((sum, v) => sum + Math.ceil(v.video_duration / 1000), 0) + state.playProgress - ; - }, [state.activeIndex, state.playProgress, videoData]) - - const currentSelectedId = useMemo(() => { - if (state.activeIndex < 0 || state.activeIndex >= videoData.length) return []; - const currentId = videoData[state.activeIndex]; - return checkedIdArray.filter(id => currentId.id != id) - }, [checkedIdArray, state.activeIndex]) + const video = videoData.find(s=>s.id == state.playId) + return (video?.video_duration || 0) / 1000; + },[state.playId, videoData]) + // // 根据当前播放index计算已经播放时长 + // const currentTotalDuration = useMemo(() => { + // if (state.activeIndex == -1 || !videoData || videoData.length == 0) return 0; + // // 计算总时长 + // return videoData + // .filter((_, index) => (index < state.activeIndex)) + // .reduce((sum, v) => sum + Math.ceil(v.video_duration / 1000), 0) + state.playProgress + // ; + // }, [state.activeIndex, state.playProgress, videoData]) + // + // const currentSelectedId = useMemo(() => { + // if (state.activeIndex < 0 || state.activeIndex >= videoData.length) return []; + // const currentId = videoData[state.activeIndex]; + // return checkedIdArray.filter(id => currentId.id != id) + // }, [checkedIdArray, state.activeIndex]) const currentSelectedVideoIds = useMemo(()=>{ - const activeId = videoData[state.activeIndex]?.id || -1; - return checkedIdArray.length == 0 ? [] : checkedIdArray.filter(id => id != activeId) - },[checkedIdArray, state.activeIndex, videoData]) + return checkedIdArray.length == 0 ? [] : checkedIdArray.filter(id => id != state.playId) + },[checkedIdArray, state.playId]) return (
@@ -302,9 +313,9 @@ export default function LiveIndex() { index={index + 1} id={v.id} key={index} - active={state.activeIndex == index} - playing={state.activeIndex == index} - className={`list-item-${index} mt-3 mb-2`} + active={state.playId == v.id} + playing={state.playId == v.id} + className={`list-index-${index} list-item-${v.id} mt-3 mb-2`} checked={checkedIdArray.includes(v.id)} onCheckedChange={(checked) => { const newIdArray = checked ? checkedIdArray.concat(v.id) : checkedIdArray.filter(id => id != v.id); @@ -315,8 +326,8 @@ export default function LiveIndex() { // }) }} onRemove={() => processDeleteVideo([v.id])} - editable={!editable && state.activeIndex != index} - sortable={editable && state.activeIndex != index} + editable={!editable && state.playId != v.id} + sortable={editable && state.playId != v.id} />))}