WDPlayerRenderLiveView.ets
4.24 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import componentUtils from '@ohos.arkui.componentUtils';
import { WindowModel, Logger } from 'wdKit';
import { enableAliPlayer } from '../utils/GlobalSetting';
import { WDAliPlayerController } from '../controller/WDAliPlayerController';
class Size {
width: Length = "100%";
height: Length = "100%";
constructor(width: Length, height: Length) {
this.width = width;
this.height = height;
}
}
let insIndex: number = 0;
const TAG = 'WDPlayerRenderLiveView'
class MGPlayRenderViewIns {
static intCount: number = 0;
static add() {
MGPlayRenderViewIns.intCount++;
WindowModel.shared.setWindowKeepScreenOn(true);
Logger.debug(TAG, "add-- +1")
}
static del() {
Logger.debug(TAG, "del-- -1")
MGPlayRenderViewIns.intCount--;
if (MGPlayRenderViewIns.intCount <= 0) {
WindowModel.shared.setWindowKeepScreenOn(false);
}
}
}
/**
* 播放窗口组件
*/
@Component
export struct WDPlayerRenderLiveView {
private playerController?: WDAliPlayerController;
private xComponentController: XComponentController = new XComponentController();
onLoad?: ((event?: object) => void);
@State videoWidth: number = 0
@State videoHeight: number = 0
@State videoRatio: number = 16 / 9
@State selfSize: Size = new Size('100%', '100%');
private insId: string = "WDPlayerRenderLiveView" + insIndex;
aboutToAppear() {
MGPlayRenderViewIns.add();
insIndex++;
if (!this.playerController) {
return
}
//this.init = true
this.playerController.onVideoSizeChange = (width: number, height: number) => {
// console.log(`WDPlayerRenderView onVideoSizeChange width:${width} videoTop:${height}`)
this.videoWidth = width;
this.videoHeight = height;
this.videoRatio = width / height
this.updateLayout()
}
}
aboutToDisappear() {
Logger.info(TAG, `aboutToDisappear`)
MGPlayRenderViewIns.del();
}
build() {
Row() {
// 设置为“surface“类型时XComponent组件可以和其他组件一起进行布局和渲染。
XComponent({
id: enableAliPlayer ? this.insId : 'xComponentId',
type: XComponentType.SURFACE,
libraryname: enableAliPlayer ? "premierlibrary" : undefined,
controller: this.xComponentController
})
.onLoad(async (event) => {
Logger.info(TAG, 'onLoad')
let surfaceId = this.xComponentController.getXComponentSurfaceId()
this.xComponentController.setXComponentSurfaceRect({
surfaceWidth: this.videoWidth,
surfaceHeight: this.videoHeight
});
if (enableAliPlayer) {
this.playerController?.setSurfaceId(this.insId)
} else {
this.playerController?.setXComponentController(this.xComponentController)
}
if (this.onLoad) {
this.onLoad(event)
}
})
// .width(this.selfSize.width)
// .height(this.selfSize.height)
}
.id(this.insId)
.onAreaChange(() => {
this.updateLayout()
})
.backgroundColor("#000000")
.justifyContent(FlexAlign.Center)
.height('100%')
.width('100%')
}
updateLayout() {
let info = componentUtils.getRectangleById(this.insId);
Logger.debug(TAG, "播放器区域变化: " + JSON.stringify(info))
Logger.debug(TAG, "xComponent rect: " + JSON.stringify(this.xComponentController.getXComponentSurfaceRect()))
if (info.size.width > 0 && info.size.height > 0) {
// 竖屏
if (this.videoHeight > 0 && this.videoWidth > 0 && this.videoWidth < this.videoHeight) {
let ratio = this.videoWidth / this.videoHeight
const height = info.size.width / ratio
// 竖屏,缩放高度大于 视频区域高度
if (height > info.size.height) {
Logger.debug(TAG, "ratio = " + ratio + " ==> new height = " + height)
Logger.debug(TAG, "高度固定,求宽度: " + info.size.height * ratio)
this.xComponentController.setXComponentSurfaceRect({
surfaceWidth: info.size.height * ratio,
surfaceHeight: info.size.height
});
return
}
}
this.xComponentController.setXComponentSurfaceRect({
surfaceWidth: info.size.width,
surfaceHeight: info.size.height
});
}
}
}