@ray-js/ipc-player-integration 0.0.26 → 0.0.28
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/widgets/fullScreen/fullScreen.less +3 -3
- package/lib/widgets/recordVideo/recordVideo.js +2 -0
- package/lib/widgets/screenshot/screenshot.js +3 -2
- package/lib/widgets/voiceIntercom/voiceIntercom.d.ts +3 -0
- package/lib/widgets/voiceIntercom/voiceIntercom.js +29 -6
- package/lib/widgets/voiceIntercom/voiceIntercom.less +16 -2
- package/package.json +2 -2
|
@@ -13,14 +13,14 @@
|
|
|
13
13
|
top: 50%;
|
|
14
14
|
transform: translateY(-50%);
|
|
15
15
|
right: calc(50px * var(--ipc-player-size-scale, 1));
|
|
16
|
-
z-index:
|
|
16
|
+
z-index: 348;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
.ipc-player-plugin-remote-control-wrap {
|
|
20
20
|
position: absolute;
|
|
21
21
|
bottom: calc(24px * var(--ipc-player-size-scale, 1));
|
|
22
22
|
right: calc(50px * var(--ipc-player-size-scale, 1));
|
|
23
|
-
z-index:
|
|
23
|
+
z-index: 348;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
.ipc-player-plugin-full-screen-voice {
|
|
@@ -34,4 +34,4 @@
|
|
|
34
34
|
.ipc-plugin-full-travel-route-control {
|
|
35
35
|
// width: calc(172px * var(--ipc-player-size-scale, 1));
|
|
36
36
|
// height: calc(172px * var(--ipc-player-size-scale, 1));
|
|
37
|
-
}
|
|
37
|
+
}
|
|
@@ -259,6 +259,7 @@ export function RecordVideo(props) {
|
|
|
259
259
|
/** 录制开始后3秒后才可结束 */
|
|
260
260
|
timeToResetRecordDisabled();
|
|
261
261
|
} else {
|
|
262
|
+
props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
|
|
262
263
|
setState({
|
|
263
264
|
showTimer: false,
|
|
264
265
|
showShot: true,
|
|
@@ -266,6 +267,7 @@ export function RecordVideo(props) {
|
|
|
266
267
|
});
|
|
267
268
|
}
|
|
268
269
|
} catch (err) {
|
|
270
|
+
props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
|
|
269
271
|
console.log('录制失败', err);
|
|
270
272
|
const errObj = err.innerError || err || {};
|
|
271
273
|
const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_record_tip');
|
|
@@ -117,19 +117,20 @@ export function Screenshot(props) {
|
|
|
117
117
|
// 相册写入权限
|
|
118
118
|
scope: 'scope.writePhotosAlbum',
|
|
119
119
|
success: () => {
|
|
120
|
-
props.event ? props.event.emit(changeIgnoreHideStopPreview,
|
|
120
|
+
props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
|
|
121
121
|
IPCPlayerContext.snapshot({
|
|
122
122
|
saveToAlbum,
|
|
123
123
|
// 保存到 IPC 相册
|
|
124
124
|
success: res => {
|
|
125
125
|
console.log(res, 'res');
|
|
126
|
+
props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
|
|
126
127
|
setState({
|
|
127
128
|
showShot: true,
|
|
128
129
|
shotUrl: res.tempImagePath
|
|
129
130
|
});
|
|
130
131
|
},
|
|
131
132
|
fail: err => {
|
|
132
|
-
props.event ? props.event.emit(changeIgnoreHideStopPreview,
|
|
133
|
+
props.event ? props.event.emit(changeIgnoreHideStopPreview, false) : event.emit(changeIgnoreHideStopPreview, false);
|
|
133
134
|
console.log(err, 'err');
|
|
134
135
|
const errObj = err.innerError || err || {};
|
|
135
136
|
const errMsg = errObj.errorMsg || Strings.getLang('ipc_player_error_screenshot_error_tip');
|
|
@@ -52,11 +52,14 @@ export declare const VoiceIntercom: React.ForwardRefExoticComponent<{
|
|
|
52
52
|
style?: React.CSSProperties | undefined;
|
|
53
53
|
intercomClassName?: string | undefined;
|
|
54
54
|
iconClassName?: string | undefined;
|
|
55
|
+
iconImageClassName?: string | undefined;
|
|
56
|
+
icon?: string | React.ReactNode;
|
|
55
57
|
widthScale?: number | undefined;
|
|
56
58
|
heightScale?: number | undefined;
|
|
57
59
|
onTouchStart?: TouchEventHandler['onTouchStart'];
|
|
58
60
|
onTouchEnd?: TouchEventHandler['onTouchEnd'];
|
|
59
61
|
talkingColor?: string | undefined;
|
|
62
|
+
bgColor?: string | undefined;
|
|
60
63
|
mode?: "circle" | "verticalSmall" | "fullSmall" | undefined;
|
|
61
64
|
disabled?: boolean | undefined;
|
|
62
65
|
} & React.RefAttributes<unknown>>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
2
2
|
import React, { useRef, useContext, useState, useEffect, forwardRef, useImperativeHandle } from 'react';
|
|
3
|
-
import { View, getSystemInfoSync } from '@ray-js/ray';
|
|
3
|
+
import { View, Image, getSystemInfoSync } from '@ray-js/ray';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import Svg from '@ray-js/svg';
|
|
6
6
|
import { useStore, getDefaultStore, updateAtom } from '../../ctx/store';
|
|
@@ -15,6 +15,8 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
15
15
|
style,
|
|
16
16
|
intercomClassName,
|
|
17
17
|
iconClassName,
|
|
18
|
+
iconImageClassName,
|
|
19
|
+
icon,
|
|
18
20
|
// recording: recordingAtom,
|
|
19
21
|
// intercom: intercomAtom,
|
|
20
22
|
// intercomMode: intercomModeAtom,
|
|
@@ -28,6 +30,7 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
28
30
|
widthScale = 0.11,
|
|
29
31
|
heightScale = 0.12,
|
|
30
32
|
talkingColor = '#ffffff',
|
|
33
|
+
bgColor,
|
|
31
34
|
disabled = false
|
|
32
35
|
} = props;
|
|
33
36
|
const [frame, setFrame] = useState(0);
|
|
@@ -178,9 +181,14 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
178
181
|
const animationFactor = Math.sin((frame + index) / 5) * 20; // 使用正弦波来模拟动态变化
|
|
179
182
|
return [50, 130, 180, 130, 50][index] + animationFactor; // 可以根据需求修改此逻辑
|
|
180
183
|
};
|
|
184
|
+
|
|
185
|
+
// 渲染对讲中的动画
|
|
186
|
+
|
|
187
|
+
// 渲染非对讲状态的图标
|
|
188
|
+
|
|
181
189
|
return /*#__PURE__*/React.createElement(View, {
|
|
182
190
|
style: _objectSpread(_objectSpread({}, style), mode === 'circle' && {
|
|
183
|
-
background: radialGradient(brandColor)
|
|
191
|
+
background: bgColor || radialGradient(brandColor)
|
|
184
192
|
}),
|
|
185
193
|
className: clsx({
|
|
186
194
|
'ipc-player-plugin-voice-intercom': mode === 'circle',
|
|
@@ -188,7 +196,7 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
188
196
|
}, intercomClassName),
|
|
189
197
|
onTouchStart: handTouchStart,
|
|
190
198
|
onTouchEnd: onTouchEnd
|
|
191
|
-
}, intercom ? /*#__PURE__*/React.createElement(View, {
|
|
199
|
+
}, intercom ? (() => /*#__PURE__*/React.createElement(View, {
|
|
192
200
|
className: clsx({
|
|
193
201
|
'ipc-player-plugin-voice-small-ing-intercom': mode !== 'circle'
|
|
194
202
|
})
|
|
@@ -206,7 +214,22 @@ export const VoiceIntercom = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
206
214
|
rx: index === 0 || index === 4 ? 1 : 2 // 控制圆角
|
|
207
215
|
,
|
|
208
216
|
ry: index === 0 || index === 4 ? 1 : 2
|
|
209
|
-
})))) :
|
|
210
|
-
|
|
211
|
-
|
|
217
|
+
})))))() : (() => {
|
|
218
|
+
if (icon) {
|
|
219
|
+
if (typeof icon === 'string') {
|
|
220
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
221
|
+
className: clsx('icon-image-default-container', iconClassName)
|
|
222
|
+
}, /*#__PURE__*/React.createElement(Image, {
|
|
223
|
+
src: icon,
|
|
224
|
+
className: clsx('icon-image-default-size', iconImageClassName)
|
|
225
|
+
}));
|
|
226
|
+
}
|
|
227
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
228
|
+
className: clsx('icon-image-default-container', iconClassName)
|
|
229
|
+
}, icon);
|
|
230
|
+
}
|
|
231
|
+
return /*#__PURE__*/React.createElement(View, {
|
|
232
|
+
className: clsx('icon-panel', 'icon-panel-one-way-intercom', mode === 'circle' && 'intercom-default-size', mode !== 'circle' && 'ipc-player-plugin-voice-small-intercom', iconClassName)
|
|
233
|
+
});
|
|
234
|
+
})());
|
|
212
235
|
});
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
@size: 24px;
|
|
2
2
|
|
|
3
3
|
.ipc-player-plugin-voice-intercom {
|
|
4
|
-
background: var(
|
|
4
|
+
background: var(
|
|
5
|
+
--ipc-player-plugin-voice-bg,
|
|
6
|
+
radial-gradient(77% 77% at 34% 28%, #ff997c 0%, #ff592a 99%)
|
|
7
|
+
);
|
|
5
8
|
width: calc(72px * var(--ipc-player-size-scale, 1));
|
|
6
9
|
height: calc(72px * var(--ipc-player-size-scale, 1));
|
|
7
10
|
border-radius: 50%;
|
|
@@ -51,4 +54,15 @@
|
|
|
51
54
|
.intercom-ing-small-size {
|
|
52
55
|
width: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
|
|
53
56
|
height: calc(var(--iconPlayerSize) * var(--ipc-player-size-scale, 1));
|
|
54
|
-
}
|
|
57
|
+
}
|
|
58
|
+
.icon-image-default-container {
|
|
59
|
+
width: 100%;
|
|
60
|
+
height: 100%;
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: center;
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
.icon-image-default-size {
|
|
66
|
+
width: 42%;
|
|
67
|
+
height: 42%;
|
|
68
|
+
}
|
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.28",
|
|
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.31",
|
|
42
42
|
"@ray-js/ray-ipc-utils": "^1.1.10",
|
|
43
43
|
"@ray-js/svg": "0.2.0",
|
|
44
44
|
"clsx": "^1.2.1",
|