xuguopeng/rrweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update rreb and refactor toggle

Browse Source
This commit is contained in:
Yanzhen Yu
2026-04-01 12:00:00 +08:00
parent 6c0b1b96bc
commit 91e91fe5e8
4 changed files with 92 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/global.css
View File

@@ -1,61 +1,15 @@
html, body { html,
position: relative; body {
width: 100%; position: relative;
height: 100%; width: 100%;
height: 100%;
} }
body { body {
color: #333; margin: 0;
margin: 0; padding: 28px;
padding: 8px; background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
box-sizing: border-box; box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
} }
a {
color: rgb(0,100,200);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: rgb(0,80,160);
}
label {
display: block;
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
padding: 0.4em;
margin: 0 0 0.5em 0;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 2px;
}
input:disabled {
color: #ccc;
}
input[type="range"] {
height: 0;
}
button {
background-color: #f4f4f4;
outline: none;
}
button:active {
background-color: #ddd;
}
button:focus {
border-color: #666;
}

66
public/index.html
View File

@@ -1,39 +1,37 @@
<!doctype html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf8" />
<meta name="viewport" content="width=device-width" />
<head> <title>dev panel</title>
<meta charset='utf8'>
<meta name='viewport' content='width=device-width'>
<title>dev panel</title> <link rel="stylesheet" href="./global.css" />
<link rel="stylesheet" href="./bundle.css" />
</head>
<link rel='stylesheet' href='./global.css'> <body>
<link rel="stylesheet" href="./bundle.css"> <script src="./bundle.js"></script>
</head> <script src="./bundle.events.js"></script>
<script>
<body> const queryObj = {
<script src="./bundle.js"></script> sessionId: '8874be03-bf8f-411e-862a-64ea7f950026',
<script src="./bundle.events.js"></script> };
<script> let query = '';
const queryObj = { Object.keys(queryObj).forEach(key => {
sessionId: 'e2c7cfe8-d868-4f11-b561-5a969da26334', query += `${key}=${queryObj[key]}&`;
};
let query = '';
Object.keys(queryObj).forEach(key => {
query += `${key}=${queryObj[key]}&`;
});
fetch(`http://192.168.17.205:9090/api/events?${query}`)
.then(res => res.json())
.then(data => {
// eslint-disable-next-line
new rrwebPlayer({
target: document.body,
data: {
events: data.events,
},
});
}); });
</script> fetch(`http://192.168.17.205:9090/api/events?${query}`)
</body> .then(res => res.json())
.then(data => {
</html> // eslint-disable-next-line
new rrwebPlayer({
target: document.body,
data: {
events: data.events,
},
});
});
</script>
</body>
</html>

61
src/Controller.html
View File

@@ -4,21 +4,47 @@
<span class="rr-timeline__time">{formatTime(currentTime)}</span> <span class="rr-timeline__time">{formatTime(currentTime)}</span>
<div class="rr-progress"> <div class="rr-progress">
<div class="rr-progress__step" ref:step style="width: {percentage}"></div> <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
<div class="rr-progress__handler" ref:handler style="left: {percentage}"></div> <div
class="rr-progress__handler"
ref:handler
style="left: {percentage}"
></div>
</div> </div>
<span class="rr-timeline__time">{formatTime(meta.totalTime)}</span> <span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
</div> </div>
<div class="rr-controller__btns"> <div class="rr-controller__btns">
<button on:click="toggle()"> <button on:click="toggle()">
{#if isPlaying} {#if isPlaying}
<svg t="1541411313529" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg
xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"> t="1541411313529"
<path d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"></path> class="icon"
style=""
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16"
height="16"
>
<path
d="M682.65984 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 128q53.00224 0 90.50112 37.49888t37.49888 90.50112l0 512q0 53.00224-37.49888 90.50112t-90.50112 37.49888-90.50112-37.49888-37.49888-90.50112l0-512q0-53.00224 37.49888-90.50112t90.50112-37.49888zM341.34016 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928zM682.65984 213.34016q-17.67424 0-30.16704 12.4928t-12.4928 30.16704l0 512q0 17.67424 12.4928 30.16704t30.16704 12.4928 30.16704-12.4928 12.4928-30.16704l0-512q0-17.67424-12.4928-30.16704t-30.16704-12.4928z"
></path>
</svg> </svg>
{:else} {:else}
<svg t="1541410561137" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" <svg
xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"> t="1541410561137"
<path d="M170.65984 896l0-768 640 384zM644.66944 512l-388.66944-233.32864 0 466.65728z"></path> class="icon"
style=""
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="16"
height="16"
>
<path
d="M170.65984 896l0-768 640 384zM644.66944 512l-388.66944-233.32864 0 466.65728z"
></path>
</svg> </svg>
{/if} {/if}
</button> </button>
@@ -87,7 +113,6 @@
} else { } else {
replayer.play(currentTime); replayer.play(currentTime);
} }
this.loopTimer();
}, },
pause() { pause() {
const { replayer } = this.get(); const { replayer } = this.get();
@@ -95,7 +120,6 @@
}, },
toggle() { toggle() {
const { isPlaying } = this.get(); const { isPlaying } = this.get();
this.set({ isPlaying: !isPlaying });
if (isPlaying) { if (isPlaying) {
this.pause(); this.pause();
} else { } else {
@@ -113,6 +137,17 @@
// auto play // auto play
this.set({ isPlaying: true }); this.set({ isPlaying: true });
this.play(); this.play();
current.replayer.on('pause', () => {
this.set({ isPlaying: false });
});
current.replayer.on('resume', () => {
this.set({ isPlaying: true });
});
}
if (changed.isPlaying) {
if (current.isPlaying) {
this.loopTimer();
}
} }
}, },
ondestroy() { ondestroy() {
@@ -139,7 +174,7 @@
.rr-timeline { .rr-timeline {
width: 80%; width: 80%;
display: flex; display: flex;
align-items: center align-items: center;
} }
.rr-timeline__time { .rr-timeline__time {
@@ -160,7 +195,7 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
background: #E0E1FE; background: #e0e1fe;
} }
.rr-progress__handler { .rr-progress__handler {
@@ -191,11 +226,11 @@
} }
.rr-controller__btns button:active { .rr-controller__btns button:active {
background: #E0E1FE; background: #e0e1fe;
} }
.rr-controller__btns button.active { .rr-controller__btns button.active {
color: #fff; color: #fff;
background: rgb(73, 80, 246); background: rgb(73, 80, 246);
} }
</style> </style>

2
src/utils.js
View File

@@ -25,7 +25,7 @@ export function formatTime(ms) {
ms = ms % HOUR; ms = ms % HOUR;
const minute = Math.floor(ms / MINUTE); const minute = Math.floor(ms / MINUTE);
ms = ms % MINUTE; ms = ms % MINUTE;
const second = Math.floor(ms / SECOND); const second = Math.round(ms / SECOND);
if (hour) { if (hour) {
return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`; return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`;
} }