Skip to content

Commit 134edd4

Browse files
pauldambrapauldambra
committed
UI fiddling
1 parent 483f55f commit 134edd4

File tree

5 files changed

+234
-131
lines changed

5 files changed

+234
-131
lines changed

‎index.html

Lines changed: 138 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -8,122 +8,165 @@
88
<title>RRWeb Debug - Play rrweb recordings</title>
99
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
1010
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
1112
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
1213
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
1314
crossorigin="anonymous"></script>
1415
</head>
1516

1617
<body>
18+
<!-- Header Navbar -->
19+
<nav class="navbar navbar-dark bg-dark py-3">
20+
<div class="container">
21+
<h4 class="navbar-brand mb-0 fw-bold">RRWeb Debug</h4>
22+
<small class="text-muted">Play rrweb recordings in your browser</small>
23+
</div>
24+
</nav>
25+
26+
<!-- Main Content -->
1727
<div class="container col-xl-10 col-xxl-8 px-4 py-5">
18-
<div class="row align-items-center g-lg-5 py-5">
28+
<div class="row align-items-center g-lg-5 py-4">
1929
<div class="col-lg-7 text-center text-lg-start">
20-
<h1 class="display-4 fw-bold lh-1 mb-3">RRWeb Debug</h1>
21-
<p class="col-lg-10 fs-4">
30+
<h1 class="display-5 fw-bold lh-1 mb-4">Debug Your Recordings</h1>
31+
<p class="col-lg-10 fs-5 text-muted mb-4">
2232
Play your rrweb recordings in the browser. Great for debugging and
23-
sharing your recordings.
24-
</p>
25-
<h2>How it works</h2>
26-
<p class="col-lg-10 fs-4">
27-
Upload your rrweb events JSON file, paste the content directly, or
28-
provide a URL to a remote JSON file (like
29-
<a href="https://jsonblob.com/new">JSONBlob.com</a> or Github Gist).
33+
sharing your recordings with others.
3034
</p>
35+
36+
<div class="card bg-light border-0 mb-4">
37+
<div class="card-body">
38+
<h5 class="card-title">How it works</h5>
39+
<p class="card-text">
40+
Upload your rrweb events JSON file, paste the content directly, or
41+
provide a URL to a remote JSON file (like
42+
<a href="https://jsonblob.com/new" target="_blank">JSONBlob.com</a> or Github Gist).
43+
</p>
44+
</div>
45+
</div>
3146
</div>
47+
3248
<div class="col-md-10 mx-auto col-lg-5">
33-
<form id="eventsForm">
34-
<!-- Input method selection -->
35-
<div class="mb-3">
36-
<div class="btn-group w-100" role="group" aria-label="Input method">
37-
<input type="radio" class="btn-check" name="inputMethod" id="urlMethod" value="url" checked>
38-
<label class="btn btn-outline-primary" for="urlMethod">URL</label>
39-
40-
<input type="radio" class="btn-check" name="inputMethod" id="fileMethod" value="file">
41-
<label class="btn btn-outline-primary" for="fileMethod">File Upload</label>
42-
43-
<input type="radio" class="btn-check" name="inputMethod" id="pasteMethod" value="paste">
44-
<label class="btn btn-outline-primary" for="pasteMethod">Paste JSON</label>
45-
</div>
49+
<div class="card shadow-sm">
50+
<div class="card-header bg-light">
51+
<h5 class="card-title mb-0">
52+
<i class="bi bi-upload me-2"></i>Load Your Events
53+
</h5>
4654
</div>
55+
<div class="card-body">
56+
<form id="eventsForm">
57+
<!-- Input method selection -->
58+
<div class="mb-3">
59+
<label class="form-label fw-semibold">Choose input method:</label>
60+
<div class="btn-group w-100" role="group" aria-label="Input method">
61+
<input type="radio" class="btn-check" name="inputMethod" id="urlMethod" value="url" checked>
62+
<label class="btn btn-outline-primary" for="urlMethod">URL</label>
4763

48-
<!-- URL input (existing) -->
49-
<div id="urlInput" class="input-section">
50-
<label>
51-
URL of your rrweb events.json file
52-
<input class="form-control form-control-lg" type="url" name="url" id="urlField"
53-
placeholder="https://gist.githubusercontent.com/Juice10/.../raw/.../events.json" />
54-
</label>
55-
</div>
64+
<input type="radio" class="btn-check" name="inputMethod" id="fileMethod" value="file">
65+
<label class="btn btn-outline-primary" for="fileMethod">File Upload</label>
5666

57-
<!-- File upload input -->
58-
<div id="fileInput" class="input-section d-none">
59-
<label>
60-
Upload your rrweb events JSON file
61-
<input class="form-control form-control-lg" type="file" name="file" id="fileField"
62-
accept=".json,application/json" />
63-
</label>
64-
</div>
67+
<input type="radio" class="btn-check" name="inputMethod" id="pasteMethod" value="paste">
68+
<label class="btn btn-outline-primary" for="pasteMethod">Paste JSON</label>
69+
</div>
70+
</div>
6571

66-
<!-- Paste JSON input -->
67-
<div id="pasteInput" class="input-section d-none">
68-
<label>
69-
Paste your rrweb events JSON content
70-
<textarea class="form-control" name="jsonContent" id="jsonField" rows="10"
71-
placeholder='[{"type": 0, "data": {...}}, ...]'></textarea>
72-
</label>
73-
</div>
72+
<!-- URL input -->
73+
<div id="urlInput" class="input-section mb-3">
74+
<label class="form-label fw-semibold">
75+
URL of your rrweb events.json file
76+
</label>
77+
<input class="form-control form-control-lg" type="url" name="url" id="urlField"
78+
placeholder="https://gist.githubusercontent.com/Juice10/.../raw/.../events.json" />
79+
</div>
80+
81+
<!-- File upload input -->
82+
<div id="fileInput" class="input-section d-none mb-3">
83+
<label class="form-label fw-semibold">
84+
Upload your rrweb events JSON file
85+
</label>
86+
<input class="form-control form-control-lg" type="file" name="file" id="fileField"
87+
accept=".json,application/json" />
88+
</div>
89+
90+
<!-- Paste JSON input -->
91+
<div id="pasteInput" class="input-section d-none mb-3">
92+
<label class="form-label fw-semibold">
93+
Paste your rrweb events JSON content
94+
</label>
95+
<textarea class="form-control" name="jsonContent" id="jsonField" rows="8"
96+
placeholder='[{"type": 0, "data": {...}}, ...]'></textarea>
97+
</div>
98+
99+
<div class="mb-3">
100+
<label class="form-label fw-semibold">
101+
RRWeb player version
102+
</label>
103+
<select name="version" id="versions" class="form-select form-select-lg">
104+
<option value="0.7.1">0.7.1 (rrweb v0.9.14)</option>
105+
<option value="0.7.2">0.7.2 (rrweb v1.0.0)</option>
106+
<option value="0.7.3">0.7.3 (rrweb v1.0.1)</option>
107+
<option value="0.7.4">0.7.4 (rrweb v1.0.2)</option>
108+
<option value="0.7.5">0.7.5 (rrweb v1.0.3)</option>
109+
<option value="0.7.6">0.7.6 (rrweb v1.0.4)</option>
110+
<option value="0.7.7">0.7.7 (rrweb v1.0.5)</option>
111+
<option value="0.7.8">0.7.8 (rrweb v1.0.6)</option>
112+
<option value="0.7.9">0.7.9 (rrweb v1.0.7)</option>
113+
<option value="0.7.10">0.7.10 (rrweb v1.0.8)</option>
114+
<option value="0.7.11">0.7.11 (rrweb v1.1.0)</option>
115+
<option value="0.7.13">0.7.13 (rrweb v1.1.2)</option>
116+
<option selected value="0.7.14">0.7.14 (rrweb v1.1.3)</option>
117+
</select>
118+
</div>
74119

75-
<p class="mt-3">
76-
<label>
77-
rrweb player version
78-
<select name="version" id="versions" class="form-control form-control-lg">
79-
<option value="0.7.1">0.7.1 (rrweb v0.9.14)</option>
80-
<option value="0.7.2">0.7.2 (rrweb v1.0.0)</option>
81-
<option value="0.7.3">0.7.3 (rrweb v1.0.1)</option>
82-
<option value="0.7.4">0.7.4 (rrweb v1.0.2)</option>
83-
<option value="0.7.5">0.7.5 (rrweb v1.0.3)</option>
84-
<option value="0.7.6">0.7.6 (rrweb v1.0.4)</option>
85-
<option value="0.7.7">0.7.7 (rrweb v1.0.5)</option>
86-
<option value="0.7.8">0.7.8 (rrweb v1.0.6)</option>
87-
<option value="0.7.9">0.7.9 (rrweb v1.0.7)</option>
88-
<option value="0.7.10">0.7.10 (rrweb v1.0.8)</option>
89-
<option value="0.7.11">0.7.11 (rrweb v1.1.0)</option>
90-
<option value="0.7.13">0.7.13 (rrweb v1.1.2)</option>
91-
<option selected value="0.7.14">0.7.14 (rrweb v1.1.3)</option>
92-
</select>
93-
</label>
94-
</p>
95-
<p>
96-
<button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse"
97-
data-bs-target="#advancedOptions" aria-expanded="false" aria-controls="advancedOptions">
98-
Show Advanced Options
99-
</button>
100-
</p>
101-
<div class="collapse" id="advancedOptions">
102-
<div class="form-check form-switch">
103-
<input class="form-check-input" type="checkbox" role="switch" id="canvas-switch" name="canvas" />
104-
<label class="form-check-label" for="canvas-switch">
105-
Canvas playback
106-
</label>
107-
</div>
108-
<div class="form-check form-switch">
109-
<input class="form-check-input" type="checkbox" role="switch" id="virtual-dom-switch" name="virtual-dom"
110-
checked />
111-
<label class="form-check-label" for="virtual-dom-switch">
112-
Virtual Dom optimization
113-
</label>
114-
</div>
115-
<div class="form-check form-switch">
116-
<input class="form-check-input" type="checkbox" role="switch" id="play-switch" name="play" checked />
117-
<label class="form-check-label" for="play-switch">
118-
Play immediately
119-
</label>
120-
</div>
120+
<div class="mb-3">
121+
<button class="btn btn-outline-secondary w-100 d-flex align-items-center justify-content-between"
122+
type="button" data-bs-toggle="collapse" data-bs-target="#advancedOptions" aria-expanded="false"
123+
aria-controls="advancedOptions" id="advancedOptionsBtn">
124+
<span>
125+
<i class="bi bi-gear me-2"></i>Advanced Options
126+
</span>
127+
<i class="bi bi-chevron-down" id="advancedOptionsIcon"></i>
128+
</button>
129+
</div>
130+
131+
<div class="collapse" id="advancedOptions">
132+
<div class="card bg-light border-0 mb-3">
133+
<div class="card-body">
134+
<div class="form-check form-switch mb-2">
135+
<input class="form-check-input" type="checkbox" role="switch" id="canvas-switch" name="canvas" />
136+
<label class="form-check-label" for="canvas-switch">
137+
Canvas playback
138+
</label>
139+
</div>
140+
<div class="form-check form-switch mb-2">
141+
<input class="form-check-input" type="checkbox" role="switch" id="virtual-dom-switch"
142+
name="virtual-dom" checked />
143+
<label class="form-check-label" for="virtual-dom-switch">
144+
Virtual DOM optimization
145+
</label>
146+
</div>
147+
<div class="form-check form-switch">
148+
<input class="form-check-input" type="checkbox" role="switch" id="play-switch" name="play"
149+
checked />
150+
<label class="form-check-label" for="play-switch">
151+
Play immediately
152+
</label>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
158+
<div class="d-grid">
159+
<button class="btn btn-primary btn-lg" type="submit">
160+
<i class="bi bi-play-circle me-2"></i>Play Recording
161+
</button>
162+
</div>
163+
</form>
121164
</div>
122-
<button class="btn btn-primary" type="submit">Play video</button>
123-
</form>
165+
</div>
124166
</div>
125167
</div>
126168
</div>
169+
127170
<script type="module" src="/src/main.ts"></script>
128171
<script>
129172
// Handle input method switching

‎play/index.html

Lines changed: 84 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,87 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>RRWeb Debug</title>
8-
<link
9-
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
10-
rel="stylesheet"
11-
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
12-
crossorigin="anonymous"
13-
/>
14-
<script type="module" src="/src/play.js"></script>
15-
</head>
16-
<body>
17-
<p>Events JSON: <a class="json" href="#">loading...</a></p>
18-
<p>
19-
Version:
20-
<select id="versions"></select>
21-
</p>
22-
<div
23-
id="jsoneditor"
24-
style="
25-
width: 100%;
26-
min-height: 400px;
27-
height: calc(100vh - 656px - 100px);
28-
"
29-
></div>
30-
<div id="player">
31-
<p class="loading">Loading player...</p>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>RRWeb Debug</title>
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
10+
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous" />
11+
<script type="module" src="/src/play.js"></script>
12+
<style>
13+
/* Minimal custom CSS - just for layout heights */
14+
html,
15+
body {
16+
height: 100%;
17+
}
18+
19+
.main-content {
20+
height: calc(100vh - 100px);
21+
}
22+
</style>
23+
</head>
24+
25+
<body class="d-flex flex-column">
26+
<!-- Header Navbar -->
27+
<nav class="navbar navbar-dark bg-dark py-3">
28+
<div class="container-fluid">
29+
<div class="row w-100 align-items-center">
30+
<div class="col-lg-8">
31+
<h4 class="navbar-brand mb-0 fw-bold">RRWeb Debug Player</h4>
32+
<small class="text-muted d-block">
33+
Events: <span id="json-source" class="text-info">loading...</span>
34+
</small>
35+
</div>
36+
<div class="col-lg-4 text-end">
37+
<div class="d-flex align-items-center justify-content-end">
38+
<label for="versions" class="form-label text-light me-2 mb-0">Version:</label>
39+
<select id="versions" class="form-select form-select-sm" style="width: auto;"></select>
40+
</div>
41+
</div>
42+
</div>
3243
</div>
33-
</body>
34-
</html>
44+
</nav>
45+
46+
<!-- Main Content -->
47+
<div class="container-fluid flex-grow-1 py-3 main-content">
48+
<div class="row h-100 g-3">
49+
<!-- Player Panel -->
50+
<div class="col-lg-8">
51+
<div class="card h-100 shadow-sm">
52+
<div class="card-header bg-light">
53+
<h5 class="card-title mb-0">
54+
<i class="bi bi-play-circle me-2"></i>Player
55+
</h5>
56+
</div>
57+
<div class="card-body p-0 position-relative bg-light">
58+
<div id="player" class="h-100 d-flex align-items-center justify-content-center">
59+
<div class="loading text-muted">
60+
<div class="spinner-border spinner-border-sm me-2" role="status">
61+
<span class="visually-hidden">Loading...</span>
62+
</div>
63+
Loading player...
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<!-- JSON Editor Panel -->
71+
<div class="col-lg-4">
72+
<div class="card h-100 shadow-sm">
73+
<div class="card-header bg-light">
74+
<h5 class="card-title mb-0">
75+
<i class="bi bi-code-square me-2"></i>Events JSON
76+
</h5>
77+
</div>
78+
<div class="card-body p-0">
79+
<div id="jsoneditor" class="h-100"></div>
80+
</div>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</body>
86+
87+
</html>

0 commit comments

Comments
 (0)