@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.
Files changed (2) hide show
  1. package/lib/ui/ui.js +43 -166
  2. 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, getCurrentPages } from '@ray-js/ray';
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
- console.log(scaleMultiple, 'scaleMultiple');
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.18-beta-7",
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.26-beta-1",
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",