Zverse/ai-digital-live
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed: 直播间删除视频导致的直播状态异常

Browse Source
This commit is contained in:
LittleBoy 2025-02-14 15:37:14 +08:00
parent a3643ee9e5
commit 3551601709
1 changed files with 50 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/live/index.tsx
View File

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