PlayerComponent.ets
4.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import { ContentDetailDTO } from 'wdBean/Index';
import { AliPlayerRenderView, WDAliPlayerController, WDPlayerRenderVLiveView } from 'wdPlayer/Index';
import { ParamType, TrackConstants } from 'wdTracking/Index';
import { PictureLoading } from './PictureLoading';
const TAG = 'PlayerComponent'
@Component
export struct PlayerComponent {
private playerController?: WDAliPlayerController
@Consume @Watch('updateData') contentDetailData: ContentDetailDTO
@Consume @Watch('pageShowChange') pageShow: number
@Consume @Watch('pageHideChange') pageHide: number
@Consume isShowControl: boolean
@Consume liveState: string
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State imgUrl: string = ''
@State isWait: boolean = false
// 0-横屏流画面,1-竖屏幕流画面
@State liveStreamType: number | null = -1
@State playUrl: string = ''
@State isCanplay: boolean = false
pageParam: ParamType = {}
pageShowChange() {
this.playerController?.play()
}
pageHideChange() {
this.playerController?.pause()
}
async aboutToAppear(): Promise<void> {
setTimeout(() => {
this.updateData()
}, 10)
}
async aboutToDisappear(): Promise<void> {
await this.playerController?.pause()
await this.playerController?.stop()
await this.playerController?.release()
}
updateData() {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
if (this.contentDetailData.fullColumnImgUrls && this.contentDetailData.fullColumnImgUrls.length > 0) {
this.imgUrl = this.contentDetailData.fullColumnImgUrls[0].url
}
this.isWait = this.contentDetailData?.liveInfo?.liveState == 'wait'
if (this.contentDetailData.liveInfo && this.contentDetailData.liveInfo.vlive.length > 0) {
let playUrl = ''
let liveStreamType: number | null = null
if (this.contentDetailData.liveInfo.liveState == 'running') {
playUrl = this.contentDetailData.liveInfo.vlive[0].liveUrl
liveStreamType = this.contentDetailData.liveInfo.vlive[0].liveStreamType
} else if (this.contentDetailData.liveInfo.liveState == 'end') {
playUrl = this.contentDetailData.liveInfo.vlive[0].replayUri
liveStreamType = this.contentDetailData.liveInfo.vlive[0].liveStreamType
}
this.liveStreamType = liveStreamType
this.playUrl = playUrl
}
console.error("XXXXZZZZ", 'updateData ----liveState==>' + this.playUrl)
}
build() {
Column() {
Stack() {
// TODO:判断横竖屏，liveStreamType=1竖屏铺满屏幕,裁剪不拉伸，liveStreamType=0横屏正常展示
if (this.liveStreamType == null || this.liveStreamType == 1) {
WDPlayerRenderVLiveView({
playerController: this.playerController,
onLoad: () => {
this.isCanplay = true
this.contentTrackingDict()
this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
}
})
} else if (this.liveStreamType == 0) {
AliPlayerRenderView({
playerController: this.playerController,
onLoad: () => {
this.isCanplay = true
this.contentTrackingDict()
this.playerController?.firstPlay(this.playUrl, TrackConstants.PageName.Live_Detail, this.pageParam);
}
}).margin({ top: 195 }).height(211)
}
PictureLoading().visibility(this.isCanplay ? Visibility.None : Visibility.Visible)
}
.height('100%')
.width('100%')
.align(Alignment.Top)
.alignContent(Alignment.Top)
.onClick(() => {
if (this.liveState === 'end') {
this.isShowControl = !this.isShowControl
}
})
}
.height('100%')
.width('100%')
}
contentTrackingDict() {
this.pageParam = {
'contentType': `${this.contentDetailData.newsType}`,
'contentId': `${this.contentDetailData.newsId}`,
'contentName': `${this.contentDetailData.newsTitle || ''}`,
}
}
}