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

style update

Browse Source
This commit is contained in:
LittleBoy 2024-12-24 15:23:14 +08:00
parent b3a3757751
commit 4935c0674f
2 changed files with 39 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,22 +206,24 @@ export default function LiveIndex() {
{contextHolder}
<div className="h-[36px]"></div>
<div className="flex">
<div className="video-player-container mr-16 flex flex-col">
<div className="text-center text-base text-gray-400">直播界面</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%)'}}>
<Player
ref={player} className="w-[360px] h-[636px] bg-white"
muted={true}
onProgress={(progress) => {
setState({playProgress: progress})
}}
/>
<div className="video-player-container mr-16 flex items-center">
<div>
<div className="text-center text-base text-gray-400">直播界面</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%)'}}>
<Player
ref={player} className="w-[360px] h-[636px] bg-white"
muted={true}
onProgress={(progress) => {
setState({playProgress: progress})
}}
/>
</div>
</div>
<div className="text-center text-sm mt-4 text-gray-400">
<span>视频时长: {formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}</span>
</div>
</div>
<div className="text-center text-base">
<span>视频时长: {formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}</span>
</div>
</div>

42
src/pages/video/index.tsx
View File

@ -127,28 +127,30 @@ export default function VideoIndex() {
return (<div className="container py-5 page-live">
<div className="h-[36px]"></div>
<div className="flex">
<div className="video-player-container mr-16 w-[360px] flex flex-col">
<div className="text-center text-base text-gray-400">预览视频 - 点击视频列表播放</div>
<div className="video-player flex items-center mt-2">
<div className=" w-[360px] h-[636px] rounded overflow-hidden">
<Player
ref={player} url={videoData[state.playingIndex]?.oss_video_url}
onChange={(state) => {
console.log(state)
if (state.end || state.error) setState({playingIndex: -1})
}}
onProgress={(current, duration) => {
setState({
playState: {
current: current,
total: duration
}
})
}}
className="w-[360px] h-[640px] bg-white"/>
<div className="video-player-container mr-16 w-[360px] flex items-center">
<div>
<div className="text-center text-base text-gray-400">预览视频 - 点击视频列表播放</div>
<div className="video-player flex items-center mt-2">
<div className=" w-[360px] h-[636px] rounded overflow-hidden">
<Player
ref={player} url={videoData[state.playingIndex]?.oss_video_url}
onChange={(state) => {
console.log(state)
if (state.end || state.error) setState({playingIndex: -1})
}}
onProgress={(current, duration) => {
setState({
playState: {
current: current,
total: duration
}
})
}}
className="w-[360px] h-[640px] bg-white"/>
</div>
</div>
<div className="text-center text-sm mt-4 text-gray-400">{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}</div>
</div>
<div className="text-center text-sm mt-4 text-gray-400">{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}</div>
</div>
<div className="video-list-container rounded mt-2 flex flex-col flex-1">
<div className="live-control flex justify-between">