Live mode 2

[Yuyz0112]

In this patch, we improved the live mode which made it easier to use and suitable for more real-world scenarios.

Previously, we use a liveMode flag to enable live mode in the player. And users can use the addEvent method to add events to the player dynamically and asynchronous.

But there are some shortages in this implementation:

1. The calculation of the timing may make the replay looks laggy.
2. Other issues described in Add event async #191.

Since we already add a state machine to our player, it becomes easier to implement a more solid live mode.

Now the public API of the player looks like this:

// now you can create a live mode player with empty events
const replayer = new Replayer([], {
  root: playerDom,
  liveMode: true,
});

// You need to call `startLive` to start a live replay.
// The parameter of `startLive` is an optional baseline timestamp, which is useful to create a buffer time for the replay.
// For example, if you are receiving some events from a remote source, it may cause some time to load it.
// When set a buffer time, like 1000ms, the player will delay all the events with 1000ms, which means your replay will look fine when the delay of loading event is less than 1000ms.
replayer.startLive(FIRST_EVENT.timestamp - BUFFER);

replayer.addEvent(event)

[rifaideen]

@Yuyz0112 - here
replayer.startLive(FIRST_EVENT.timestamp - BUFFER);

FIRST_EVENT.timestamp will be the actual first event timestamp - the desired buffer?

i.e:
replayer.startLive(events[0].timestamp - 1000);

[Yuyz0112]

@rifaideen Yep

[eoghanmurray]

Does this buffer also handle the fact that mouse movement events have a negative offset?

[Yuyz0112]

@eoghanmurray Yes, the buffer will let the timer know things should happen later that the real physical timing.

[randy-johnson]

Does this work with rrwebPlayer?

[manan]

@Yuyz0112 Is it possible to ingest events that have already happened and then start live mode?

i.e., Let's say I have been recording events for the last 15 minutes.. and I'm currently also recording events live. I want the player to ingest everything that happened in the last 15 minutes (so it builds out the DOM and more) and immediately join in on the live events and play them in real time?

[bobjiang1988]

@Yuyz0112 Is it possible to ingest events that have already happened and then start live mode?

i.e., Let's say I have been recording events for the last 15 minutes.. and I'm currently also recording events live. I want the player to ingest everything that happened in the last 15 minutes (so it builds out the DOM and more) and immediately join in on the live events and play them in real time?

@Yuyz0112 Excuse me, but should this work?

const events = [item_1, item_2, ..., item_n];

this.replayer = new Replayer(events, {
     liveMode: true
});
this.replayer.startLive(item_n.timestamp);

listener.on('event', (event) => {
    this.replayer.addEvent(event);
})