diff --git a/public/global.css b/public/global.css index 9d682a39..9b30ce94 100644 --- a/public/global.css +++ b/public/global.css @@ -1,61 +1,15 @@ -html, body { - position: relative; - width: 100%; - height: 100%; +html, +body { + position: relative; + width: 100%; + height: 100%; } body { - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin: 0; + padding: 28px; + background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); + box-sizing: border-box; + 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; -} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 0596bb61..c5cf42de 100644 --- a/public/index.html +++ b/public/index.html @@ -1,39 +1,37 @@ - + + + + - - - + dev panel - dev panel + + + - - - - - - - - + + - - - \ No newline at end of file + 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, + }, + }); + }); + + + diff --git a/src/Controller.html b/src/Controller.html index ae172c70..df6f5fcc 100644 --- a/src/Controller.html +++ b/src/Controller.html @@ -4,21 +4,47 @@ {formatTime(currentTime)}
-
+
{formatTime(meta.totalTime)}
@@ -87,7 +113,6 @@ } else { replayer.play(currentTime); } - this.loopTimer(); }, pause() { const { replayer } = this.get(); @@ -95,7 +120,6 @@ }, toggle() { const { isPlaying } = this.get(); - this.set({ isPlaying: !isPlaying }); if (isPlaying) { this.pause(); } else { @@ -113,6 +137,17 @@ // auto play this.set({ isPlaying: true }); 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() { @@ -139,7 +174,7 @@ .rr-timeline { width: 80%; display: flex; - align-items: center + align-items: center; } .rr-timeline__time { @@ -160,7 +195,7 @@ position: absolute; left: 0; top: 0; - background: #E0E1FE; + background: #e0e1fe; } .rr-progress__handler { @@ -191,11 +226,11 @@ } .rr-controller__btns button:active { - background: #E0E1FE; + background: #e0e1fe; } .rr-controller__btns button.active { color: #fff; background: rgb(73, 80, 246); } - \ No newline at end of file + diff --git a/src/utils.js b/src/utils.js index 22adf05c..8b47b558 100644 --- a/src/utils.js +++ b/src/utils.js @@ -25,7 +25,7 @@ export function formatTime(ms) { ms = ms % HOUR; const minute = Math.floor(ms / MINUTE); ms = ms % MINUTE; - const second = Math.floor(ms / SECOND); + const second = Math.round(ms / SECOND); if (hour) { return `${padZero(hour)}:${padZero(minute)}:${padZero(minute)}`; }