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

update: 调整直播间时长UI

Browse Source
This commit is contained in:
LittleBoy 2025-02-13 17:44:05 +08:00
parent ac0ab41dcb
commit 1db6a1e19c
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -190,6 +190,9 @@ export default function LiveIndex() {
// 计算总时长
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;
@ -216,7 +219,7 @@ export default function LiveIndex() {
<div className="flex">
<div className="video-player-container mr-16 flex items-center">
<div>
<div className="text-center text-base text-gray-400">{t('live.title')}</div>
<div className="text-center text-base text-gray-400">{formatDuration(totalDuration)}</div>
<div className="video-player flex justify-center flex-1 mt-1">
<div className="live-player relative rounded overflow-hidden w-[360px] h-[636px]"
style={{backgroundColor: 'hsl(210, 100%, 48%)'}}>
@ -230,7 +233,7 @@ export default function LiveIndex() {
</div>
</div>
<div className="text-center text-sm mt-4 text-gray-400">
<span>{t('live.duration')}: {formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}</span>
<span>{t('live.duration')}: {formatDuration(state.playProgress)} / {formatDuration(currentVideoDuration)}</span>
</div>
</div>
</div>