直播入口修改

@@ -2,10 +2,12 @@ import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
 import { WDRouterRule } from 'wdRouter/Index'
 import { WDRouterRule } from 'wdRouter/Index'
 import { Logger } from 'wdKit/Index'
 import { Logger } from 'wdKit/Index'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
+import { LiveModel } from '../../viewmodel/LiveModel'
 
 
 @Component
 @Component
 export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
 export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
   @State compDTO: CompDTO = {} as CompDTO
   @State compDTO: CompDTO = {} as CompDTO
+
   build() {
   build() {
     Column() {
     Column() {
       Row() {
       Row() {
@@ -30,7 +32,7 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
             .height(14)
             .height(14)
         }
         }
       }.justifyContent(FlexAlign.SpaceBetween)
       }.justifyContent(FlexAlign.SpaceBetween)
-      .margin({ top: 8 ,bottom: 8})
+      .margin({ top: 8, bottom: 8 })
       .width('100%')
       .width('100%')
 
 
 
 
@@ -45,12 +47,13 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
         .fontColor($r("app.color.color_212228"))
         .fontColor($r("app.color.color_212228"))
         .fontWeight(400)
         .fontWeight(400)
         .maxLines(1)
         .maxLines(1)
-        .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
+        .textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
         .textAlign(TextAlign.Start)
         .textAlign(TextAlign.Start)
         .margin({ top: 8 })
         .margin({ top: 8 })
         .width('100%')
         .width('100%')
 
 
-    }.width("100%")
+    }
+    .width("100%")
     .padding({
     .padding({
       top: 14,
       top: 14,
       left: 16,
       left: 16,
@@ -59,16 +62,26 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
     })
     })
     .backgroundColor($r("app.color.white"))
     .backgroundColor($r("app.color.white"))
     .margin({ bottom: 8 })
     .margin({ bottom: 8 })
-    .onClick(()=>{
+    .onClick(() => {
       this.gotoLive(this.compDTO?.operDataList[0])
       this.gotoLive(this.compDTO?.operDataList[0])
     })
     })
   }
   }
-  gotoLive(content: ContentDTO) {
+
+  async gotoLive(content: ContentDTO) {
+    const liveDetail = await LiveModel.getLiveDetails(content?.objectId || '', content?.relId || '', content?.relType || '')
+    const liveStyle = liveDetail[0].liveInfo.liveStyle
+    const liveState = liveDetail[0].liveInfo.liveState
+
+
+    console.error('liveDetail===', liveDetail)
+
+
     let taskAction: Action = {
     let taskAction: Action = {
       type: 'JUMP_DETAIL_PAGE',
       type: 'JUMP_DETAIL_PAGE',
       params: {
       params: {
         detailPageType: 2,
         detailPageType: 2,
         contentID: content?.objectId,
         contentID: content?.objectId,
+        liveStyle: liveState === 'wait' ? 0 : liveStyle,
         extra: {
         extra: {
           relType: content?.relType,
           relType: content?.relType,
           relId: content?.relId,
           relId: content?.relId,
@@ -76,6 +89,6 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
       } as Params,
       } as Params,
     };
     };
     WDRouterRule.jumpWithAction(taskAction)
     WDRouterRule.jumpWithAction(taskAction)
-    Logger.debug(`gotoLive, ${content.objectId}`);
+    // Logger.debug(TAG, `gotoLive, ${content.objectId}`);
   }
   }
 }
 }

@@ -6,6 +6,7 @@ import { WDRouterRule } from 'wdRouter/Index'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
 import { Logger } from 'wdKit/Index'
 import { Logger } from 'wdKit/Index'
+import { LiveModel } from '../../viewmodel/LiveModel'
 
 
 @Component
 @Component
 export struct LiveHorizontalCardComponent {
 export struct LiveHorizontalCardComponent {
@@ -100,12 +101,22 @@ export struct LiveHorizontalCardComponent {
     })
     })
     .backgroundColor($r("app.color.white"))
     .backgroundColor($r("app.color.white"))
   }
   }
-  gotoLive(content: ContentDTO) {
+
+  async gotoLive(content: ContentDTO) {
+    const liveDetail = await LiveModel.getLiveDetails(content?.objectId || '', content?.relId || '', content?.relType || '')
+    const liveStyle = liveDetail[0].liveInfo.liveStyle
+    const liveState = liveDetail[0].liveInfo.liveState
+
+
+    console.error('liveDetail===', liveDetail)
+
+
     let taskAction: Action = {
     let taskAction: Action = {
       type: 'JUMP_DETAIL_PAGE',
       type: 'JUMP_DETAIL_PAGE',
       params: {
       params: {
         detailPageType: 2,
         detailPageType: 2,
         contentID: content?.objectId,
         contentID: content?.objectId,
+        liveStyle: liveState === 'wait' ? 0 : liveStyle,
         extra: {
         extra: {
           relType: content?.relType,
           relType: content?.relType,
           relId: content?.relId,
           relId: content?.relId,
@@ -113,6 +124,6 @@ export struct LiveHorizontalCardComponent {
       } as Params,
       } as Params,
     };
     };
     WDRouterRule.jumpWithAction(taskAction)
     WDRouterRule.jumpWithAction(taskAction)
-    Logger.debug(`gotoLive, ${content.objectId}`);
+    // Logger.debug(TAG, `gotoLive, ${content.objectId}`);
   }
   }
 }
 }

@@ -6,6 +6,7 @@ import { Logger, StringUtils } from 'wdKit/Index'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
 import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
 import { WDRouterRule } from 'wdRouter/Index'
 import { WDRouterRule } from 'wdRouter/Index'
+import { LiveModel } from '../../viewmodel/LiveModel'
 
 
 @Component
 @Component
 export struct LiveHorizontalReservationComponent {
 export struct LiveHorizontalReservationComponent {
@@ -92,12 +93,21 @@ export struct LiveHorizontalReservationComponent {
     .backgroundColor($r("app.color.white"))
     .backgroundColor($r("app.color.white"))
   }
   }
 
 
-  gotoLive(content: ContentDTO) {
+  async gotoLive(content: ContentDTO) {
+    const liveDetail = await LiveModel.getLiveDetails(content?.objectId || '', content?.relId || '', content?.relType || '')
+    const liveStyle = liveDetail[0].liveInfo.liveStyle
+    const liveState = liveDetail[0].liveInfo.liveState
+
+
+    console.error('liveDetail===', liveDetail)
+
+
     let taskAction: Action = {
     let taskAction: Action = {
       type: 'JUMP_DETAIL_PAGE',
       type: 'JUMP_DETAIL_PAGE',
       params: {
       params: {
         detailPageType: 2,
         detailPageType: 2,
         contentID: content?.objectId,
         contentID: content?.objectId,
+        liveStyle: liveState === 'wait' ? 0 : liveStyle,
         extra: {
         extra: {
           relType: content?.relType,
           relType: content?.relType,
           relId: content?.relId,
           relId: content?.relId,
@@ -105,6 +115,6 @@ export struct LiveHorizontalReservationComponent {
       } as Params,
       } as Params,
     };
     };
     WDRouterRule.jumpWithAction(taskAction)
     WDRouterRule.jumpWithAction(taskAction)
-    Logger.debug(`gotoLive, ${content.objectId}`);
+    // Logger.debug(TAG, `gotoLive, ${content.objectId}`);
   }
   }
 }
 }

-import { BottomComponent } from '../widgets/details/BottomComponent';
-import { TabComponent } from '../widgets/details/TabComponent';
-import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
-
-
-@Component
-export struct DetailPlayHLivePage {
-  aboutToAppear(): void {
-
-  }
-
-  build() {
-    Column() {
-      TopPlayComponent()
-      TabComponent()
-      BottomComponent()
-    }
-    .height('100%')
-    .width('100%')
-  }
-
-  onPageShow(): void {
-
-  }
-
-  aboutToDisappear(): void {
-
-  }
-}

@@ -60,12 +60,13 @@ export struct DetailPlayVLivePage {
           swiperController: this.swiperController,
           swiperController: this.swiperController,
           swiperIndex: $swiperIndex
           swiperIndex: $swiperIndex
         })
         })
-          
+
         Image($r('app.media.icon_live_more'))
         Image($r('app.media.icon_live_more'))
           .width(40)
           .width(40)
-          .aspectRatio(1)// .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
+          .aspectRatio(1)
+          .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
           .animation({ duration: 500 })
           .animation({ duration: 500 })
-          .position({ x: '95%', y: '95%' })
+          .position({ x: '90%', y: '90%' })
           .onClick(() => {
           .onClick(() => {
             this.swiperController.showNext()
             this.swiperController.showNext()
           })
           })

+import { LiveRoomItemBean } from 'wdBean/Index'
+
+@Component
+export struct ChatItemComponent {
+  item: LiveRoomItemBean = {} as LiveRoomItemBean
+
+  aboutToAppear(): void {
+  }
+
+  build() {
+    Row() {
+      Image(this.item.senderUserAvatarUrl)
+        .borderRadius(90)
+        .width(24)
+        .height(24)
+      Text() {
+        Span(this.item.senderUserName + ': ')
+          .fontColor('#666666')
+        Span(this.item.text)
+          .fontColor('#222222')
+      }
+      .margin({ left: 8 })
+      .lineHeight(20)
+      .layoutWeight(1)
+      .fontSize('14fp')
+      .fontWeight(400)
+    }
+    .alignItems(VerticalAlign.Top)
+    .padding({
+      left: 15,
+      top: 15,
+      right: 15
+    })
+  }
+
+  aboutToDisappear(): void {
+
+  }
+}

+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 PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
+import { ViewType } from 'wdConstant/Index'
+import { LiveViewModel } from '../../viewModel/LiveViewModel'
+import { TabChatItemComponent } from '../details/TabChatItemComponent'
+
+
 @Component
 @Component
 export struct PlayerCommentComponent {
 export struct PlayerCommentComponent {
+  liveViewModel: LiveViewModel = new LiveViewModel()
+  @Consume liveDetailsBean: LiveDetailsBean
+  @State private pageModel: PageModel = new PageModel()
+  @State liveChatList: Array<LiveRoomItemBean> = []
+
+  aboutToAppear(): void {
+    this.getLiveChatList()
+  }
+
+  getLiveChatList() {
+    this.pageModel.currentPage = 1
+    this.liveViewModel.getLiveChatList(
+      1,
+      this.liveDetailsBean?.liveInfo?.mlive?.mliveId,
+      this.liveDetailsBean?.newsId,
+      20,)
+      .then(
+        (data) => {
+          if (data.barrageResponses && data.barrageResponses.length > 0) {
+            this.pageModel.viewType = ViewType.LOADED;
+            this.liveChatList.push(...data.barrageResponses)
+            if (data.barrageResponses.length === this.pageModel.pageSize) {
+              this.pageModel.currentPage++;
+              this.pageModel.hasMore = true;
+            } else {
+              this.pageModel.hasMore = false;
+            }
+          } else {
+            this.pageModel.viewType = ViewType.EMPTY;
+          }
+        },
+        () => {
+
+        })
+  }
+
   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)
+        })
+      }
+
+      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()
+        }
+      }
+    }
   }
   }
 }
 }

@@ -4,7 +4,7 @@ import { PlayerUIComponent } from './PlayerUIComponent'
 @Component
 @Component
 export struct PlayerInfoComponent {
 export struct PlayerInfoComponent {
   swiperController?: SwiperController
   swiperController?: SwiperController
-  @Prop playerController: WDPlayerController
+  private playerController?: WDPlayerController
   @Consume bottomSafeHeight: number
   @Consume bottomSafeHeight: number
   @Consume topSafeHeight: number
   @Consume topSafeHeight: number
   @Link swiperIndex: number
   @Link swiperIndex: number

 import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
 import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
 import { NumberFormatterUtils } from 'wdKit/Index'
 import { NumberFormatterUtils } from 'wdKit/Index'
 
 
+@Preview
 @Component
 @Component
 export struct PlayerTitleComponent {
 export struct PlayerTitleComponent {
   @Consume liveDetailsBean: LiveDetailsBean
   @Consume liveDetailsBean: LiveDetailsBean
@@ -9,133 +10,72 @@ export struct PlayerTitleComponent {
   build() {
   build() {
     Column() {
     Column() {
       Row() {
       Row() {
-        Image($r('app.media.icon_arrow_left_white'))
-          .width(24)
-          .aspectRatio(1)
-          .visibility(Visibility.None)
-          .margin({
-            right: 10
-          })
-        if (this.liveDetailsBean.liveInfo?.liveState != 'wait') {
-          Text(this.liveDetailsBean.newsTitle)
-            .maxLines(1)
-            .textOverflow({ overflow: TextOverflow.Ellipsis })
-            .fontSize('16fp')
-            .fontWeight(500)
-            .fontColor(Color.White)
-            .textAlign(TextAlign.Start)
-            .layoutWeight(1)
-        } else {
-          Blank()
-        }
-        Image($r('app.media.icon_share'))
-          .width(24)
-          .aspectRatio(1)
-          .visibility(Visibility.None)
+        Text(this.liveDetailsBean.newsTitle || '')
+          .maxLines(2)
+          .fontSize(16)
+          .fontWeight(500)
+          .fontColor(Color.White)
+      }.margin({ bottom: 10 })
+
+      Row() {
+        this.getLiveStatusView()
       }
       }
-      .width('100%')
-      .alignItems(VerticalAlign.Center)
-      .margin({
-        bottom: 10
-      })
 
 
-      this.getLiveStatusView()
-    }.width('100%')
+    }
+    .width('100%')
+    .alignItems(HorizontalAlign.Start)
     .padding({
     .padding({
-      top: 20,
-      bottom: 6,
-      left: 10,
-      right: 10
+      top: 12,
+      left: 16
     })
     })
-    .alignItems(HorizontalAlign.Start)
-    .visibility(Visibility.Visible)
+
   }
   }
 
 
   @Builder
   @Builder
   getLiveStatusView() {
   getLiveStatusView() {
     Row() {
     Row() {
-      Image(this.liveDetailsBean.rmhInfo.rmhHeadUrl)
-        .width(22)
-        .height(18)
-      Text(this.liveDetailsBean.rmhInfo.rmhName)
-        .fontSize('11fp')
-        .fontWeight(400)
+      Image(this.liveDetailsBean.rmhInfo?.rmhHeadUrl || '')
+        .width(24)
+        .aspectRatio(1)
+        .borderRadius('50%')
+        .fillColor(Color.Transparent)
+      Text(this.liveDetailsBean.rmhInfo?.rmhName || '')
+        .fontSize(12)
+        .fontWeight(500)
         .fontColor(Color.White)
         .fontColor(Color.White)
+        .padding({
+          top: 2,
+          right: 8,
+          left: 4,
+          bottom: 2
+        })
     }
     }
     .backgroundColor('#4D000000')
     .backgroundColor('#4D000000')
-    .padding({
-      top: 1,
-      right: 4,
-      bottom: 1
-    })
+    .borderRadius(2)
+    .margin({ right: 8 })
 
 
-
-    // 直播新闻-直播状态  wait待开播running直播中end已结束cancel已取消paused暂停
-    // 预约
-    if (this.liveDetailsBean.liveInfo?.liveState == 'wait') {
-      Row() {
-        Image($r('app.media.icon_live_status_wait'))
-          .width(22)
-          .height(18)
-        Text('预约')
-          .fontSize('11fp')
-          .fontWeight(400)
-          .fontColor(Color.White)
-      }
-      .backgroundColor('#4D000000')
-      .padding({
-        top: 1,
-        right: 4,
-        bottom: 1
-      })
-    }
-    // 直播中
-    else if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
-      Row() {
+    Row() {
+      if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
         Image($r('app.media.icon_live_status_running'))
         Image($r('app.media.icon_live_status_running'))
           .width(22)
           .width(22)
           .height(18)
           .height(18)
-        Text('直播中')
-          .fontSize('11fp')
-          .fontWeight(400)
-          .fontColor(Color.White)
-        Image($r('app.media.icon_live_player_status_end'))
-          .width(12)
-          .height(12)
-        Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
-          .fontSize('11fp')
-          .fontWeight(400)
-          .fontColor(Color.White)
+          .margin({ right: 1 })
       }
       }
-      .backgroundColor('#4D000000')
-      .padding({
-        top: 1,
-        right: 4,
-        bottom: 1
-      })
-    }
-    //回看
-    else if (this.liveDetailsBean.liveInfo?.liveState == 'end') {
-      Row() {
-        Text('回看')
-          .fontSize('11fp')
-          .fontWeight(400)
-          .fontColor(Color.White)
-        Image($r('app.media.icon_live_player_status_end'))
-          .width(12)
-          .height(12)
-        Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
-          .fontSize('11fp')
-          .fontWeight(400)
-          .fontColor(Color.White)
-      }
-      .backgroundColor('#4D000000')
-      .padding({
-        left: 4,
-        top: 1,
-        right: 4,
-        bottom: 1
-      })
+
+      Text(this.liveDetailsBean.liveInfo?.liveState == 'running' ? '直播中' : '回看')
+        .fontSize(11)
+        .fontWeight(400)
+        .fontColor(Color.White)
+      Image($r('app.media.icon_live_player_status_end'))
+        .width(12)
+        .height(12)
+      Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
+        .fontSize('11fp')
+        .fontWeight(400)
+        .fontColor(Color.White)
     }
     }
+    .backgroundColor('#4D000000')
+    .borderRadius(2)
+    .padding(this.liveDetailsBean.liveInfo?.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4)
   }
   }
 }
 }

 import { WDPlayerController } from 'wdPlayer/Index';
 import { WDPlayerController } from 'wdPlayer/Index';
+import { PlayerCommentComponent } from './PlayerCommentComponent';
+import { PlayerTitleComponent } from './PlayerTitleComponent';
+import { PlayerVideoControlComponent } from './PlayerVideoControlComponent';
 
 
 @Component
 @Component
 export struct PlayerUIComponent {
 export struct PlayerUIComponent {
-  playerController: WDPlayerController = new WDPlayerController();
+  private playerController?: WDPlayerController
 
 
   build() {
   build() {
+    Column() {
+      PlayerTitleComponent()
+      Blank()
+      // PlayerCommentComponent().layoutWeight(1)
+      PlayerVideoControlComponent({ playerController: this.playerController })
+    }
+    .height('100%')
+    .width('100%')
+
   }
   }
 }
 }

@@ -8,7 +8,7 @@ import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
 
 
 @Component
 @Component
 export struct PlayerVideoControlComponent {
 export struct PlayerVideoControlComponent {
-  playerController: WDPlayerController = new WDPlayerController();
+  private playerController?: WDPlayerController
   @Consume liveDetailsBean: LiveDetailsBean
   @Consume liveDetailsBean: LiveDetailsBean
   @Consume liveRoomDataBean: LiveRoomDataBean
   @Consume liveRoomDataBean: LiveRoomDataBean
   //菜单键是否可见
   //菜单键是否可见
@@ -21,12 +21,16 @@ export struct PlayerVideoControlComponent {
   @State isPlayStatus: boolean = true
   @State isPlayStatus: boolean = true
 
 
   aboutToAppear(): void {
   aboutToAppear(): void {
-    //播放进度监听
-    this.playerController.onTimeUpdate = (position: number, duration: number) => {
-      this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
-      this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
-      this.progressVal = Math.floor(position * 100 / duration);
+    if (this.playerController) {
+      //播放进度监听
+      this.playerController.onTimeUpdate = (position: number, duration: number) => {
+        console.log('onTimeUpdate===', position, duration)
+        this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
+        this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
+        this.progressVal = Math.floor(position * 100 / duration);
+      }
     }
     }
+
   }
   }
 
 
   build() {
   build() {
@@ -90,10 +94,10 @@ export struct PlayerVideoControlComponent {
       .onClick(() => {
       .onClick(() => {
         if (this.isPlayStatus) {
         if (this.isPlayStatus) {
           this.isPlayStatus = false
           this.isPlayStatus = false
-          this.playerController.pause()
+          this.playerController?.pause()
         } else {
         } else {
           this.isPlayStatus = true
           this.isPlayStatus = true
-          this.playerController.play()
+          this.playerController?.play()
         }
         }
       })
       })
   }
   }
@@ -108,15 +112,16 @@ export struct PlayerVideoControlComponent {
       .blockSize({
       .blockSize({
         width: 18,
         width: 18,
         height: 12
         height: 12
-      })// .blockStyle({
-        //   type: SliderBlockType.IMAGE,
-        //   image: $r('app.media.ic_player_block')
-        // })
-      .blockColor(Color.White)
+      })
       .trackColor('#4DFFFFFF')
       .trackColor('#4DFFFFFF')
       .selectedColor('#FFED2800')
       .selectedColor('#FFED2800')
+      .trackThickness(2)
+      .blockStyle({
+        type: SliderBlockType.IMAGE,
+        image: $r('app.media.ic_player_block')
+      })
+      .blockSize({ width: 18, height: 12 })
       .height(14)
       .height(14)
-      .trackThickness(1)
       .layoutWeight(1)
       .layoutWeight(1)
       .margin({
       .margin({
         left: 8,
         left: 8,