Showing
4 changed files
with
60 additions
and
21 deletions
| @@ -7,10 +7,9 @@ import mediaquery from '@ohos.mediaquery'; | @@ -7,10 +7,9 @@ import mediaquery from '@ohos.mediaquery'; | ||
| 7 | import { Logger, WindowModel } from 'wdKit/Index'; | 7 | import { Logger, WindowModel } from 'wdKit/Index'; |
| 8 | import { router, window } from '@kit.ArkUI'; | 8 | import { router, window } from '@kit.ArkUI'; |
| 9 | import { WDAliPlayerController } from 'wdPlayer/Index'; | 9 | import { WDAliPlayerController } from 'wdPlayer/Index'; |
| 10 | -import { LiveEmptyComponent, LiveOperRowListView } from 'wdComponent'; | 10 | +import { LiveOperRowListView } from 'wdComponent'; |
| 11 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; | 11 | import { publishCommentModel } from 'wdComponent/src/main/ets/components/comment/model/PublishCommentModel'; |
| 12 | import { TrackConstants, TrackingContent, TrackParamConvert } from 'wdTracking/Index'; | 12 | import { TrackConstants, TrackingContent, TrackParamConvert } from 'wdTracking/Index'; |
| 13 | -import { LiveDetailPageLogic } from '../viewModel/LiveDetailPageLogic'; | ||
| 14 | 13 | ||
| 15 | let TAG: string = 'DetailPlayLivePage'; | 14 | let TAG: string = 'DetailPlayLivePage'; |
| 16 | 15 | ||
| @@ -57,7 +56,6 @@ export struct DetailPlayLivePage { | @@ -57,7 +56,6 @@ export struct DetailPlayLivePage { | ||
| 57 | this.getLiveDetails() | 56 | this.getLiveDetails() |
| 58 | this.getLiveRoomData() | 57 | this.getLiveRoomData() |
| 59 | 58 | ||
| 60 | - console.error(TAG, 'this.publishCommentModel', this.publishCommentModel.targetId) | ||
| 61 | } | 59 | } |
| 62 | 60 | ||
| 63 | async aboutToDisappear() { | 61 | async aboutToDisappear() { |
| @@ -306,12 +306,13 @@ export struct PlayUIComponent { | @@ -306,12 +306,13 @@ export struct PlayUIComponent { | ||
| 306 | .width(24) | 306 | .width(24) |
| 307 | .height(24) | 307 | .height(24) |
| 308 | .onClick(() => { | 308 | .onClick(() => { |
| 309 | + | ||
| 310 | + WindowModel.shared.setSpecificSystemBarEnabled(false) | ||
| 311 | + | ||
| 309 | this.displayDirection = | 312 | this.displayDirection = |
| 310 | this.displayDirection == DisplayDirection.VERTICAL ? DisplayDirection.VIDEO_HORIZONTAL : | 313 | this.displayDirection == DisplayDirection.VERTICAL ? DisplayDirection.VIDEO_HORIZONTAL : |
| 311 | DisplayDirection.VERTICAL | 314 | DisplayDirection.VERTICAL |
| 312 | 315 | ||
| 313 | - WindowModel.shared.setSpecificSystemBarEnabled(false) | ||
| 314 | - | ||
| 315 | WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ? | 316 | WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ? |
| 316 | window.Orientation.PORTRAIT : | 317 | window.Orientation.PORTRAIT : |
| 317 | window.Orientation.LANDSCAPE_INVERTED) | 318 | window.Orientation.LANDSCAPE_INVERTED) |
| @@ -35,6 +35,17 @@ export struct TopPlayComponent { | @@ -35,6 +35,17 @@ export struct TopPlayComponent { | ||
| 35 | private playUrl: string = "" | 35 | private playUrl: string = "" |
| 36 | private xComponentIsLoaded: boolean = false | 36 | private xComponentIsLoaded: boolean = false |
| 37 | @Consume liveDetailPageLogic: LiveDetailPageLogic | 37 | @Consume liveDetailPageLogic: LiveDetailPageLogic |
| 38 | + @Consume @Watch('pageShowChange') pageShow: number | ||
| 39 | + @Consume @Watch('pageHideChange') pageHide: number | ||
| 40 | + init: boolean = false | ||
| 41 | + | ||
| 42 | + pageShowChange() { | ||
| 43 | + this.playerController?.play() | ||
| 44 | + } | ||
| 45 | + | ||
| 46 | + pageHideChange() { | ||
| 47 | + this.playerController?.pause() | ||
| 48 | + } | ||
| 38 | 49 | ||
| 39 | aboutToAppear(): void { | 50 | aboutToAppear(): void { |
| 40 | if (this.playerController) { | 51 | if (this.playerController) { |
| @@ -71,7 +82,7 @@ export struct TopPlayComponent { | @@ -71,7 +82,7 @@ export struct TopPlayComponent { | ||
| 71 | updateData() { | 82 | updateData() { |
| 72 | 83 | ||
| 73 | // 检测垫片 | 84 | // 检测垫片 |
| 74 | - if (this.liveDetailPageLogic.showPad){ | 85 | + if (this.liveDetailPageLogic.showPad) { |
| 75 | this.isHideLoading = true | 86 | this.isHideLoading = true |
| 76 | this.isWait = true | 87 | this.isWait = true |
| 77 | this.previewUrl = this.liveDetailPageLogic.imgUrl | 88 | this.previewUrl = this.liveDetailPageLogic.imgUrl |
| @@ -43,22 +43,26 @@ export struct WDPlayerRenderLiveView { | @@ -43,22 +43,26 @@ export struct WDPlayerRenderLiveView { | ||
| 43 | private playerController?: WDAliPlayerController; | 43 | private playerController?: WDAliPlayerController; |
| 44 | private xComponentController: XComponentController = new XComponentController(); | 44 | private xComponentController: XComponentController = new XComponentController(); |
| 45 | onLoad?: ((event?: object) => void); | 45 | onLoad?: ((event?: object) => void); |
| 46 | - videoWidth: number = 0 | ||
| 47 | - videoHeight: number = 0 | 46 | + @State videoWidth: number = 0 |
| 47 | + @State videoHeight: number = 0 | ||
| 48 | + @State videoRatio: number = 16 / 9 | ||
| 48 | @State selfSize: Size = new Size('100%', '100%'); | 49 | @State selfSize: Size = new Size('100%', '100%'); |
| 49 | private insId: string = "WDPlayerRenderLiveView" + insIndex; | 50 | private insId: string = "WDPlayerRenderLiveView" + insIndex; |
| 50 | 51 | ||
| 52 | + | ||
| 53 | + | ||
| 51 | aboutToAppear() { | 54 | aboutToAppear() { |
| 52 | MGPlayRenderViewIns.add(); | 55 | MGPlayRenderViewIns.add(); |
| 53 | insIndex++; | 56 | insIndex++; |
| 54 | if (!this.playerController) { | 57 | if (!this.playerController) { |
| 55 | return | 58 | return |
| 56 | } | 59 | } |
| 57 | - | 60 | + //this.init = true |
| 58 | this.playerController.onVideoSizeChange = (width: number, height: number) => { | 61 | this.playerController.onVideoSizeChange = (width: number, height: number) => { |
| 59 | // console.log(`WDPlayerRenderView onVideoSizeChange width:${width} videoTop:${height}`) | 62 | // console.log(`WDPlayerRenderView onVideoSizeChange width:${width} videoTop:${height}`) |
| 60 | this.videoWidth = width; | 63 | this.videoWidth = width; |
| 61 | this.videoHeight = height; | 64 | this.videoHeight = height; |
| 65 | + this.videoRatio = width / height | ||
| 62 | this.updateLayout() | 66 | this.updateLayout() |
| 63 | } | 67 | } |
| 64 | } | 68 | } |
| @@ -80,9 +84,9 @@ export struct WDPlayerRenderLiveView { | @@ -80,9 +84,9 @@ export struct WDPlayerRenderLiveView { | ||
| 80 | .onLoad(async (event) => { | 84 | .onLoad(async (event) => { |
| 81 | Logger.info(TAG, 'onLoad') | 85 | Logger.info(TAG, 'onLoad') |
| 82 | let surfaceId = this.xComponentController.getXComponentSurfaceId() | 86 | let surfaceId = this.xComponentController.getXComponentSurfaceId() |
| 83 | - this.xComponentController.setXComponentSurfaceSize({ | ||
| 84 | - surfaceWidth: 1920, | ||
| 85 | - surfaceHeight: 720 | 87 | + this.xComponentController.setXComponentSurfaceRect({ |
| 88 | + surfaceWidth: this.videoWidth, | ||
| 89 | + surfaceHeight: this.videoHeight | ||
| 86 | }); | 90 | }); |
| 87 | if (enableAliPlayer) { | 91 | if (enableAliPlayer) { |
| 88 | this.playerController?.setSurfaceId(this.insId) | 92 | this.playerController?.setSurfaceId(this.insId) |
| @@ -93,8 +97,8 @@ export struct WDPlayerRenderLiveView { | @@ -93,8 +97,8 @@ export struct WDPlayerRenderLiveView { | ||
| 93 | this.onLoad(event) | 97 | this.onLoad(event) |
| 94 | } | 98 | } |
| 95 | }) | 99 | }) |
| 96 | - .width(this.selfSize.width) | ||
| 97 | - .height(this.selfSize.height) | 100 | + // .width(this.selfSize.width) |
| 101 | + // .height(this.selfSize.height) | ||
| 98 | } | 102 | } |
| 99 | .id(this.insId) | 103 | .id(this.insId) |
| 100 | .onAreaChange(() => { | 104 | .onAreaChange(() => { |
| @@ -107,15 +111,40 @@ export struct WDPlayerRenderLiveView { | @@ -107,15 +111,40 @@ export struct WDPlayerRenderLiveView { | ||
| 107 | } | 111 | } |
| 108 | 112 | ||
| 109 | updateLayout() { | 113 | updateLayout() { |
| 114 | + | ||
| 110 | let info = componentUtils.getRectangleById(this.insId); | 115 | let info = componentUtils.getRectangleById(this.insId); |
| 111 | - if (info.size.width > 0 && info.size.height > 0 && this.videoHeight > 0 && this.videoWidth > 0) { | ||
| 112 | - if (info.size.width / info.size.height > this.videoWidth / this.videoHeight) { | ||
| 113 | - let scale = info.size.height / this.videoHeight; | ||
| 114 | - this.selfSize = new Size((this.videoWidth * scale / info.size.width) * 100 + "%", '100%'); | ||
| 115 | - } else { | ||
| 116 | - let scale = info.size.width / this.videoWidth; | ||
| 117 | - this.selfSize = new Size('100%', (this.videoHeight * scale / info.size.height) * 100 + "%"); | 116 | + Logger.debug(TAG, "播放器区域变化: " + JSON.stringify(info)) |
| 117 | + | ||
| 118 | + Logger.debug(TAG, "xComponent rect: " + JSON.stringify(this.xComponentController.getXComponentSurfaceRect())) | ||
| 119 | + | ||
| 120 | + if (info.size.width > 0 && info.size.height > 0) { | ||
| 121 | + | ||
| 122 | + // 竖屏 | ||
| 123 | + if (this.videoHeight > 0 && this.videoWidth > 0 && this.videoWidth < this.videoHeight) { | ||
| 124 | + let ratio = this.videoWidth / this.videoHeight | ||
| 125 | + const height = info.size.width / ratio | ||
| 126 | + | ||
| 127 | + // 竖屏,缩放高度大于 视频区域高度 | ||
| 128 | + if (height > info.size.height) { | ||
| 129 | + | ||
| 130 | + Logger.debug(TAG, "ratio = " + ratio + " ==> new height = " + height) | ||
| 131 | + | ||
| 132 | + Logger.debug(TAG, "高度固定,求宽度: " + info.size.height * ratio) | ||
| 133 | + | ||
| 134 | + this.xComponentController.setXComponentSurfaceRect({ | ||
| 135 | + surfaceWidth: info.size.height * ratio, | ||
| 136 | + surfaceHeight: info.size.height | ||
| 137 | + }); | ||
| 138 | + return | ||
| 139 | + } | ||
| 118 | } | 140 | } |
| 141 | + | ||
| 142 | + this.xComponentController.setXComponentSurfaceRect({ | ||
| 143 | + surfaceWidth: info.size.width, | ||
| 144 | + surfaceHeight: info.size.height | ||
| 145 | + }); | ||
| 119 | } | 146 | } |
| 120 | } | 147 | } |
| 148 | + | ||
| 149 | + | ||
| 121 | } | 150 | } |
-
Please register or login to post a comment