竖屏直播

@@ -5,6 +5,7 @@ import { WindowModel } from 'wdKit/Index';
 import { PlayerComponent } from '../widgets/vertical/PlayerComponent';
 import { PlayerComponent } from '../widgets/vertical/PlayerComponent';
 import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
 import { PlayerInfoComponent } from '../widgets/vertical/PlayerInfoComponent';
 import { WDPlayerController } from 'wdPlayer/Index';
 import { WDPlayerController } from 'wdPlayer/Index';
+import { DisplayDirection } from 'wdConstant/Index';
 
 
 const storage = LocalStorage.getShared();
 const storage = LocalStorage.getShared();
 
 
@@ -21,6 +22,7 @@ export struct DetailPlayVLivePage {
   @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
   @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
   @Provide isShowControl: boolean = false
   @Provide isShowControl: boolean = false
   @Provide liveState: string = ''
   @Provide liveState: string = ''
+  @Provide displayDirection: DisplayDirection = DisplayDirection.VERTICAL //横竖屏,默认竖屏
   @State relId: string = ''
   @State relId: string = ''
   @State contentId: string = ''
   @State contentId: string = ''
   @State relType: string = ''
   @State relType: string = ''
@@ -43,7 +45,6 @@ export struct DetailPlayVLivePage {
   aboutToDisappear(): void {
   aboutToDisappear(): void {
     WindowModel.shared.setWindowLayoutFullScreen(false)
     WindowModel.shared.setWindowLayoutFullScreen(false)
     WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
     WindowModel.shared.setWindowSystemBarProperties({ statusBarContentColor: '#000000', })
-
   }
   }
 
 
   build() {
   build() {
@@ -52,9 +53,6 @@ export struct DetailPlayVLivePage {
         PlayerComponent({
         PlayerComponent({
           playerController: this.playerController
           playerController: this.playerController
         })
         })
-          .onClick(() => {
-            this.isShowControl = !this.isShowControl
-          })
 
 
         PlayerInfoComponent({
         PlayerInfoComponent({
           playerController: this.playerController,
           playerController: this.playerController,
@@ -67,7 +65,8 @@ export struct DetailPlayVLivePage {
           .aspectRatio(1)
           .aspectRatio(1)
           .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
           .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
           .animation({ duration: 500 })
           .animation({ duration: 500 })
-          .position({ x: '90%', y: '90%' })
+          .position({ x: '100%', y: '100%' })
+          .markAnchor({ x: 56, y: 56 })
           .onClick(() => {
           .onClick(() => {
             this.swiperController.showNext()
             this.swiperController.showNext()
           })
           })

-import { LiveDetailsBean } from 'wdBean/Index';
-import { WDPlayerController, WDPlayerRenderView } from 'wdPlayer/Index';
-import { PlayUIComponent } from './PlayUIComponent';
-
-@Component
-export struct TopPlayVComponent {
-  @Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
-  playerController: WDPlayerController = new WDPlayerController();
-
-  aboutToAppear(): void {
-    this.playerController.onCanplay = () => {
-      this.playerController.play()
-    }
-  }
-
-  updateData() {
-    //直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
-    if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
-      let playUrl = ''
-      if (this.liveDetailsBean.liveInfo.liveState == 'running') {
-        playUrl = this.liveDetailsBean.liveInfo.vlive[0].liveUrl
-      } else if (this.liveDetailsBean.liveInfo.liveState == 'end') {
-        playUrl = this.liveDetailsBean.liveInfo.vlive[0].replayUri
-      }
-      this.playerController.firstPlay(playUrl);
-    }
-  }
-
-  build() {
-    Stack() {
-      // https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-image-effect-0000001862607345
-      Image(this.liveDetailsBean.fullColumnImgUrls[0].url)
-        .height('100%')
-        .width('100%')
-        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
-        .blur(100)
-
-      WDPlayerRenderView({
-        playerController: this.playerController,
-        onLoad: async () => {
-        }
-      })// .height('100%')
-        .width('100%')// 扩展至所有非安全区域
-        .onClick(() => {
-          this.playerController.play()
-        })
-      // PlayUIComponent({ playerController: this.playerController })
-    }
-    // .height('100%')
-    .width('100%')
-    // 扩展至所有非安全区域
-    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
-  }
-
-  aboutToDisappear(): void {
-    this.playerController.pause()
-  }
-}

+import { LiveDetailsBean } from 'wdBean/Index'
+
+@Component
+export struct ChartItemCompereComponent {
+  @Consume liveDetailsBean: LiveDetailsBean
+
+  aboutToAppear(): void {
+  }
+
+  build() {
+    ListItem() {
+      Column() {
+        Row() {
+          Image($r('app.media.icon_live_status_running'))
+            .borderRadius(10)
+            .width(20)
+            .height(20)
+            .margin({ right: 8 })
+
+          Text('人民日报')
+            .fontSize(14)
+            .fontColor('#FFFFFFFF')
+            .margin({ right: 8 })
+
+          Text(' 主持人 ')
+            .fontSize(11)
+            .backgroundColor('808562')
+            .fontColor('#FFFFFFFF')
+            .padding({ top: 2, bottom: 2, left: 4, right: 4 })
+            .borderRadius(4)
+        }.margin({ bottom: 8 })
+
+        Text(this.liveDetailsBean.newIntroduction).lineHeight(22)
+      }
+      .backgroundColor('#4D000000')
+      .borderRadius(3)
+      .padding({
+        top: 6,
+        bottom: 6,
+        left: 8,
+        right: 8
+      })
+      .margin({ left: 16, bottom: 4 })
+    }
+
+  }
+}

@@ -9,31 +9,35 @@ export struct ChatItemComponent {
 
 
   build() {
   build() {
     Row() {
     Row() {
-      Image(this.item.senderUserAvatarUrl)
-        .borderRadius(90)
-        .width(24)
-        .height(24)
       Text() {
       Text() {
+        if (this.item.senderUserName) {
+          Span(' 主持人 ')
+            .fontSize(11)
+            .lineHeight(20)
+            .textBackgroundStyle({ color: '#808562', radius: 2 })
+          Span(' ')
+        }
         Span(this.item.senderUserName + ': ')
         Span(this.item.senderUserName + ': ')
-          .fontColor('#666666')
+          .fontColor('#FFFFC63F')
+          .padding({ right: 118 })
+        //
+
         Span(this.item.text)
         Span(this.item.text)
-          .fontColor('#222222')
       }
       }
-      .margin({ left: 8 })
-      .lineHeight(20)
-      .layoutWeight(1)
-      .fontSize('14fp')
-      .fontWeight(400)
+      .fontSize(14)
+      .fontColor('#FFFFFFFF')
+      .lineHeight(22)
+      .textShadow({ offsetX: 1, offsetY: 1, color: '#4D000000', radius: 1 })
+
     }
     }
-    .alignItems(VerticalAlign.Top)
+    .backgroundColor('#4D000000')
+    .borderRadius(3)
     .padding({
     .padding({
-      left: 15,
-      top: 15,
-      right: 15
+      top: 6,
+      bottom: 6,
+      left: 8,
+      right: 8
     })
     })
-  }
-
-  aboutToDisappear(): void {
-
+    .margin({ left: 16, bottom: 4 })
   }
   }
 }
 }

-import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index'
-import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI } from 'wdComponent/Index'
-import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
-import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'
-import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout'
-import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
+import { LiveDetailsBean, LiveRoomDataBean, LiveRoomItemBean } from 'wdBean/Index'
+import { LiveCommentComponent } from 'wdComponent/Index'
 import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
 import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
-import { ViewType } from 'wdConstant/Index'
+import { DisplayDirection, ViewType } from 'wdConstant/Index'
 import { LiveViewModel } from '../../viewModel/LiveViewModel'
 import { LiveViewModel } from '../../viewModel/LiveViewModel'
-import { TabChatItemComponent } from '../details/TabChatItemComponent'
+import { ChartItemCompereComponent } from './ChartItemCompereComponent'
+import { ChatItemComponent } from './ChartItemComponent'
 
 
 
 
 @Component
 @Component
 export struct PlayerCommentComponent {
 export struct PlayerCommentComponent {
   liveViewModel: LiveViewModel = new LiveViewModel()
   liveViewModel: LiveViewModel = new LiveViewModel()
-  @Consume liveDetailsBean: LiveDetailsBean
+  @Consume @Watch('liveDetailsBeanChange') liveDetailsBean: LiveDetailsBean
+  @Consume liveRoomDataBean: LiveRoomDataBean
+  @Consume displayDirection: DisplayDirection
   @State private pageModel: PageModel = new PageModel()
   @State private pageModel: PageModel = new PageModel()
   @State liveChatList: Array<LiveRoomItemBean> = []
   @State liveChatList: Array<LiveRoomItemBean> = []
 
 
@@ -21,6 +20,10 @@ export struct PlayerCommentComponent {
     this.getLiveChatList()
     this.getLiveChatList()
   }
   }
 
 
+  liveDetailsBeanChange() {
+    this.getLiveChatList()
+  }
+
   getLiveChatList() {
   getLiveChatList() {
     this.pageModel.currentPage = 1
     this.pageModel.currentPage = 1
     this.liveViewModel.getLiveChatList(
     this.liveViewModel.getLiveChatList(
@@ -31,8 +34,10 @@ export struct PlayerCommentComponent {
       .then(
       .then(
         (data) => {
         (data) => {
           if (data.barrageResponses && data.barrageResponses.length > 0) {
           if (data.barrageResponses && data.barrageResponses.length > 0) {
+
             this.pageModel.viewType = ViewType.LOADED;
             this.pageModel.viewType = ViewType.LOADED;
             this.liveChatList.push(...data.barrageResponses)
             this.liveChatList.push(...data.barrageResponses)
+            console.log('liveChatList===', this.liveChatList)
             if (data.barrageResponses.length === this.pageModel.pageSize) {
             if (data.barrageResponses.length === this.pageModel.pageSize) {
               this.pageModel.currentPage++;
               this.pageModel.currentPage++;
               this.pageModel.hasMore = true;
               this.pageModel.hasMore = true;
@@ -49,58 +54,27 @@ export struct PlayerCommentComponent {
   }
   }
 
 
   build() {
   build() {
-    Stack() {
-      if (this.pageModel.viewType == ViewType.LOADING) {
-        this.LoadingLayout()
-      } else if (this.pageModel.viewType == ViewType.ERROR) {
-        ErrorComponent()
-      } else if (this.pageModel.viewType == ViewType.EMPTY) {
-        EmptyComponent()
-      } else {
-        this.ListLayout()
-      }
-    }
-    .align(Alignment.Top)
-    // .backgroundColor('#F5F5F5')
-    .height('100%')
-    .width('100%')
-  }
-
-  @Builder
-  LoadingLayout() {
-    CustomRefreshLoadLayout({
-      refreshBean: new RefreshLayoutBean(true,
-        $r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
-    })
-  }
-
-  @Builder
-  ListLayout() {
-    List() {
-      ListItem() {
-        // 下拉刷新
-        RefreshLayout({
-          refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
-            this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
+    Column() {
+      List() {
+        // 主持人
+        if (this.liveDetailsBean.oldNewsId) {
+          ChartItemCompereComponent()
+        }
+        ForEach(this.liveChatList, (item: LiveRoomItemBean) => {
+          ListItem() {
+            ChatItemComponent({ item: item })
+          }
         })
         })
       }
       }
+      .height(280)
+      .width('80%')
+      .scrollBar(BarState.Off)
+      .margin({ bottom: 20 })
+
+      LiveCommentComponent({ heartNum: this.liveRoomDataBean.likeNum })
+        .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
+        .backgroundColor(Color.Transparent)
+    }.alignItems(HorizontalAlign.Start)
 
 
-      ForEach(this.liveChatList, (item: LiveRoomItemBean) => {
-        ListItem() {
-          TabChatItemComponent({ item: item })
-        }
-      })
-      // 加载更多
-      ListItem() {
-        if (this.pageModel.hasMore) {
-          LoadMoreLayout({
-            refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
-              this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
-          })
-        } else {
-          ListHasNoMoreDataUI()
-        }
-      }
-    }
   }
   }
 }
 }

@@ -80,7 +80,7 @@ export struct PlayerComponent {
             onLoad: () => {
             onLoad: () => {
               this.playerController?.firstPlay(this.playUrl);
               this.playerController?.firstPlay(this.playUrl);
             }
             }
-          }).padding({ top: 195 })
+          }).margin({ top: 195 }).height(211)
         }
         }
       }
       }
       .height('100%')
       .height('100%')

@@ -7,6 +7,8 @@ export struct PlayerInfoComponent {
   private playerController?: WDPlayerController
   private playerController?: WDPlayerController
   @Consume bottomSafeHeight: number
   @Consume bottomSafeHeight: number
   @Consume topSafeHeight: number
   @Consume topSafeHeight: number
+  @Consume liveState: string
+  @Consume isShowControl: boolean
   @Link swiperIndex: number
   @Link swiperIndex: number
 
 
   build() {
   build() {
@@ -17,7 +19,6 @@ export struct PlayerInfoComponent {
           bottom: this.bottomSafeHeight + 'px',
           bottom: this.bottomSafeHeight + 'px',
           top: this.topSafeHeight + 'px'
           top: this.topSafeHeight + 'px'
         })
         })
-
       }
       }
       .cachedCount(2)
       .cachedCount(2)
       .indicator(false)
       .indicator(false)
@@ -25,6 +26,11 @@ export struct PlayerInfoComponent {
       .width('100%')
       .width('100%')
       .height('100%')
       .height('100%')
       .index(this.swiperIndex)
       .index(this.swiperIndex)
+      .onClick(() => {
+        if (this.liveState === 'end') {
+          this.isShowControl = !this.isShowControl
+        }
+      })
       .onChange((index) => {
       .onChange((index) => {
         this.swiperIndex = index
         this.swiperIndex = index
       })
       })

@@ -6,20 +6,27 @@ import { PlayerVideoControlComponent } from './PlayerVideoControlComponent';
 @Component
 @Component
 export struct PlayerUIComponent {
 export struct PlayerUIComponent {
   private playerController?: WDPlayerController
   private playerController?: WDPlayerController
-  @Consume liveState: string
+  @Consume isShowControl: boolean
 
 
   build() {
   build() {
-    Column() {
+    Stack() {
       PlayerTitleComponent()
       PlayerTitleComponent()
-      Blank()
-      // PlayerCommentComponent().layoutWeight(1)
-      if (this.liveState === 'end') {
+      // Row() {
+      //   // 全屏按钮
+      // }.layoutWeight(1)
+
+      Row() {
+        PlayerCommentComponent()
         PlayerVideoControlComponent({ playerController: this.playerController })
         PlayerVideoControlComponent({ playerController: this.playerController })
+          .visibility(this.isShowControl ? Visibility.Visible : Visibility.Hidden)
+          .animation({ duration: 500 })
       }
       }
-
+      .position({ y: '100%' })
+      .markAnchor({ y: '100%' })
     }
     }
     .height('100%')
     .height('100%')
     .width('100%')
     .width('100%')
+    .alignContent(Alignment.TopStart)
 
 
   }
   }
 }
 }

@@ -11,9 +11,6 @@ export struct PlayerVideoControlComponent {
   private playerController?: WDPlayerController
   private playerController?: WDPlayerController
   @Consume liveDetailsBean: LiveDetailsBean
   @Consume liveDetailsBean: LiveDetailsBean
   @Consume liveRoomDataBean: LiveRoomDataBean
   @Consume liveRoomDataBean: LiveRoomDataBean
-  //菜单键是否可见
-  @State isMenuVisible: boolean = true
-  @State isFullScreen: boolean = false
   @State currentTime: string = ''
   @State currentTime: string = ''
   @State totalTime: string = ''
   @State totalTime: string = ''
   @State progressVal: number = 0;
   @State progressVal: number = 0;
@@ -24,7 +21,6 @@ export struct PlayerVideoControlComponent {
     if (this.playerController) {
     if (this.playerController) {
       //播放进度监听
       //播放进度监听
       this.playerController.onTimeUpdate = (position: number, duration: number) => {
       this.playerController.onTimeUpdate = (position: number, duration: number) => {
-        console.log('onTimeUpdate===', position, duration)
         this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
         this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
         this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
         this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
         this.progressVal = Math.floor(position * 100 / duration);
         this.progressVal = Math.floor(position * 100 / duration);
@@ -61,14 +57,6 @@ export struct PlayerVideoControlComponent {
           right: 16
           right: 16
         })
         })
 
 
-      // Image($r('app.media.icon_live_player_full_screen'))
-      //   .width(24)
-      //   .height(24)
-      //   .onClick(() => {
-      //     this.isFullScreen = !this.isFullScreen
-      //     WindowModel.shared.setPreferredOrientation(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
-      //     devicePLSensorManager.devicePLSensorOn(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
-      //   })
     }
     }
     .alignItems(VerticalAlign.Center)
     .alignItems(VerticalAlign.Center)
     // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] })
     // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] })
@@ -79,7 +67,6 @@ export struct PlayerVideoControlComponent {
       top: 15,
       top: 15,
       bottom: 15
       bottom: 15
     })
     })
-    .visibility(this.isMenuVisible ? Visibility.Visible : Visibility.None)
   }
   }
 
 
   @Builder
   @Builder