developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangyujian_wd
11b5fdda 1 parent 18b9404b

fix：1）直播详情页面-音频组件添加；2）直播详情页面优化

Inline Side-by-side
Showing 12 changed files with 280 additions and 213 deletions
@@ -52,7 +52,7 @@ export class WDRouterPage { @@ -52,7 +52,7 @@ export class WDRouterPage {
52 // 点播详情页 52 // 点播详情页
53 static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage"); 53 static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
54 // 直播详情页 54 // 直播详情页
55 - static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage"); 55 + // static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
56 static detailPlayVLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayVLivePage"); 56 static detailPlayVLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayVLivePage");
57 static detailPlayLiveCommon = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLiveCommon"); 57 static detailPlayLiveCommon = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLiveCommon");
58 // 多图(图集)详情页 58 // 多图(图集)详情页
@@ -18,9 +18,15 @@ export interface LiveRoomItemBean { @@ -18,9 +18,15 @@ export interface LiveRoomItemBean {
18 role: string 18 role: string
19 //ZH_TEXT_AND_IMAGE_MSG ：图文，ZH_TEXT_MSG：文本，ZH_VIDEO_MSG：视频，ZH_AUDIO_MSG：音频 19 //ZH_TEXT_AND_IMAGE_MSG ：图文，ZH_TEXT_MSG：文本，ZH_VIDEO_MSG：视频，ZH_AUDIO_MSG：音频
20 dataType: string 20 dataType: string
  21 + //视频封面图
21 transcodeImageUrl: string 22 transcodeImageUrl: string
  23 + //视频地址
22 videoUrl: string 24 videoUrl: string
  25 + //图片宽高
23 pictureResolutions: string[] 26 pictureResolutions: string[]
24 //音视频长度 27 //音视频长度
25 duration: number 28 duration: number
  29 + //音频地址
  30 + audioUrl: string
  31 +
26 } 32 }
@@ -77,5 +77,7 @@ export { LiveCommentComponent } from "./src/main/ets/components/comment/view/Liv @@ -77,5 +77,7 @@ export { LiveCommentComponent } from "./src/main/ets/components/comment/view/Liv
77 77
78 export { WDViewDefaultType } from "./src/main/ets/components/view/EmptyComponent" 78 export { WDViewDefaultType } from "./src/main/ets/components/view/EmptyComponent"
79 79
  80 +export { AudioRowComponent } from "./src/main/ets/components/live/AudioRowComponent"
  81 +
80 export { WDLiveViewDefaultType } from "./src/main/ets/components/view/LiveEmptyComponent" 82 export { WDLiveViewDefaultType } from "./src/main/ets/components/view/LiveEmptyComponent"
81 83
1 -import { Logger } from 'wdKit';  
2 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel'; 1 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
3 import { ContentDetailDTO } from 'wdBean'; 2 import { ContentDetailDTO } from 'wdBean';
4 import media from '@ohos.multimedia.media'; 3 import media from '@ohos.multimedia.media';
@@ -6,9 +5,10 @@ import { OperRowListView } from './view/OperRowListView'; @@ -6,9 +5,10 @@ import { OperRowListView } from './view/OperRowListView';
6 import { WDPlayerController } from 'wdPlayer/Index'; 5 import { WDPlayerController } from 'wdPlayer/Index';
7 6
8 const TAG = 'AudioDetailComponent' 7 const TAG = 'AudioDetailComponent'
9 -interface Arr{  
10 - image:string,  
11 - title:string 8 +
  9 +interface Arr {
  10 + image: string,
  11 + title: string
12 } 12 }
13 13
14 @Component 14 @Component
@@ -18,174 +18,176 @@ export struct AudioDetailComponent { @@ -18,174 +18,176 @@ export struct AudioDetailComponent {
18 private relType: string = '' 18 private relType: string = ''
19 private avPlayer?: media.AVPlayer; 19 private avPlayer?: media.AVPlayer;
20 @State playerController: WDPlayerController = new WDPlayerController(); 20 @State playerController: WDPlayerController = new WDPlayerController();
21 -  
22 - private arr:Arr[]=[  
23 - {image:'clock',title:'定时'},  
24 - {image:'theOriginal',title:'原文'},  
25 - {image:'list',title:'列表'}, 21 + private arr: Arr[] = [
  22 + { image: 'clock', title: '定时' },
  23 + { image: 'theOriginal', title: '原文' },
  24 + { image: 'list', title: '列表' },
26 ] 25 ]
27 -  
28 - @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]//详情  
29 - @State coverImage:string = '' //封面图  
30 - @State newsTitle:string = '' //标题  
31 - @State audioUrl:string = '' //音频路径  
32 - @State duration:number = 0 //时长  
33 - @State outSetValueOne:number = 40 //播放进度  
34 - 26 + @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[] //详情
  27 + @State coverImage: string = '' //封面图
  28 + @State newsTitle: string = '' //标题
  29 + @State audioUrl: string = '' //音频路径
  30 + @State duration: number = 0 //时长
  31 + @State outSetValueOne: number = 40 //播放进度
35 @State isPlay: boolean = false 32 @State isPlay: boolean = false
  33 +
36 async aboutToAppear() { 34 async aboutToAppear() {
37 await this.getContentDetailData() 35 await this.getContentDetailData()
38 this.playerController.firstPlay(this.audioUrl); 36 this.playerController.firstPlay(this.audioUrl);
39 - this.playerController.onCanplay = () => {  
40 - this.playerController.play()  
41 - this.isPlay = true  
42 - }  
43 - this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) =>{  
44 - console.log('现在时间',nowSeconds)  
45 - console.log('总时间',totalSeconds) 37 + this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) => {
  38 + console.log('现在时间', nowSeconds)
  39 + console.log('总时间', totalSeconds)
46 this.outSetValueOne = nowSeconds 40 this.outSetValueOne = nowSeconds
47 this.duration = totalSeconds 41 this.duration = totalSeconds
48 } 42 }
49 } 43 }
  44 +
50 onPageHide() { 45 onPageHide() {
51 this.playerController?.pause(); 46 this.playerController?.pause();
52 } 47 }
  48 +
53 build() { 49 build() {
54 - Row() { 50 + Row() {
  51 + Column() {
  52 + // 封面
  53 + Row() {
  54 + Image(this.coverImage)
  55 + .width(240)
  56 + .height(160)
  57 + .borderRadius('0')
  58 + }
  59 + .justifyContent(FlexAlign.Center)
  60 + .width('100%')
  61 + .margin({ top: 64 })
  62 +
  63 + // 标题
  64 + Row() {
  65 + Text(this.newsTitle)
  66 + .fontSize(20)
  67 + .fontWeight(FontWeight.Bold)
  68 + .fontColor('#ffffff')
  69 + .textAlign(TextAlign.Center)
  70 + .lineHeight(28)
  71 + .fontFamily('PingFang SC, PingFang SC')
  72 + }
  73 + .padding({ left: 34, right: 34 })
  74 + .margin({ top: 32 })
  75 +
  76 + // 操作矩阵
  77 + Row() {
  78 + ForEach(this.arr, (item: Arr) => {
  79 + Column() {
  80 + Image(item.image == 'clock' ? $r('app.media.clock_close') : item.image == 'theOriginal' ? $r('app.media.theOriginal_close') : item.image == 'list' ? $r('app.media.list_close') : '')
  81 + .width(28)
  82 + .height(28)
  83 + Text(item.title)
  84 + .fontColor('#4D5258')
  85 + .fontSize(12)
  86 + .lineHeight(16)
  87 + .margin(2)
  88 + }
  89 + })
  90 +
  91 + }
  92 + .width('100%')
  93 + .padding({ left: 49, right: 49 })
  94 + .justifyContent(FlexAlign.SpaceBetween)
  95 + .margin({ top: 60 })
  96 +
55 Column() { 97 Column() {
56 - // 封面  
57 - Row() {  
58 - Image(this.coverImage)  
59 - .width(240)  
60 - .height(160)  
61 - .borderRadius('0')  
62 - }  
63 - .justifyContent(FlexAlign.Center)  
64 - .width('100%')  
65 - .margin({ top: 64 })  
66 - // 标题  
67 - Row() {  
68 - Text(this.newsTitle)  
69 - .fontSize(20)  
70 - .fontWeight(FontWeight.Bold)  
71 - .fontColor('#ffffff')  
72 - .textAlign(TextAlign.Center)  
73 - .lineHeight(28)  
74 - .fontFamily('PingFang SC, PingFang SC')  
75 - }  
76 - .padding({ left: 34, right: 34 })  
77 - .margin({ top: 32 })  
78 - // 操作矩阵 98 + // 进度条
79 Row() { 99 Row() {
80 - ForEach(this.arr,(item:Arr)=>{  
81 - Column() {  
82 - Image(item.image=='clock'?$r('app.media.clock_close'):item.image=='theOriginal'?$r('app.media.theOriginal_close'):item.image=='list'?$r('app.media.list_close'):'')  
83 - .width(28)  
84 - .height(28)  
85 - Text(item.title)  
86 - .fontColor('#4D5258')  
87 - .fontSize(12)  
88 - .lineHeight(16)  
89 - .margin(2)  
90 - } 100 + Slider({
  101 + value: this.outSetValueOne,
  102 + step: 1
91 }) 103 })
92 - 104 + .showTips(true)
  105 + .trackColor('rgba(0,0,0,0.5)')
  106 + .selectedColor('#ED2800')
  107 + .onChange((value: number, mode: SliderChangeMode) => {
  108 + console.log('滑块长度', value)
  109 + this.playerController?.setSeekTime(value, mode);
  110 + })
93 } 111 }
94 .width('100%') 112 .width('100%')
95 - .padding({ left: 49, right: 49 })  
96 - .justifyContent(FlexAlign.SpaceBetween)  
97 - .margin({ top: 60 })  
98 -  
99 - Column(){  
100 - // 进度条  
101 - Row(){  
102 - Slider({  
103 - value: this.outSetValueOne,  
104 - step: 1  
105 - })  
106 - .showTips(true)  
107 - .trackColor('rgba(0,0,0,0.5)')  
108 - .selectedColor('#ED2800')  
109 - .onChange((value: number, mode: SliderChangeMode) => {  
110 - console.log('滑块长度',value)  
111 - this.playerController?.setSeekTime(value, mode);  
112 - })  
113 - }  
114 - .width('100%')  
115 - .padding({left:24,right:24})  
116 - .margin({top:110})  
117 - // 播放按钮  
118 - Row(){  
119 - Column(){  
120 - Image($r('app.media.loop_close'))  
121 - .width(24)  
122 - .height(24)  
123 - Text('循环')  
124 - .fontColor('#4D5258')  
125 - .fontSize(12)  
126 - .lineHeight(16)  
127 - .margin(2)  
128 - } 113 + .padding({ left: 24, right: 24 })
  114 + .margin({ top: 110 })
129 115
130 - Image($r('app.media.Backward_close')) 116 + // 播放按钮
  117 + Row() {
  118 + Column() {
  119 + Image($r('app.media.loop_close'))
131 .width(24) 120 .width(24)
132 .height(24) 121 .height(24)
133 - Stack({ alignContent: Alignment.Center }){  
134 - Image(this.isPlay?$r('app.media.suspend'):$r('app.media.playicon'))  
135 - .width(32)  
136 - .height(32) 122 + Text('循环')
  123 + .fontColor('#4D5258')
  124 + .fontSize(12)
  125 + .lineHeight(16)
  126 + .margin(2)
  127 + }
  128 +
  129 + Image($r('app.media.Backward_close'))
  130 + .width(24)
  131 + .height(24)
  132 + Stack({ alignContent: Alignment.Center }) {
  133 + Image(this.isPlay ? $r('app.media.suspend') : $r('app.media.playicon'))
  134 + .width(32)
  135 + .height(32)
  136 + }
  137 + .padding(28)
  138 + .backgroundColor('#4D5258')
  139 + .borderRadius(50)
  140 + .onClick(() => {
  141 + if (this.isPlay) {
  142 + this.playerController.pause()
  143 + } else {
  144 + this.playerController.play()
137 } 145 }
138 - .padding(28)  
139 - .backgroundColor('#4D5258')  
140 - .borderRadius(50)  
141 - .onClick(()=>{  
142 - if(this.isPlay){  
143 - this.playerController.pause()  
144 - }else{  
145 - this.playerController.play()  
146 - }  
147 - this.isPlay = !this.isPlay  
148 - })  
149 - Image($r('app.media.fastForward_close')) 146 + this.isPlay = !this.isPlay
  147 + })
  148 +
  149 + Image($r('app.media.fastForward_close'))
  150 + .width(24)
  151 + .height(24)
  152 + Column() {
  153 + Image($r('app.media.doubleSpeed_close'))
150 .width(24) 154 .width(24)
151 .height(24) 155 .height(24)
152 - Column(){  
153 - Image($r('app.media.doubleSpeed_close'))  
154 - .width(24)  
155 - .height(24)  
156 - Text('倍速')  
157 - .fontColor('#4D5258')  
158 - .fontSize(12)  
159 - .lineHeight(16)  
160 - .margin(2)  
161 - } 156 + Text('倍速')
  157 + .fontColor('#4D5258')
  158 + .fontSize(12)
  159 + .lineHeight(16)
  160 + .margin(2)
162 } 161 }
163 - .width('100%')  
164 - .justifyContent(FlexAlign.SpaceBetween)  
165 - .margin({top:56})  
166 - .padding({left:32,right:32})  
167 } 162 }
168 - .layoutWeight(1)  
169 - OperRowListView() 163 + .width('100%')
  164 + .justifyContent(FlexAlign.SpaceBetween)
  165 + .margin({ top: 56 })
  166 + .padding({ left: 32, right: 32 })
170 } 167 }
  168 + .layoutWeight(1)
  169 +
  170 + OperRowListView()
171 } 171 }
  172 + }
172 173
173 } 174 }
  175 +
174 private async getContentDetailData() { 176 private async getContentDetailData() {
175 try { 177 try {
176 let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType) 178 let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
177 this.contentDetailData = data; 179 this.contentDetailData = data;
178 - console.log('音乐详情',JSON.stringify(this.contentDetailData)) 180 + console.log('音乐详情', JSON.stringify(this.contentDetailData))
179 this.newsTitle = this.contentDetailData[0].newsTitle 181 this.newsTitle = this.contentDetailData[0].newsTitle
180 - console.log('标题',JSON.stringify(this.newsTitle)) 182 + console.log('标题', JSON.stringify(this.newsTitle))
181 this.coverImage = this.contentDetailData[0].fullColumnImgUrls[0].url 183 this.coverImage = this.contentDetailData[0].fullColumnImgUrls[0].url
182 - console.log('封面图',JSON.stringify(this.coverImage)) 184 + console.log('封面图', JSON.stringify(this.coverImage))
183 this.duration = this.contentDetailData[0].audioList[0].duration 185 this.duration = this.contentDetailData[0].audioList[0].duration
184 - console.log('音频时长',JSON.stringify(this.duration)) 186 + console.log('音频时长', JSON.stringify(this.duration))
185 this.audioUrl = this.contentDetailData[0].audioList[0].audioUrl 187 this.audioUrl = this.contentDetailData[0].audioList[0].audioUrl
186 - console.log('音频时长',JSON.stringify(this.audioUrl)) 188 + console.log('音频时长', JSON.stringify(this.audioUrl))
187 } catch (exception) { 189 } catch (exception) {
188 - console.log('请求失败',JSON.stringify(exception)) 190 + console.log('请求失败', JSON.stringify(exception))
189 } 191 }
190 } 192 }
191 } 193 }
  1 +import { DateTimeUtils, Logger } from 'wdKit/Index';
  2 +import { WDPlayerController } from 'wdPlayer/Index';
  3 +
  4 +let TAG: string = 'AudioRowComponent'
  5 +
  6 +@Component
  7 +export struct AudioRowComponent {
  8 + @State playerController: WDPlayerController = new WDPlayerController();
  9 + @State audioUrl: string = '' //音频路径
  10 + @State duration: number = 0 //时长
  11 + @State outSetValueOne: number = 0 //播放进度
  12 + @State isPlaying: boolean = false
  13 +
  14 + aboutToAppear(): void {
  15 + this.playerController.firstPlay(this.audioUrl)
  16 + // this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) => {
  17 + // console.log('现在时间', nowSeconds)
  18 + // console.log('总时间', totalSeconds)
  19 + // this.outSetValueOne = nowSeconds
  20 + // this.duration = totalSeconds
  21 + // }
  22 + }
  23 +
  24 + build() {
  25 + Row() {
  26 + Image($r('app.media.icon_voice'))
  27 + .width(20)
  28 + .aspectRatio(1)
  29 + .margin({
  30 + left: 8,
  31 + right: 6
  32 + })
  33 + .visibility(this.isPlaying ? Visibility.Visible : Visibility.Hidden)
  34 + Text(`${DateTimeUtils.getFormattedDuration(this.duration)}`)
  35 + .fontColor('#666666')
  36 + .fontWeight(400)
  37 + .fontSize('14fp')
  38 + }
  39 + .backgroundColor(Color.White)
  40 + .height(36)
  41 + .borderRadius(4)
  42 + .margin({ top: 8, right: 16 })
  43 + .width('100%')
  44 + .onClick(() => {
  45 + this.isPlaying = !this.isPlaying
  46 + this.playerController?.switchPlayOrPause()
  47 + })
  48 + .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
  49 + Logger.debug(TAG, `当前屏幕可见区域大小： currentRatio:' +${currentRatio}`)
  50 + // if (isVisible && currentRatio >= 1.0) {
  51 + // Logger.debug(TAG, `播放器-播放. currentRatio:' +${currentRatio}`)
  52 + // this.playerController?.play()
  53 + // }
  54 +
  55 + if (!isVisible && currentRatio <= 0.0) {
  56 + Logger.debug(TAG, `播放器-暂停. currentRatio:' +${currentRatio}`)
  57 + this.playerController?.pause()
  58 + }
  59 + })
  60 + }
  61 +
  62 + aboutToDisappear(): void {
  63 + this.playerController?.release()
  64 + }
  65 +}
@@ -2,15 +2,15 @@ import { Action, LiveDetailsBean } from 'wdBean/Index'; @@ -2,15 +2,15 @@ import { Action, LiveDetailsBean } from 'wdBean/Index';
2 import { LiveViewModel } from '../viewModel/LiveViewModel'; 2 import { LiveViewModel } from '../viewModel/LiveViewModel';
3 import router from '@ohos.router'; 3 import router from '@ohos.router';
4 4
5 -import { DetailPlayLivePage } from './DetailPlayLivePage'  
6 -import { DetailPlayVLivePage } from './DetailPlayVLivePage' 5 +import { DetailPlayLivePage } from './DetailPlayLivePage';
  6 +import { DetailPlayVLivePage } from './DetailPlayVLivePage';
  7 +import { Logger } from 'wdKit/Index';
7 8
8 const TAG = 'DetailPlayLiveCommon' 9 const TAG = 'DetailPlayLiveCommon'
9 10
10 -@Entry() 11 +@Entry
11 @Component 12 @Component
12 export struct DetailPlayLiveCommon { 13 export struct DetailPlayLiveCommon {
13 - TAG: string = 'DetailPlayLiveCommon';  
14 private liveViewModel: LiveViewModel = new LiveViewModel() 14 private liveViewModel: LiveViewModel = new LiveViewModel()
15 @State liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean 15 @State liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
16 @State liveState: string = '' 16 @State liveState: string = ''
@@ -18,8 +18,12 @@ export struct DetailPlayLiveCommon { @@ -18,8 +18,12 @@ export struct DetailPlayLiveCommon {
18 @State relId: string = '' 18 @State relId: string = ''
19 @State contentId: string = '' 19 @State contentId: string = ''
20 @State relType: string = '' 20 @State relType: string = ''
  21 + @Provide pageShow: number = -1
  22 + @Provide pageHide: number = -1
  23 + @Provide pageBackPress: number = -1
21 24
22 aboutToAppear(): void { 25 aboutToAppear(): void {
  26 + Logger.debug(TAG, 'aboutToAppear')
23 //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340 27 //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
24 const par: Action = router.getParams() as Action; 28 const par: Action = router.getParams() as Action;
25 const params = par?.params; 29 const params = par?.params;
@@ -56,5 +60,21 @@ export struct DetailPlayLiveCommon { @@ -56,5 +60,21 @@ export struct DetailPlayLiveCommon {
56 60
57 }) 61 })
58 } 62 }
  63 +
  64 + onPageShow() {
  65 + this.pageShow = 0
  66 + Logger.debug(TAG, 'onPageShow')
  67 + }
  68 +
  69 + onPageHide() {
  70 + this.pageHide = 0
  71 + Logger.debug(TAG, 'onPageHide')
  72 + }
  73 +
  74 + onBackPress(): boolean | void {
  75 + this.pageBackPress = 0
  76 + Logger.debug(TAG, 'onBackPress')
  77 + return true
  78 + }
59 } 79 }
60 80
1 -import { Action, LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'; 1 +import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index';
2 import { LiveViewModel } from '../viewModel/LiveViewModel'; 2 import { LiveViewModel } from '../viewModel/LiveViewModel';
3 import { TabComponent } from '../widgets/details/TabComponent'; 3 import { TabComponent } from '../widgets/details/TabComponent';
4 import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet'; 4 import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
5 -import router from '@ohos.router';  
6 import { DisplayDirection } from 'wdConstant/Index'; 5 import { DisplayDirection } from 'wdConstant/Index';
7 import mediaquery from '@ohos.mediaquery'; 6 import mediaquery from '@ohos.mediaquery';
8 import { Logger, WindowModel } from 'wdKit/Index'; 7 import { Logger, WindowModel } from 'wdKit/Index';
9 -import { window } from '@kit.ArkUI'; 8 +import { router, window } from '@kit.ArkUI';
10 import { devicePLSensorManager } from 'wdDetailPlayApi/Index'; 9 import { devicePLSensorManager } from 'wdDetailPlayApi/Index';
11 import { LiveCommentComponent } from 'wdComponent/Index'; 10 import { LiveCommentComponent } from 'wdComponent/Index';
12 import { WDPlayerController } from 'wdPlayer/Index'; 11 import { WDPlayerController } from 'wdPlayer/Index';
13 12
14 -@Entry 13 +let TAG: string = 'DetailPlayLivePage';
  14 +
15 @Component 15 @Component
16 export struct DetailPlayLivePage { 16 export struct DetailPlayLivePage {
17 //横竖屏,默认竖屏 17 //横竖屏,默认竖屏
18 @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL 18 @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
19 playerController: WDPlayerController = new WDPlayerController(); 19 playerController: WDPlayerController = new WDPlayerController();
20 - TAG: string = 'DetailPlayLivePage';  
21 liveViewModel: LiveViewModel = new LiveViewModel() 20 liveViewModel: LiveViewModel = new LiveViewModel()
22 @State relId: string = '' 21 @State relId: string = ''
23 @State contentId: string = '' 22 @State contentId: string = ''
@@ -27,11 +26,14 @@ export struct DetailPlayLivePage { @@ -27,11 +26,14 @@ export struct DetailPlayLivePage {
27 @State tabs: string[] = [] 26 @State tabs: string[] = []
28 //监听屏幕横竖屏变化 27 //监听屏幕横竖屏变化
29 listener = mediaquery.matchMediaSync('(orientation: landscape)'); 28 listener = mediaquery.matchMediaSync('(orientation: landscape)');
  29 + @Consume @Watch('onPageShowCus') pageShow: number
  30 + @Consume @Watch('onPageHideCus') pageHide: number
  31 + @Consume @Watch('onBackPressCus') pageBackPress: number
30 32
31 aboutToAppear(): void { 33 aboutToAppear(): void {
32 - Logger.info(this.TAG, `wyj-aboutToAppear`) 34 + Logger.info(TAG, `wyj-aboutToAppear`)
33 this.listener?.on("change", (mediaQueryResult) => { 35 this.listener?.on("change", (mediaQueryResult) => {
34 - Logger.info(this.TAG, `change;${mediaQueryResult.matches}`) 36 + Logger.info(TAG, `change;${mediaQueryResult.matches}`)
35 if (mediaQueryResult?.matches) { 37 if (mediaQueryResult?.matches) {
36 this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL 38 this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL
37 } else { 39 } else {
@@ -39,11 +41,6 @@ export struct DetailPlayLivePage { @@ -39,11 +41,6 @@ export struct DetailPlayLivePage {
39 } 41 }
40 WindowModel.shared.setMainWindowFullScreen(this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL) 42 WindowModel.shared.setMainWindowFullScreen(this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL)
41 }) 43 })
42 - let par: Action = router.getParams() as Action;  
43 - let params = par?.params;  
44 - this.relId = params?.extra?.relId || '';  
45 - this.relType = params?.extra?.relType || '';  
46 - this.contentId = params?.contentID || '';  
47 this.getLiveDetails() 44 this.getLiveDetails()
48 this.getLiveRoomData() 45 this.getLiveRoomData()
49 } 46 }
@@ -62,18 +59,39 @@ export struct DetailPlayLivePage { @@ -62,18 +59,39 @@ export struct DetailPlayLivePage {
62 .width('100%') 59 .width('100%')
63 } 60 }
64 61
65 - onPageShow(): void {  
66 - Logger.info(this.TAG, `wyj-onPageShow`) 62 + aboutToDisappear(): void {
  63 + Logger.info(TAG, `wyj-aboutToDisappear`)
  64 + this.playerController?.stop()
  65 + this.playerController?.release()
  66 + }
  67 +
  68 + onPageShowCus(): void {
  69 + Logger.info(TAG, `wyj-onPageShowCus`)
67 // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); 70 // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
68 } 71 }
69 72
70 - onPageHide(): void {  
71 - Logger.info(this.TAG, `wyj-onPageHide`) 73 + onPageHideCus(): void {
  74 + Logger.info(TAG, `wyj-onPageHideCus`)
72 devicePLSensorManager.devicePLSensorOff(); 75 devicePLSensorManager.devicePLSensorOff();
73 // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED); 76 // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
74 this.playerController?.pause() 77 this.playerController?.pause()
75 } 78 }
76 79
  80 + onBackPressCus(): boolean | void {
  81 + if (this.displayDirection == DisplayDirection.VERTICAL) {
  82 + router.back()
  83 + } else {
  84 + this.displayDirection = DisplayDirection.VERTICAL
  85 + }
  86 + WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
  87 + window.Orientation.PORTRAIT :
  88 + window.Orientation.LANDSCAPE)
  89 + devicePLSensorManager.devicePLSensorOn(this.displayDirection == DisplayDirection.VERTICAL ?
  90 + window.Orientation.PORTRAIT :
  91 + window.Orientation.LANDSCAPE);
  92 + return true
  93 + }
  94 +
77 getLiveDetails() { 95 getLiveDetails() {
78 this.liveViewModel.getLiveDetails(this.contentId, this.relId, this.relType) 96 this.liveViewModel.getLiveDetails(this.contentId, this.relId, this.relType)
79 .then( 97 .then(
@@ -102,23 +120,4 @@ export struct DetailPlayLivePage { @@ -102,23 +120,4 @@ export struct DetailPlayLivePage {
102 120
103 }) 121 })
104 } 122 }
105 -  
106 - aboutToDisappear(): void {  
107 - Logger.info(this.TAG, `wyj-aboutToDisappear`)  
108 - }  
109 -  
110 - onBackPress(): boolean | void {  
111 - if (this.displayDirection == DisplayDirection.VERTICAL) {  
112 - router.back()  
113 - } else {  
114 - this.displayDirection = DisplayDirection.VERTICAL  
115 - }  
116 - WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?  
117 - window.Orientation.PORTRAIT :  
118 - window.Orientation.LANDSCAPE)  
119 - devicePLSensorManager.devicePLSensorOn(this.displayDirection == DisplayDirection.VERTICAL ?  
120 - window.Orientation.PORTRAIT :  
121 - window.Orientation.LANDSCAPE);  
122 - return true  
123 - }  
124 } 123 }
1 import { LiveRoomItemBean } from 'wdBean/Index' 1 import { LiveRoomItemBean } from 'wdBean/Index'
  2 +import { StringUtils } from 'wdKit/Index'
2 3
3 @Component 4 @Component
4 export struct TabChatItemComponent { 5 export struct TabChatItemComponent {
@@ -9,7 +10,7 @@ export struct TabChatItemComponent { @@ -9,7 +10,7 @@ export struct TabChatItemComponent {
9 10
10 build() { 11 build() {
11 Row() { 12 Row() {
12 - Image(this.item.senderUserAvatarUrl) 13 + Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
13 .borderRadius(90) 14 .borderRadius(90)
14 .width(24) 15 .width(24)
15 .height(24) 16 .height(24)
1 import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index' 1 import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index'
2 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO' 2 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
  3 +import { AudioRowComponent } from 'wdComponent/Index'
3 import { DateTimeUtils, StringUtils } from 'wdKit/Index' 4 import { DateTimeUtils, StringUtils } from 'wdKit/Index'
4 import { WDRouterRule } from 'wdRouter/Index' 5 import { WDRouterRule } from 'wdRouter/Index'
5 6
@@ -111,24 +112,10 @@ export struct TabLiveItemComponent { @@ -111,24 +112,10 @@ export struct TabLiveItemComponent {
111 } 112 }
112 //音频 113 //音频
113 else if (this.item.dataType === 'ZH_AUDIO_MSG') { 114 else if (this.item.dataType === 'ZH_AUDIO_MSG') {
114 - Row() {  
115 - Image($r('app.media.icon_voice'))  
116 - .width(20)  
117 - .aspectRatio(1)  
118 - .margin({  
119 - left: 8,  
120 - right: 6  
121 - })  
122 - Text(DateTimeUtils.getFormattedDuration(this.item.duration))  
123 - .fontColor('#666666')  
124 - .fontWeight(400)  
125 - .fontSize('14fp')  
126 - }  
127 - .backgroundColor(Color.White)  
128 - .height(36)  
129 - .borderRadius(4)  
130 - .margin({ top: 8, right: 16 })  
131 - .width('100%') 115 + AudioRowComponent({
  116 + audioUrl: this.item.audioUrl,
  117 + duration: this.item.duration
  118 + })
132 } 119 }
133 //视频 120 //视频
134 else if (this.item.dataType === 'ZH_VIDEO_MSG') { 121 else if (this.item.dataType === 'ZH_VIDEO_MSG') {
1 import { LiveDetailsBean } from 'wdBean/Index'; 1 import { LiveDetailsBean } from 'wdBean/Index';
2 -import { Logger } from 'wdKit/Index';  
3 import { WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index'; 2 import { WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
4 import { PlayUIComponent } from './PlayUIComponent'; 3 import { PlayUIComponent } from './PlayUIComponent';
5 4
@@ -7,13 +6,15 @@ import { PlayUIComponent } from './PlayUIComponent'; @@ -7,13 +6,15 @@ import { PlayUIComponent } from './PlayUIComponent';
7 export struct TopPlayComponent { 6 export struct TopPlayComponent {
8 TAG: string = 'TopPlayComponent' 7 TAG: string = 'TopPlayComponent'
9 @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean 8 @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
10 - playerController: WDPlayerController = new WDPlayerController(); 9 + playerController?: WDPlayerController
11 @State imgUrl: string = '' 10 @State imgUrl: string = ''
12 @State isWait: boolean = false 11 @State isWait: boolean = false
13 12
14 aboutToAppear(): void { 13 aboutToAppear(): void {
15 - this.playerController.onCanplay = () => {  
16 - this.playerController.play() 14 + if (this.playerController) {
  15 + this.playerController.onCanplay = () => {
  16 + this.playerController?.play()
  17 + }
17 } 18 }
18 } 19 }
19 20
@@ -30,7 +31,7 @@ export struct TopPlayComponent { @@ -30,7 +31,7 @@ export struct TopPlayComponent {
30 } else if (this.liveDetailsBean.liveInfo.liveState == 'end') { 31 } else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
31 playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri 32 playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
32 } 33 }
33 - this.playerController.firstPlay(playUrl); 34 + this.playerController?.firstPlay(playUrl);
34 } 35 }
35 } 36 }
36 37
@@ -44,18 +45,6 @@ export struct TopPlayComponent { @@ -44,18 +45,6 @@ export struct TopPlayComponent {
44 .height('100%') 45 .height('100%')
45 .width('100%') 46 .width('100%')
46 .visibility(this.isWait ? Visibility.None : Visibility.Visible) 47 .visibility(this.isWait ? Visibility.None : Visibility.Visible)
47 - .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {  
48 - Logger.debug(this.TAG, `当前屏幕可见区域大小： currentRatio:' +${currentRatio}`)  
49 - if (isVisible && currentRatio >= 1.0) {  
50 - Logger.debug(this.TAG, `播放器-暂停. currentRatio:' +${currentRatio}`)  
51 - this.playerController.play()  
52 - }  
53 -  
54 - if (!isVisible && currentRatio <= 0.0) {  
55 - Logger.debug(this.TAG, `播放器-播放. currentRatio:' +${currentRatio}`)  
56 - this.playerController.pause()  
57 - }  
58 - })  
59 Image(this.imgUrl) 48 Image(this.imgUrl)
60 .objectFit(ImageFit.Contain) 49 .objectFit(ImageFit.Contain)
61 .visibility(this.isWait ? Visibility.Visible : Visibility.None) 50 .visibility(this.isWait ? Visibility.Visible : Visibility.None)
@@ -65,8 +54,5 @@ export struct TopPlayComponent { @@ -65,8 +54,5 @@ export struct TopPlayComponent {
65 } 54 }
66 55
67 aboutToDisappear(): void { 56 aboutToDisappear(): void {
68 - this.playerController.pause()  
69 - this.playerController.stop()  
70 - this.playerController.release()  
71 } 57 }
72 } 58 }
1 { 1 {
2 "src": [ 2 "src": [
3 - "pages/DetailPlayLivePage",  
4 "pages/DetailPlayVLivePage", 3 "pages/DetailPlayVLivePage",
5 "pages/DetailPlayLiveCommon" 4 "pages/DetailPlayLiveCommon"
6 ] 5 ]