Refactoring rrweb-player (#26)
* enable drag and drop in controller * setup svelte v3 workflow and entry point * add ts eslint config and do compatibility fallbacks in API * rewrite replayer in svelte v3 * fix css import * fix fullscreen API
This commit is contained in:
yz-yu
@@ -1,7 +1,8 @@
|
||||
{
|
||||
"extends": "google",
|
||||
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
|
||||
"parser": "@typescript-eslint/parser",
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 8,
|
||||
"ecmaVersion": 2019,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
@@ -10,5 +11,15 @@
|
||||
"object-curly-spacing": "off",
|
||||
"indent": "off"
|
||||
},
|
||||
"plugins": ["html"]
|
||||
"env": {
|
||||
"es6": true,
|
||||
"browser": true
|
||||
},
|
||||
"plugins": ["svelte3", "@typescript-eslint"],
|
||||
"overrides": [
|
||||
{
|
||||
"files": ["*.svelte"],
|
||||
"processor": "svelte3/svelte3"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
3
.gitignore
vendored
3
.gitignore
vendored
@@ -1,6 +1,7 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
public/bundle.*
|
||||
public/build
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
@@ -9,3 +10,5 @@ temp
|
||||
|
||||
dist
|
||||
lib
|
||||
|
||||
*.log
|
||||
|
||||
39
package.json
39
package.json
@@ -2,29 +2,36 @@
|
||||
"name": "rrweb-player",
|
||||
"version": "0.4.6",
|
||||
"devDependencies": {
|
||||
"eslint": "^5.10.0",
|
||||
"@rollup/plugin-commonjs": "^11.0.0",
|
||||
"@rollup/plugin-node-resolve": "^7.0.0",
|
||||
"@rollup/plugin-typescript": "^4.0.0",
|
||||
"@tsconfig/svelte": "^1.0.0",
|
||||
"@typescript-eslint/eslint-plugin": "^3.7.0",
|
||||
"@typescript-eslint/parser": "^3.7.0",
|
||||
"eslint": "^7.5.0",
|
||||
"eslint-config-google": "^0.11.0",
|
||||
"eslint-plugin-html": "^4.0.6",
|
||||
"npm-run-all": "^4.1.3",
|
||||
"rollup": "^0.66.2",
|
||||
"rollup-plugin-commonjs": "^9.1.8",
|
||||
"rollup-plugin-node-resolve": "^3.4.0",
|
||||
"rollup-plugin-postcss": "^1.6.3",
|
||||
"rollup-plugin-svelte": "^4.5.0",
|
||||
"rollup-plugin-terser": "^3.0.0",
|
||||
"sirv-cli": "^0.2.2",
|
||||
"svelte": "^2.16.0"
|
||||
"eslint-plugin-svelte3": "^2.7.3",
|
||||
"postcss-easy-import": "^3.0.0",
|
||||
"rollup": "^1.20.0",
|
||||
"rollup-plugin-livereload": "^1.0.0",
|
||||
"rollup-plugin-svelte": "^5.0.3",
|
||||
"rollup-plugin-terser": "^5.1.2",
|
||||
"sirv-cli": "^0.4.4",
|
||||
"svelte": "^3.2.0",
|
||||
"svelte-check": "^0.1.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^3.9.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"rrweb": "^0.7.32"
|
||||
"rrweb": "^0.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"prepublishOnly": "npm run build",
|
||||
"autobuild": "rollup -c -w",
|
||||
"dev": "run-p start:dev autobuild",
|
||||
"dev": "rollup -c -w",
|
||||
"prepublishOnly": "yarn build",
|
||||
"start": "sirv public",
|
||||
"start:dev": "sirv public --dev"
|
||||
"validate": "svelte-check"
|
||||
},
|
||||
"description": "rrweb's replayer UI",
|
||||
"main": "lib/index.js",
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -6,7 +6,6 @@ body {
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
|
||||
<title>dev panel</title>
|
||||
<title>Svelte app</title>
|
||||
|
||||
<link rel="stylesheet" href="./global.css" />
|
||||
<link rel="stylesheet" href="./bundle.css" />
|
||||
<link rel="stylesheet" href="/global.css" />
|
||||
<link rel="stylesheet" href="/bundle.css" />
|
||||
|
||||
<script src="/bundle.js"></script>
|
||||
<script src="./events.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="./bundle.js"></script>
|
||||
<script src="./events.js"></script>
|
||||
<script>
|
||||
// eslint-disable-next-line
|
||||
const component = new rrwebPlayer({
|
||||
target: document.body,
|
||||
data: {
|
||||
events,
|
||||
skipInactive: true,
|
||||
showDebug: false,
|
||||
autoPlay: false,
|
||||
showWarning: false,
|
||||
},
|
||||
});
|
||||
component.addEventListener('finish', () => console.log('finish'));
|
||||
</script>
|
||||
</body>
|
||||
<body></body>
|
||||
<script>
|
||||
// eslint-disable-next-line
|
||||
const component = new rrwebPlayer({
|
||||
target: document.body,
|
||||
data: {
|
||||
events,
|
||||
skipInactive: true,
|
||||
showDebug: false,
|
||||
showWarning: false,
|
||||
autoPlay: false,
|
||||
},
|
||||
});
|
||||
component.addEventListener('finish', () => console.log('finish'));
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@@ -1,35 +1,43 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import pkg from './package.json';
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
export default [
|
||||
{ file: pkg.module, format: 'es' },
|
||||
{ file: pkg.main, format: 'cjs' },
|
||||
{ file: pkg.unpkg, format: 'iife', name: 'rrwebPlayer' },
|
||||
{ file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' },
|
||||
].map(output => ({
|
||||
input: 'src/Player.html',
|
||||
const entries = (production
|
||||
? [
|
||||
{ file: pkg.module, format: 'es' },
|
||||
{ file: pkg.main, format: 'cjs' },
|
||||
{ file: pkg.unpkg, format: 'iife', name: 'rrwebPlayer' },
|
||||
]
|
||||
: []
|
||||
).concat([{ file: 'public/bundle.js', format: 'iife', name: 'rrwebPlayer' }]);
|
||||
|
||||
export default entries.map((output) => ({
|
||||
input: 'src/main.ts',
|
||||
output,
|
||||
plugins: [
|
||||
svelte({
|
||||
cascade: false,
|
||||
// opt in to v3 behaviour today
|
||||
skipIntroByDefault: true,
|
||||
nestedTransitions: true,
|
||||
|
||||
// enable run-time checks when not in production
|
||||
dev: !production,
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file — better for performance
|
||||
css: css => {
|
||||
css: (css) => {
|
||||
css.write('dist/style.css');
|
||||
css.write('public/bundle.css');
|
||||
},
|
||||
preprocess: sveltePreprocess({
|
||||
postcss: {
|
||||
// eslint-disable-next-line no-undef
|
||||
plugins: [require('postcss-easy-import')],
|
||||
},
|
||||
}),
|
||||
}),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
@@ -37,13 +45,45 @@ export default [
|
||||
// some cases you'll need additional configuration —
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/rollup-plugin-commonjs
|
||||
resolve(),
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte'],
|
||||
}),
|
||||
commonjs(),
|
||||
|
||||
postcss(),
|
||||
typescript({ sourceMap: !production }),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser(),
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false,
|
||||
},
|
||||
}));
|
||||
|
||||
function serve() {
|
||||
let started = false;
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (!started) {
|
||||
started = true;
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
|
||||
require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
stdio: ['ignore', 'inherit', 'inherit'],
|
||||
shell: true,
|
||||
});
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,368 +0,0 @@
|
||||
{#if showController}
|
||||
<div class="rr-controller">
|
||||
<div class="rr-timeline">
|
||||
<span class="rr-timeline__time">{formatTime(currentTime)}</span>
|
||||
<div
|
||||
class="rr-progress"
|
||||
class:disabled="isSkipping"
|
||||
ref:progress on:click="handleProgressClick(event)"
|
||||
>
|
||||
<div class="rr-progress__step" ref:step style="width: {percentage}"></div>
|
||||
{#each getCustomEvents as event,i (i)}
|
||||
<div
|
||||
title="{event.name}"
|
||||
style="width: 10px;height: 5px;position: absolute;top: 2px;transform: translate(-50%, -50%);background: {event.background};left: {event.position};"
|
||||
></div>
|
||||
{/each}
|
||||
|
||||
<div
|
||||
class="rr-progress__handler"
|
||||
ref:handler
|
||||
style="left: {percentage}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
|
||||
</div>
|
||||
<div class="rr-controller__btns">
|
||||
<button on:click="toggle()">
|
||||
{#if isPlaying}
|
||||
<svg
|
||||
class="icon"
|
||||
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>
|
||||
{:else}
|
||||
<svg
|
||||
class="icon"
|
||||
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>
|
||||
{/if}
|
||||
</button>
|
||||
{#each speedOption as s}
|
||||
<button
|
||||
class:active="s === speed && !isSkipping"
|
||||
on:click="setSpeed(s)"
|
||||
disabled="{isSkipping}"
|
||||
>
|
||||
{s}x
|
||||
</button>
|
||||
{/each}
|
||||
<Switch id="skip" bind:checked="skipInactive" disabled="{isSkipping}" label="skip inactive" />
|
||||
<button on:click="fire('fullscreen')">
|
||||
<svg
|
||||
class="icon"
|
||||
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"
|
||||
>
|
||||
<defs><style type="text/css"></style></defs>
|
||||
<path d="M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4 18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4 0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0 224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48 48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48 48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4 68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z" p-id="1286"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<script>
|
||||
import { EventType } from 'rrweb';
|
||||
import { formatTime } from './utils.js';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Switch: './components/Switch.html',
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTime: 0,
|
||||
isPlaying: false,
|
||||
isSkipping: false,
|
||||
skipInactive: true,
|
||||
speed: 1,
|
||||
speedOption: [],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
meta({ replayer }) {
|
||||
return replayer.getMetaData();
|
||||
},
|
||||
percentage({ currentTime, meta }) {
|
||||
const percent = Math.min(1, currentTime / meta.totalTime);
|
||||
return `${100 * percent}%`;
|
||||
},
|
||||
getCustomEvents({tags, replayer}) {
|
||||
const { events } = replayer;
|
||||
const totalEvents = events.length;
|
||||
const start = events[0].timestamp;
|
||||
const end = events[totalEvents - 1].timestamp;
|
||||
const customEvents = [];
|
||||
|
||||
// calculate tag position.
|
||||
const position = (startTime, endTime, tagTime) => {
|
||||
const sessionDuration = endTime - startTime;
|
||||
const eventDuration = endTime - tagTime;
|
||||
const eventPosition = 100 - ((eventDuration / sessionDuration) * 100);
|
||||
|
||||
return eventPosition.toFixed(2);
|
||||
};
|
||||
|
||||
// loop through all the events and find out custom event.
|
||||
events.forEach((event) => {
|
||||
/**
|
||||
* we are only interested in custom event and calculate it's position
|
||||
* to place it in player's timeline.
|
||||
*/
|
||||
if (event.type === EventType.Custom) {
|
||||
const customEvent = {
|
||||
name: event.data.tag,
|
||||
background: tags[event.data.tag] || 'rgb(73, 80, 246)',
|
||||
position: `${position(start, end, event.timestamp)}%`,
|
||||
};
|
||||
customEvents.push(customEvent);
|
||||
}
|
||||
});
|
||||
|
||||
return customEvents;
|
||||
},
|
||||
},
|
||||
helpers: {
|
||||
formatTime,
|
||||
},
|
||||
methods: {
|
||||
loopTimer() {
|
||||
const self = this;
|
||||
|
||||
function update() {
|
||||
const { meta, isPlaying, replayer } = self.get();
|
||||
if (!isPlaying) {
|
||||
self.timer = null;
|
||||
return;
|
||||
}
|
||||
|
||||
const currentTime =
|
||||
replayer.timer.timeOffset + replayer.getTimeOffset();
|
||||
self.set({
|
||||
currentTime,
|
||||
});
|
||||
|
||||
if (currentTime < meta.totalTime) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
this.timer = requestAnimationFrame(update);
|
||||
},
|
||||
play() {
|
||||
const { replayer, currentTime } = this.get();
|
||||
|
||||
if (currentTime > 0) {
|
||||
replayer.resume(currentTime);
|
||||
} else {
|
||||
this.set({ isPlaying: true });
|
||||
replayer.play(currentTime);
|
||||
}
|
||||
},
|
||||
pause() {
|
||||
const { replayer } = this.get();
|
||||
replayer.pause();
|
||||
},
|
||||
toggle() {
|
||||
const { isPlaying } = this.get();
|
||||
if (isPlaying) {
|
||||
this.pause();
|
||||
} else {
|
||||
this.play();
|
||||
}
|
||||
},
|
||||
setSpeed(speed) {
|
||||
const { replayer, currentTime, isPlaying } = this.get();
|
||||
// freeze before set speed, and resume if is playing before freeze
|
||||
replayer.pause();
|
||||
replayer.setConfig({ speed });
|
||||
this.set({ speed });
|
||||
if (isPlaying) {
|
||||
replayer.resume(currentTime);
|
||||
}
|
||||
},
|
||||
handleProgressClick(event) {
|
||||
const { meta, replayer, isPlaying, isSkipping } = this.get();
|
||||
if (isSkipping) {
|
||||
return;
|
||||
}
|
||||
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 timeOffset = meta.totalTime * percent;
|
||||
this.set({ currentTime: timeOffset });
|
||||
replayer.play(timeOffset);
|
||||
if (!isPlaying) {
|
||||
replayer.pause();
|
||||
}
|
||||
},
|
||||
},
|
||||
onupdate({ changed, current, previous }) {
|
||||
if (current.replayer && !previous) {
|
||||
window.replayer = current.replayer;
|
||||
setTimeout(() => {
|
||||
this.set({ isPlaying: true });
|
||||
}, 0);
|
||||
current.replayer.play(0);
|
||||
if (!current.autoPlay) {
|
||||
let firstFullSnapshotRebuilded = false;
|
||||
current.replayer.on('fullsnapshot-rebuilded', () => {
|
||||
if (!firstFullSnapshotRebuilded) {
|
||||
firstFullSnapshotRebuilded = true;
|
||||
current.replayer.pause();
|
||||
}
|
||||
});
|
||||
}
|
||||
current.replayer.on('pause', () => {
|
||||
this.set({ isPlaying: false });
|
||||
});
|
||||
current.replayer.on('resume', () => {
|
||||
this.set({ isPlaying: true });
|
||||
});
|
||||
current.replayer.on('finish', () => {
|
||||
this.timer = null;
|
||||
this.set({ isPlaying: false, currentTime: 0 });
|
||||
});
|
||||
current.replayer.on('skip-start', payload => {
|
||||
payload.isSkipping = true;
|
||||
this.set(payload);
|
||||
});
|
||||
current.replayer.on('skip-end', payload => {
|
||||
payload.isSkipping = false;
|
||||
this.set(payload);
|
||||
});
|
||||
}
|
||||
if (changed.isPlaying) {
|
||||
if (current.isPlaying && !this.timer) {
|
||||
this.loopTimer();
|
||||
}
|
||||
}
|
||||
if (changed.skipInactive) {
|
||||
current.replayer.setConfig({ skipInactive: current.skipInactive });
|
||||
}
|
||||
},
|
||||
ondestroy() {
|
||||
const { isPlaying } = this.get();
|
||||
if (isPlaying) {
|
||||
this.pause();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rr-controller {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.rr-timeline {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rr-timeline__time {
|
||||
padding: 0 20px;
|
||||
color: #11103e;
|
||||
}
|
||||
|
||||
.rr-progress {
|
||||
width: 100%;
|
||||
height: 12px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border-top: solid 4px #fff;
|
||||
border-bottom: solid 4px #fff;
|
||||
}
|
||||
|
||||
.rr-progress.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rr-progress__step {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #e0e1fe;
|
||||
}
|
||||
|
||||
.rr-progress__handler {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgb(73, 80, 246);
|
||||
}
|
||||
|
||||
.rr-controller__btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rr-controller__btns button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rr-controller__btns button:active {
|
||||
background: #e0e1fe;
|
||||
}
|
||||
|
||||
.rr-controller__btns button.active {
|
||||
color: #fff;
|
||||
background: rgb(73, 80, 246);
|
||||
}
|
||||
|
||||
.rr-controller__btns button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
403
src/Controller.svelte
Normal file
403
src/Controller.svelte
Normal file
@@ -0,0 +1,403 @@
|
||||
<script lang="ts">
|
||||
import { EventType } from 'rrweb';
|
||||
import type { Replayer } from 'rrweb';
|
||||
import type { playerMetaData } from 'rrweb/typings/types';
|
||||
import type {
|
||||
PlayerMachineState,
|
||||
SpeedMachineState,
|
||||
} from 'rrweb/typings/replay/machine';
|
||||
import {
|
||||
onMount,
|
||||
onDestroy,
|
||||
createEventDispatcher,
|
||||
afterUpdate,
|
||||
} from 'svelte';
|
||||
import { formatTime } from './utils';
|
||||
import Switch from './components/Switch.svelte';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
export let replayer: Replayer;
|
||||
export let showController: boolean;
|
||||
export let autoPlay: boolean;
|
||||
export let skipInactive: boolean;
|
||||
export let speedOption: number[];
|
||||
export let speed = speedOption.length ? speedOption[0] : 1;
|
||||
export let tags: Record<string, string> = {};
|
||||
|
||||
let currentTime = 0;
|
||||
let timer: number | null = null;
|
||||
let playerState: 'playing' | 'paused' | 'live';
|
||||
let speedState: 'normal' | 'skipping';
|
||||
let progress: HTMLElement;
|
||||
let step: HTMLElement;
|
||||
let finished: boolean;
|
||||
|
||||
let meta: playerMetaData;
|
||||
$: meta = replayer.getMetaData();
|
||||
let percentage: string;
|
||||
$: {
|
||||
const percent = Math.min(1, currentTime / meta.totalTime);
|
||||
percentage = `${100 * percent}%`;
|
||||
}
|
||||
type CustomEvent = {
|
||||
name: string;
|
||||
background: string;
|
||||
position: string;
|
||||
};
|
||||
let customEvents: CustomEvent[];
|
||||
$: customEvents = (() => {
|
||||
const { context } = replayer.service.state;
|
||||
const totalEvents = context.events.length;
|
||||
const start = context.events[0].timestamp;
|
||||
const end = context.events[totalEvents - 1].timestamp;
|
||||
const customEvents: CustomEvent[] = [];
|
||||
|
||||
// calculate tag position.
|
||||
const position = (startTime: number, endTime: number, tagTime: number) => {
|
||||
const sessionDuration = endTime - startTime;
|
||||
const eventDuration = endTime - tagTime;
|
||||
const eventPosition = 100 - (eventDuration / sessionDuration) * 100;
|
||||
|
||||
return eventPosition.toFixed(2);
|
||||
};
|
||||
|
||||
// loop through all the events and find out custom event.
|
||||
context.events.forEach((event) => {
|
||||
/**
|
||||
* we are only interested in custom event and calculate it's position
|
||||
* to place it in player's timeline.
|
||||
*/
|
||||
if (event.type === EventType.Custom) {
|
||||
const customEvent = {
|
||||
name: event.data.tag,
|
||||
background: tags[event.data.tag] || 'rgb(73, 80, 246)',
|
||||
position: `${position(start, end, event.timestamp)}%`,
|
||||
};
|
||||
customEvents.push(customEvent);
|
||||
}
|
||||
});
|
||||
|
||||
return customEvents;
|
||||
})();
|
||||
|
||||
const loopTimer = () => {
|
||||
stopTimer();
|
||||
|
||||
function update() {
|
||||
currentTime = replayer.timer.timeOffset + replayer.getTimeOffset();
|
||||
|
||||
if (currentTime < meta.totalTime) {
|
||||
timer = requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
timer = requestAnimationFrame(update);
|
||||
};
|
||||
|
||||
const stopTimer = () => {
|
||||
if (timer) {
|
||||
cancelAnimationFrame(timer);
|
||||
timer = null;
|
||||
}
|
||||
};
|
||||
|
||||
const toggle = () => {
|
||||
switch (playerState) {
|
||||
case 'playing':
|
||||
replayer.pause();
|
||||
break;
|
||||
case 'paused':
|
||||
if (finished) {
|
||||
replayer.play();
|
||||
finished = false;
|
||||
} else {
|
||||
replayer.play(currentTime);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleProgressClick = (event: MouseEvent) => {
|
||||
if (speedState === 'skipping') {
|
||||
return;
|
||||
}
|
||||
const progressRect = 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 timeOffset = meta.totalTime * percent;
|
||||
currentTime = timeOffset;
|
||||
const isPlaying = playerState === 'playing';
|
||||
replayer.pause();
|
||||
replayer.play(timeOffset);
|
||||
if (!isPlaying) {
|
||||
replayer.pause();
|
||||
}
|
||||
};
|
||||
|
||||
const setSpeed = (newSpeed: number) => {
|
||||
let needFreeze = playerState === 'playing';
|
||||
speed = newSpeed;
|
||||
if (needFreeze) {
|
||||
replayer.pause();
|
||||
}
|
||||
replayer.setConfig({ speed });
|
||||
if (needFreeze) {
|
||||
replayer.play(currentTime);
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
playerState = replayer.service.state.value as typeof playerState;
|
||||
speedState = replayer.speedService.state.value as typeof speedState;
|
||||
replayer.on(
|
||||
'state-change',
|
||||
(states: { player?: PlayerMachineState; speed?: SpeedMachineState }) => {
|
||||
const { player, speed } = states;
|
||||
if (player?.value && playerState !== player.value) {
|
||||
playerState = player.value as typeof playerState;
|
||||
switch (playerState) {
|
||||
case 'playing':
|
||||
loopTimer();
|
||||
break;
|
||||
case 'paused':
|
||||
stopTimer();
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (speed?.value && speedState !== speed.value) {
|
||||
speedState = speed.value as typeof speedState;
|
||||
}
|
||||
},
|
||||
);
|
||||
replayer.on('finish', () => {
|
||||
finished = true;
|
||||
});
|
||||
|
||||
if (autoPlay) {
|
||||
replayer.play();
|
||||
}
|
||||
});
|
||||
|
||||
afterUpdate(() => {
|
||||
if (skipInactive !== replayer.config.skipInactive) {
|
||||
replayer.setConfig({ skipInactive });
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
replayer.pause();
|
||||
stopTimer();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rr-controller {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
border-radius: 0 0 5px 5px;
|
||||
}
|
||||
|
||||
.rr-timeline {
|
||||
width: 80%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rr-timeline__time {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
text-align: center;
|
||||
color: #11103e;
|
||||
}
|
||||
|
||||
.rr-progress {
|
||||
flex: 1;
|
||||
height: 12px;
|
||||
background: #eee;
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border-top: solid 4px #fff;
|
||||
border-bottom: solid 4px #fff;
|
||||
}
|
||||
|
||||
.rr-progress.disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.rr-progress__step {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #e0e1fe;
|
||||
}
|
||||
|
||||
.rr-progress__handler {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 10px;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
transform: translate(-50%, -50%);
|
||||
background: rgb(73, 80, 246);
|
||||
}
|
||||
|
||||
.rr-controller__btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.rr-controller__btns button {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.rr-controller__btns button:active {
|
||||
background: #e0e1fe;
|
||||
}
|
||||
|
||||
.rr-controller__btns button.active {
|
||||
color: #fff;
|
||||
background: rgb(73, 80, 246);
|
||||
}
|
||||
|
||||
.rr-controller__btns button:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if showController}
|
||||
<div class="rr-controller">
|
||||
<div class="rr-timeline">
|
||||
<span class="rr-timeline__time">{formatTime(currentTime)}</span>
|
||||
<div
|
||||
class="rr-progress"
|
||||
class:disabled={speedState === 'skipping'}
|
||||
bind:this={progress}
|
||||
on:click={(event) => handleProgressClick(event)}>
|
||||
<div
|
||||
class="rr-progress__step"
|
||||
bind:this={step}
|
||||
style="width: {percentage}" />
|
||||
{#each customEvents as event}
|
||||
<div
|
||||
title={event.name}
|
||||
style="width: 10px;height: 5px;position: absolute;top:
|
||||
2px;transform: translate(-50%, -50%);background: {event.background};left:
|
||||
{event.position};" />
|
||||
{/each}
|
||||
|
||||
<div class="rr-progress__handler" style="left: {percentage}" />
|
||||
</div>
|
||||
<span class="rr-timeline__time">{formatTime(meta.totalTime)}</span>
|
||||
</div>
|
||||
<div class="rr-controller__btns">
|
||||
<button on:click={toggle}>
|
||||
{#if ['playing', 'skipping'].includes(playerState)}
|
||||
<svg
|
||||
class="icon"
|
||||
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" />
|
||||
</svg>
|
||||
{:else}
|
||||
<svg
|
||||
class="icon"
|
||||
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" />
|
||||
</svg>
|
||||
{/if}
|
||||
</button>
|
||||
{#each speedOption as s}
|
||||
<button
|
||||
class:active={s === speed && speedState !== 'skipping'}
|
||||
on:click={() => setSpeed(s)}
|
||||
disabled={speedState === 'skipping'}>
|
||||
{s}x
|
||||
</button>
|
||||
{/each}
|
||||
<Switch
|
||||
id="skip"
|
||||
bind:checked={skipInactive}
|
||||
disabled={speedState === 'skipping'}
|
||||
label="skip inactive" />
|
||||
<button on:click={() => dispatch('fullscreen')}>
|
||||
<svg
|
||||
class="icon"
|
||||
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">
|
||||
<defs>
|
||||
<style type="text/css">
|
||||
|
||||
</style>
|
||||
</defs>
|
||||
<path
|
||||
d="M916 380c-26.4 0-48-21.6-48-48L868 223.2 613.6 477.6c-18.4
|
||||
18.4-48.8 18.4-68 0-18.4-18.4-18.4-48.8 0-68L800 156 692 156c-26.4
|
||||
0-48-21.6-48-48 0-26.4 21.6-48 48-48l224 0c26.4 0 48 21.6 48 48l0
|
||||
224C964 358.4 942.4 380 916 380zM231.2 860l108.8 0c26.4 0 48 21.6 48
|
||||
48s-21.6 48-48 48l-224 0c-26.4 0-48-21.6-48-48l0-224c0-26.4 21.6-48
|
||||
48-48 26.4 0 48 21.6 48 48L164 792l253.6-253.6c18.4-18.4 48.8-18.4
|
||||
68 0 18.4 18.4 18.4 48.8 0 68L231.2 860z"
|
||||
p-id="1286" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
192
src/Player.html
192
src/Player.html
@@ -1,192 +0,0 @@
|
||||
<div class="rr-player" ref:player style="{playerStyle}">
|
||||
<div class="rr-player__frame" ref:frame { style }></div>
|
||||
{#if replayer}
|
||||
<Controller
|
||||
{
|
||||
replayer
|
||||
}
|
||||
{showController}
|
||||
{autoPlay}
|
||||
{skipInactive}
|
||||
{tags}
|
||||
{speedOption}
|
||||
{speed}
|
||||
on:fullscreen="fullscreen()"
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { Replayer, unpack } from 'rrweb';
|
||||
import 'rrweb/dist/rrweb.min.css';
|
||||
import {
|
||||
inlineCss,
|
||||
openFullscreen,
|
||||
exitFullscreen,
|
||||
isFullscreen,
|
||||
onFullscreenChange,
|
||||
typeOf,
|
||||
} from './utils.js';
|
||||
|
||||
const controllerHeight = 80;
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Controller: './Controller.html',
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showController: true,
|
||||
width: 1024,
|
||||
height: 576,
|
||||
events: [],
|
||||
autoPlay: true,
|
||||
replayer: null,
|
||||
triggerFocus: true,
|
||||
tags: {},
|
||||
skipInactive: true,
|
||||
speedOption: [1, 2, 3],
|
||||
speed: 1,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
style({ width, height }) {
|
||||
return inlineCss({
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
});
|
||||
},
|
||||
playerStyle({ width, height, showController }) {
|
||||
return inlineCss({
|
||||
width: `${width}px`,
|
||||
height: `${height + (showController ? controllerHeight : 0)}px`,
|
||||
});
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
updateScale(el, frameDimension) {
|
||||
const { width, height } = this.get();
|
||||
const widthScale = width / frameDimension.width;
|
||||
const heightScale = height / frameDimension.height;
|
||||
el.style.transform =
|
||||
`scale(${Math.min(widthScale, heightScale)})` +
|
||||
'translate(-50%, -50%)';
|
||||
},
|
||||
fullscreen() {
|
||||
if (this.refs.player) {
|
||||
isFullscreen() ? exitFullscreen() : openFullscreen(this.refs.player);
|
||||
}
|
||||
},
|
||||
addEventListener(event, handler) {
|
||||
const { replayer } = this.get();
|
||||
replayer.on(event, handler);
|
||||
},
|
||||
addEvent(event) {
|
||||
replayer.addEvent(event);
|
||||
},
|
||||
},
|
||||
oncreate() {
|
||||
const { events, triggerFocus, showWarning, showDebug, speedOption } = this.get();
|
||||
let { skipInactive, speed } = this.get();
|
||||
skipInactive = skipInactive === undefined ? true : !!skipInactive;
|
||||
speed = speed === undefined ? 1 : speed;
|
||||
// 类型检查
|
||||
if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
|
||||
throw new Error('speedOption must be array');
|
||||
}
|
||||
speedOption.forEach(item => {
|
||||
if (typeOf(item) !== 'number') {
|
||||
throw new Error('item of speedOption must be number');
|
||||
}
|
||||
});
|
||||
if (speedOption.indexOf(speed) < 0) {
|
||||
throw new Error(`speed must be one of speedOption,
|
||||
current config:
|
||||
{
|
||||
...
|
||||
speed: ${speed},
|
||||
speedOption: [${speedOption.toString()}]
|
||||
...
|
||||
}
|
||||
`);
|
||||
}
|
||||
const replayer = new Replayer(events, {
|
||||
speed: speed === undefined ? 1 : speed,
|
||||
root: this.refs.frame,
|
||||
skipInactive,
|
||||
showWarning: showWarning === undefined ? true : !!showWarning,
|
||||
showDebug: showDebug === undefined ? true : !!showDebug,
|
||||
triggerFocus,
|
||||
unpackFn: unpack,
|
||||
});
|
||||
replayer.on('resize', (dimension) =>
|
||||
this.updateScale(replayer.wrapper, dimension),
|
||||
);
|
||||
|
||||
this.set({
|
||||
replayer,
|
||||
skipInactive,
|
||||
speed,
|
||||
});
|
||||
this.fullscreenListener = onFullscreenChange(() => {
|
||||
if (isFullscreen()) {
|
||||
setTimeout(() => {
|
||||
const { width, height } = this.get();
|
||||
// store the original dimension which do not need to be reactive
|
||||
this._width = width;
|
||||
this._height = height;
|
||||
const dimension = {
|
||||
width: this.refs.player.offsetWidth,
|
||||
height: this.refs.player.offsetHeight - controllerHeight,
|
||||
};
|
||||
this.set(dimension);
|
||||
this.updateScale(replayer.wrapper, {
|
||||
width: replayer.iframe.offsetWidth,
|
||||
height: replayer.iframe.offsetHeight,
|
||||
});
|
||||
}, 0);
|
||||
} else {
|
||||
this.set({
|
||||
width: this._width,
|
||||
height: this._height,
|
||||
});
|
||||
this.updateScale(replayer.wrapper, {
|
||||
width: replayer.iframe.offsetWidth,
|
||||
height: replayer.iframe.offsetHeight,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
ondestroy() {
|
||||
if (this.fullscreenListener) {
|
||||
this.fullscreenListener();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.rr-player {
|
||||
position: relative;
|
||||
background: white;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
|
||||
}
|
||||
|
||||
.rr-player__frame {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.replayer-wrapper) {
|
||||
float: left;
|
||||
clear: both;
|
||||
transform-origin: top left;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
:global(.replayer-wrapper > iframe) {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
178
src/Player.svelte
Normal file
178
src/Player.svelte
Normal file
@@ -0,0 +1,178 @@
|
||||
<script lang="ts">
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { Replayer, unpack } from 'rrweb';
|
||||
import type { eventWithTime } from 'rrweb/typings/types';
|
||||
import {
|
||||
inlineCss,
|
||||
openFullscreen,
|
||||
exitFullscreen,
|
||||
isFullscreen,
|
||||
onFullscreenChange,
|
||||
typeOf,
|
||||
} from './utils';
|
||||
import Controller from './Controller.svelte';
|
||||
|
||||
export let width: number = 1024;
|
||||
export let height: number = 576;
|
||||
export let events: eventWithTime[] = [];
|
||||
export let skipInactive: boolean = true;
|
||||
export let autoPlay: boolean = true;
|
||||
export let triggerFocus: boolean = true;
|
||||
export let speedOption: number[] = [1, 2, 4, 8];
|
||||
export let showController: boolean = true;
|
||||
export let showWarning: boolean = true;
|
||||
export let showDebug: boolean = true;
|
||||
export let tags: Record<string, string> = {};
|
||||
|
||||
const controllerHeight = 80;
|
||||
let speed = 1;
|
||||
let player: HTMLElement;
|
||||
let frame: HTMLElement;
|
||||
let replayer: Replayer;
|
||||
let fullscreenListener: undefined | (() => void);
|
||||
let _width: number = width;
|
||||
let _height: number = height;
|
||||
|
||||
let style: string;
|
||||
$: style = inlineCss({
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
});
|
||||
let playerStyle: string;
|
||||
$: playerStyle = inlineCss({
|
||||
width: `${width}px`,
|
||||
height: `${height + (showController ? controllerHeight : 0)}px`,
|
||||
});
|
||||
|
||||
const updateScale = (
|
||||
el: HTMLElement,
|
||||
frameDimension: { width: number; height: number },
|
||||
) => {
|
||||
const widthScale = width / frameDimension.width;
|
||||
const heightScale = height / frameDimension.height;
|
||||
el.style.transform =
|
||||
`scale(${Math.min(widthScale, heightScale)})` + 'translate(-50%, -50%)';
|
||||
};
|
||||
|
||||
const fullscreen = () => {
|
||||
if (player) {
|
||||
isFullscreen() ? exitFullscreen() : openFullscreen(player);
|
||||
}
|
||||
};
|
||||
|
||||
export const addEventListener = (event: string, handler: () => unknown) => {
|
||||
replayer.on(event, handler);
|
||||
};
|
||||
|
||||
export const addEvent = (event: eventWithTime) => {
|
||||
replayer.addEvent(event);
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
// runtime type check
|
||||
if (speedOption !== undefined && typeOf(speedOption) !== 'array') {
|
||||
throw new Error('speedOption must be array');
|
||||
}
|
||||
speedOption.forEach((item) => {
|
||||
if (typeOf(item) !== 'number') {
|
||||
throw new Error('item of speedOption must be number');
|
||||
}
|
||||
});
|
||||
if (speedOption.indexOf(speed) < 0) {
|
||||
throw new Error(`speed must be one of speedOption,
|
||||
current config:
|
||||
{
|
||||
...
|
||||
speed: ${speed},
|
||||
speedOption: [${speedOption.toString()}]
|
||||
...
|
||||
}
|
||||
`);
|
||||
}
|
||||
|
||||
replayer = new Replayer(events, {
|
||||
speed,
|
||||
root: frame,
|
||||
skipInactive,
|
||||
showWarning,
|
||||
showDebug,
|
||||
triggerFocus,
|
||||
unpackFn: unpack,
|
||||
});
|
||||
|
||||
replayer.on('resize', (dimension) => {
|
||||
updateScale(
|
||||
replayer.wrapper,
|
||||
dimension as { width: number; height: number },
|
||||
);
|
||||
});
|
||||
|
||||
fullscreenListener = onFullscreenChange(() => {
|
||||
if (isFullscreen()) {
|
||||
setTimeout(() => {
|
||||
_width = width;
|
||||
_height = height;
|
||||
width = player.offsetWidth;
|
||||
height = player.offsetHeight;
|
||||
updateScale(replayer.wrapper, {
|
||||
width: replayer.iframe.offsetWidth,
|
||||
height: replayer.iframe.offsetHeight,
|
||||
});
|
||||
}, 0);
|
||||
} else {
|
||||
width = _width;
|
||||
height = _height;
|
||||
updateScale(replayer.wrapper, {
|
||||
width: replayer.iframe.offsetWidth,
|
||||
height: replayer.iframe.offsetHeight,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
fullscreenListener && fullscreenListener();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style global>
|
||||
@import 'rrweb/dist/rrweb.min.css';
|
||||
|
||||
.rr-player {
|
||||
position: relative;
|
||||
background: white;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 24px 48px rgba(17, 16, 62, 0.12);
|
||||
}
|
||||
|
||||
.rr-player__frame {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:global(.replayer-wrapper) {
|
||||
float: left;
|
||||
clear: both;
|
||||
transform-origin: top left;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
:global(.replayer-wrapper > iframe) {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="rr-player" bind:this={player} style={playerStyle}>
|
||||
<div class="rr-player__frame" bind:this={frame} {style} />
|
||||
{#if replayer}
|
||||
<Controller
|
||||
{replayer}
|
||||
{showController}
|
||||
{autoPlay}
|
||||
{speedOption}
|
||||
{skipInactive}
|
||||
{tags}
|
||||
on:fullscreen={() => fullscreen()} />
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,12 +1,9 @@
|
||||
<div class="switch" class:disabled="disabled">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="{id}"
|
||||
bind:checked="checked"
|
||||
disabled="{disabled}"
|
||||
/>
|
||||
<label for="{id}"></label> <span class="label">{label}</span>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
export let disabled: boolean;
|
||||
export let checked: boolean;
|
||||
export let id: string;
|
||||
export let label: string;
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.switch {
|
||||
@@ -74,3 +71,9 @@
|
||||
left: 1.1em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="switch" class:disabled>
|
||||
<input type="checkbox" {id} bind:checked {disabled} />
|
||||
<label for={id} />
|
||||
<span class="label">{label}</span>
|
||||
</div>
|
||||
22
src/main.ts
Normal file
22
src/main.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { eventWithTime } from 'rrweb/typings/types';
|
||||
import _Player from './Player.svelte';
|
||||
|
||||
type PlayerProps = {
|
||||
events: eventWithTime[];
|
||||
};
|
||||
|
||||
class Player extends _Player {
|
||||
constructor(options: {
|
||||
target: Element;
|
||||
props: PlayerProps;
|
||||
// for compatibility
|
||||
data?: PlayerProps;
|
||||
}) {
|
||||
super({
|
||||
target: options.target,
|
||||
props: options.data || options.props,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default Player;
|
||||
@@ -1,26 +1,43 @@
|
||||
export function inlineCss(cssObj) {
|
||||
declare global {
|
||||
interface Document {
|
||||
mozExitFullscreen: Document['exitFullscreen'];
|
||||
webkitExitFullscreen: Document['exitFullscreen'];
|
||||
msExitFullscreen: Document['exitFullscreen'];
|
||||
webkitIsFullScreen: Document['fullscreen'];
|
||||
mozFullScreen: Document['fullscreen'];
|
||||
msFullscreenElement: Document['fullscreen'];
|
||||
}
|
||||
|
||||
interface HTMLElement {
|
||||
mozRequestFullScreen: Element['requestFullscreen'];
|
||||
webkitRequestFullscreen: Element['requestFullscreen'];
|
||||
msRequestFullscreen: Element['requestFullscreen'];
|
||||
}
|
||||
}
|
||||
|
||||
export function inlineCss(cssObj: Record<string, string>): string {
|
||||
let style = '';
|
||||
Object.keys(cssObj).forEach(key => {
|
||||
Object.keys(cssObj).forEach((key) => {
|
||||
style += `${key}: ${cssObj[key]};`;
|
||||
});
|
||||
return style;
|
||||
}
|
||||
|
||||
function padZero(num, len = 2) {
|
||||
function padZero(num: number, len = 2): string {
|
||||
let str = String(num);
|
||||
const threshold = Math.pow(10, len - 1);
|
||||
if (num < threshold) {
|
||||
num = String(num);
|
||||
while (String(threshold).length > num.length) {
|
||||
num = '0' + num;
|
||||
while (String(threshold).length > str.length) {
|
||||
str = '0' + num;
|
||||
}
|
||||
}
|
||||
return num;
|
||||
return str;
|
||||
}
|
||||
|
||||
const SECOND = 1000;
|
||||
const MINUTE = 60 * SECOND;
|
||||
const HOUR = 60 * MINUTE;
|
||||
export function formatTime(ms) {
|
||||
export function formatTime(ms: number): string {
|
||||
if (ms <= 0) {
|
||||
return '00:00';
|
||||
}
|
||||
@@ -35,7 +52,7 @@ export function formatTime(ms) {
|
||||
return `${padZero(minute)}:${padZero(second)}`;
|
||||
}
|
||||
|
||||
export function openFullscreen(el) {
|
||||
export function openFullscreen(el: HTMLElement): Promise<void> {
|
||||
if (el.requestFullscreen) {
|
||||
return el.requestFullscreen();
|
||||
} else if (el.mozRequestFullScreen) {
|
||||
@@ -50,7 +67,7 @@ export function openFullscreen(el) {
|
||||
}
|
||||
}
|
||||
|
||||
export function exitFullscreen() {
|
||||
export function exitFullscreen(): Promise<void> {
|
||||
if (document.exitFullscreen) {
|
||||
return document.exitFullscreen();
|
||||
} else if (document.mozExitFullscreen) {
|
||||
@@ -65,7 +82,7 @@ export function exitFullscreen() {
|
||||
}
|
||||
}
|
||||
|
||||
export function isFullscreen() {
|
||||
export function isFullscreen(): boolean {
|
||||
return (
|
||||
document.fullscreen ||
|
||||
document.webkitIsFullScreen ||
|
||||
@@ -74,7 +91,7 @@ export function isFullscreen() {
|
||||
);
|
||||
}
|
||||
|
||||
export function onFullscreenChange(handler) {
|
||||
export function onFullscreenChange(handler: () => unknown): () => void {
|
||||
document.addEventListener('fullscreenchange', handler);
|
||||
document.addEventListener('webkitfullscreenchange', handler);
|
||||
document.addEventListener('mozfullscreenchange', handler);
|
||||
@@ -88,7 +105,19 @@ export function onFullscreenChange(handler) {
|
||||
};
|
||||
}
|
||||
|
||||
export function typeOf(obj) {
|
||||
export function typeOf(
|
||||
obj: unknown,
|
||||
):
|
||||
| 'boolean'
|
||||
| 'number'
|
||||
| 'string'
|
||||
| 'function'
|
||||
| 'array'
|
||||
| 'date'
|
||||
| 'regExp'
|
||||
| 'undefined'
|
||||
| 'null'
|
||||
| 'object' {
|
||||
const toString = Object.prototype.toString;
|
||||
const map = {
|
||||
'[object Boolean]': 'boolean',
|
||||
@@ -100,7 +129,7 @@ export function typeOf(obj) {
|
||||
'[object RegExp]': 'regExp',
|
||||
'[object Undefined]': 'undefined',
|
||||
'[object Null]': 'null',
|
||||
'[object Object]': 'object'
|
||||
'[object Object]': 'object',
|
||||
};
|
||||
return map[toString.call(obj)];
|
||||
}
|
||||
5
tsconfig.json
Normal file
5
tsconfig.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"],
|
||||
}
|
||||
Reference in New Issue
Block a user