107 lines
2.2 KiB
HTML
107 lines
2.2 KiB
HTML
<div class="rr-player">
|
|
<div class="rr-player__frame" ref:frame { style }></div>
|
|
{#if replayer}
|
|
<Controller { replayer } {showController} />
|
|
{/if}
|
|
</div>
|
|
|
|
<script>
|
|
import { Replayer } from 'rrweb';
|
|
import { inlineCss } from './utils.js';
|
|
|
|
export default {
|
|
components: {
|
|
Controller: './Controller.html',
|
|
},
|
|
data() {
|
|
return {
|
|
showController: true,
|
|
width: 1024,
|
|
height: 576,
|
|
events: [],
|
|
replayer: null,
|
|
};
|
|
},
|
|
computed: {
|
|
style({ width, height }) {
|
|
return inlineCss({
|
|
width: `${width}px`,
|
|
height: `${height}px`,
|
|
});
|
|
},
|
|
},
|
|
methods: {
|
|
updateScale(el, frameDimension) {
|
|
const { width, height } = this.get();
|
|
const widthScale = (width - 20) / frameDimension.width;
|
|
const heightScale = (height - 20) / frameDimension.height;
|
|
el.style.transform =
|
|
`scale(${Math.min(widthScale, heightScale, 1)})` +
|
|
'translate(-50%, -50%)';
|
|
},
|
|
},
|
|
oncreate(p) {
|
|
const { events } = this.get();
|
|
const replayer = new Replayer(events, {
|
|
speed: 1,
|
|
root: this.refs.frame,
|
|
});
|
|
replayer.on('resize', (dimension) =>
|
|
this.updateScale(replayer.wrapper, dimension)
|
|
);
|
|
this.set({
|
|
replayer,
|
|
});
|
|
},
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
.rr-player {
|
|
background: white;
|
|
float: left;
|
|
clear: both;
|
|
}
|
|
|
|
.rr-player__frame {
|
|
overflow: hidden;
|
|
}
|
|
|
|
:global(.replayer-wrapper) {
|
|
float: left;
|
|
clear: both;
|
|
transform-origin: top left;
|
|
left: calc(50% - 10px);
|
|
top: calc(50% - 10px);
|
|
margin: 10px;
|
|
box-shadow: 0 3px 28px rgba(0, 0, 0, 0.25), 0 1px 10px rgba(0, 0, 0, 0.22);
|
|
}
|
|
|
|
:global(.replayer-wrapper > iframe) {
|
|
border: none;
|
|
}
|
|
|
|
/* get from rrweb */
|
|
:global(.replayer-wrapper) {
|
|
position: relative;
|
|
}
|
|
|
|
:global(.replayer-mouse) {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
}
|
|
|
|
:global(.replayer-mouse::after) {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
background: thistle;
|
|
transform: translate(-10px, -10px);
|
|
opacity: 0.5;
|
|
}
|
|
</style> |