feat:优化视频详情页转屏逻辑

wangliang_wd
Commit 76745b52292333946c4070a87c84cbe4ae1f7179 76745b52 1 parent 653ae9ac
Showing 5 changed files with 57 additions and 19 deletions
sight_harmony/commons/wdKit/src/main/ets/utils/EmitterEventId.ts
sight_harmony/features/wdDetailPlayLive/src/main/ets/pages/DetailPlayLivePage.ets
sight_harmony/features/wdDetailPlayLive/src/main/ets/widgets/details/video/PlayUIComponent.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerFullScreenView.ets
--- a/sight_harmony/commons/wdKit/src/main/ets/utils/EmitterEventId.ts
View file @76745b5
+++ b/sight_harmony/commons/wdKit/src/main/ets/utils/EmitterEventId.ts
View file @76745b5
@@ -52,5 +52,10 @@ export enum EmitterEventId {
   // 图文详情页点赞状态
   LIKE_CHANGE_STATUS = 15,
+  // 直播，回看全屏
+  live_FULL_SCREEN = 16,
+
+  // 直播，回看半屏
+  live_half_SCREEN = 17,
 }
--- a/sight_harmony/features/wdDetailPlayLive/src/main/ets/pages/DetailPlayLivePage.ets
View file @76745b5
+++ b/sight_harmony/features/wdDetailPlayLive/src/main/ets/pages/DetailPlayLivePage.ets
View file @76745b5
@@ -4,7 +4,7 @@ import { TabComponent } from '../widgets/details/TabComponent';
 import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
 import { DisplayDirection } from 'wdConstant/Index';
 import mediaquery from '@ohos.mediaquery';
-import { CustomToast, Logger, WindowModel } from 'wdKit/Index';
+import { CustomToast, EmitterEventId, EmitterUtils, Logger, WindowModel } from 'wdKit/Index';
 import { display, router, window } from '@kit.ArkUI';
 import { WDAliPlayerController } from 'wdPlayer/Index';
 import { LiveOperRowListView } from 'wdComponent';
@@ -51,6 +51,8 @@ export struct DetailPlayLivePage {
   @Consume liveDetailPageLogic: LiveDetailPageLogic
   @State topPlayHeight:number = this.getTopPlayHeight()
   @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
+  @State isPORTRAIT: boolean = true
+  @State half_SCREEN: boolean = true
   async aboutToAppear(): Promise<void> {
     Logger.info(TAG, `wyj-aboutToAppear`)
@@ -64,6 +66,18 @@ export struct DetailPlayLivePage {
       }
       // WindowModel.shared.setMainWindowFullScreen(this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL)
     })
+
+    EmitterUtils.receiveEvent(EmitterEventId.live_FULL_SCREEN, (str?: string) => {
+      Logger.debug(TAG, 'receiveEvent FULL_SCREEN: ' + str)
+      // 跳转指定频道场景，传参底导id、频道id
+      this.isPORTRAIT = str == '1' ?  false : true
+    })
+
+    EmitterUtils.receiveEvent(EmitterEventId.live_half_SCREEN, (str?: string) => {
+      Logger.debug(TAG, 'receiveEvent FULL_SCREEN: ' + str)
+      // 跳转指定频道场景，传参底导id、频道id
+      this.half_SCREEN = str == '1' ?  false : true
+    })
     this.getLiveDetails()
     this.getLiveRoomData()
     this.configChatRoom()
@@ -140,9 +154,9 @@ export struct DetailPlayLivePage {
   build() {
     Column() {
       TopPlayComponent({ playerController: this.playerController, isEnd: this.isEnd, lastLiveControl: this.lastLiveControl })
-        .height(this.displayDirection == DisplayDirection.VERTICAL ? this.topPlayHeight : '100%')
+        .height(this.isPORTRAIT ? this.topPlayHeight : '100%')
         .margin({
-          top: this.displayDirection == DisplayDirection.VERTICAL ? px2vp(this.topSafeHeight) : 0
+          top: this.half_SCREEN ? px2vp(this.topSafeHeight) : 0
         })
       TabComponent({
--- a/sight_harmony/features/wdDetailPlayLive/src/main/ets/widgets/details/video/PlayUIComponent.ets
View file @76745b5
+++ b/sight_harmony/features/wdDetailPlayLive/src/main/ets/widgets/details/video/PlayUIComponent.ets
View file @76745b5
 import { window } from '@kit.ArkUI';
 import lottie from '@ohos/lottie';
-import { NumberFormatterUtils, StringUtils, WindowModel } from 'wdKit/Index';
+import { EmitterEventId, EmitterUtils, NumberFormatterUtils, StringUtils, WindowModel } from 'wdKit/Index';
 import { DateFormatUtil, PlayerConstants, WDAliPlayerController } from 'wdPlayer/Index';
 import { ContentDetailDTO, LiveRoomDataBean } from 'wdBean/Index';
 import { DisplayDirection } from 'wdConstant/Index';
@@ -345,20 +345,21 @@ export struct PlayUIComponent {
           .width(24)
           .height(24)
           .onClick(() => {
-            clearTimeout(this.time)
-            WindowModel.shared.setSpecificSystemBarEnabled(false)
+            // this.isMenuVisible = false
             this.displayDirection =
               this.displayDirection == DisplayDirection.VERTICAL ? DisplayDirection.VIDEO_HORIZONTAL :
               DisplayDirection.VERTICAL
-
             WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
             window.Orientation.PORTRAIT :
             window.Orientation.LANDSCAPE).then(()=>{
-              this.onChangeMenuVisible()
+              WindowModel.shared.setSpecificSystemBarEnabled(false)
+              EmitterUtils.sendEvent(EmitterEventId.live_half_SCREEN, 1)
             })
-
-
+            let timer = setTimeout(() => {
+              EmitterUtils.sendEvent(EmitterEventId.live_FULL_SCREEN, 1)
+              clearTimeout(timer)
+            }, 200)
           })
           .visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
       }
@@ -454,13 +455,17 @@ export struct PlayUIComponent {
   }
   quitFullScreen() {
-    clearTimeout(this.time)
+    // this.isMenuVisible = false
     this.displayDirection = DisplayDirection.VERTICAL
     WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
     window.Orientation.PORTRAIT :
     window.Orientation.LANDSCAPE).then(()=>{
-      this.onChangeMenuVisible()
+      WindowModel.shared.setSpecificSystemBarEnabled(true)
+      EmitterUtils.sendEvent(EmitterEventId.live_FULL_SCREEN, 0)
     })
-    WindowModel.shared.setSpecificSystemBarEnabled(true)
+    let timer = setTimeout(() => {
+      EmitterUtils.sendEvent(EmitterEventId.live_half_SCREEN, 0)
+      clearTimeout(timer)
+    }, 200)
   }
 }
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
View file @76745b5
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/pages/DetailPlayShortVideoPage.ets
View file @76745b5
@@ -33,7 +33,7 @@ export struct DetailPlayShortVideoPage {
   @State playerController: WDPlayerController = new WDPlayerController();
   @Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
   @Provide interactData: InteractDataDTO = {} as InteractDataDTO
-  @Provide isFullScreen: boolean = false;
+  @State   isFullScreen: boolean = false;
   @Provide progressVal: number = 0;
   @Provide videoLandScape: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
   @Provide newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
@@ -42,7 +42,7 @@ export struct DetailPlayShortVideoPage {
   @Provide isDragging: boolean = false // 拖动时间进度条
   @Provide status: number = PlayerConstants.STATUS_START;
   @Consume @Watch("showCommentListChanged") showCommentList: boolean
-  @Consume displayDirection: DisplayDirection
+  @Consume @Watch('displayDirectionChange') displayDirection: DisplayDirection
   @Consume @Watch('videoStatusChange') switchVideoStatus: boolean
   @State isPlay: boolean = true // 视频手动播放暂停
   @Consume @Watch('pageShowChange') pageShow: number
@@ -75,6 +75,16 @@ export struct DetailPlayShortVideoPage {
   }
   /**
+   * 页面转屏参数变化
+   */
+  displayDirectionChange(){
+    let timer = setTimeout(() => {
+      this.isFullScreen = this.displayDirection === DisplayDirection.VERTICAL ?false:true
+      clearTimeout(timer)
+    }, this.displayDirection === DisplayDirection.VERTICAL ?200:0)
+  }
+
+  /**
    * 页面显示重查用户关注、点赞等信息
    */
   async pageShowChange() {
@@ -368,7 +378,7 @@ export struct DetailPlayShortVideoPage {
         })
         // 显示评论且非全屏模式（视频频道无评论showComment=false）
-        if (this.showComment && this.displayDirection === DisplayDirection.VERTICAL) {
+        if (this.showComment && !this.isFullScreen) {
           OperRowListView({
             pageComponentType: 1,
             styleType: 3,
@@ -392,8 +402,12 @@ export struct DetailPlayShortVideoPage {
     .id('video-container')
     .height('100%')
     .width('100%')
-    .onAreaChange(() => this.calculatePlayerRect())
-
+    .onAreaChange(() => {
+      let timer = setTimeout(() => {
+        this.calculatePlayerRect()
+        clearTimeout(timer)
+      }, this.displayDirection === DisplayDirection.VERTICAL ?200:0)
+    })
   }
   @Builder
@@ -549,7 +563,6 @@ export struct DetailPlayShortVideoPage {
       } else {
         EmitterUtils.sendEvent(EmitterEventId.FULL_SCREEN, 1)
       }
-
     })
   }
--- a/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerFullScreenView.ets
View file @76745b5
+++ b/sight_harmony/features/wdDetailPlayShortVideo/src/main/ets/view/PlayerFullScreenView.ets
View file @76745b5
@@ -254,6 +254,7 @@ export struct PlayerFullScreenView {
             WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
             window.Orientation.PORTRAIT :
             window.Orientation.LANDSCAPE)
+
             EmitterUtils.sendEvent(EmitterEventId.FULL_SCREEN, 0)
           })
         Text(this.getTitle())