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} {contextHolder}
<div className="h-[36px]"></div> <div className="h-[36px]"></div>
<div className="flex"> <div className="flex">
<div className="video-player-container mr-16 flex flex-col"> <div className="video-player-container mr-16 flex items-center">
<div className="text-center text-base text-gray-400">直播界面</div> <div>
<div className="video-player flex justify-center flex-1 mt-1"> <div className="text-center text-base text-gray-400">直播界面</div>
<div className="live-player relative rounded overflow-hidden w-[360px] h-[636px]" <div className="video-player flex justify-center flex-1 mt-1">
style={{backgroundColor: 'hsl(210, 100%, 48%)'}}> <div className="live-player relative rounded overflow-hidden w-[360px] h-[636px]"
<Player style={{backgroundColor: 'hsl(210, 100%, 48%)'}}>
ref={player} className="w-[360px] h-[636px] bg-white" <Player
muted={true} ref={player} className="w-[360px] h-[636px] bg-white"
onProgress={(progress) => { muted={true}
setState({playProgress: progress}) 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>
<div className="text-center text-base">
<span>视频时长: {formatDuration(currentTotalDuration)} / {formatDuration(totalDuration)}</span>
</div> </div>
</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"> return (<div className="container py-5 page-live">
<div className="h-[36px]"></div> <div className="h-[36px]"></div>
<div className="flex"> <div className="flex">
<div className="video-player-container mr-16 w-[360px] flex flex-col"> <div className="video-player-container mr-16 w-[360px] flex items-center">
<div className="text-center text-base text-gray-400">预览视频 - 点击视频列表播放</div> <div>
<div className="video-player flex items-center mt-2"> <div className="text-center text-base text-gray-400">预览视频 - 点击视频列表播放</div>
<div className=" w-[360px] h-[636px] rounded overflow-hidden"> <div className="video-player flex items-center mt-2">
<Player <div className=" w-[360px] h-[636px] rounded overflow-hidden">
ref={player} url={videoData[state.playingIndex]?.oss_video_url} <Player
onChange={(state) => { ref={player} url={videoData[state.playingIndex]?.oss_video_url}
console.log(state) onChange={(state) => {
if (state.end || state.error) setState({playingIndex: -1}) console.log(state)
}} if (state.end || state.error) setState({playingIndex: -1})
onProgress={(current, duration) => { }}
setState({ onProgress={(current, duration) => {
playState: { setState({
current: current, playState: {
total: duration current: current,
} total: duration
}) }
}} })
className="w-[360px] h-[640px] bg-white"/> }}
className="w-[360px] h-[640px] bg-white"/>
</div>
</div> </div>
<div className="text-center text-sm mt-4 text-gray-400">{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}</div>
</div> </div>
<div className="text-center text-sm mt-4 text-gray-400">{formatDuration(state.playState.current)} / {formatDuration(state.playState.total)}</div>
</div> </div>
<div className="video-list-container rounded mt-2 flex flex-col flex-1"> <div className="video-list-container rounded mt-2 flex flex-col flex-1">
<div className="live-control flex justify-between"> <div className="live-control flex justify-between">