wangyujian_wd

feat:1)直播详情信息横屏播放器和间接直播间UI逻辑修改

@@ -171,10 +171,12 @@ export interface LiveInfo { @@ -171,10 +171,12 @@ export interface LiveInfo {
171 liveState: string 171 liveState: string
172 //2024-04-12 15:00:00 直播开始时间 172 //2024-04-12 15:00:00 直播开始时间
173 planStartTime: string 173 planStartTime: string
174 - mliveId:string  
175 vlive: Array<Vlive> 174 vlive: Array<Vlive>
  175 + mlive:MLive
  176 +}
  177 +export interface MLive {
  178 + mliveId:string
176 } 179 }
177 -  
178 export interface FullColumnImgUrls { 180 export interface FullColumnImgUrls {
179 url: string 181 url: string
180 } 182 }
@@ -10,13 +10,14 @@ import router from '@ohos.router'; @@ -10,13 +10,14 @@ import router from '@ohos.router';
10 export struct DetailPlayLivePage { 10 export struct DetailPlayLivePage {
11 TAG: string = 'DetailPlayLivePage'; 11 TAG: string = 'DetailPlayLivePage';
12 liveViewModel: LiveViewModel = new LiveViewModel() 12 liveViewModel: LiveViewModel = new LiveViewModel()
13 - @State relId: string = ''  
14 - @State contentId: string = ''  
15 - @State relType: string = '' 13 + @State relId: string = '500005302448'
  14 + @State contentId: string = '20000016340'
  15 + @State relType: string = '1'
16 @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean 16 @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
17 @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean 17 @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
18 18
19 aboutToAppear(): void { 19 aboutToAppear(): void {
  20 + //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
20 let par: Action = router.getParams() as Action; 21 let par: Action = router.getParams() as Action;
21 let params = par?.params; 22 let params = par?.params;
22 this.relId = params?.extra?.relId || ''; 23 this.relId = params?.extra?.relId || '';
1 -import { LiveRoomItemBean } from 'wdBean/Index' 1 +import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index'
2 import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI } from 'wdComponent/Index' 2 import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI } from 'wdComponent/Index'
3 import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout' 3 import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
4 import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout' 4 import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'
@@ -14,6 +14,7 @@ export struct TabChatComponent { @@ -14,6 +14,7 @@ export struct TabChatComponent {
14 @State private pageModel: PageModel = new PageModel() 14 @State private pageModel: PageModel = new PageModel()
15 liveViewModel: LiveViewModel = new LiveViewModel() 15 liveViewModel: LiveViewModel = new LiveViewModel()
16 @State liveChatList: Array<LiveRoomItemBean> = [] 16 @State liveChatList: Array<LiveRoomItemBean> = []
  17 + @Consume liveDetailsBean: LiveDetailsBean
17 18
18 aboutToAppear(): void { 19 aboutToAppear(): void {
19 this.getLiveChatList() 20 this.getLiveChatList()
@@ -77,7 +78,11 @@ export struct TabChatComponent { @@ -77,7 +78,11 @@ export struct TabChatComponent {
77 78
78 getLiveChatList() { 79 getLiveChatList() {
79 this.pageModel.currentPage = 1 80 this.pageModel.currentPage = 1
80 - this.liveViewModel.getLiveChatList(1, '20000016257', '20000016229', 20,) 81 + this.liveViewModel.getLiveChatList(
  82 + 1,
  83 + this.liveDetailsBean?.liveInfo?.mlive?.mliveId,
  84 + this.liveDetailsBean?.newsId,
  85 + 20,)
81 .then( 86 .then(
82 (data) => { 87 (data) => {
83 if (data.barrageResponses && data.barrageResponses.length > 0) { 88 if (data.barrageResponses && data.barrageResponses.length > 0) {
@@ -19,6 +19,7 @@ export struct TabInfoComponent { @@ -19,6 +19,7 @@ export struct TabInfoComponent {
19 right: 16 19 right: 16
20 }) 20 })
21 .height('100%') 21 .height('100%')
  22 + .alignItems(HorizontalAlign.Start)
22 } 23 }
23 24
24 aboutToDisappear(): void { 25 aboutToDisappear(): void {
@@ -39,7 +39,11 @@ export struct TabLiveComponent { @@ -39,7 +39,11 @@ export struct TabLiveComponent {
39 } 39 }
40 40
41 getLiveList() { 41 getLiveList() {
42 - this.liveViewModel.getLiveList(1, '20000016257', '20000016229', 20,) 42 + this.liveViewModel.getLiveList(
  43 + 1,
  44 + this.liveDetailsBean?.liveInfo?.mlive?.mliveId,
  45 + this.liveDetailsBean?.newsId,
  46 + 20)
43 .then( 47 .then(
44 (data) => { 48 (data) => {
45 /** 49 /**
@@ -75,6 +75,8 @@ export struct TabLiveItemComponent { @@ -75,6 +75,8 @@ export struct TabLiveItemComponent {
75 left: 32, 75 left: 32,
76 top: 6 76 top: 6
77 }) 77 })
  78 + .width('100%')
  79 + .textAlign(TextAlign.Start)
78 List() { 80 List() {
79 ForEach(this.item.pictureUrls, (item: string, index: number) => { 81 ForEach(this.item.pictureUrls, (item: string, index: number) => {
80 ListItem() { 82 ListItem() {
1 import { window } from '@kit.ArkUI' 1 import { window } from '@kit.ArkUI'
2 -import { DateTimeUtils, NumberFormatterUtils, WindowModel } from 'wdKit/Index' 2 +import { NumberFormatterUtils, WindowModel } from 'wdKit/Index'
3 3
4 import { devicePLSensorManager } from 'wdDetailPlayApi/Index' 4 import { devicePLSensorManager } from 'wdDetailPlayApi/Index'
  5 +import { DateFormatUtil, WDPlayerController } from 'wdPlayer/Index'
5 import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index' 6 import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
6 -import { WDPlayerController } from 'wdPlayer/Index'  
7 7
8 @Entry 8 @Entry
9 @Component 9 @Component
@@ -23,8 +23,8 @@ export struct PlayUIComponent { @@ -23,8 +23,8 @@ export struct PlayUIComponent {
23 aboutToAppear(): void { 23 aboutToAppear(): void {
24 //播放进度监听 24 //播放进度监听
25 this.playerController.onTimeUpdate = (position: number, duration: number) => { 25 this.playerController.onTimeUpdate = (position: number, duration: number) => {
26 - this.currentTime = DateTimeUtils.secondToTime(position);  
27 - this.totalTime = DateTimeUtils.secondToTime(duration); 26 + this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
  27 + this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
28 this.progressVal = Math.floor(position * 100 / duration); 28 this.progressVal = Math.floor(position * 100 / duration);
29 } 29 }
30 } 30 }
@@ -67,13 +67,13 @@ export struct PlayUIComponent { @@ -67,13 +67,13 @@ export struct PlayUIComponent {
67 .width('100%') 67 .width('100%')
68 .alignItems(VerticalAlign.Center) 68 .alignItems(VerticalAlign.Center)
69 .margin({ 69 .margin({
70 - bottom: 5 70 + bottom: 10
71 }) 71 })
72 72
73 this.getLiveStatusView() 73 this.getLiveStatusView()
74 }.width('100%') 74 }.width('100%')
75 .padding({ 75 .padding({
76 - top: 10, 76 + top: 20,
77 bottom: 6, 77 bottom: 6,
78 left: 10, 78 left: 10,
79 right: 10 79 right: 10
@@ -84,9 +84,35 @@ export struct PlayUIComponent { @@ -84,9 +84,35 @@ export struct PlayUIComponent {
84 84
85 @Builder 85 @Builder
86 getLiveStatusView() { 86 getLiveStatusView() {
87 - //预约  
88 - //直播中 87 + // 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
  88 + // 预约
  89 + // 直播中
  90 + if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
  91 + Row() {
  92 + Image($r('app.media.icon_live_status_running'))
  93 + .width(22)
  94 + .height(18)
  95 + Text('直播中')
  96 + .fontSize('11fp')
  97 + .fontWeight(400)
  98 + .fontColor(Color.White)
  99 + Image($r('app.media.icon_live_player_status_end'))
  100 + .width(12)
  101 + .height(12)
  102 + Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
  103 + .fontSize('11fp')
  104 + .fontWeight(400)
  105 + .fontColor(Color.White)
  106 + }
  107 + .backgroundColor('#4D000000')
  108 + .padding({
  109 + top: 1,
  110 + right: 4,
  111 + bottom: 1
  112 + })
  113 + }
89 //回看 114 //回看
  115 + else if (this.liveDetailsBean.liveInfo?.liveState == 'end') {
90 Row() { 116 Row() {
91 Text('回看') 117 Text('回看')
92 .fontSize('11fp') 118 .fontSize('11fp')
@@ -108,6 +134,7 @@ export struct PlayUIComponent { @@ -108,6 +134,7 @@ export struct PlayUIComponent {
108 bottom: 1 134 bottom: 1
109 }) 135 })
110 } 136 }
  137 + }
111 138
112 @Builder 139 @Builder
113 getMiddleUIComponent() { 140 getMiddleUIComponent() {
@@ -122,6 +149,7 @@ export struct PlayUIComponent { @@ -122,6 +149,7 @@ export struct PlayUIComponent {
122 @Builder 149 @Builder
123 getBottomUIComponent() { 150 getBottomUIComponent() {
124 Row() { 151 Row() {
  152 + if (this.liveDetailsBean?.liveInfo?.liveState == 'end') {
125 this.playOrPauseBtn() 153 this.playOrPauseBtn()
126 Text(this.currentTime) 154 Text(this.currentTime)
127 .fontColor(Color.White) 155 .fontColor(Color.White)
@@ -140,6 +168,9 @@ export struct PlayUIComponent { @@ -140,6 +168,9 @@ export struct PlayUIComponent {
140 .margin({ 168 .margin({
141 right: 16 169 right: 16
142 }) 170 })
  171 + } else {
  172 + Blank()
  173 + }
143 Image($r('app.media.icon_live_player_full_screen')) 174 Image($r('app.media.icon_live_player_full_screen'))
144 .width(24) 175 .width(24)
145 .height(24) 176 .height(24)
@@ -183,16 +214,19 @@ export struct PlayUIComponent { @@ -183,16 +214,19 @@ export struct PlayUIComponent {
183 Slider({ 214 Slider({
184 value: this.progressVal, 215 value: this.progressVal,
185 step: 1, 216 step: 1,
186 - // style: SliderStyle.OutSet  
187 - })  
188 - .blockStyle({  
189 - type: SliderBlockType.IMAGE,  
190 - image: $r('app.media.ic_player_block') 217 + style: SliderStyle.OutSet
191 }) 218 })
  219 + .blockSize({
  220 + width: 18,
  221 + height: 12
  222 + })// .blockStyle({
  223 + // type: SliderBlockType.IMAGE,
  224 + // image: $r('app.media.ic_player_block')
  225 + // })
192 .blockColor(Color.White) 226 .blockColor(Color.White)
193 .trackColor('#4DFFFFFF') 227 .trackColor('#4DFFFFFF')
194 .selectedColor('#FFED2800') 228 .selectedColor('#FFED2800')
195 - .height(2) 229 + .height(14)
196 .trackThickness(1) 230 .trackThickness(1)
197 .layoutWeight(1) 231 .layoutWeight(1)
198 .margin({ 232 .margin({
@@ -14,8 +14,14 @@ export struct TopPlayComponent { @@ -14,8 +14,14 @@ export struct TopPlayComponent {
14 } 14 }
15 15
16 updateData() { 16 updateData() {
  17 + //直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
17 if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) { 18 if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
18 - let playUrl: string = this.liveDetailsBean.liveInfo.vlive[0].replayUri 19 + let playUrl = ''
  20 + if (this.liveDetailsBean.liveInfo.liveState == 'running') {
  21 + playUrl = this.liveDetailsBean.liveInfo.vlive[0].liveUrl
  22 + } else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
  23 + playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
  24 + }
19 this.playerController.firstPlay(playUrl); 25 this.playerController.firstPlay(playUrl);
20 } 26 }
21 } 27 }