<!DOCTYPE html>
<html>
<head>
    <title>Skottie-WASM Perf</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=egde,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="res/canvaskit.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
      body {
        margin: 0;
        padding: 0;
      }
    </style>
</head>
<body>
  <main>
    <canvas id=anim width=1000 height=1000 style="height: 1000px; width: 1000px;"></canvas>
  </main>
  <script type="text/javascript" charset="utf-8">
    (function() {
      const PATH = '/res/lottie.json';

      let lottieJSON = null;
      let CK = null;

     CanvasKitInit({
        locateFile: (file) => '/res/'+file,
    }).ready().then((CanvasKit) => {
        CK = CanvasKit;
        Bench(CK, lottieJSON);
    });

    fetch(PATH).then((resp) => {
      resp.text().then((json) => {
        lottieJSON = json;
        Bench(CK, lottieJSON);
      });
    });
  })();

  // Without flushing, nothing will show up on the screen, although
  // everything else has been executed.
  const shouldFlush = false;
  const frames = 25;

  function Bench(CK, json) {
    if (!CK || !json) {
      return;
    }

    const animation = CK.MakeManagedAnimation(json, null);
    if (!animation) {
      console.error('Could not process JSON');
      return
    }

    const surface = CK.MakeCanvasSurface("anim");
    if (!surface) {
      console.error('Could not make surface');
      return;
    }
    const canvas = surface.getCanvas();

    let c = document.getElementById('anim');
    // If CanvasKit was unable to instantiate a WebGL context, it will fallback
    // to CPU and add a ck-replaced class to the canvas element.
    window._gpu = CK.gpu && !c.classList.contains('ck-replaced');

    console.log("start")
    const t_rate = 1.0 / (frames-1);
    let time = 0;
    let max = -1;
    let min = 1000000000;
    let seek = 0;
    let frame = 0;
    const drawFrame = () => {
      if (frame >= frames) {
        console.log("On average, took "+ (time/frames) +" us" );
        // These are global variables to talk with puppeteer.
        window._avgFrameTimeUs = time/frames;
        window._minFrameTimeUs = min;
        window._maxFrameTimeUs = max;
        window._skottieDone = true;
        return;
      }

      let start = window.performance.now();
      animation.seek(seek);
      animation.render(canvas, {
                       fLeft: 0,
                       fTop: 0,
                       fRight: 1000,
                       fBottom: 1000
                       });
      if (shouldFlush) {
        surface.flush();
      }
      const t = (window.performance.now() - start) * 1000;

      time += t;
      console.log("Frame " + frame + " took " + t + " us");
      console.log("Used seek: " + seek);
      if (t < min) {
        min = t;
      }
      if (t > max) {
        max = t;
      }
      seek += t_rate;
      frame++;
      window.requestAnimationFrame(drawFrame);
    };
    window.requestAnimationFrame(drawFrame);
  }
  </script>
</body>
</html>