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

@@ -52,7 +52,7 @@ export class WDRouterPage {
   // 点播详情页
   static detailPlayVodPage = new WDRouterPage("wdDetailPlayVod", "ets/pages/DetailPlayVodPage");
   // 直播详情页
-  static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
+  // static detailPlayLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLivePage");
   static detailPlayVLivePage = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayVLivePage");
   static detailPlayLiveCommon = new WDRouterPage("wdDetailPlayLive", "ets/pages/DetailPlayLiveCommon");
   // 多图(图集)详情页

@@ -18,9 +18,15 @@ export interface LiveRoomItemBean {
   role: string
   //ZH_TEXT_AND_IMAGE_MSG ：图文，ZH_TEXT_MSG：文本，ZH_VIDEO_MSG：视频，ZH_AUDIO_MSG：音频
   dataType: string
+  //视频封面图
   transcodeImageUrl: string
+  //视频地址
   videoUrl: string
+  //图片宽高
   pictureResolutions: string[]
   //音视频长度
   duration: number
+  //音频地址
+  audioUrl: string
+
 }
\ No newline at end of file

@@ -77,5 +77,7 @@ export { LiveCommentComponent } from "./src/main/ets/components/comment/view/Liv
 
 export { WDViewDefaultType } from "./src/main/ets/components/view/EmptyComponent"
 
+export { AudioRowComponent } from "./src/main/ets/components/live/AudioRowComponent"
+
 export { WDLiveViewDefaultType } from "./src/main/ets/components/view/LiveEmptyComponent"
 

-import { Logger } from 'wdKit';
 import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
 import { ContentDetailDTO } from 'wdBean';
 import media from '@ohos.multimedia.media';
@@ -6,9 +5,10 @@ import { OperRowListView } from './view/OperRowListView';
 import { WDPlayerController } from 'wdPlayer/Index';
 
 const TAG = 'AudioDetailComponent'
-interface Arr{
-  image:string,
-  title:string
+
+interface Arr {
+  image: string,
+  title: string
 }
 
 @Component
@@ -18,38 +18,34 @@ export struct AudioDetailComponent {
   private relType: string = ''
   private avPlayer?: media.AVPlayer;
   @State playerController: WDPlayerController = new WDPlayerController();
-
-  private arr:Arr[]=[
-    {image:'clock',title:'定时'},
-    {image:'theOriginal',title:'原文'},
-    {image:'list',title:'列表'},
+  private arr: Arr[] = [
+    { image: 'clock', title: '定时' },
+    { image: 'theOriginal', title: '原文' },
+    { image: 'list', title: '列表' },
   ]
-
-  @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[]//详情
-  @State coverImage:string = '' //封面图
-  @State newsTitle:string = ''  //标题
-  @State audioUrl:string = ''   //音频路径
-  @State duration:number = 0    //时长
-  @State outSetValueOne:number = 40 //播放进度
-
+  @State contentDetailData: ContentDetailDTO[] = [] as ContentDetailDTO[] //详情
+  @State coverImage: string = '' //封面图
+  @State newsTitle: string = '' //标题
+  @State audioUrl: string = '' //音频路径
+  @State duration: number = 0 //时长
+  @State outSetValueOne: number = 40 //播放进度
   @State isPlay: boolean = false
+
   async aboutToAppear() {
     await this.getContentDetailData()
     this.playerController.firstPlay(this.audioUrl);
-    this.playerController.onCanplay = () => {
-        this.playerController.play()
-        this.isPlay = true
-    }
-    this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) =>{
-      console.log('现在时间',nowSeconds)
-      console.log('总时间',totalSeconds)
+    this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) => {
+      console.log('现在时间', nowSeconds)
+      console.log('总时间', totalSeconds)
       this.outSetValueOne = nowSeconds
       this.duration = totalSeconds
     }
   }
+
   onPageHide() {
     this.playerController?.pause();
   }
+
   build() {
     Row() {
       Column() {
@@ -63,6 +59,7 @@ export struct AudioDetailComponent {
         .justifyContent(FlexAlign.Center)
         .width('100%')
         .margin({ top: 64 })
+
         // 标题
         Row() {
           Text(this.newsTitle)
@@ -75,11 +72,12 @@ export struct AudioDetailComponent {
         }
         .padding({ left: 34, right: 34 })
         .margin({ top: 32 })
+
         // 操作矩阵
         Row() {
-            ForEach(this.arr,(item:Arr)=>{
+          ForEach(this.arr, (item: Arr) => {
             Column() {
-                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'):'')
+              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') : '')
                 .width(28)
                 .height(28)
               Text(item.title)
@@ -96,9 +94,9 @@ export struct AudioDetailComponent {
         .justifyContent(FlexAlign.SpaceBetween)
         .margin({ top: 60 })
 
-          Column(){
+        Column() {
           // 进度条
-            Row(){
+          Row() {
             Slider({
               value: this.outSetValueOne,
               step: 1
@@ -107,16 +105,17 @@ export struct AudioDetailComponent {
               .trackColor('rgba(0,0,0,0.5)')
               .selectedColor('#ED2800')
               .onChange((value: number, mode: SliderChangeMode) => {
-                  console.log('滑块长度',value)
+                console.log('滑块长度', value)
                 this.playerController?.setSeekTime(value, mode);
               })
           }
           .width('100%')
-            .padding({left:24,right:24})
-            .margin({top:110})
+          .padding({ left: 24, right: 24 })
+          .margin({ top: 110 })
+
           // 播放按钮
-            Row(){
-              Column(){
+          Row() {
+            Column() {
               Image($r('app.media.loop_close'))
                 .width(24)
                 .height(24)
@@ -130,26 +129,27 @@ export struct AudioDetailComponent {
             Image($r('app.media.Backward_close'))
               .width(24)
               .height(24)
-              Stack({ alignContent: Alignment.Center }){
-                Image(this.isPlay?$r('app.media.suspend'):$r('app.media.playicon'))
+            Stack({ alignContent: Alignment.Center }) {
+              Image(this.isPlay ? $r('app.media.suspend') : $r('app.media.playicon'))
                 .width(32)
                 .height(32)
             }
             .padding(28)
             .backgroundColor('#4D5258')
             .borderRadius(50)
-              .onClick(()=>{
-                if(this.isPlay){
+            .onClick(() => {
+              if (this.isPlay) {
                 this.playerController.pause()
-                }else{
+              } else {
                 this.playerController.play()
               }
               this.isPlay = !this.isPlay
             })
+
             Image($r('app.media.fastForward_close'))
               .width(24)
               .height(24)
-              Column(){
+            Column() {
               Image($r('app.media.doubleSpeed_close'))
                 .width(24)
                 .height(24)
@@ -162,30 +162,32 @@ export struct AudioDetailComponent {
           }
           .width('100%')
           .justifyContent(FlexAlign.SpaceBetween)
-            .margin({top:56})
-            .padding({left:32,right:32})
+          .margin({ top: 56 })
+          .padding({ left: 32, right: 32 })
         }
         .layoutWeight(1)
+
         OperRowListView()
       }
     }
 
   }
+
   private async getContentDetailData() {
     try {
       let data = await MultiPictureDetailViewModel.getDetailData(this.relId, this.contentId, this.relType)
       this.contentDetailData = data;
-      console.log('音乐详情',JSON.stringify(this.contentDetailData))
+      console.log('音乐详情', JSON.stringify(this.contentDetailData))
       this.newsTitle = this.contentDetailData[0].newsTitle
-      console.log('标题',JSON.stringify(this.newsTitle))
+      console.log('标题', JSON.stringify(this.newsTitle))
       this.coverImage = this.contentDetailData[0].fullColumnImgUrls[0].url
-      console.log('封面图',JSON.stringify(this.coverImage))
+      console.log('封面图', JSON.stringify(this.coverImage))
       this.duration = this.contentDetailData[0].audioList[0].duration
-      console.log('音频时长',JSON.stringify(this.duration))
+      console.log('音频时长', JSON.stringify(this.duration))
       this.audioUrl = this.contentDetailData[0].audioList[0].audioUrl
-      console.log('音频时长',JSON.stringify(this.audioUrl))
+      console.log('音频时长', JSON.stringify(this.audioUrl))
     } catch (exception) {
-    console.log('请求失败',JSON.stringify(exception))
+      console.log('请求失败', JSON.stringify(exception))
     }
   }
 }
\ No newline at end of file

+import { DateTimeUtils, Logger } from 'wdKit/Index';
+import { WDPlayerController } from 'wdPlayer/Index';
+
+let TAG: string = 'AudioRowComponent'
+
+@Component
+export struct AudioRowComponent {
+  @State playerController: WDPlayerController = new WDPlayerController();
+  @State audioUrl: string = '' //音频路径
+  @State duration: number = 0 //时长
+  @State outSetValueOne: number = 0 //播放进度
+  @State isPlaying: boolean = false
+
+  aboutToAppear(): void {
+    this.playerController.firstPlay(this.audioUrl)
+    // this.playerController.onTimeUpdate = (nowSeconds, totalSeconds) => {
+    //   console.log('现在时间', nowSeconds)
+    //   console.log('总时间', totalSeconds)
+    //   this.outSetValueOne = nowSeconds
+    //   this.duration = totalSeconds
+    // }
+  }
+
+  build() {
+    Row() {
+      Image($r('app.media.icon_voice'))
+        .width(20)
+        .aspectRatio(1)
+        .margin({
+          left: 8,
+          right: 6
+        })
+        .visibility(this.isPlaying ? Visibility.Visible : Visibility.Hidden)
+      Text(`${DateTimeUtils.getFormattedDuration(this.duration)}`)
+        .fontColor('#666666')
+        .fontWeight(400)
+        .fontSize('14fp')
+    }
+    .backgroundColor(Color.White)
+    .height(36)
+    .borderRadius(4)
+    .margin({ top: 8, right: 16 })
+    .width('100%')
+    .onClick(() => {
+      this.isPlaying = !this.isPlaying
+      this.playerController?.switchPlayOrPause()
+    })
+    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
+      Logger.debug(TAG, `当前屏幕可见区域大小： currentRatio:' +${currentRatio}`)
+      // if (isVisible && currentRatio >= 1.0) {
+      //   Logger.debug(TAG, `播放器-播放. currentRatio:' +${currentRatio}`)
+      //   this.playerController?.play()
+      // }
+
+      if (!isVisible && currentRatio <= 0.0) {
+        Logger.debug(TAG, `播放器-暂停. currentRatio:' +${currentRatio}`)
+        this.playerController?.pause()
+      }
+    })
+  }
+
+  aboutToDisappear(): void {
+    this.playerController?.release()
+  }
+}
\ No newline at end of file

@@ -2,15 +2,15 @@ import { Action, LiveDetailsBean } from 'wdBean/Index';
 import { LiveViewModel } from '../viewModel/LiveViewModel';
 import router from '@ohos.router';
 
-import { DetailPlayLivePage } from './DetailPlayLivePage'
-import { DetailPlayVLivePage } from './DetailPlayVLivePage'
+import { DetailPlayLivePage } from './DetailPlayLivePage';
+import { DetailPlayVLivePage } from './DetailPlayVLivePage';
+import { Logger } from 'wdKit/Index';
 
 const TAG = 'DetailPlayLiveCommon'
 
-@Entry()
+@Entry
 @Component
 export struct DetailPlayLiveCommon {
-  TAG: string = 'DetailPlayLiveCommon';
   private liveViewModel: LiveViewModel = new LiveViewModel()
   @State liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
   @State liveState: string = ''
@@ -18,8 +18,12 @@ export struct DetailPlayLiveCommon {
   @State relId: string = ''
   @State contentId: string = ''
   @State relType: string = ''
+  @Provide pageShow: number = -1
+  @Provide pageHide: number = -1
+  @Provide pageBackPress: number = -1
 
   aboutToAppear(): void {
+    Logger.debug(TAG, 'aboutToAppear')
     //https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
     const par: Action = router.getParams() as Action;
     const params = par?.params;
@@ -56,5 +60,21 @@ export struct DetailPlayLiveCommon {
 
         })
   }
+
+  onPageShow() {
+    this.pageShow = 0
+    Logger.debug(TAG, 'onPageShow')
+  }
+
+  onPageHide() {
+    this.pageHide = 0
+    Logger.debug(TAG, 'onPageHide')
+  }
+
+  onBackPress(): boolean | void {
+    this.pageBackPress = 0
+    Logger.debug(TAG, 'onBackPress')
+    return true
+  }
 }
 

-import { Action, LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index';
+import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index';
 import { LiveViewModel } from '../viewModel/LiveViewModel';
 import { TabComponent } from '../widgets/details/TabComponent';
 import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
-import router from '@ohos.router';
 import { DisplayDirection } from 'wdConstant/Index';
 import mediaquery from '@ohos.mediaquery';
 import { Logger, WindowModel } from 'wdKit/Index';
-import { window } from '@kit.ArkUI';
+import { router, window } from '@kit.ArkUI';
 import { devicePLSensorManager } from 'wdDetailPlayApi/Index';
 import { LiveCommentComponent } from 'wdComponent/Index';
 import { WDPlayerController } from 'wdPlayer/Index';
 
-@Entry
+let TAG: string = 'DetailPlayLivePage';
+
 @Component
 export struct DetailPlayLivePage {
   //横竖屏,默认竖屏
   @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL
   playerController: WDPlayerController = new WDPlayerController();
-  TAG: string = 'DetailPlayLivePage';
   liveViewModel: LiveViewModel = new LiveViewModel()
   @State relId: string = ''
   @State contentId: string = ''
@@ -27,11 +26,14 @@ export struct DetailPlayLivePage {
   @State tabs: string[] = []
   //监听屏幕横竖屏变化
   listener = mediaquery.matchMediaSync('(orientation: landscape)');
+  @Consume @Watch('onPageShowCus') pageShow: number
+  @Consume @Watch('onPageHideCus') pageHide: number
+  @Consume @Watch('onBackPressCus') pageBackPress: number
 
   aboutToAppear(): void {
-    Logger.info(this.TAG, `wyj-aboutToAppear`)
+    Logger.info(TAG, `wyj-aboutToAppear`)
     this.listener?.on("change", (mediaQueryResult) => {
-      Logger.info(this.TAG, `change;${mediaQueryResult.matches}`)
+      Logger.info(TAG, `change;${mediaQueryResult.matches}`)
       if (mediaQueryResult?.matches) {
         this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL
       } else {
@@ -39,11 +41,6 @@ export struct DetailPlayLivePage {
       }
       WindowModel.shared.setMainWindowFullScreen(this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL)
     })
-    let par: Action = router.getParams() as Action;
-    let params = par?.params;
-    this.relId = params?.extra?.relId || '';
-    this.relType = params?.extra?.relType || '';
-    this.contentId = params?.contentID || '';
     this.getLiveDetails()
     this.getLiveRoomData()
   }
@@ -62,18 +59,39 @@ export struct DetailPlayLivePage {
     .width('100%')
   }
 
-  onPageShow(): void {
-    Logger.info(this.TAG, `wyj-onPageShow`)
+  aboutToDisappear(): void {
+    Logger.info(TAG, `wyj-aboutToDisappear`)
+    this.playerController?.stop()
+    this.playerController?.release()
+  }
+
+  onPageShowCus(): void {
+    Logger.info(TAG, `wyj-onPageShowCus`)
     // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
   }
 
-  onPageHide(): void {
-    Logger.info(this.TAG, `wyj-onPageHide`)
+  onPageHideCus(): void {
+    Logger.info(TAG, `wyj-onPageHideCus`)
     devicePLSensorManager.devicePLSensorOff();
     // WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
     this.playerController?.pause()
   }
 
+  onBackPressCus(): boolean | void {
+    if (this.displayDirection == DisplayDirection.VERTICAL) {
+      router.back()
+    } else {
+      this.displayDirection = DisplayDirection.VERTICAL
+    }
+    WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
+    window.Orientation.PORTRAIT :
+    window.Orientation.LANDSCAPE)
+    devicePLSensorManager.devicePLSensorOn(this.displayDirection == DisplayDirection.VERTICAL ?
+    window.Orientation.PORTRAIT :
+    window.Orientation.LANDSCAPE);
+    return true
+  }
+
   getLiveDetails() {
     this.liveViewModel.getLiveDetails(this.contentId, this.relId, this.relType)
       .then(
@@ -102,23 +120,4 @@ export struct DetailPlayLivePage {
 
         })
   }
-
-  aboutToDisappear(): void {
-    Logger.info(this.TAG, `wyj-aboutToDisappear`)
-  }
-
-  onBackPress(): boolean | void {
-    if (this.displayDirection == DisplayDirection.VERTICAL) {
-      router.back()
-    } else {
-      this.displayDirection = DisplayDirection.VERTICAL
-    }
-    WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
-    window.Orientation.PORTRAIT :
-    window.Orientation.LANDSCAPE)
-    devicePLSensorManager.devicePLSensorOn(this.displayDirection == DisplayDirection.VERTICAL ?
-    window.Orientation.PORTRAIT :
-    window.Orientation.LANDSCAPE);
-    return true
-  }
 }
\ No newline at end of file

 import { LiveRoomItemBean } from 'wdBean/Index'
+import { StringUtils } from 'wdKit/Index'
 
 @Component
 export struct TabChatItemComponent {
@@ -9,7 +10,7 @@ export struct TabChatItemComponent {
 
   build() {
     Row() {
-      Image(this.item.senderUserAvatarUrl)
+      Image(StringUtils.isEmpty(this.item.senderUserAvatarUrl) ? $r('app.media.default_head') : this.item.senderUserAvatarUrl)
         .borderRadius(90)
         .width(24)
         .height(24)

 import { Action, LiveRoomItemBean, Params, PhotoListBean } from 'wdBean/Index'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
+import { AudioRowComponent } from 'wdComponent/Index'
 import { DateTimeUtils, StringUtils } from 'wdKit/Index'
 import { WDRouterRule } from 'wdRouter/Index'
 
@@ -111,24 +112,10 @@ export struct TabLiveItemComponent {
         }
         //音频
         else if (this.item.dataType === 'ZH_AUDIO_MSG') {
-          Row() {
-            Image($r('app.media.icon_voice'))
-              .width(20)
-              .aspectRatio(1)
-              .margin({
-                left: 8,
-                right: 6
+          AudioRowComponent({
+            audioUrl: this.item.audioUrl,
+            duration: this.item.duration
           })
-            Text(DateTimeUtils.getFormattedDuration(this.item.duration))
-              .fontColor('#666666')
-              .fontWeight(400)
-              .fontSize('14fp')
-          }
-          .backgroundColor(Color.White)
-          .height(36)
-          .borderRadius(4)
-          .margin({ top: 8, right: 16 })
-          .width('100%')
         }
         //视频
         else if (this.item.dataType === 'ZH_VIDEO_MSG') {

 import { LiveDetailsBean } from 'wdBean/Index';
-import { Logger } from 'wdKit/Index';
 import { WDPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
 import { PlayUIComponent } from './PlayUIComponent';
 
@@ -7,13 +6,15 @@ import { PlayUIComponent } from './PlayUIComponent';
 export struct TopPlayComponent {
   TAG: string = 'TopPlayComponent'
   @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
-  playerController: WDPlayerController = new WDPlayerController();
+  playerController?: WDPlayerController
   @State imgUrl: string = ''
   @State isWait: boolean = false
 
   aboutToAppear(): void {
+    if (this.playerController) {
       this.playerController.onCanplay = () => {
-      this.playerController.play()
+        this.playerController?.play()
+      }
     }
   }
 
@@ -30,7 +31,7 @@ export struct TopPlayComponent {
       } else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
         playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
       }
-      this.playerController.firstPlay(playUrl);
+      this.playerController?.firstPlay(playUrl);
     }
   }
 
@@ -44,18 +45,6 @@ export struct TopPlayComponent {
         .height('100%')
         .width('100%')
         .visibility(this.isWait ? Visibility.None : Visibility.Visible)
-        .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
-          Logger.debug(this.TAG, `当前屏幕可见区域大小： currentRatio:' +${currentRatio}`)
-          if (isVisible && currentRatio >= 1.0) {
-            Logger.debug(this.TAG, `播放器-暂停. currentRatio:' +${currentRatio}`)
-            this.playerController.play()
-          }
-
-          if (!isVisible && currentRatio <= 0.0) {
-            Logger.debug(this.TAG, `播放器-播放. currentRatio:' +${currentRatio}`)
-            this.playerController.pause()
-          }
-        })
       Image(this.imgUrl)
         .objectFit(ImageFit.Contain)
         .visibility(this.isWait ? Visibility.Visible : Visibility.None)
@@ -65,8 +54,5 @@ export struct TopPlayComponent {
   }
 
   aboutToDisappear(): void {
-    this.playerController.pause()
-    this.playerController.stop()
-    this.playerController.release()
   }
 }
\ No newline at end of file

 {
   "src": [
-    "pages/DetailPlayLivePage",
     "pages/DetailPlayVLivePage",
     "pages/DetailPlayLiveCommon"
   ]