Web Replayer

To replay in a web viewport by given replay logs.

Install

npm i web-replayer

Usage

<div id="replayer"></div>
<script type="module">
    import { createReplayer, createReplayerFramesGenerator } from 'https://unpkg.com/web-replayer';
    const genertor = createReplayerFramesGenerator([
        // logs ...
    ]);
    const replayer = createReplayer(genertor);
    document.querySelector('#replayer').appendChild(replayer);
</script>

API

To create a web replayer, you should provide frames data, the replayer will paly the frames to prsent the content.

createReplayer

Create a web replayer instance.

import { createReplayer } from 'https://unpkg.com/web-replayer';
const replayer = createReplayer();

It receives only parameter which is the frames or the frames generator to prsent. You should use the following tool functions to create frames or frames generator.

createReplayerDriver

const convertor = (context) => [
    // frames
];
const drive = createReplayerDriver(convertor);
const framesGenerator = drive(logs);

// after you append replayer to the document, you can add the frames
replayer.add(framesGenerator);

Firstly, convertor here is a function to convert each log data to a frame object. For example, we provide a log data:

{
    type: 'mousemove',
    time: new Date('2024-03-01T00:00:04.000Z'),
    detail: {
        x: 719,
        y: 225,
    },
}

And we want to convert it to be a frame (reading more in the following parts):

{
    time: 1709251204000,
    invoke() { ... },
    data: log,
}

We should provide a convertor like:

const convertor = (context) => [
    ...,
    {
        type: 'mousemove',
        invoke(log) {
            const { detail: { x, y } } = log;
            context.mouse.move(x, y);
        },
    }
    ...,
];

The convertor provides a mousemove type to create a frame which handle the same type logs.

The context provides some objects from the replayer instance who's replayer, sandbox, mouse, touch. Read more in the following Replayer part.

createReplayerFramesGenerator

A built in package of create a frames generator which following the log data structure of Anys.

const generator = createReplayerFramesGenerator(logsOfAnys);
replayer.add(generator);

Frame

A frame is an operation to replay. It has 4 properties:

• time: timestamp of the action happened
• invoke: what to do when the action happened
• revoke: how to remove the affect of the action
• data: the original replay information

{
    time: +new Date('2024-03-01T00:00:04.000Z'),
    invoke: (log, i, frames) => {
        const div = document.createElement('div');
        div.id = 'xxx';
        div.innerHTML = 'xxx';
        document.body.appendChild(div);
    },
    revoke: (log, i, frames) => {
        document.body.removeChild(document.querySelector('#xxx'));
    },
    data: log,
}

A frameset is a set of frames. To define a frameset:

{
    img: [frame1, frame2],
    audio: [frame3, frame4],
}

Replayer instances only support receiving frameset, so if you sometimes use web replayer to create your own replayer presenting, you should define your frameset. and invoke replayer.add(frameset) to replay.

Replayer

A web replayer instance is a custom element who has some advanced interfaces to operate.

To create a replayer instance, you should use createReplayer interface to create one.

const replayer = createReplayer();

Then you should append the replayer instance into document.

document.querySelector('#replayer').appendChild(replayer);

Then the replayer will work as expected.

add

Add frameset to the replayer. The parameter can be frames or frames generator.

const frames = [
    { time, invoke },
];
const frameset = { default: frames };
replayer.add(frameset);

const generator = createReplayerFramesGenerator(logsOfAnys);
replayer.add(generator);

clear

If you want to change the frameset of a replayer, you should first clear, and then add new frameset.

replayer.clear();
replayer.add(frameset);

size

Change replayer viewport size.

replayer.size(900, 700);

url

Change replayer url value in navigation part.

replayer.url('new url');

attributes

You can set attributes to change the default behaviour of the replayer:

replayer.setAttribute('supports-dark-mode', 1);

• speed default play speed
• color theme color of the replayer
• tip-color default color of the popover tip
• font-color default color of the font
• font-family
• disable-drag
• rebuild-when-drag will replay frames from the start to current when drag
• debug
• name when debug is set, you can set a name of the replayer, and read it from window.replayers[name]
• supports-dark-mode when set and your computer system is changed to dark mode, new theme will be used
• only-progress dont show other elements, only show progress bar

Sandbox

A replayer instance has a sandbox property which is a Sandbox instance. The sandbox instance keep a iframe to present the logs, you can read from sandbox to operate the iframe.

const { sandbox } = replayer;
const { document: doc, window: win } = sandbox;

html

Rewrite the html of the sandbox document.

sandbox.html('<div>xxx</div>');

clear

Clear the content of the sandbox.

sandbox.clear();

License

GNU AFFERO GENERAL PUBLIC LICENSE