fixed: 直播间删除视频导致的直播状态异常
This commit is contained in:
parent
a3643ee9e5
commit
3551601709
@ -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<InfiniteScrollerRef | null>(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 (<div className="container py-5 page-live">
|
||||
<div className="h-[36px]"></div>
|
||||
@ -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}
|
||||
/>))}
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user