@ray-js/ipc-player-integration 0.0.18-beta-7 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/ui/ui.js +43 -166
- package/package.json +2 -2
package/lib/ui/ui.js
CHANGED
|
@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
3
3
|
import "core-js/modules/esnext.iterator.constructor.js";
|
|
4
4
|
import "core-js/modules/esnext.iterator.map.js";
|
|
5
5
|
import React, { useContext, useState, useRef, useMemo, useEffect, useImperativeHandle } from 'react';
|
|
6
|
-
import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation
|
|
6
|
+
import { View, CoverView, getSystemInfoSync, usePageEvent, setNavigationBarBack, setPageOrientation } from '@ray-js/ray';
|
|
7
7
|
import clsx from 'clsx';
|
|
8
8
|
import IPCPlayer from '@ray-js/ray-ipc-player';
|
|
9
9
|
import { ipcTTTOperatorLog } from '@ray-js/ray-ipc-utils';
|
|
@@ -73,8 +73,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
73
73
|
setRecording
|
|
74
74
|
} = instance;
|
|
75
75
|
const prevTriggerEvent = useRef();
|
|
76
|
-
const hasPlayedRef = useRef(false);
|
|
77
|
-
|
|
78
76
|
/*
|
|
79
77
|
player 的UI效果期望有一些控件在初始化的时候都展示,在点击 Player 之后隐藏:
|
|
80
78
|
在控件显示时,点击播放器期望隐藏控件
|
|
@@ -89,7 +87,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
89
87
|
}
|
|
90
88
|
useImperativeHandle(eventRefProp, () => eventRef.current, [eventRef.current]);
|
|
91
89
|
const timer = useRef();
|
|
92
|
-
const reGetOrientationTimer = useRef(null);
|
|
93
90
|
const [scaleMultiple, setScaleMultiple] = useState(playerFit === 'contain' ? 1 : -2);
|
|
94
91
|
const [currentZoomLevel, setCurrentZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
|
|
95
92
|
const [createCtx, setCreateCtx] = useState(false);
|
|
@@ -97,98 +94,6 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
97
94
|
// const [verticalCoverZoom, setVerticalCoverZoom] = useState(-2);
|
|
98
95
|
// const [verticalZoomLevel, setVerticalZoomLevel] = useState(playerFit === 'contain' ? 1 : -2);
|
|
99
96
|
|
|
100
|
-
const getPlayerRoute = () => {
|
|
101
|
-
const pages = getCurrentPages(); // 获取当前页面栈
|
|
102
|
-
const currentPage = pages[pages.length - 1]; // 获取当前页面实例
|
|
103
|
-
return currentPage.route;
|
|
104
|
-
};
|
|
105
|
-
const {
|
|
106
|
-
topLeftContent,
|
|
107
|
-
topRightContent,
|
|
108
|
-
bottomLeftContent,
|
|
109
|
-
bottomRightContent,
|
|
110
|
-
absoluteContent,
|
|
111
|
-
screenType,
|
|
112
|
-
playState,
|
|
113
|
-
resolution,
|
|
114
|
-
mute
|
|
115
|
-
} = useStore({
|
|
116
|
-
topLeftContent: instance.topLeftContent,
|
|
117
|
-
topRightContent: instance.topRightContent,
|
|
118
|
-
bottomLeftContent: instance.bottomLeftContent,
|
|
119
|
-
bottomRightContent: instance.bottomRightContent,
|
|
120
|
-
absoluteContent: instance.absoluteContent,
|
|
121
|
-
screenType: instance.screenType,
|
|
122
|
-
playState: instance.playState,
|
|
123
|
-
resolution: instance.resolution,
|
|
124
|
-
mute: instance.mute
|
|
125
|
-
});
|
|
126
|
-
const getAndSetOrientation = () => {
|
|
127
|
-
try {
|
|
128
|
-
var _ty;
|
|
129
|
-
if (typeof ((_ty = ty) === null || _ty === void 0 ? void 0 : _ty.getOrientationSync) === 'function') {
|
|
130
|
-
const {
|
|
131
|
-
orientation
|
|
132
|
-
} = ty.getOrientationSync();
|
|
133
|
-
console.log(`同步获取屏幕方向: ${orientation}`);
|
|
134
|
-
ipcTTTOperatorLog(`同步获取屏幕方向: ${orientation}`);
|
|
135
|
-
if (orientation === 'unknown') {
|
|
136
|
-
// 1秒后重试一次
|
|
137
|
-
reGetOrientationTimer.current = setTimeout(getAndSetOrientation, 500);
|
|
138
|
-
return;
|
|
139
|
-
}
|
|
140
|
-
if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right', 'landscape'].includes(orientation)) {
|
|
141
|
-
const {
|
|
142
|
-
deviceType
|
|
143
|
-
} = systemInfo.current;
|
|
144
|
-
if (deviceType === 'pad') {
|
|
145
|
-
setScreenType('vertical');
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
const pageOrientation = orientation === 'landscape-left' || orientation === 'landscape-right' || orientation === 'landscape' ? 'landscape' : 'portrait';
|
|
149
|
-
if (pageOrientation === 'landscape') {
|
|
150
|
-
// 如果为横屏的情况下,直接设置为全屏
|
|
151
|
-
setScreenType(pageOrientation === 'landscape' ? 'full' : 'vertical');
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
// setPageOrientation({
|
|
155
|
-
// pageOrientation,
|
|
156
|
-
// success: () => {
|
|
157
|
-
// console.log('success');
|
|
158
|
-
// },
|
|
159
|
-
// fail: err => {
|
|
160
|
-
// console.log('err', err);
|
|
161
|
-
// },
|
|
162
|
-
// });
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
} catch (e) {
|
|
166
|
-
console.log('获取屏幕方向失败');
|
|
167
|
-
}
|
|
168
|
-
};
|
|
169
|
-
useEffect(() => {
|
|
170
|
-
// 首次进来强制为竖屏
|
|
171
|
-
if (createCtx) {
|
|
172
|
-
getAndSetOrientation();
|
|
173
|
-
}
|
|
174
|
-
return () => {
|
|
175
|
-
if (reGetOrientationTimer.current) {
|
|
176
|
-
clearTimeout(reGetOrientationTimer.current);
|
|
177
|
-
}
|
|
178
|
-
};
|
|
179
|
-
}, [createCtx]);
|
|
180
|
-
useEffect(() => {
|
|
181
|
-
var _ty2;
|
|
182
|
-
if (typeof ((_ty2 = ty) === null || _ty2 === void 0 ? void 0 : _ty2.onOrientationChange) === 'function') {
|
|
183
|
-
ty.onOrientationChange(handleOrientationChange);
|
|
184
|
-
}
|
|
185
|
-
return () => {
|
|
186
|
-
var _ty3;
|
|
187
|
-
if (typeof ((_ty3 = ty) === null || _ty3 === void 0 ? void 0 : _ty3.offOrientationChange) === 'function') {
|
|
188
|
-
ty.offOrientationChange(handleOrientationChange);
|
|
189
|
-
}
|
|
190
|
-
};
|
|
191
|
-
}, []);
|
|
192
97
|
useEffect(() => {
|
|
193
98
|
if (createCtx) {
|
|
194
99
|
setScaleMultiple(playerFit === 'contain' ? 1 : -2);
|
|
@@ -209,72 +114,17 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
209
114
|
* 监听播放器实例创建完成
|
|
210
115
|
*/
|
|
211
116
|
|
|
212
|
-
const handleOrientationChange = useMemoizedFn(data => {
|
|
213
|
-
console.log(data, 'data=====');
|
|
214
|
-
console.log(getPlayerRoute(), 'getPlayerRoute()');
|
|
215
|
-
if (getPlayerRoute() !== 'pages/home/index') {
|
|
216
|
-
// 不是首页的话,禁止以下行为
|
|
217
|
-
return;
|
|
218
|
-
}
|
|
219
|
-
const {
|
|
220
|
-
orientation
|
|
221
|
-
} = data;
|
|
222
|
-
if (['portrait', 'portrait-upside-down', 'landscape-left', 'landscape-right'].includes(orientation)) {
|
|
223
|
-
setScreenType(orientation === 'landscape-left' || orientation === 'landscape-right' ? 'full' : 'vertical');
|
|
224
|
-
const pageOrientation = orientation === 'landscape-left' || orientation === 'landscape-right' ? 'landscape' : 'portrait';
|
|
225
|
-
|
|
226
|
-
// const { deviceType } = systemInfo.current;
|
|
227
|
-
// // 针对pad 暂不支持横屏,且在ios pad模式下 会触发onResize事件, 待解决
|
|
228
|
-
// if (deviceType === 'pad') {
|
|
229
|
-
// setScreenType('vertical');
|
|
230
|
-
// } else {
|
|
231
|
-
// setScreenType(pageOrientation === 'landscape' ? 'full' : 'vertical');
|
|
232
|
-
// triggerEvent(showAllComponent);
|
|
233
|
-
// }
|
|
234
|
-
// // 若为全屏模式并且要求按宽填充,即横屏时充满,主动设置模式为-1即可
|
|
235
|
-
// if (pageOrientation === 'landscape' && landscapeMode === 'fill') {
|
|
236
|
-
// console.log(scaleMultiple, '===========fill');
|
|
237
|
-
// setScaleMultiple(-1);
|
|
238
|
-
// } else if (pageOrientation === 'landscape' && landscapeMode === 'standard') {
|
|
239
|
-
// console.log(scaleMultiple, '===========landscape');
|
|
240
|
-
// setScaleMultiple(-2);
|
|
241
|
-
// } else {
|
|
242
|
-
// // 竖屏时 将屏幕播放比例设为按宽按高
|
|
243
|
-
|
|
244
|
-
// console.log(scaleMultiple, '===========landscape');
|
|
245
|
-
// setScaleMultiple(playerFit === 'contain' ? (scaleMultiple === 1 ? -1 : 1) : -2);
|
|
246
|
-
// }
|
|
247
|
-
// 强制更改页面转向
|
|
248
|
-
setPageOrientation({
|
|
249
|
-
pageOrientation,
|
|
250
|
-
success: () => {
|
|
251
|
-
console.log('success');
|
|
252
|
-
},
|
|
253
|
-
fail: err => {
|
|
254
|
-
console.log('err', err);
|
|
255
|
-
}
|
|
256
|
-
});
|
|
257
|
-
}
|
|
258
|
-
});
|
|
259
|
-
|
|
260
117
|
/**
|
|
261
118
|
* 监听屏幕布局变化
|
|
262
119
|
*/
|
|
263
120
|
usePageEvent('onResize', useMemoizedFn(sizeData => {
|
|
264
|
-
// if (typeof ty?.onOrientationChange === 'function') {
|
|
265
|
-
// return;
|
|
266
|
-
// }
|
|
267
|
-
console.log(getPlayerRoute(), 'getPlayerRoute()');
|
|
268
|
-
if (getPlayerRoute() !== 'pages/home/index') {
|
|
269
|
-
// 不是Player首页的话,禁止以下行为
|
|
270
|
-
return;
|
|
271
|
-
}
|
|
272
121
|
try {
|
|
273
122
|
const {
|
|
274
123
|
type
|
|
275
124
|
} = sizeData;
|
|
276
125
|
console.log('监听到屏幕布局变化', type);
|
|
277
126
|
const {
|
|
127
|
+
platform,
|
|
278
128
|
deviceType
|
|
279
129
|
} = systemInfo.current;
|
|
280
130
|
// 针对pad 暂不支持横屏,且在ios pad模式下 会触发onResize事件, 待解决
|
|
@@ -286,16 +136,34 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
286
136
|
}
|
|
287
137
|
// 若为全屏模式并且要求按宽填充,即横屏时充满,主动设置模式为-1即可
|
|
288
138
|
if (type === 'landscape' && landscapeMode === 'fill') {
|
|
139
|
+
// instance.IPCPlayerInstance.setObjectFit({
|
|
140
|
+
// objectFit: 'fillCrop',
|
|
141
|
+
// });
|
|
289
142
|
console.log(scaleMultiple, '===========fill');
|
|
290
143
|
setScaleMultiple(-1);
|
|
291
144
|
} else if (type === 'landscape' && landscapeMode === 'standard') {
|
|
145
|
+
// instance.IPCPlayerInstance.setObjectFit({
|
|
146
|
+
// objectFit: 'contain',
|
|
147
|
+
// });
|
|
148
|
+
// setTimeout(() => {
|
|
149
|
+
// console.log('dsahdjsahjdhsajhdjh==');
|
|
150
|
+
// instance.IPCPlayerInstance.setScaleMultiple({
|
|
151
|
+
// scaleMultiple: -2,
|
|
152
|
+
// });
|
|
153
|
+
// }, 3000);
|
|
292
154
|
console.log(scaleMultiple, '===========landscape');
|
|
293
155
|
setScaleMultiple(-2);
|
|
294
156
|
} else {
|
|
295
157
|
// 竖屏时 将屏幕播放比例设为按宽按高
|
|
296
|
-
|
|
158
|
+
// console.log(verticalZoomLevel, 'verticalZoomLevel======');
|
|
159
|
+
// instance.IPCPlayerInstance.setScaleMultiple({
|
|
160
|
+
// scaleMultiple: playerFit === 'contain' ? -1 : -2,
|
|
161
|
+
// });
|
|
297
162
|
console.log(scaleMultiple, '===========landscape');
|
|
298
163
|
setScaleMultiple(playerFit === 'contain' ? scaleMultiple === 1 ? -1 : 1 : -2);
|
|
164
|
+
// instance.IPCPlayerInstance.setObjectFit({
|
|
165
|
+
// objectFit: playerFit === 'contain' ? 'fillCrop' : 'contain',
|
|
166
|
+
// });
|
|
299
167
|
}
|
|
300
168
|
} catch (err) {
|
|
301
169
|
console.log(err, 'err');
|
|
@@ -332,6 +200,27 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
332
200
|
if (!systemInfo.current) {
|
|
333
201
|
systemInfo.current = getSystemInfoSync();
|
|
334
202
|
}
|
|
203
|
+
const {
|
|
204
|
+
topLeftContent,
|
|
205
|
+
topRightContent,
|
|
206
|
+
bottomLeftContent,
|
|
207
|
+
bottomRightContent,
|
|
208
|
+
absoluteContent,
|
|
209
|
+
screenType,
|
|
210
|
+
playState,
|
|
211
|
+
resolution,
|
|
212
|
+
mute
|
|
213
|
+
} = useStore({
|
|
214
|
+
topLeftContent: instance.topLeftContent,
|
|
215
|
+
topRightContent: instance.topRightContent,
|
|
216
|
+
bottomLeftContent: instance.bottomLeftContent,
|
|
217
|
+
bottomRightContent: instance.bottomRightContent,
|
|
218
|
+
absoluteContent: instance.absoluteContent,
|
|
219
|
+
screenType: instance.screenType,
|
|
220
|
+
playState: instance.playState,
|
|
221
|
+
resolution: instance.resolution,
|
|
222
|
+
mute: instance.mute
|
|
223
|
+
});
|
|
335
224
|
|
|
336
225
|
// 监听物理返回按键
|
|
337
226
|
const hackHandle = () => {
|
|
@@ -447,19 +336,7 @@ export const IPCPlayerIntegration = /*#__PURE__*/React.memo(props => {
|
|
|
447
336
|
if (playState !== PlayState.PLAYING) {
|
|
448
337
|
console.log('非播放状态=======');
|
|
449
338
|
console.log(currentZoomLevel, 'currentZoomLevel');
|
|
450
|
-
|
|
451
|
-
console.log(hasPlayedRef.current, 'hasPlayedRef.current');
|
|
452
|
-
if (hasPlayedRef.current) {
|
|
453
|
-
setScaleMultiple(currentZoomLevel);
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
|
-
if (playState === PlayState.PLAYING) {
|
|
457
|
-
// 仅在第一次播放成功时,针对竖屏并且为cover模式时,设置为-2
|
|
458
|
-
console.log('Playing状态');
|
|
459
|
-
if (screenType === 'vertical' && playerFit === 'cover' && !hasPlayedRef.current) {
|
|
460
|
-
setScaleMultiple(-2);
|
|
461
|
-
hasPlayedRef.current = true;
|
|
462
|
-
}
|
|
339
|
+
setScaleMultiple(currentZoomLevel);
|
|
463
340
|
}
|
|
464
341
|
setPlayState(playState);
|
|
465
342
|
(_props$onPlayStatus = props.onPlayStatus) === null || _props$onPlayStatus === void 0 || _props$onPlayStatus.call(props, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ray-js/ipc-player-integration",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.19",
|
|
4
4
|
"description": "IPC 融合播放器",
|
|
5
5
|
"main": "lib/index",
|
|
6
6
|
"files": [
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@ray-js/ipc-ptz-zoom": "^0.0.2",
|
|
39
39
|
"@ray-js/panel-sdk": "^1.13.1",
|
|
40
40
|
"@ray-js/direction-control": "^0.0.8",
|
|
41
|
-
"@ray-js/ray-ipc-player": "2.0.
|
|
41
|
+
"@ray-js/ray-ipc-player": "^2.0.25",
|
|
42
42
|
"@ray-js/ray-ipc-utils": "^1.1.10",
|
|
43
43
|
"@ray-js/svg": "0.2.0",
|
|
44
44
|
"clsx": "^1.2.1",
|