update rrweb and impl click progress to play at any time offset
This commit is contained in:
@@ -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",
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user