developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
f77228df 1 parent a6d274a7

修复频道视频黑屏问题

Inline Side-by-side
Showing 9 changed files with 59 additions and 103 deletions
@@ -19,7 +19,8 @@ export struct DetailPlayVLivePage { @@ -19,7 +19,8 @@ export struct DetailPlayVLivePage {
19 @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0 19 @Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
20 @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean 20 @Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
21 @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean 21 @Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
22 - @Provide isMenuVisible: boolean = false 22 + @Provide isShowControl: boolean = false
  23 + @Provide liveState: string = ''
23 @State relId: string = '' 24 @State relId: string = ''
24 @State contentId: string = '' 25 @State contentId: string = ''
25 @State relType: string = '' 26 @State relType: string = ''
@@ -52,7 +53,7 @@ export struct DetailPlayVLivePage { @@ -52,7 +53,7 @@ export struct DetailPlayVLivePage {
52 playerController: this.playerController 53 playerController: this.playerController
53 }) 54 })
54 .onClick(() => { 55 .onClick(() => {
55 - this.isMenuVisible = !this.isMenuVisible 56 + this.isShowControl = !this.isShowControl
56 }) 57 })
57 58
58 PlayerInfoComponent({ 59 PlayerInfoComponent({
@@ -79,16 +80,13 @@ export struct DetailPlayVLivePage { @@ -79,16 +80,13 @@ export struct DetailPlayVLivePage {
79 .width('100%') 80 .width('100%')
80 } 81 }
81 82
82 - onPageShow(): void {  
83 -  
84 - }  
85 -  
86 getLiveDetails() { 83 getLiveDetails() {
87 this.liveViewModel.getLiveDetails(this.contentId, this.relId, this.relType) 84 this.liveViewModel.getLiveDetails(this.contentId, this.relId, this.relType)
88 .then( 85 .then(
89 (data) => { 86 (data) => {
90 if (data.length > 0) { 87 if (data.length > 0) {
91 this.liveDetailsBean = data[0] 88 this.liveDetailsBean = data[0]
  89 + this.liveState = this.liveDetailsBean.liveInfo?.liveState
92 console.error('liveDetailsBean===', JSON.stringify((this.liveDetailsBean))) 90 console.error('liveDetailsBean===', JSON.stringify((this.liveDetailsBean)))
93 } 91 }
94 }, 92 },
@@ -6,6 +6,7 @@ import { NumberFormatterUtils } from 'wdKit/Index' @@ -6,6 +6,7 @@ import { NumberFormatterUtils } from 'wdKit/Index'
6 export struct PlayerTitleComponent { 6 export struct PlayerTitleComponent {
7 @Consume liveDetailsBean: LiveDetailsBean 7 @Consume liveDetailsBean: LiveDetailsBean
8 @Consume liveRoomDataBean: LiveRoomDataBean 8 @Consume liveRoomDataBean: LiveRoomDataBean
  9 + @Consume liveState: string
9 10
10 build() { 11 build() {
11 Column() { 12 Column() {
@@ -38,8 +39,9 @@ export struct PlayerTitleComponent { @@ -38,8 +39,9 @@ export struct PlayerTitleComponent {
38 Image(this.liveDetailsBean.rmhInfo?.rmhHeadUrl || '') 39 Image(this.liveDetailsBean.rmhInfo?.rmhHeadUrl || '')
39 .width(24) 40 .width(24)
40 .aspectRatio(1) 41 .aspectRatio(1)
41 - .borderRadius('50%') 42 + .borderRadius(12)
42 .fillColor(Color.Transparent) 43 .fillColor(Color.Transparent)
  44 +
43 Text(this.liveDetailsBean.rmhInfo?.rmhName || '') 45 Text(this.liveDetailsBean.rmhInfo?.rmhName || '')
44 .fontSize(12) 46 .fontSize(12)
45 .fontWeight(500) 47 .fontWeight(500)
@@ -53,19 +55,20 @@ export struct PlayerTitleComponent { @@ -53,19 +55,20 @@ export struct PlayerTitleComponent {
53 } 55 }
54 .backgroundColor('#4D000000') 56 .backgroundColor('#4D000000')
55 .borderRadius(2) 57 .borderRadius(2)
  58 + .borderRadius({ topLeft: 12, bottomLeft: 12 })
56 .margin({ right: 8 }) 59 .margin({ right: 8 })
57 } 60 }
58 61
59 62
60 Row() { 63 Row() {
61 - if (this.liveDetailsBean.liveInfo?.liveState == 'running') { 64 + if (this.liveState == 'running') {
62 Image($r('app.media.icon_live_status_running')) 65 Image($r('app.media.icon_live_status_running'))
63 .width(22) 66 .width(22)
64 .height(18) 67 .height(18)
65 .margin({ right: 1 }) 68 .margin({ right: 1 })
66 } 69 }
67 70
68 - Text(this.liveDetailsBean.liveInfo?.liveState == 'running' ? '直播中' : '回看') 71 + Text(this.liveState == 'running' ? '直播中' : '回看')
69 .fontSize(11) 72 .fontSize(11)
70 .fontWeight(400) 73 .fontWeight(400)
71 .fontColor(Color.White) 74 .fontColor(Color.White)
@@ -79,6 +82,6 @@ export struct PlayerTitleComponent { @@ -79,6 +82,6 @@ export struct PlayerTitleComponent {
79 } 82 }
80 .backgroundColor('#4D000000') 83 .backgroundColor('#4D000000')
81 .borderRadius(2) 84 .borderRadius(2)
82 - .padding(this.liveDetailsBean.liveInfo?.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4) 85 + .padding(this.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4)
83 } 86 }
84 } 87 }
@@ -6,13 +6,17 @@ import { PlayerVideoControlComponent } from './PlayerVideoControlComponent'; @@ -6,13 +6,17 @@ import { PlayerVideoControlComponent } from './PlayerVideoControlComponent';
6 @Component 6 @Component
7 export struct PlayerUIComponent { 7 export struct PlayerUIComponent {
8 private playerController?: WDPlayerController 8 private playerController?: WDPlayerController
  9 + @Consume liveState: string
9 10
10 build() { 11 build() {
11 Column() { 12 Column() {
12 PlayerTitleComponent() 13 PlayerTitleComponent()
13 Blank() 14 Blank()
14 // PlayerCommentComponent().layoutWeight(1) 15 // PlayerCommentComponent().layoutWeight(1)
15 - PlayerVideoControlComponent({ playerController: this.playerController }) 16 + if (this.liveState === 'end') {
  17 + PlayerVideoControlComponent({ playerController: this.playerController })
  18 + }
  19 +
16 } 20 }
17 .height('100%') 21 .height('100%')
18 .width('100%') 22 .width('100%')
@@ -42,39 +42,36 @@ export struct PlayerVideoControlComponent { @@ -42,39 +42,36 @@ export struct PlayerVideoControlComponent {
42 @Builder 42 @Builder
43 getBottomUIComponent() { 43 getBottomUIComponent() {
44 Row() { 44 Row() {
45 - if (this.liveDetailsBean?.liveInfo?.liveState == 'end') {  
46 - this.playOrPauseBtn()  
47 - Text(this.currentTime)  
48 - .fontColor(Color.White)  
49 - .fontWeight(600)  
50 - .fontSize('12fp')  
51 - .margin({  
52 - left: 16  
53 - }) 45 + this.playOrPauseBtn()
  46 + Text(this.currentTime)
  47 + .fontColor(Color.White)
  48 + .fontWeight(600)
  49 + .fontSize('12fp')
  50 + .margin({
  51 + left: 16
  52 + })
54 53
55 - this.playProgressView() 54 + this.playProgressView()
56 55
57 - Text(this.totalTime)  
58 - .fontColor(Color.White)  
59 - .fontWeight(600)  
60 - .fontSize('12fp')  
61 - .margin({  
62 - right: 16  
63 - })  
64 - } else {  
65 - Blank()  
66 - }  
67 - Image($r('app.media.icon_live_player_full_screen'))  
68 - .width(24)  
69 - .height(24)  
70 - .onClick(() => {  
71 - this.isFullScreen = !this.isFullScreen  
72 - WindowModel.shared.setPreferredOrientation(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);  
73 - devicePLSensorManager.devicePLSensorOn(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT); 56 + Text(this.totalTime)
  57 + .fontColor(Color.White)
  58 + .fontWeight(600)
  59 + .fontSize('12fp')
  60 + .margin({
  61 + right: 16
74 }) 62 })
  63 +
  64 + // Image($r('app.media.icon_live_player_full_screen'))
  65 + // .width(24)
  66 + // .height(24)
  67 + // .onClick(() => {
  68 + // this.isFullScreen = !this.isFullScreen
  69 + // WindowModel.shared.setPreferredOrientation(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
  70 + // devicePLSensorManager.devicePLSensorOn(this.isFullScreen ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT);
  71 + // })
75 } 72 }
76 .alignItems(VerticalAlign.Center) 73 .alignItems(VerticalAlign.Center)
77 - .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] }) 74 + // .linearGradient({ angle: 0, colors: [['#99000000', 0], ['#00000000', 1]] })
78 .width('100%') 75 .width('100%')
79 .padding({ 76 .padding({
80 left: 10, 77 left: 10,
@@ -168,17 +168,15 @@ export struct DetailPlayShortVideoPage { @@ -168,17 +168,15 @@ export struct DetailPlayShortVideoPage {
168 WDPlayerRenderView({ 168 WDPlayerRenderView({
169 playerController: this.playerController, 169 playerController: this.playerController,
170 onLoad: async () => { 170 onLoad: async () => {
171 - // console.log('onload==', this.index)  
172 - // if (this.index === 0) {  
173 -  
174 if (this.contentDetailData != null && this.contentDetailData?.videoInfo[0] != null) { 171 if (this.contentDetailData != null && this.contentDetailData?.videoInfo[0] != null) {
175 this.playerController.firstPlay(this.contentDetailData.videoInfo[0].videoUrl); 172 this.playerController.firstPlay(this.contentDetailData.videoInfo[0].videoUrl);
176 } 173 }
177 - // }  
178 } 174 }
179 }) 175 })
180 .height('100%') 176 .height('100%')
181 .width('100%') 177 .width('100%')
  178 + .margin({ top: this.videoLandScape === 1 ? 218 : 0 })
  179 + .align(this.videoLandScape === 1 ? Alignment.Top : Alignment.Start)
182 .onClick(() => { 180 .onClick(() => {
183 console.error('WDPlayerRenderView=== onClick') 181 console.error('WDPlayerRenderView=== onClick')
184 this.playerController?.switchPlayOrPause(); 182 this.playerController?.switchPlayOrPause();
@@ -195,14 +193,13 @@ export struct DetailPlayShortVideoPage { @@ -195,14 +193,13 @@ export struct DetailPlayShortVideoPage {
195 193
196 @Builder 194 @Builder
197 detailContainerBuilder() { 195 detailContainerBuilder() {
198 - // DetailTabBarPageComponent({ pageId: this.pageId }).backgroundColor(Color.Black)  
199 DetailContainer({ 196 DetailContainer({
200 playerController: this.playerController 197 playerController: this.playerController
201 }) 198 })
202 } 199 }
203 200
204 build() { 201 build() {
205 - Row() { 202 + Column() {
206 PlayerDetailContainer({ 203 PlayerDetailContainer({
207 playerView: () => { 204 playerView: () => {
208 this.playerViewContainerBuilder() 205 this.playerViewContainerBuilder()
@@ -212,17 +209,8 @@ export struct DetailPlayShortVideoPage { @@ -212,17 +209,8 @@ export struct DetailPlayShortVideoPage {
212 this.detailContainerBuilder() 209 this.detailContainerBuilder()
213 } 210 }
214 }) 211 })
215 - .height('100%')  
216 - .width('100%')  
217 - .onClick(() => {  
218 - console.error('PlayerDetailContainer=== onClick')  
219 - this.playerController?.switchPlayOrPause();  
220 - })  
221 - }  
222 - .height('100%') 212 + }.height('100%')
223 .width('100%') 213 .width('100%')
224 - .backgroundColor(Color.Black)  
225 - // 扩展至所有非安全区域  
226 - .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 214 +
227 } 215 }
228 } 216 }
@@ -12,6 +12,5 @@ export struct DetailContainer { @@ -12,6 +12,5 @@ export struct DetailContainer {
12 PlayerTitleComment({ 12 PlayerTitleComment({
13 playerController: this.playerController 13 playerController: this.playerController
14 }) 14 })
15 - .width('100%')  
16 } 15 }
17 } 16 }
@@ -45,7 +45,7 @@ export struct DetailDialog { @@ -45,7 +45,7 @@ export struct DetailDialog {
45 } 45 }
46 .width('100%') 46 .width('100%')
47 .alignItems(HorizontalAlign.Start) 47 .alignItems(HorizontalAlign.Start)
48 - .backgroundColor(Color.Gray) 48 + .backgroundColor('#80000000')
49 // .linearGradient({ 49 // .linearGradient({
50 // direction: GradientDirection.Top, // 渐变方向 50 // direction: GradientDirection.Top, // 渐变方向
51 // repeating: false, // 渐变颜色是否重复 51 // repeating: false, // 渐变颜色是否重复
@@ -60,52 +60,14 @@ export struct PlayerDetailContainer { @@ -60,52 +60,14 @@ export struct PlayerDetailContainer {
60 } 60 }
61 61
62 build() { 62 build() {
63 - RelativeContainer() {  
64 - Row() {  
65 - Stack() {  
66 - Row() {  
67 - this.playerView()  
68 - }  
69 - .height('100%')  
70 - .width('100%')  
71 - .zIndex(0)  
72 - .margin({ top: this.videoLandScape === 1 ? 218 : 0 })  
73 -  
74 - Row() {  
75 - this.playControlView()  
76 - }  
77 - .height('100%')  
78 - .width('100%')  
79 - .zIndex(1)  
80 - }  
81 - .width('100%')  
82 - .height('100%')  
83 - // .aspectRatio(this.isFullScreen ? 0.1 : 16 / 9.0) // 若width值确定，当aspectRatio值越小，则height值越大  
84 - // .height(this.isFullScreen ? '100%' : this.buildVideoHeight())  
85 - // .margin({ top: this.isFullScreen ? 0 : this.buildVideoTo() })  
86 - // .margin({ bottom: this.isFullScreen ? 0 : this.buildVideoBottom() })  
87 - .alignRules({  
88 - top: { anchor: '__container__', align: VerticalAlign.Top },  
89 - // middle: { anchor: '__container__', align: HorizontalAlign.Center }  
90 - })  
91 - .id('stk_player_container')  
92 - }.height('100%').layoutWeight(1)  
93 -  
94 - if (this.isShowBottomView()) {  
95 - Row() {  
96 - this.detailView()  
97 - }  
98 - .width('100%')  
99 - // .opacity(0.3)  
100 - .alignRules({  
101 - bottom: { anchor: '__container__', align: VerticalAlign.Bottom },  
102 - // middle: { anchor: '__container__', align: HorizontalAlign.Center }  
103 - })  
104 - .id('row_bottomView')  
105 - } 63 + Stack() {
  64 + this.playerView()
  65 + this.detailView()
106 } 66 }
107 .width('100%') 67 .width('100%')
108 .height('100%') 68 .height('100%')
109 69
  70 + // .backgroundColor(Color.Black) // 扩展至所有非安全区域
  71 + // .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
110 } 72 }
111 } 73 }
@@ -140,7 +140,11 @@ export struct PlayerTitleComment { @@ -140,7 +140,11 @@ export struct PlayerTitleComment {
140 .width(48) 140 .width(48)
141 } 141 }
142 .width('100%') 142 .width('100%')
  143 + .layoutWeight(1)
143 .alignItems(VerticalAlign.Bottom) 144 .alignItems(VerticalAlign.Bottom)
  145 + .onClick(() => {
  146 + this.playerController?.switchPlayOrPause()
  147 + })
144 148
145 Row() { 149 Row() {
146 Column() { 150 Column() {
@@ -194,9 +198,10 @@ export struct PlayerTitleComment { @@ -194,9 +198,10 @@ export struct PlayerTitleComment {
194 }.backgroundColor(Color.Black) 198 }.backgroundColor(Color.Black)
195 199
196 } 200 }
  201 + .height('100%')
197 .width('100%') 202 .width('100%')
198 - // .height('40%')  
199 - .alignItems(HorizontalAlign.Start) 203 + .alignItems(HorizontalAlign.End)
  204 + .align(Alignment.End)
200 .opacity(this.isOpen ? 0 : 1) 205 .opacity(this.isOpen ? 0 : 1)
201 .animation({ duration: 200 }) 206 .animation({ duration: 200 })
202 } 207 }