update rrweb and impl click progress to play at any time offset

This commit is contained in:
Yanzhen Yu
2018-12-14 14:14:31 +08:00
parent b29fb5c697
commit 2fdef75c6c
2 changed files with 20 additions and 2 deletions

View File

@@ -16,7 +16,7 @@
"svelte": "^2.13.5" "svelte": "^2.13.5"
}, },
"dependencies": { "dependencies": {
"rrweb": "^0.6.5" "rrweb": "^0.6.7"
}, },
"scripts": { "scripts": {
"build": "rollup -c", "build": "rollup -c",

View File

@@ -2,7 +2,7 @@
<div class="rr-controller"> <div class="rr-controller">
<div class="rr-timeline"> <div class="rr-timeline">
<span class="rr-timeline__time">{formatTime(currentTime)}</span> <span class="rr-timeline__time">{formatTime(currentTime)}</span>
<div class="rr-progress"> <div class="rr-progress" ref:progress on:click="handleProgressClick(event)">
<div class="rr-progress__step" ref:step style="width: {percentage}"></div> <div class="rr-progress__step" ref:step style="width: {percentage}"></div>
<div <div
class="rr-progress__handler" class="rr-progress__handler"
@@ -134,6 +134,23 @@
replayer.setConfig({ speed }); replayer.setConfig({ speed });
this.set({ speed }); this.set({ speed });
}, },
handleProgressClick(event) {
const progressRect = this.refs.progress.getBoundingClientRect();
const x = event.clientX - progressRect.left;
let percent = x / progressRect.width;
if (percent < 0) {
percent = 0;
} else if (percent > 1) {
percent = 1;
}
const { meta, replayer, isPlaying } = this.get();
const timeOffset = meta.totalTime * percent;
this.set({ currentTime: timeOffset });
replayer.play(timeOffset);
if (!isPlaying) {
replayer.pause();
}
},
}, },
onupdate({ changed, current, previous }) { onupdate({ changed, current, previous }) {
if (current.replayer && !previous) { if (current.replayer && !previous) {
@@ -193,6 +210,7 @@
background: #eee; background: #eee;
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
cursor: pointer;
} }
.rr-progress__step { .rr-progress__step {