ref |> 解决视频详情页评论弹框顶起视频区域问题

@@ -40,7 +40,7 @@ export struct DetailPlayShortVideoPage {
   @Provide isOpenDetail: boolean = false // 查看详情按钮点击
   @Provide isOpenDetail: boolean = false // 查看详情按钮点击
   @Provide isDragging: boolean = false // 拖动时间进度条
   @Provide isDragging: boolean = false // 拖动时间进度条
   @Provide status: number = PlayerConstants.STATUS_START;
   @Provide status: number = PlayerConstants.STATUS_START;
-  @Consume showCommentList: boolean
+  @Consume @Watch("showCommentListChanged") showCommentList: boolean
   @Consume displayDirection: DisplayDirection
   @Consume displayDirection: DisplayDirection
   @Consume @Watch('videoStatusChange') switchVideoStatus: boolean
   @Consume @Watch('videoStatusChange') switchVideoStatus: boolean
   @Consume @Watch('pageShowChange') pageShow: number
   @Consume @Watch('pageShowChange') pageShow: number
@@ -229,6 +229,15 @@ export struct DetailPlayShortVideoPage {
 
 
   }
   }
 
 
+  showCommentListChanged() {
+    if (this.showCommentList) {
+      this.playerWidth = px2vp(this.windowWidth)
+      this.playerHeight = px2vp(this.windowWidth) / (16 / 9.0)
+    } else {
+      this.calculatePlayerRect()
+    }
+  }
+
   build() {
   build() {
     Stack({ alignContent: Alignment.Top }) {
     Stack({ alignContent: Alignment.Top }) {
       Column() {
       Column() {
@@ -305,7 +314,7 @@ export struct DetailPlayShortVideoPage {
 
 
   @Builder
   @Builder
   playerViewBuilder() {
   playerViewBuilder() {
-    Stack() {
+    Stack({alignContent: this.showCommentList && this.index === this.currentIndex ? Alignment.Top : Alignment.Center}) {
       WDPlayerRenderView({
       WDPlayerRenderView({
         playerController: this.playerController,
         playerController: this.playerController,
         onLoad: async () => {
         onLoad: async () => {
@@ -335,7 +344,6 @@ export struct DetailPlayShortVideoPage {
     }
     }
     .width('100%')
     .width('100%')
     .height('100%')
     .height('100%')
-    .align(Alignment.Center)
 
 
   }
   }
 
 

@@ -103,6 +103,7 @@ export class WDPlayerController {
         case AVPlayerStatus.PLAYING:
         case AVPlayerStatus.PLAYING:
           this.setBright();
           this.setBright();
           this.status = PlayerConstants.STATUS_START;
           this.status = PlayerConstants.STATUS_START;
+          this.avPlayer!.videoScaleType = media.VideoScaleType.VIDEO_SCALE_TYPE_FIT
           this.watchStatus();
           this.watchStatus();
           break;
           break;
         case AVPlayerStatus.PAUSED:
         case AVPlayerStatus.PAUSED:

 import componentUtils from '@ohos.arkui.componentUtils';
 import componentUtils from '@ohos.arkui.componentUtils';
 import { WDPlayerController } from '../controller/WDPlayerController'
 import { WDPlayerController } from '../controller/WDPlayerController'
-import { WindowModel } from 'wdKit';
-import { Logger } from '../utils/Logger';
+import { Logger, WindowModel } from 'wdKit';
 import { enableAliPlayer } from '../utils/GlobalSetting';
 import { enableAliPlayer } from '../utils/GlobalSetting';
+import json from '@ohos.util.json';
+import { JSON } from '@kit.ArkTS';
 
 
 class Size {
 class Size {
   width: Length = "100%";
   width: Length = "100%";
@@ -82,12 +83,17 @@ export struct WDPlayerRenderView {
         libraryname: enableAliPlayer && this.enableAliPlayer ? "premierlibrary" : undefined,
         libraryname: enableAliPlayer && this.enableAliPlayer ? "premierlibrary" : undefined,
         controller: this.xComponentController
         controller: this.xComponentController
       })
       })
+        .id(this.insId)
         .onLoad(async (event) => {
         .onLoad(async (event) => {
           Logger.info(TAG, 'onLoad')
           Logger.info(TAG, 'onLoad')
-          this.xComponentController.setXComponentSurfaceSize({
-            surfaceWidth: 1920,
-            surfaceHeight: 1080
-          });
+
+          if (this.videoHeight > 0 && this.videoWidth > 0) {
+            this.xComponentController.setXComponentSurfaceRect({
+              surfaceWidth: this.videoWidth,
+              surfaceHeight: this.videoHeight
+            });
+          }
+
           if (enableAliPlayer && this.enableAliPlayer) {
           if (enableAliPlayer && this.enableAliPlayer) {
             this.playerController?.setSurfaceId(this.insId)
             this.playerController?.setSurfaceId(this.insId)
           } else {
           } else {
@@ -98,8 +104,8 @@ export struct WDPlayerRenderView {
           }
           }
         })
         })
         .zIndex(1000)
         .zIndex(1000)
-        .width(this.selfSize.width)
-        .height(this.selfSize.height)
+        // .width(this.selfSize.width)
+        // .height(this.selfSize.height)
     }
     }
     .onAreaChange(() => {
     .onAreaChange(() => {
       this.updateLayout()
       this.updateLayout()
@@ -108,19 +114,55 @@ export struct WDPlayerRenderView {
     .justifyContent(FlexAlign.Center)
     .justifyContent(FlexAlign.Center)
     .height('100%')
     .height('100%')
     .width('100%')
     .width('100%')
-    .align(this.videoWidth > this.videoHeight ? Alignment.Top : Alignment.Center)
+    // .align(this.videoWidth > this.videoHeight ? Alignment.Top : Alignment.Center)
+    .align(Alignment.Center)
   }
   }
 
 
   updateLayout() {
   updateLayout() {
+
     let info = componentUtils.getRectangleById(this.insId);
     let info = componentUtils.getRectangleById(this.insId);
-    if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
-      if (info.size.width / info.size.height > this.videoWidth / this.videoHeight) {
-        let scale = info.size.height / this.videoHeight;
-        this.selfSize = new Size((this.videoWidth * scale / info.size.width) * 100 + "%", '100%');
-      } else {
-        let scale = info.size.width / this.videoWidth;
-        this.selfSize = new Size('100%', (this.videoHeight * scale / info.size.height) * 100 + "%");
+    Logger.debug(TAG, "播放器区域变化： " + JSON.stringify(info))
+
+    Logger.debug(TAG, "xComponent rect: " + JSON.stringify(this.xComponentController.getXComponentSurfaceRect()))
+
+    if (info.size.width > 0 && info.size.height > 0) {
+
+      // 竖屏
+      if (this.videoHeight > 0 && this.videoWidth > 0 && this.videoWidth < this.videoHeight) {
+        let ratio = this.videoWidth / this.videoHeight
+        const height = info.size.width / ratio
+
+        // 竖屏，缩放高度大于 视频区域高度
+        if (height > info.size.height) {
+
+          Logger.debug(TAG, "ratio = " + ratio + " ==> new height = " + height)
+
+          Logger.debug(TAG, "高度固定，求宽度: " + info.size.height * ratio)
+
+          this.xComponentController.setXComponentSurfaceRect({
+            surfaceWidth: info.size.height * ratio,
+            surfaceHeight: info.size.height
+          });
+          return
+        }
       }
       }
+
+      this.xComponentController.setXComponentSurfaceRect({
+        surfaceWidth: info.size.width,
+        surfaceHeight: info.size.height
+      });
     }
     }
+
+
+
+    // if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) {
+    //   if (info.size.width / info.size.height > this.videoWidth / this.videoHeight) {
+    //     let scale = info.size.height / this.videoHeight;
+    //     this.selfSize = new Size((this.videoWidth * scale / info.size.width) * 100 + "%", '100%');
+    //   } else {
+    //     let scale = info.size.width / this.videoWidth;
+    //     this.selfSize = new Size('100%', (this.videoHeight * scale / info.size.height) * 100 + "%");
+    //   }
+    // }
   }
   }
 }
 }