直播加载中页面与通顶

@@ -60,6 +60,7 @@ export struct DetailPlayVLivePage {
         .width('100%')
         .width('100%')
         .blur(100)
         .blur(100)
         .renderFit(RenderFit.RESIZE_COVER)
         .renderFit(RenderFit.RESIZE_COVER)
+        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
       // 直播结束且无回看
       // 直播结束且无回看
       if (this.liveState === 'end' && !this.playUrl) {
       if (this.liveState === 'end' && !this.playUrl) {
         PlayerEndView()
         PlayerEndView()
@@ -75,7 +76,6 @@ export struct DetailPlayVLivePage {
             playerController: this.playerController
             playerController: this.playerController
           })
           })
         }
         }
-
         PlayerInfoComponent({
         PlayerInfoComponent({
           playerController: this.playerController,
           playerController: this.playerController,
           swiperController: this.swiperController,
           swiperController: this.swiperController,
@@ -98,7 +98,7 @@ export struct DetailPlayVLivePage {
     }
     }
     .height('100%')
     .height('100%')
     .width('100%')
     .width('100%')
-    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
+
   }
   }
 
 
   getLiveDetails() {
   getLiveDetails() {

+import { Logger } from 'wdKit';
+
+const TAG = 'PictureLoading';
+
+@Component
+export struct PictureLoading {
+  private imagePath: string = ''
+  //alt app.media.picture_loading 设计稿尺寸
+  @State imageWidth: string | number = 167
+  @State ratio: number = 167 / 60
+
+  async aboutToAppear() {
+    Logger.info(TAG, 'pictures preview')
+  }
+
+  build() {
+    Row() {
+      Image(this.imagePath)
+        .alt($r('app.media.picture_loading'))
+        .width(this.imageWidth)
+        .aspectRatio(this.ratio)
+        .objectFit(ImageFit.Fill)
+        .interpolation(ImageInterpolation.High)
+        .onComplete((event) => {
+          if (event) {
+            this.imageWidth = '100%'
+            this.ratio = event.width / event.height
+          }
+
+        })
+    }
+    .height('100%')
+    .width('100%')
+    .backgroundColor(Color.Black)
+    .justifyContent(FlexAlign.Center)
+  }
+}

 import { LiveDetailsBean } from 'wdBean/Index';
 import { LiveDetailsBean } from 'wdBean/Index';
 import { WDPlayerController, WDPlayerRenderVLiveView, WDPlayerRenderView } from 'wdPlayer/Index';
 import { WDPlayerController, WDPlayerRenderVLiveView, WDPlayerRenderView } from 'wdPlayer/Index';
+import { PictureLoading } from './PictureLoading';
 
 
 const TAG = 'PlayerComponent'
 const TAG = 'PlayerComponent'
 
 
@@ -15,6 +16,7 @@ export struct PlayerComponent {
   @State isWait: boolean = false
   @State isWait: boolean = false
   @State liveStreamType: number | null = -1
   @State liveStreamType: number | null = -1
   @State playUrl: string = ''
   @State playUrl: string = ''
+  @State isCanplay: boolean = false
 
 
   pageShowChange() {
   pageShowChange() {
     this.playerController?.play()
     this.playerController?.play()
@@ -29,6 +31,7 @@ export struct PlayerComponent {
     this.playerController.onCanplay = () => {
     this.playerController.onCanplay = () => {
       console.log('可以播放了')
       console.log('可以播放了')
       this.playerController?.play()
       this.playerController?.play()
+      this.isCanplay = true
     }
     }
   }
   }
 
 
@@ -66,9 +69,8 @@ export struct PlayerComponent {
   build() {
   build() {
     Column() {
     Column() {
       Stack() {
       Stack() {
-      
         // TODO:判断横竖屏，liveStreamType=1竖屏铺满屏幕,裁剪不拉伸，liveStreamType=0横屏正常展示
         // TODO:判断横竖屏，liveStreamType=1竖屏铺满屏幕,裁剪不拉伸，liveStreamType=0横屏正常展示
-        if (this.liveStreamType == null) {
+        if (this.liveStreamType == null || this.liveStreamType == 1) {
           WDPlayerRenderVLiveView({
           WDPlayerRenderVLiveView({
             playerController: this.playerController,
             playerController: this.playerController,
             onLoad: () => {
             onLoad: () => {
@@ -83,6 +85,8 @@ export struct PlayerComponent {
             }
             }
           }).margin({ top: 195 }).height(211)
           }).margin({ top: 195 }).height(211)
         }
         }
+
+        PictureLoading().visibility(this.isCanplay ? Visibility.None : Visibility.Visible)
       }
       }
       .height('100%')
       .height('100%')
       .width('100%')
       .width('100%')

@@ -12,7 +12,7 @@ export struct PlayerUIComponent {
     Stack() {
     Stack() {
       PlayerTitleComponent()
       PlayerTitleComponent()
       // Row() {
       // Row() {
-      //   // 全屏按钮
+      //   // 全屏与暂停按钮
       // }.layoutWeight(1)
       // }.layoutWeight(1)
 
 
 
 
@@ -21,7 +21,7 @@ export struct PlayerUIComponent {
         .animation({ duration: 500 })
         .animation({ duration: 500 })
         .position({ y: '100%' })
         .position({ y: '100%' })
         .markAnchor({ y: '100%' })
         .markAnchor({ y: '100%' })
-      
+
       PlayerVideoControlComponent({ playerController: this.playerController })
       PlayerVideoControlComponent({ playerController: this.playerController })
         .visibility(this.isShowControl ? Visibility.Visible : Visibility.Hidden)
         .visibility(this.isShowControl ? Visibility.Visible : Visibility.Hidden)
         .animation({ duration: 500 })
         .animation({ duration: 500 })

@@ -93,6 +93,7 @@ export struct WDPlayerRenderVLiveView {
         .height('100%')
         .height('100%')
         .width('100%')
         .width('100%')
         .renderFit(RenderFit.RESIZE_COVER)
         .renderFit(RenderFit.RESIZE_COVER)
+        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
     }
     }
     .id(this.insId)
     .id(this.insId)
     .onAreaChange(() => {
     .onAreaChange(() => {