@midscene/recorder 0.26.2 → 0.26.3-beta-20250813075706.0
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/LICENSE +21 -0
- package/dist/Button.js +2 -2
- package/dist/RecordTimeline.js +51 -51
- package/dist/components/shiny-text.js +2 -2
- package/dist/index.js +4 -8
- package/dist/recorder-iife-index.js +2 -2
- package/dist/recorder-iife.js +413 -1659
- package/dist/recorder.js +5 -5
- package/package.json +5 -5
- package/dist/recorder-iife.js.LICENSE.txt +0 -8
- /package/dist/{Button.d.ts → types/src/Button.d.ts} +0 -0
- /package/dist/{RecordTimeline.d.ts → types/src/RecordTimeline.d.ts} +0 -0
- /package/dist/{components → types/src/components}/shiny-text.d.ts +0 -0
- /package/dist/{index.d.ts → types/src/index.d.ts} +0 -0
- /package/dist/{recorder-iife-index.d.ts → types/src/recorder-iife-index.d.ts} +0 -0
- /package/dist/{recorder.d.ts → types/src/recorder.d.ts} +0 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-present Bytedance, Inc. and its affiliates.
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/Button.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "./button.css";
|
|
3
3
|
const Button = ({ primary = false, size = 'medium', backgroundColor, label, ...props })=>{
|
|
4
4
|
const mode = primary ? 'demo-button--primary' : 'demo-button--secondary';
|
|
5
|
-
return /*#__PURE__*/
|
|
5
|
+
return /*#__PURE__*/ jsx("button", {
|
|
6
6
|
type: "button",
|
|
7
7
|
className: [
|
|
8
8
|
'demo-button',
|
package/dist/RecordTimeline.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { AimOutlined, CompassOutlined, CopyOutlined, EditOutlined, KeyOutlined, VerticalAlignTopOutlined } from "@ant-design/icons";
|
|
3
|
+
import { Button, Card, Image, Space, Timeline, Typography, message } from "antd";
|
|
4
|
+
import { useEffect, useState } from "react";
|
|
5
|
+
import { ShinyText } from "./components/shiny-text.js";
|
|
6
6
|
import "./RecordTimeline.css";
|
|
7
|
-
const { Text } =
|
|
7
|
+
const { Text } = Typography;
|
|
8
8
|
const RecordTimeline = ({ events, onEventClick })=>{
|
|
9
|
-
const [expandedEvents, setExpandedEvents] =
|
|
9
|
+
const [expandedEvents, setExpandedEvents] = useState(new Set());
|
|
10
10
|
console.log('events', events);
|
|
11
|
-
|
|
11
|
+
useEffect(()=>{
|
|
12
12
|
if (events.length > 0) {
|
|
13
13
|
const timeline = document.querySelector('.ant-timeline');
|
|
14
14
|
if (timeline) timeline.scrollIntoView({
|
|
@@ -37,51 +37,51 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
37
37
|
};
|
|
38
38
|
const copyToClipboard = (text)=>{
|
|
39
39
|
navigator.clipboard.writeText(text).then(()=>{
|
|
40
|
-
|
|
40
|
+
message.success('JSON copied to clipboard');
|
|
41
41
|
}).catch(()=>{
|
|
42
|
-
|
|
42
|
+
message.error('Copy failed');
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
45
|
const getEventIcon = (type)=>{
|
|
46
46
|
switch(type){
|
|
47
47
|
case 'click':
|
|
48
|
-
return /*#__PURE__*/
|
|
48
|
+
return /*#__PURE__*/ jsx(AimOutlined, {
|
|
49
49
|
style: {
|
|
50
50
|
color: '#1890ff'
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
53
|
case 'input':
|
|
54
|
-
return /*#__PURE__*/
|
|
54
|
+
return /*#__PURE__*/ jsx(EditOutlined, {
|
|
55
55
|
style: {
|
|
56
56
|
color: '#52c41a'
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
59
|
case 'scroll':
|
|
60
|
-
return /*#__PURE__*/
|
|
60
|
+
return /*#__PURE__*/ jsx(VerticalAlignTopOutlined, {
|
|
61
61
|
style: {
|
|
62
62
|
color: '#faad14'
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
65
|
case 'navigation':
|
|
66
|
-
return /*#__PURE__*/
|
|
66
|
+
return /*#__PURE__*/ jsx(CompassOutlined, {
|
|
67
67
|
style: {
|
|
68
68
|
color: '#722ed1'
|
|
69
69
|
}
|
|
70
70
|
});
|
|
71
71
|
case 'setViewport':
|
|
72
|
-
return /*#__PURE__*/
|
|
72
|
+
return /*#__PURE__*/ jsx(CompassOutlined, {
|
|
73
73
|
style: {
|
|
74
74
|
color: '#eb2f96'
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
77
|
case 'keydown':
|
|
78
|
-
return /*#__PURE__*/
|
|
78
|
+
return /*#__PURE__*/ jsx(KeyOutlined, {
|
|
79
79
|
style: {
|
|
80
80
|
color: '#fa8c16'
|
|
81
81
|
}
|
|
82
82
|
});
|
|
83
83
|
default:
|
|
84
|
-
return /*#__PURE__*/
|
|
84
|
+
return /*#__PURE__*/ jsx(AimOutlined, {
|
|
85
85
|
style: {
|
|
86
86
|
color: '#d9d9d9'
|
|
87
87
|
}
|
|
@@ -130,20 +130,20 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
130
130
|
const eventTitle = getEventTitle(event);
|
|
131
131
|
switch(event.type){
|
|
132
132
|
case 'click':
|
|
133
|
-
if (true === event.descriptionLoading && event.elementRect?.x !== void 0 && event.elementRect?.y !== void 0) return /*#__PURE__*/
|
|
133
|
+
if (true === event.descriptionLoading && event.elementRect?.x !== void 0 && event.elementRect?.y !== void 0) return /*#__PURE__*/ jsxs("span", {
|
|
134
134
|
style: {
|
|
135
135
|
display: 'flex',
|
|
136
136
|
alignItems: 'center',
|
|
137
137
|
gap: '4px'
|
|
138
138
|
},
|
|
139
139
|
children: [
|
|
140
|
-
/*#__PURE__*/
|
|
140
|
+
/*#__PURE__*/ jsxs(Text, {
|
|
141
141
|
children: [
|
|
142
142
|
eventTitle,
|
|
143
143
|
" - "
|
|
144
144
|
]
|
|
145
145
|
}),
|
|
146
|
-
/*#__PURE__*/
|
|
146
|
+
/*#__PURE__*/ jsx(ShinyText, {
|
|
147
147
|
text: `(${event.elementRect.x}, ${event.elementRect.y})`,
|
|
148
148
|
disabled: false,
|
|
149
149
|
speed: 3,
|
|
@@ -151,7 +151,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
151
151
|
})
|
|
152
152
|
]
|
|
153
153
|
});
|
|
154
|
-
if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/
|
|
154
|
+
if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/ jsxs(Text, {
|
|
155
155
|
className: "",
|
|
156
156
|
children: [
|
|
157
157
|
eventTitle,
|
|
@@ -159,31 +159,31 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
159
159
|
event.elementDescription
|
|
160
160
|
]
|
|
161
161
|
});
|
|
162
|
-
return /*#__PURE__*/
|
|
162
|
+
return /*#__PURE__*/ jsx(Text, {
|
|
163
163
|
children: eventTitle
|
|
164
164
|
});
|
|
165
165
|
case 'input':
|
|
166
|
-
if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/
|
|
166
|
+
if (false === event.descriptionLoading && event.elementDescription) return /*#__PURE__*/ jsxs(Text, {
|
|
167
167
|
children: [
|
|
168
168
|
eventTitle,
|
|
169
169
|
" - ",
|
|
170
170
|
event.elementDescription
|
|
171
171
|
]
|
|
172
172
|
});
|
|
173
|
-
return /*#__PURE__*/
|
|
173
|
+
return /*#__PURE__*/ jsxs("span", {
|
|
174
174
|
style: {
|
|
175
175
|
display: 'flex',
|
|
176
176
|
alignItems: 'center',
|
|
177
177
|
gap: '4px'
|
|
178
178
|
},
|
|
179
179
|
children: [
|
|
180
|
-
/*#__PURE__*/
|
|
180
|
+
/*#__PURE__*/ jsxs(Text, {
|
|
181
181
|
children: [
|
|
182
182
|
eventTitle,
|
|
183
183
|
" - "
|
|
184
184
|
]
|
|
185
185
|
}),
|
|
186
|
-
/*#__PURE__*/
|
|
186
|
+
/*#__PURE__*/ jsx(ShinyText, {
|
|
187
187
|
text: event.value ? `"${event.value}"` : '',
|
|
188
188
|
disabled: false,
|
|
189
189
|
speed: 3,
|
|
@@ -192,14 +192,14 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
192
192
|
]
|
|
193
193
|
});
|
|
194
194
|
case 'scroll':
|
|
195
|
-
if (event.elementDescription) return /*#__PURE__*/
|
|
195
|
+
if (event.elementDescription) return /*#__PURE__*/ jsxs(Text, {
|
|
196
196
|
children: [
|
|
197
197
|
eventTitle,
|
|
198
198
|
" - ",
|
|
199
199
|
event.value?.split(' ')[0] || ''
|
|
200
200
|
]
|
|
201
201
|
});
|
|
202
|
-
return /*#__PURE__*/
|
|
202
|
+
return /*#__PURE__*/ jsxs(Text, {
|
|
203
203
|
children: [
|
|
204
204
|
eventTitle,
|
|
205
205
|
" - Position: (",
|
|
@@ -213,7 +213,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
213
213
|
case 'navigation':
|
|
214
214
|
{
|
|
215
215
|
const truncatedUrl = event.url && event.url.length > 50 ? `${event.url.substring(0, 50)}...` : event.url;
|
|
216
|
-
return /*#__PURE__*/
|
|
216
|
+
return /*#__PURE__*/ jsxs(Text, {
|
|
217
217
|
children: [
|
|
218
218
|
eventTitle,
|
|
219
219
|
" - ",
|
|
@@ -222,14 +222,14 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
222
222
|
});
|
|
223
223
|
}
|
|
224
224
|
case 'setViewport':
|
|
225
|
-
return /*#__PURE__*/
|
|
225
|
+
return /*#__PURE__*/ jsxs(Text, {
|
|
226
226
|
children: [
|
|
227
227
|
eventTitle,
|
|
228
228
|
" - Desktop 964x992 px"
|
|
229
229
|
]
|
|
230
230
|
});
|
|
231
231
|
case 'keydown':
|
|
232
|
-
return /*#__PURE__*/
|
|
232
|
+
return /*#__PURE__*/ jsxs(Text, {
|
|
233
233
|
children: [
|
|
234
234
|
eventTitle,
|
|
235
235
|
" - Key: ",
|
|
@@ -237,7 +237,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
237
237
|
]
|
|
238
238
|
});
|
|
239
239
|
default:
|
|
240
|
-
return /*#__PURE__*/
|
|
240
|
+
return /*#__PURE__*/ jsx(Text, {
|
|
241
241
|
children: eventTitle
|
|
242
242
|
});
|
|
243
243
|
}
|
|
@@ -249,8 +249,8 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
249
249
|
return {
|
|
250
250
|
dot: getEventIcon(event.type),
|
|
251
251
|
color: getEventColor(event.type),
|
|
252
|
-
children: /*#__PURE__*/
|
|
253
|
-
children: /*#__PURE__*/
|
|
252
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
253
|
+
children: /*#__PURE__*/ jsxs(Card, {
|
|
254
254
|
size: "small",
|
|
255
255
|
bordered: false,
|
|
256
256
|
style: {
|
|
@@ -269,7 +269,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
269
269
|
}
|
|
270
270
|
},
|
|
271
271
|
children: [
|
|
272
|
-
/*#__PURE__*/
|
|
272
|
+
/*#__PURE__*/ jsxs(Space, {
|
|
273
273
|
style: {
|
|
274
274
|
width: '100%',
|
|
275
275
|
justifyContent: 'space-between',
|
|
@@ -277,21 +277,21 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
277
277
|
color: 'rgba(0, 0, 0, 0.85)'
|
|
278
278
|
},
|
|
279
279
|
children: [
|
|
280
|
-
/*#__PURE__*/
|
|
280
|
+
/*#__PURE__*/ jsx(Space, {
|
|
281
281
|
style: {
|
|
282
282
|
flex: 1,
|
|
283
283
|
minWidth: 0
|
|
284
284
|
},
|
|
285
285
|
children: getEventDescription(event)
|
|
286
286
|
}),
|
|
287
|
-
/*#__PURE__*/
|
|
288
|
-
children: (boxedImage || afterImage) && /*#__PURE__*/
|
|
287
|
+
/*#__PURE__*/ jsx(Space, {
|
|
288
|
+
children: (boxedImage || afterImage) && /*#__PURE__*/ jsxs("div", {
|
|
289
289
|
style: {
|
|
290
290
|
display: 'flex',
|
|
291
291
|
alignItems: 'center'
|
|
292
292
|
},
|
|
293
293
|
children: [
|
|
294
|
-
boxedImage && /*#__PURE__*/
|
|
294
|
+
boxedImage && /*#__PURE__*/ jsx("div", {
|
|
295
295
|
style: {
|
|
296
296
|
width: '24px',
|
|
297
297
|
height: '24px',
|
|
@@ -315,7 +315,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
315
315
|
onClick: (e)=>{
|
|
316
316
|
e.stopPropagation();
|
|
317
317
|
},
|
|
318
|
-
children: /*#__PURE__*/
|
|
318
|
+
children: /*#__PURE__*/ jsx(Image, {
|
|
319
319
|
src: boxedImage,
|
|
320
320
|
width: "100%",
|
|
321
321
|
height: "100%",
|
|
@@ -328,7 +328,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
328
328
|
}
|
|
329
329
|
})
|
|
330
330
|
}),
|
|
331
|
-
afterImage && /*#__PURE__*/
|
|
331
|
+
afterImage && /*#__PURE__*/ jsx("div", {
|
|
332
332
|
style: {
|
|
333
333
|
width: '24px',
|
|
334
334
|
height: '24px',
|
|
@@ -353,7 +353,7 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
353
353
|
onClick: (e)=>{
|
|
354
354
|
e.stopPropagation();
|
|
355
355
|
},
|
|
356
|
-
children: /*#__PURE__*/
|
|
356
|
+
children: /*#__PURE__*/ jsx(Image, {
|
|
357
357
|
src: afterImage,
|
|
358
358
|
width: "100%",
|
|
359
359
|
height: "100%",
|
|
@@ -371,12 +371,12 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
371
371
|
})
|
|
372
372
|
]
|
|
373
373
|
}),
|
|
374
|
-
isExpanded && /*#__PURE__*/
|
|
374
|
+
isExpanded && /*#__PURE__*/ jsx("div", {
|
|
375
375
|
style: {
|
|
376
376
|
marginTop: 8,
|
|
377
377
|
marginBottom: 8
|
|
378
378
|
},
|
|
379
|
-
children: /*#__PURE__*/
|
|
379
|
+
children: /*#__PURE__*/ jsx(Card, {
|
|
380
380
|
size: "small",
|
|
381
381
|
style: {
|
|
382
382
|
backgroundColor: '#f5f5f5'
|
|
@@ -384,12 +384,12 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
384
384
|
bodyStyle: {
|
|
385
385
|
padding: '0px'
|
|
386
386
|
},
|
|
387
|
-
children: /*#__PURE__*/
|
|
387
|
+
children: /*#__PURE__*/ jsxs("div", {
|
|
388
388
|
style: {
|
|
389
389
|
position: 'relative'
|
|
390
390
|
},
|
|
391
391
|
children: [
|
|
392
|
-
/*#__PURE__*/
|
|
392
|
+
/*#__PURE__*/ jsx("pre", {
|
|
393
393
|
style: {
|
|
394
394
|
fontSize: '12px',
|
|
395
395
|
margin: 0,
|
|
@@ -402,10 +402,10 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
402
402
|
},
|
|
403
403
|
children: JSON.stringify(truncateJsonStrings(event), null, 2)
|
|
404
404
|
}),
|
|
405
|
-
/*#__PURE__*/
|
|
405
|
+
/*#__PURE__*/ jsx(Button, {
|
|
406
406
|
type: "text",
|
|
407
407
|
size: "small",
|
|
408
|
-
icon: /*#__PURE__*/
|
|
408
|
+
icon: /*#__PURE__*/ jsx(CopyOutlined, {}),
|
|
409
409
|
onClick: (e)=>{
|
|
410
410
|
e.stopPropagation();
|
|
411
411
|
copyToClipboard(JSON.stringify(event, null, 2));
|
|
@@ -428,17 +428,17 @@ const RecordTimeline = ({ events, onEventClick })=>{
|
|
|
428
428
|
})
|
|
429
429
|
};
|
|
430
430
|
});
|
|
431
|
-
return /*#__PURE__*/
|
|
431
|
+
return /*#__PURE__*/ jsx("div", {
|
|
432
432
|
style: {
|
|
433
433
|
padding: '3px'
|
|
434
434
|
},
|
|
435
|
-
children: /*#__PURE__*/
|
|
435
|
+
children: /*#__PURE__*/ jsx(Space, {
|
|
436
436
|
direction: "vertical",
|
|
437
437
|
size: "large",
|
|
438
438
|
style: {
|
|
439
439
|
width: '100%'
|
|
440
440
|
},
|
|
441
|
-
children: /*#__PURE__*/
|
|
441
|
+
children: /*#__PURE__*/ jsx(Timeline, {
|
|
442
442
|
mode: "left",
|
|
443
443
|
className: "timeline-scrollable",
|
|
444
444
|
items: timelineItems,
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import "./shiny-text.css";
|
|
3
3
|
const ShinyText = ({ text, disabled = false, speed = 5, className = '' })=>{
|
|
4
4
|
const style = {
|
|
5
5
|
'--animation-duration': `${speed}s`
|
|
6
6
|
};
|
|
7
|
-
return /*#__PURE__*/
|
|
7
|
+
return /*#__PURE__*/ jsx("div", {
|
|
8
8
|
className: `shiny-text ${disabled ? 'disabled' : ''} ${className}`,
|
|
9
9
|
style: style,
|
|
10
10
|
children: text
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
var __webpack_exports__EventRecorder = __WEBPACK_EXTERNAL_MODULE__recorder_js_d193b4da__.EventRecorder;
|
|
6
|
-
var __webpack_exports__RecordTimeline = __WEBPACK_EXTERNAL_MODULE__RecordTimeline_js_aff22025__.RecordTimeline;
|
|
7
|
-
var __webpack_exports__convertToChromeEvents = __WEBPACK_EXTERNAL_MODULE__recorder_js_d193b4da__.convertToChromeEvents;
|
|
8
|
-
export { __webpack_exports__Button as Button, __webpack_exports__EventRecorder as EventRecorder, __webpack_exports__RecordTimeline as RecordTimeline, __webpack_exports__convertToChromeEvents as convertToChromeEvents };
|
|
1
|
+
import { Button } from "./Button.js";
|
|
2
|
+
import { EventRecorder, convertToChromeEvents } from "./recorder.js";
|
|
3
|
+
import { RecordTimeline } from "./RecordTimeline.js";
|
|
4
|
+
export { Button, EventRecorder, RecordTimeline, convertToChromeEvents };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
window.EventRecorder =
|
|
1
|
+
import { EventRecorder } from "./recorder.js";
|
|
2
|
+
window.EventRecorder = EventRecorder;
|