@betterbugs/rrweb-player 2.0.0-alpha.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/README.md +314 -0
- package/dist/events.js +3 -0
- package/dist/global.css +12 -0
- package/dist/rrweb-player.cjs +15013 -0
- package/dist/rrweb-player.cjs.map +1 -0
- package/dist/rrweb-player.d.cts +109 -0
- package/dist/rrweb-player.d.ts +109 -0
- package/dist/rrweb-player.js +15013 -0
- package/dist/rrweb-player.js.map +1 -0
- package/dist/rrweb-player.umd.cjs +15067 -0
- package/dist/rrweb-player.umd.cjs.map +7 -0
- package/dist/rrweb-player.umd.min.cjs +126 -0
- package/dist/rrweb-player.umd.min.cjs.map +7 -0
- package/dist/style.css +81 -0
- package/dist/style.min.css +2 -0
- package/dist/style.min.css.map +7 -0
- package/package.json +75 -0
package/README.md
ADDED
|
@@ -0,0 +1,314 @@
|
|
|
1
|
+
_Looking for a Vue.js version? Go here --> [@preflight-hq/rrweb-player-vue](https://github.com/Preflight-HQ/rrweb-player-vue)_
|
|
2
|
+
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# rrweb-player
|
|
6
|
+
|
|
7
|
+
Since rrweb's replayer only provides a basic UI, you can choose rrweb-replayer which is based on rrweb's public APIs but has a feature-rich replayer UI.
|
|
8
|
+
|
|
9
|
+
## How is this different from `rrweb.Replayer`?
|
|
10
|
+
|
|
11
|
+
rrweb-player uses rrweb's Replayer under the hood, but as Replayer doesn't include any UI for controls, rrweb-player adds those.
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
rrweb-player can also be included with `<script>`：
|
|
16
|
+
|
|
17
|
+
```html
|
|
18
|
+
<link
|
|
19
|
+
rel="stylesheet"
|
|
20
|
+
href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
|
|
21
|
+
/>
|
|
22
|
+
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
Or installed by using NPM：
|
|
26
|
+
|
|
27
|
+
```shell
|
|
28
|
+
npm install --save rrweb-player
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
```js
|
|
32
|
+
import rrwebPlayer from 'rrweb-player';
|
|
33
|
+
import 'rrweb-player/dist/style.css';
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
```js
|
|
39
|
+
new rrwebPlayer({
|
|
40
|
+
target: document.body, // customizable root element
|
|
41
|
+
props: {
|
|
42
|
+
events,
|
|
43
|
+
},
|
|
44
|
+
});
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Options
|
|
48
|
+
|
|
49
|
+
| key | default | description |
|
|
50
|
+
| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |
|
|
51
|
+
| events | [] | the events for replaying |
|
|
52
|
+
| width | 1024 | the width of the replayer |
|
|
53
|
+
| height | 576 | the height of the replayer |
|
|
54
|
+
| maxScale | 1 | the maximum scale of the replayer (1 = 100%), set to 0 for unlimited |
|
|
55
|
+
| autoPlay | true | whether to autoplay |
|
|
56
|
+
| speed | 1 | The default speed to play at |
|
|
57
|
+
| speedOption | [1, 2, 4, 8] | speed options in UI |
|
|
58
|
+
| showController | true | whether to show the controller UI |
|
|
59
|
+
| tags | {} | customize the custom events style with a key-value map |
|
|
60
|
+
| inactiveColor | #D4D4D4 | Customize the color of inactive periods indicator in the progress bar with a valid CSS color string. |
|
|
61
|
+
| ... | - | all the [rrweb Replayer options](https://github.com/rrweb-io/rrweb/blob/master/guide.md#options-1) will be bypassed |
|
|
62
|
+
|
|
63
|
+
## methods on the rrwebPlayer component
|
|
64
|
+
|
|
65
|
+
```ts
|
|
66
|
+
addEventListener(event: string, handler: (params: any) => unknown): void;
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
```ts
|
|
70
|
+
addEvent(event: eventWithTime): void;
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
```ts
|
|
74
|
+
getMetaData() => {
|
|
75
|
+
startTime: number;
|
|
76
|
+
endTime: number;
|
|
77
|
+
totalTime: number;
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
```ts
|
|
82
|
+
getReplayer() => Replayer;
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
getMirror() => Mirror;
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
Toggles between play/pause
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
toggle();
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Sets speed of player
|
|
96
|
+
|
|
97
|
+
```ts
|
|
98
|
+
setSpeed(speed: number)
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Turns on/off skip inactive
|
|
102
|
+
|
|
103
|
+
```ts
|
|
104
|
+
toggleSkipInactive();
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Triggers resize, do this whenever you change width/height
|
|
108
|
+
|
|
109
|
+
```ts
|
|
110
|
+
triggerResize();
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
Plays replay
|
|
114
|
+
|
|
115
|
+
```ts
|
|
116
|
+
play();
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
Pauses replay
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
pause();
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
Go to a point in time and pause or play from then
|
|
126
|
+
|
|
127
|
+
```ts
|
|
128
|
+
goto(timeOffset: number, play?: boolean)
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
Plays from a time to a time and (optionally) loop
|
|
132
|
+
|
|
133
|
+
```ts
|
|
134
|
+
playRange(
|
|
135
|
+
timeOffset: number,
|
|
136
|
+
endTimeOffset: number,
|
|
137
|
+
startLooping: boolean = false,
|
|
138
|
+
afterHook: undefined | (() => void) = undefined,
|
|
139
|
+
)
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
## Sponsors
|
|
143
|
+
|
|
144
|
+
[Become a sponsor](https://opencollective.com/rrweb#sponsor) and get your logo on our README on Github with a link to your site.
|
|
145
|
+
|
|
146
|
+
### Gold Sponsors 🥇
|
|
147
|
+
|
|
148
|
+
<div dir="auto">
|
|
149
|
+
|
|
150
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/0/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
151
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/1/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
152
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/2/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
153
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/3/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
154
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/4/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
155
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/5/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
156
|
+
<a href="https://opencollective.com/rrweb/tiers/gold-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/gold-sponsor/6/avatar.svg?requireActive=false&avatarHeight=225" alt="sponsor"></a>
|
|
157
|
+
|
|
158
|
+
</div>
|
|
159
|
+
|
|
160
|
+
### Silver Sponsors 🥈
|
|
161
|
+
|
|
162
|
+
<div dir="auto">
|
|
163
|
+
|
|
164
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/0/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
165
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/1/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
166
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/2/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
167
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/3/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
168
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/4/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
169
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/5/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
170
|
+
<a href="https://opencollective.com/rrweb/tiers/silver-sponsor/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/silver-sponsor/6/avatar.svg?requireActive=false&avatarHeight=158" alt="sponsor"></a>
|
|
171
|
+
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
### Bronze Sponsors 🥉
|
|
175
|
+
|
|
176
|
+
<div dir="auto">
|
|
177
|
+
|
|
178
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/0/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
179
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/1/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
180
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/2/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
181
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/3/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
182
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/4/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
183
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/5/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
184
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/6/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
185
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/7/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
186
|
+
<a href="https://opencollective.com/rrweb/tiers/sponsors/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/rrweb/tiers/sponsors/8/avatar.svg?requireActive=false&avatarHeight=70" alt="sponsor"></a>
|
|
187
|
+
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
### Backers
|
|
191
|
+
|
|
192
|
+
<a href="https://opencollective.com/rrweb#sponsor" rel="nofollow"><img src="https://opencollective.com/rrweb/tiers/backers.svg?avatarHeight=36"></a>
|
|
193
|
+
|
|
194
|
+
## Core Team Members
|
|
195
|
+
|
|
196
|
+
<table>
|
|
197
|
+
<tr>
|
|
198
|
+
<td align="center">
|
|
199
|
+
<a href="https://github.com/Yuyz0112">
|
|
200
|
+
<img
|
|
201
|
+
src="https://avatars.githubusercontent.com/u/13651389?s=100"
|
|
202
|
+
width="100px;"
|
|
203
|
+
alt=""
|
|
204
|
+
/>
|
|
205
|
+
<br /><sub><b>Yuyz0112</b></sub>
|
|
206
|
+
<br /><br />
|
|
207
|
+
</a>
|
|
208
|
+
</td>
|
|
209
|
+
<td align="center">
|
|
210
|
+
<a href="https://github.com/YunFeng0817">
|
|
211
|
+
<img
|
|
212
|
+
src="https://avatars.githubusercontent.com/u/27533910?s=100"
|
|
213
|
+
width="100px;"
|
|
214
|
+
alt=""
|
|
215
|
+
/>
|
|
216
|
+
<br /><sub><b>Yun Feng</b></sub>
|
|
217
|
+
<br /><br />
|
|
218
|
+
</a>
|
|
219
|
+
</td>
|
|
220
|
+
<td align="center">
|
|
221
|
+
<a href="https://github.com/eoghanmurray">
|
|
222
|
+
<img
|
|
223
|
+
src="https://avatars.githubusercontent.com/u/156780?s=100"
|
|
224
|
+
width="100px;"
|
|
225
|
+
alt=""
|
|
226
|
+
/>
|
|
227
|
+
<br /><sub><b>eoghanmurray</b></sub>
|
|
228
|
+
<br /><br />
|
|
229
|
+
</a>
|
|
230
|
+
</td>
|
|
231
|
+
<td align="center">
|
|
232
|
+
<a href="https://github.com/Juice10">
|
|
233
|
+
<img
|
|
234
|
+
src="https://avatars.githubusercontent.com/u/4106?s=100"
|
|
235
|
+
width="100px;"
|
|
236
|
+
alt=""
|
|
237
|
+
/>
|
|
238
|
+
<br /><sub><b>Juice10</b></sub>
|
|
239
|
+
<br /><sub>open for rrweb consulting</sub>
|
|
240
|
+
</a>
|
|
241
|
+
</td>
|
|
242
|
+
</tr>
|
|
243
|
+
</table>
|
|
244
|
+
|
|
245
|
+
## Who's using rrweb?
|
|
246
|
+
|
|
247
|
+
<table>
|
|
248
|
+
<tr>
|
|
249
|
+
<td align="center">
|
|
250
|
+
<a href="http://www.smartx.com/" target="_blank">
|
|
251
|
+
<img width="195px" src="https://www.rrweb.io/logos/smartx.png">
|
|
252
|
+
</a>
|
|
253
|
+
</td>
|
|
254
|
+
<td align="center">
|
|
255
|
+
<a href="https://posthog.com?utm_source=rrweb&utm_medium=sponsorship&utm_campaign=open-source-sponsorship" target="_blank">
|
|
256
|
+
<img width="195px" src="https://www.rrweb.io/logos/posthog.png">
|
|
257
|
+
</a>
|
|
258
|
+
</td>
|
|
259
|
+
<td align="center">
|
|
260
|
+
<a href="https://statcounter.com/session-replay/" target="_blank">
|
|
261
|
+
<img width="195px" src="https://statcounter.com/images/logo-statcounter-arc-blue.svg">
|
|
262
|
+
</a>
|
|
263
|
+
</td>
|
|
264
|
+
<td align="center">
|
|
265
|
+
<a href="https://recordonce.com/" target="_blank">
|
|
266
|
+
<img width="195px" alt="Smart screen recording for SaaS" src="https://uploads-ssl.webflow.com/5f3d133183156245630d4446/5f3d1940abe8db8612c23521_Record-Once-logo-554x80px.svg">
|
|
267
|
+
</a>
|
|
268
|
+
</td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<td align="center">
|
|
272
|
+
<a href="https://cux.io" target="_blank">
|
|
273
|
+
<img style="padding: 8px" alt="The first ever UX automation tool" width="195px" src="https://cux.io/cux-logo.svg">
|
|
274
|
+
</a>
|
|
275
|
+
</td>
|
|
276
|
+
<td align="center">
|
|
277
|
+
<a href="https://remsupp.com" target="_blank">
|
|
278
|
+
<img style="padding: 8px" alt="Remote Access & Co-Browsing" width="195px" src="https://remsupp.com/images/logo.png">
|
|
279
|
+
</a>
|
|
280
|
+
</td>
|
|
281
|
+
<td align="center">
|
|
282
|
+
<a href="https://highlight.io" target="_blank">
|
|
283
|
+
<img style="padding: 8px" alt="The open source, fullstack Monitoring Platform." width="195px" src="https://github.com/highlight/highlight/raw/main/highlight.io/public/images/logo.png">
|
|
284
|
+
</a>
|
|
285
|
+
</td>
|
|
286
|
+
<td align="center">
|
|
287
|
+
<a href="https://analyzee.io" target="_blank">
|
|
288
|
+
<img style="padding: 8px" alt="Comprehensive data analytics platform that empowers businesses to gain valuable insights and make data-driven decisions." width="195px" src="https://cdn.analyzee.io/assets/analyzee-logo.png">
|
|
289
|
+
</a>
|
|
290
|
+
</td>
|
|
291
|
+
</tr>
|
|
292
|
+
<tr>
|
|
293
|
+
<td align="center">
|
|
294
|
+
<a href="https://requestly.io" target="_blank">
|
|
295
|
+
<img style="padding: 8px" alt="Intercept, Modify, Record & Replay HTTP Requests." width="195px" src="https://github.com/requestly/requestly/assets/16779465/652552db-c867-44cb-9bb5-94a2026e04ca">
|
|
296
|
+
</a>
|
|
297
|
+
</td>
|
|
298
|
+
<td align="center">
|
|
299
|
+
<a href="https://gleap.io" target="_blank">
|
|
300
|
+
<img style="padding: 8px" alt="In-app bug reporting & customer feedback platform." width="195px" src="https://assets-global.website-files.com/6506f3f29c68b1724807619d/6506f56010237164c6306591_GleapLogo.svg">
|
|
301
|
+
</a>
|
|
302
|
+
</td>
|
|
303
|
+
<td align="center">
|
|
304
|
+
<a href="https://uxwizz.com" target="_blank">
|
|
305
|
+
<img style="padding: 8px" alt="Self-hosted website analytics with heatmaps and session recordings." width="195px" src="https://github.com/UXWizz/public-files/raw/main/assets/logo.png">
|
|
306
|
+
</a>
|
|
307
|
+
</td>
|
|
308
|
+
<td align="center">
|
|
309
|
+
<a href="https://www.howdygo.com" target="_blank">
|
|
310
|
+
<img style="padding: 8px" alt="Interactive product demos for small marketing teams" width="195px" src="https://assets-global.website-files.com/650afb446f1dd5bd410f00cc/650b2cec6188ff54dd9b01e1_Logo.svg">
|
|
311
|
+
</a>
|
|
312
|
+
</td>
|
|
313
|
+
</tr>
|
|
314
|
+
</table>
|