Showing
3 changed files
with
76 additions
and
33 deletions
| @@ -60,9 +60,9 @@ export struct PlayerTitleComponent { | @@ -60,9 +60,9 @@ export struct PlayerTitleComponent { | ||
| 60 | if(this.playerController.onVideoSizePlayerComponentBack){ | 60 | if(this.playerController.onVideoSizePlayerComponentBack){ |
| 61 | this.playerController.onVideoSizePlayerComponentBack(2,1); | 61 | this.playerController.onVideoSizePlayerComponentBack(2,1); |
| 62 | } | 62 | } |
| 63 | - if(this.playerController.onVideoSizePlayerUIComponentMethod){ | ||
| 64 | - this.playerController.onVideoSizePlayerUIComponentMethod(2,1); | ||
| 65 | - } | 63 | + // if(this.playerController.onVideoSizePlayerUIComponentMethod){ |
| 64 | + // this.playerController.onVideoSizePlayerUIComponentMethod(2,1); | ||
| 65 | + // } | ||
| 66 | } | 66 | } |
| 67 | }) | 67 | }) |
| 68 | Text(this.contentDetailData.newsTitle || '') | 68 | Text(this.contentDetailData.newsTitle || '') |
| 1 | +import { WindowModel } from 'wdKit'; | ||
| 1 | import { WDAliPlayerController } from 'wdPlayer/Index'; | 2 | import { WDAliPlayerController } from 'wdPlayer/Index'; |
| 2 | import { PlayerCommentComponent } from './PlayerCommentComponent'; | 3 | import { PlayerCommentComponent } from './PlayerCommentComponent'; |
| 3 | import { PlayerTitleComponent } from './PlayerTitleComponent'; | 4 | import { PlayerTitleComponent } from './PlayerTitleComponent'; |
| 4 | import { PlayerVideoControlComponent } from './PlayerVideoControlComponent'; | 5 | import { PlayerVideoControlComponent } from './PlayerVideoControlComponent'; |
| 6 | +import { window } from '@kit.ArkUI'; | ||
| 7 | +import { DisplayDirection } from 'wdConstant'; | ||
| 5 | 8 | ||
| 6 | /** | 9 | /** |
| 7 | * 沉浸直播 --- 横滑展示组件 | 10 | * 沉浸直播 --- 横滑展示组件 |
| @@ -9,20 +12,56 @@ import { PlayerVideoControlComponent } from './PlayerVideoControlComponent'; | @@ -9,20 +12,56 @@ import { PlayerVideoControlComponent } from './PlayerVideoControlComponent'; | ||
| 9 | @Component | 12 | @Component |
| 10 | export struct PlayerUIComponent { | 13 | export struct PlayerUIComponent { |
| 11 | private playerController?: WDAliPlayerController | 14 | private playerController?: WDAliPlayerController |
| 12 | - @State isSmall:boolean = false | 15 | + @Provide isSmall:boolean = false |
| 13 | @Consume isShowControl: boolean | 16 | @Consume isShowControl: boolean |
| 17 | + @Consume displayDirection: DisplayDirection | ||
| 14 | aboutToAppear() { | 18 | aboutToAppear() { |
| 15 | if (!this.playerController) { | 19 | if (!this.playerController) { |
| 16 | return | 20 | return |
| 17 | } | 21 | } |
| 18 | this.playerController.onVideoSizePlayerUIComponentMethod = (width: number, height: number) => { | 22 | this.playerController.onVideoSizePlayerUIComponentMethod = (width: number, height: number) => { |
| 19 | - if(width>height){ | 23 | + if (width > height){ |
| 20 | this.isSmall = true | 24 | this.isSmall = true |
| 21 | - }else{ | 25 | + } else { |
| 22 | this.isSmall = false | 26 | this.isSmall = false |
| 23 | } | 27 | } |
| 24 | } | 28 | } |
| 25 | } | 29 | } |
| 30 | + @Builder | ||
| 31 | + fullScreen() { | ||
| 32 | + //全屏按钮 | ||
| 33 | + Image($r('app.media.icon_live_player_full_screen')) | ||
| 34 | + .height(32) | ||
| 35 | + .width(32) | ||
| 36 | + .padding(5) | ||
| 37 | + .borderRadius($r('app.float.vp_16')) | ||
| 38 | + .border({width:0.5}) | ||
| 39 | + .borderColor(0x4DFFFFFF) | ||
| 40 | + .backgroundColor(0x4D222222) | ||
| 41 | + .margin({right:10}) | ||
| 42 | + .onClick(() => { | ||
| 43 | + WindowModel.shared.setSpecificSystemBarEnabled(false) | ||
| 44 | + this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL | ||
| 45 | + WindowModel.shared.setPreferredOrientation( | ||
| 46 | + window.Orientation.LANDSCAPE_INVERTED) | ||
| 47 | + if(this.playerController){ | ||
| 48 | + // if(this.playerController.onVideoSizePlayerUIComponentMethod){ | ||
| 49 | + // this.playerController.onVideoSizePlayerUIComponentMethod(1,2) | ||
| 50 | + // } | ||
| 51 | + if(this.playerController.onVideoSizePlayerComponentBack){ | ||
| 52 | + this.playerController.onVideoSizePlayerComponentBack(1,2) | ||
| 53 | + } | ||
| 54 | + | ||
| 55 | + if(this.playerController.onVideoSizePlayerTitleComponentBack){ | ||
| 56 | + this.playerController.onVideoSizePlayerTitleComponentBack(1,2) | ||
| 57 | + } | ||
| 58 | + } | ||
| 59 | + }) | ||
| 60 | + .visibility(this.isSmall ? Visibility.Visible : Visibility.Hidden) | ||
| 61 | + .margin({ top: 301}) // 195 + 211 - 105 | ||
| 62 | + .position({ x: '96.8%' }) | ||
| 63 | + .markAnchor({ x: '96.8%' }) | ||
| 64 | + } | ||
| 26 | build() { | 65 | build() { |
| 27 | Stack() { | 66 | Stack() { |
| 28 | // 标题 | 67 | // 标题 |
| @@ -35,11 +74,12 @@ export struct PlayerUIComponent { | @@ -35,11 +74,12 @@ export struct PlayerUIComponent { | ||
| 35 | .markAnchor({ y: '100%' }) | 74 | .markAnchor({ y: '100%' }) |
| 36 | 75 | ||
| 37 | PlayerVideoControlComponent({ playerController: this.playerController }) | 76 | PlayerVideoControlComponent({ playerController: this.playerController }) |
| 38 | - .visibility(this.isShowControl ? Visibility.Visible : this.isSmall? Visibility.Visible:Visibility.Hidden) | 77 | + .visibility(this.isShowControl ? Visibility.Visible : Visibility.Hidden) |
| 39 | .animation({ duration: 500 }) | 78 | .animation({ duration: 500 }) |
| 40 | .position({ y: '100%' }) | 79 | .position({ y: '100%' }) |
| 41 | .markAnchor({ y: '100%' }) | 80 | .markAnchor({ y: '100%' }) |
| 42 | - .margin({ top: this.isSmall ? 195 + 211 - 105 : 0}) | 81 | + |
| 82 | + this.fullScreen() | ||
| 43 | } | 83 | } |
| 44 | .height('100%') | 84 | .height('100%') |
| 45 | .width('100%') | 85 | .width('100%') |
| @@ -16,6 +16,7 @@ export struct PlayerVideoControlComponent { | @@ -16,6 +16,7 @@ export struct PlayerVideoControlComponent { | ||
| 16 | @State isPlayStatus: boolean = true | 16 | @State isPlayStatus: boolean = true |
| 17 | @Consume displayDirection: DisplayDirection | 17 | @Consume displayDirection: DisplayDirection |
| 18 | @Consume contentDetailData: ContentDetailDTO | 18 | @Consume contentDetailData: ContentDetailDTO |
| 19 | + @Consume isSmall:boolean | ||
| 19 | 20 | ||
| 20 | aboutToAppear(): void { | 21 | aboutToAppear(): void { |
| 21 | if (this.playerController) { | 22 | if (this.playerController) { |
| @@ -60,33 +61,35 @@ export struct PlayerVideoControlComponent { | @@ -60,33 +61,35 @@ export struct PlayerVideoControlComponent { | ||
| 60 | }) | 61 | }) |
| 61 | } | 62 | } |
| 62 | //全屏按钮 | 63 | //全屏按钮 |
| 63 | - Image($r('app.media.icon_live_player_full_screen')) | ||
| 64 | - .height(32) | ||
| 65 | - .width(32) | ||
| 66 | - .padding(5) | ||
| 67 | - .borderRadius($r('app.float.vp_16')) | ||
| 68 | - .border({width:0.5}) | ||
| 69 | - .borderColor(0x4DFFFFFF) | ||
| 70 | - .backgroundColor(0x4D222222) | ||
| 71 | - .margin({right:10}) | ||
| 72 | - .onClick(() => { | ||
| 73 | - WindowModel.shared.setSpecificSystemBarEnabled(false) | ||
| 74 | - this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL | ||
| 75 | - WindowModel.shared.setPreferredOrientation( | ||
| 76 | - window.Orientation.LANDSCAPE_INVERTED) | ||
| 77 | - if(this.playerController){ | ||
| 78 | - if(this.playerController.onVideoSizePlayerUIComponentMethod){ | ||
| 79 | - this.playerController.onVideoSizePlayerUIComponentMethod(1,2) | ||
| 80 | - } | ||
| 81 | - if(this.playerController.onVideoSizePlayerComponentBack){ | ||
| 82 | - this.playerController.onVideoSizePlayerComponentBack(1,2) | ||
| 83 | - } | 64 | + if(!this.isSmall) { |
| 65 | + Image($r('app.media.icon_live_player_full_screen')) | ||
| 66 | + .height(32) | ||
| 67 | + .width(32) | ||
| 68 | + .padding(5) | ||
| 69 | + .borderRadius($r('app.float.vp_16')) | ||
| 70 | + .border({width:0.5}) | ||
| 71 | + .borderColor(0x4DFFFFFF) | ||
| 72 | + .backgroundColor(0x4D222222) | ||
| 73 | + .margin({right:10}) | ||
| 74 | + .onClick(() => { | ||
| 75 | + WindowModel.shared.setSpecificSystemBarEnabled(false) | ||
| 76 | + this.displayDirection = DisplayDirection.VIDEO_HORIZONTAL | ||
| 77 | + WindowModel.shared.setPreferredOrientation( | ||
| 78 | + window.Orientation.LANDSCAPE_INVERTED) | ||
| 79 | + if(this.playerController){ | ||
| 80 | + // if(this.playerController.onVideoSizePlayerUIComponentMethod){ | ||
| 81 | + // this.playerController.onVideoSizePlayerUIComponentMethod(1,2) | ||
| 82 | + // } | ||
| 83 | + if(this.playerController.onVideoSizePlayerComponentBack){ | ||
| 84 | + this.playerController.onVideoSizePlayerComponentBack(1,2) | ||
| 85 | + } | ||
| 84 | 86 | ||
| 85 | - if(this.playerController.onVideoSizePlayerTitleComponentBack){ | ||
| 86 | - this.playerController.onVideoSizePlayerTitleComponentBack(1,2) | 87 | + if(this.playerController.onVideoSizePlayerTitleComponentBack){ |
| 88 | + this.playerController.onVideoSizePlayerTitleComponentBack(1,2) | ||
| 89 | + } | ||
| 87 | } | 90 | } |
| 88 | - } | ||
| 89 | - }) | 91 | + }) |
| 92 | + } | ||
| 90 | } | 93 | } |
| 91 | .alignItems(VerticalAlign.Center) | 94 | .alignItems(VerticalAlign.Center) |
| 92 | // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] }) | 95 | // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] }) |
-
Please register or login to post a comment