-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
132 lines (132 loc) · 5.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RRWeb Debug - Play rrweb recordings</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
</head>
<body>
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
<div class="row align-items-center g-lg-5 py-5">
<div class="col-lg-7 text-center text-lg-start">
<h1 class="display-4 fw-bold lh-1 mb-3">RRWeb Debug</h1>
<p class="col-lg-10 fs-4">
Play your rrweb recordings in the browser. Great for debugging and
sharing your recordings.
</p>
<h2>How it works</h2>
<p class="col-lg-10 fs-4">
Upload your rrweb events in JSON format to
<a href="https://jsonblob.com/new">JSONBlob.com</a> or create a
Github Gist and paste the link here.
</p>
</div>
<div class="col-md-10 mx-auto col-lg-5">
<form action="play/index.html" method="get">
<p>
<label>
URL of your rrweb events.json file
<input
class="form-control form-control-lg"
type="url"
name="url"
placeholder="https://gist.githubusercontent.com/Juice10/.../raw/.../events.json"
/>
</label>
</p>
<p>
<label>
rrweb player version
<select
name="version"
id="versions"
class="form-control form-control-lg"
>
<option value="0.7.1">0.7.1 (rrweb v0.9.14)</option>
<option value="0.7.2">0.7.2 (rrweb v1.0.0)</option>
<option value="0.7.3">0.7.3 (rrweb v1.0.1)</option>
<option value="0.7.4">0.7.4 (rrweb v1.0.2)</option>
<option value="0.7.5">0.7.5 (rrweb v1.0.3)</option>
<option value="0.7.6">0.7.6 (rrweb v1.0.4)</option>
<option value="0.7.7">0.7.7 (rrweb v1.0.5)</option>
<option value="0.7.8">0.7.8 (rrweb v1.0.6)</option>
<option value="0.7.9">0.7.9 (rrweb v1.0.7)</option>
<option value="0.7.10">0.7.10 (rrweb v1.0.8)</option>
<option value="0.7.11">0.7.11 (rrweb v1.1.0)</option>
<option value="0.7.13">0.7.13 (rrweb v1.1.2)</option>
<option selected value="0.7.14">0.7.14 (rrweb v1.1.3)</option>
</select>
</label>
</p>
<p>
<button
class="btn btn-sm btn-secondary"
type="button"
data-bs-toggle="collapse"
data-bs-target="#advancedOptions"
aria-expanded="false"
aria-controls="advancedOptions"
>
Show Advanced Options
</button>
</p>
<div class="collapse" id="advancedOptions">
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="canvas-switch"
name="canvas"
/>
<label class="form-check-label" for="canvas-switch">
Canvas playback
</label>
</div>
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="virtual-dom-switch"
name="virtual-dom"
checked
/>
<label class="form-check-label" for="virtual-dom-switch">
Virtual Dom optimization
</label>
</div>
<div class="form-check form-switch">
<input
class="form-check-input"
type="checkbox"
role="switch"
id="play-switch"
name="play"
checked
/>
<label class="form-check-label" for="play-switch">
Play immediately
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Play video</button>
</form>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>