fix |> 4g网络环境，进入直播间， “正在使用非Wi-Fi网络,播放将产生流量费用” 蒙层未显示，看图

http://192.168.1.3:8080/zentao/bug-view-17108.html

Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>

@@ -49,28 +49,8 @@ export struct DetailPlayLivePage {
   @Provide banComment: boolean = true
   @State isEnd: boolean = false
   @Consume liveDetailPageLogic: LiveDetailPageLogic
-  @State toastText: ResourceStr = "这是一个非Wi-Fi环境。请注意流量消耗"
   @State topPlayHeight:number = this.getTopPlayHeight()
   @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
-  dialogToast: CustomDialogController = new CustomDialogController({
-    builder: CustomToast({
-      bgColor: 0xB3000000,
-      opacityValue: 1,
-      fontSizeValue: "25lpx",
-      lineHeightValue: "36lpx",
-      msg: this.toastText,
-      marginTop:211/2+px2vp(this.topSafeHeight)-px2vp(84/2)
-    }),
-    autoCancel: false,
-    alignment: DialogAlignment.Top,
-    customStyle: true,
-    maskColor: "#00000000"
-  })
-
-  showToastTip(msg: ResourceStr) {
-    this.toastText = msg
-    this.dialogToast.open()
-  }
 
   async aboutToAppear(): Promise<void> {
     Logger.info(TAG, `wyj-aboutToAppear`)
@@ -86,13 +66,6 @@ export struct DetailPlayLivePage {
     })
     this.getLiveDetails()
     this.getLiveRoomData()
-
-    if (this.liveDetailPageLogic.dealOrShowToast()) {
-      if(!await onlyWifiLoadVideo()){
-        this.showToastTip(this.toastText)
-      }
-    }
-
     this.configChatRoom()
   }
 

@@ -94,15 +94,24 @@ export class LiveDetailPageLogic {
     return ''
   }
 
-  dealOrShowToast(): boolean {
+  livingNeedShowNoWifiTip(): boolean {
+    if (this.liveState == 'running') {
+      if (this.contentDetailData.liveInfo.liveWay == 0) { ///直播视频
+        return true
+      }
+    }
+    return false
+  }
+
+  noLivingNeedShowNoWifiTip(): boolean {
     if (this.liveState == 'wait') {
       if (this.contentDetailData.liveInfo
         && this.contentDetailData.liveInfo.previewUrl.length > 0
         && this.contentDetailData.liveInfo.previewType == 1) { ///预告视频
-          return true
+        return true
       }
     }
-    if (this.liveState == 'running') {
+    if (this.liveState == 'end') {
       if (this.contentDetailData.liveInfo.liveWay == 0) { ///直播视频
         return true
       }

+
+@Component
+export struct NoWifiTipComponent {
+  @State toastText: ResourceStr = "正在使用非Wi-Fi网络，播放将产生流量费用"
+
+  onContinue?: () => void
+
+  aboutToAppear(): void {
+
+  }
+  aboutToDisappear(): void {
+
+  }
+
+  build() {
+    Row() {
+      Column() {
+        Column() {
+          Text(this.toastText)
+            .fontFamily('PingFang SC-Regular')
+            .fontWeight(FontWeight.Regular)
+            .fontColor('#FFFFFF')
+            .fontSize(16)
+            .lineHeight(24)
+            .textAlign(TextAlign.Center)
+        }
+
+        Column() {
+          Text("使用流量播放")
+            .fontFamily('PingFang SC-Regular')
+            .fontWeight(FontWeight.Regular)
+            .fontColor(Color.White)
+            .fontSize(14)
+            .lineHeight(20)
+            .textAlign(TextAlign.Center)
+            .margin({
+              top: 5,
+              bottom: 5,
+              left: 8,
+              right: 8
+            })
+        }
+        .border({ width: 1, color: '#4DFFFFFF', radius: 4 })
+        .height(30)
+        .alignItems(HorizontalAlign.Center)
+        .justifyContent(FlexAlign.Center)
+        .margin({
+          top: 16
+        })
+        .onClick(() => {
+          if (this.onContinue) {
+            this.onContinue()
+          }
+        })
+      }
+      .width('100%')
+      .height(64)
+    }
+    .width('100%')
+    .height('100%')
+    .alignItems(VerticalAlign.Center)
+    .justifyContent(FlexAlign.Center)
+    .backgroundColor('#222222')
+    .opacity(0.7)
+  }
+}

 import { ContentDetailDTO, LiveRoomItemBean } from 'wdBean/Index';
-import { Logger, StringUtils, WindowModel } from 'wdKit/Index';
+import { CustomToast, Logger, StringUtils, WindowModel } from 'wdKit/Index';
 import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
 import { PlayUIComponent } from './PlayUIComponent';
 import { PictureLoading } from '../../vertical/PictureLoading';
@@ -8,6 +8,8 @@ import { LiveDetailPageLogic } from '../../../viewModel/LiveDetailPageLogic';
 import { LiveEmptyComponent, WDLiveViewDefaultType } from 'wdComponent/Index';
 import { LiveMessageOptType } from 'wdBean/src/main/ets/bean/live/LiveRoomBean';
 import { window } from '@kit.ArkUI';
+import { onlyWifiLoadVideo } from 'wdComponent/src/main/ets/utils/lazyloadImg';
+import { NoWifiTipComponent } from '../../common/NoWifiTipComponent';
 
 const TAG: string = 'TopPlayComponent'
 
@@ -39,6 +41,7 @@ export struct TopPlayComponent {
   @Consume liveDetailPageLogic: LiveDetailPageLogic
   @Consume @Watch('pageShowChange') pageShow: number
   @Consume @Watch('pageHideChange') pageHide: number
+  @Consume topSafeHeight: number
   init: boolean = false
   @Prop @Watch("liveIMControlMessageChange") lastLiveControl: LiveRoomItemBean = {} as LiveRoomItemBean // IM 控制消息
   ///是否是手动点击暂停，手动暂停的，页面重新出现时，不自动恢复播放
@@ -48,6 +51,9 @@ export struct TopPlayComponent {
   @State isZDP: boolean = false // 是否折叠屏 默认false
   @State windowWidth: number = AppStorage.get<number>('windowWidth') || 0
 
+  @State showNoWifiTip: boolean = false  // 直播预告和直播回放
+  livingDialogToast?: CustomDialogController // 直播中
+
   pageShowChange() {
     if (this.manualClickPauseOrPlay) {
       return
@@ -60,7 +66,7 @@ export struct TopPlayComponent {
     this.playerController?.pause()
   }
 
-  aboutToAppear(): void {
+  aboutToAppear() {
     if (this.playerController) {
 
       this.playerController.onCanplay = () => {
@@ -85,6 +91,12 @@ export struct TopPlayComponent {
         }
 
       }
+
+      this.playerController.onFirstFrameDisplay = () => {
+        if (this.showNoWifiTip) {
+          this.playerController?.pause()
+        }
+      }
     }
     this.updateData()
 
@@ -94,6 +106,33 @@ export struct TopPlayComponent {
     // 2000折叠屏 TODO DeviceUtil 方法完善了换判断条件
     this.isZDP = this.screenWidth > 2000 ? true : false
     this.resizeWindow()
+
+    if (this.liveDetailPageLogic.livingNeedShowNoWifiTip()) {
+      this.livingDialogToast = new CustomDialogController({
+        builder: CustomToast({
+          bgColor: 0xB3000000,
+          opacityValue: 1,
+          fontSizeValue: "25lpx",
+          lineHeightValue: "36lpx",
+          msg: "正在使用非Wi-Fi网络，播放将产生流量费用",
+          marginTop:211/2+px2vp(this.topSafeHeight)-px2vp(84/2)
+        }),
+        autoCancel: false,
+        alignment: DialogAlignment.Top,
+        customStyle: true,
+        maskColor: "#00000000"
+      })
+      this.livingDialogToast.open()
+    } else if (this.liveDetailPageLogic.noLivingNeedShowNoWifiTip()) {
+      onlyWifiLoadVideo().then((onlyWifiLoadVideo) => {
+        if (!onlyWifiLoadVideo) {
+          this.showNoWifiTip = true
+          if (this.playerController?.getStatus() == PlayerConstants.STATUS_START) {
+            this.playerController?.pause()
+          }
+        }
+      })
+    }
   }
 
   resizeWindow() {
@@ -344,6 +383,16 @@ export struct TopPlayComponent {
       Visibility.None)
       .margin({top:40})
 
+      if (this.showNoWifiTip) {
+        NoWifiTipComponent({
+          onContinue: () => {
+            this.showNoWifiTip = false
+            if (this.playerController?.getStatus() == PlayerConstants.STATUS_PAUSE) {
+              this.playerController?.play()
+            }
+          }
+        })
+      }
     }
     .width('100%')
     .alignSelf(ItemAlign.Center)