@juice10/rrweb-player

rrwebPlayer

npm install --save @juice10/rrweb-player

import rrwebPlayer from '@juice10/rrweb-player';

const events = [...];
const player = new rrwebPlayer({
  target: document.getElementById('replay-window'),
  data: {
    events,
    autoPlay: false,
    skipMouseMove: true,
    showController: true, // show play/pause/scrubber and other controls
    width: 1080 / 4,
    height: 1920 / 4,
  },
});

// loop first 10 events
player.playFromToTime(
  events[0].timestamp,
  events[10].timestamp,
  true,
);

// move player to event timestamp
player.goToTime(action.events[10].timestamp);

How to use the callback on player.playFromToTime:

const eventsGroup = [{
  events: ...
}, ...];
const onPauseHook = function () {
  if (!eventsGroup[i]) return;
  const loop = false;
  const fromTimestamp = eventsGroup[i].events[0].timestamp;
  let toTimestamp;
  if(eventsGroup[i + 1]) {
    toTimestamp = eventsGroup[i + 1].events[0].timestamp;
  } else {
    toTimestamp = eventsGroup[i].events[eventsGroup[i].events.length - 1].timestamp;
  }
  player.playFromToTime(
    fromTimestamp,
    toTimestamp,
    loop, // loop
    onPauseHook,
  );
  i += 1;
};
onPauseHook();

modifying this project

This is a project is based on Svelte version 2. Documentation for Svelte v2

Get started

Install the dependencies...

cd rrweb-player
npm install

...then start Rollup:

npm run dev

Navigate to localhost:5000. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.

Deploying to the web

With now

Install now if you haven't already:

npm install -g now

Then, from within your project folder:

now

As an alternative, use the Now desktop client and simply drag the unzipped project folder to the taskbar icon.

With surge

Install surge if you haven't already:

npm install -g surge

Then, from within your project folder:

npm run build
surge public