修复视频全屏变形

@@ -16,7 +16,8 @@ import { CommentDialogView } from '../view/CommentDialogView';
 import { window } from '@kit.ArkUI';
 import { PlayerFullScreenView } from '../view/PlayerFullScreenView';
 import { OperRowListView, publishCommentModel } from 'wdComponent/Index';
-import {ParamType,TrackConstants } from 'wdTracking/Index';
+import { ParamType, TrackConstants } from 'wdTracking/Index';
+
 const TAG = 'DetailPlayShortVideoPage';
 
 /**
@@ -49,6 +50,8 @@ export struct DetailPlayShortVideoPage {
   @Consume showComment: boolean // 是否显示底部评论，首页视频频道传false
   @State imageVisible: boolean = true
   @State ratio: number = 16 / 9
+  @State playerWidth: number | string = px2vp(this.windowWidth)
+  @State playerHeight: number | string = px2vp(this.windowHeight)
   pageParam: ParamType = {}
   PageName: string = ''
 
@@ -93,7 +96,8 @@ export struct DetailPlayShortVideoPage {
     } else {
       this.queryNewsInfoOfUser()
       if (!this.playerController.getPlayer()) {
-        this.playerController.firstPlay(this.contentDetailData?.videoInfo[0]?.videoUrl || '',this.PageName,this.PageName,this.pageParam);
+        this.playerController.firstPlay(this.contentDetailData?.videoInfo[0]?.videoUrl || '', this.PageName,
+          this.PageName, this.pageParam);
       } else {
         await this.playerController.play()
         this.imageVisible = false
@@ -169,34 +173,62 @@ export struct DetailPlayShortVideoPage {
 
     this.contentTrackingDict()
   }
-  contentTrackingDict(){
+
+  contentTrackingDict() {
     this.pageParam = {
       'contentType': `${this.contentDetailData.newsType}`,
       'contentId': `${this.contentDetailData.newsId}`,
       'contentName': `${this.contentDetailData.newsTitle || ''}`,
     }
-    if(this.contentDetailData.newsType == 1) {
+    if (this.contentDetailData.newsType == 1) {
       this.PageName = TrackConstants.PageName.VideoDetail // 点播
-    } else if(this.contentDetailData.newsType == 2) {
+    } else if (this.contentDetailData.newsType == 2) {
       this.PageName = TrackConstants.PageName.Live_Detail // 直播
-    } else if(this.contentDetailData.newsType == 5) {
+    } else if (this.contentDetailData.newsType == 5) {
       this.PageName = TrackConstants.PageName.Summary_Detail // 专题详情页
-    } else if(this.contentDetailData.newsType == 8) {
+    } else if (this.contentDetailData.newsType == 8) {
       this.PageName = TrackConstants.PageName.Article_Detail // 图文详情页
-    } else if(this.contentDetailData.newsType == 9) {
+    } else if (this.contentDetailData.newsType == 9) {
       this.PageName = TrackConstants.PageName.Atlas_Detail // 图集详情页
-    } else if(this.contentDetailData.newsType == 14 || this.contentDetailData.newsType == 15) {
+    } else if (this.contentDetailData.newsType == 14 || this.contentDetailData.newsType == 15) {
       this.PageName = TrackConstants.PageName.DynamicDetail // 动态图文/动态视频
     }
-    console.log('视频详情页',JSON.stringify(this.pageParam))
-    console.log('视频详情页2',JSON.stringify(this.PageName))
+    console.log('视频详情页', JSON.stringify(this.pageParam))
+    console.log('视频详情页2', JSON.stringify(this.PageName))
   }
+
   async aboutToDisappear(): Promise<void> {
     console.log(TAG, 'aboutToDisappear', this.index)
     await this.playerController?.pause()
     await this.playerController?.release();
   }
 
+  /**
+   * 屏幕变化动态计算播放器宽高
+   */
+  calculatePlayerRect() {
+    let width = this.windowWidth
+    let height = this.windowHeight
+    if (this.displayDirection === DisplayDirection.VERTICAL) {
+      width = this.windowWidth
+      height = this.windowHeight
+    } else {
+      width = this.windowHeight
+      height = this.windowWidth
+    }
+    // 视频宽高比屏幕大，则宽度撑满
+    if (this.ratio > width / height) {
+      this.playerWidth = '100%'
+      this.playerHeight = px2vp(width / this.ratio)
+    } else {
+      // 否则高度撑满
+      this.playerHeight = '100%'
+      this.playerWidth = px2vp(height * this.ratio)
+    }
+    console.log('calculatePlayerRect=====', this.windowWidth, this.windowHeight)
+
+  }
+
   build() {
     Stack({ alignContent: Alignment.Top }) {
       Column() {
@@ -248,6 +280,7 @@ export struct DetailPlayShortVideoPage {
     }
     .height('100%')
     .width('100%')
+    .onAreaChange(() => this.calculatePlayerRect())
 
   }
 
@@ -261,9 +294,9 @@ export struct DetailPlayShortVideoPage {
     Image(this.contentDetailData?.firstFrameImageUri)
       .width('100%')
       .height(this.windowWidth / this.ratio + 'px')
-      .opacity(this.imageVisible ? 1 : 0)
+      .opacity(this.imageVisible ? 0.8 : 0)
       .animation({
-        duration: 500, curve: Curve.EaseInOut
+        duration: 350, curve: Curve.EaseInOut
       })
   }
 
@@ -274,12 +307,13 @@ export struct DetailPlayShortVideoPage {
         playerController: this.playerController,
         onLoad: async () => {
           if (this.contentDetailData != null && this.contentDetailData?.videoInfo[0] != null) {
-            this.playerController.firstPlay(this.contentDetailData.videoInfo[0].videoUrl,this.PageName,this.PageName,this.pageParam);
+            this.playerController.firstPlay(this.contentDetailData.videoInfo[0].videoUrl, this.PageName, this.PageName,
+              this.pageParam);
           }
         }
       })
-        .width(this.displayDirection === DisplayDirection.VERTICAL ? '100%' : this.windowWidth * 16 / 9 + 'px')
-        .height(this.displayDirection === DisplayDirection.VERTICAL ? this.windowWidth / this.ratio + 'px' : '100%')
+        .width(this.playerWidth)
+        .height(this.playerHeight)
 
       this.playerCoverBuilder()