import {Controls, Script, Player} from "liqvid";
import {RecordingControl} from "rp-recording";

import {PaintCanvas, PaintReplay} from "rp-paint";
import PaintRecorderPlugin from "rp-paint/recorder";

import {brushReplay} from "./recordings";

// controls
const controls = (<>
  {Player.defaultControlsLeft}

  <div className="rp-controls-right">
    <RecordingControl plugins={[PaintRecorderPlugin]}/>

    {Player.defaultControlsRight}
  </div>
</>);

/* ... */

<Player controls={controls} script={script}>
  {/* to record */}
  <PaintCanvas recorder={PaintRecorderPlugin.recorder}/>

  {/* to replay */}
  <PaintReplay replay={brushReplay} start={0}/>
</Player>