<!DOCTYPE html>
<html>
<head>
  <title>Skottie-WASM Perf</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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">
    const WIDTH  = 1000;
    const HEIGHT = 1000;
    const LOTTIE_JSON_PATH = '/res/lottie.json';
    const MAX_FRAMES = 25;
    const MAX_LOOPS = 25;
    const MAX_SAMPLE_MS = 60*1000; // in case something takes a while, stop after 60 seconds.
    (function() {
      const loadKit = CanvasKitInit({
        locateFile: (file) => '/res/' + file,
      });

      const loadLottie = fetch(LOTTIE_JSON_PATH).then((resp) => {
        return resp.text();
      });

      Promise.all([loadKit, loadLottie]).then((values) => {
        const [CanvasKit, json] = values;

        const animation = CanvasKit.MakeManagedAnimation(json, null);
        if (!animation) {
          window._error = 'Could not process JSON';
          return
        }

        let surface = null;
        if (window.location.hash.indexOf('gpu') !== -1) {
          surface = CanvasKit.MakeWebGLCanvasSurface('anim');
          if (!surface) {
            window._error = 'Could not make GPU surface';
            return;
          }
          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.
          if (c.classList.contains('ck-replaced')) {
            window._error = 'fell back to CPU';
            return;
          }
        } else {
          surface = CanvasKit.MakeSWCanvasSurface('anim');
          if (!surface) {
            window._error = 'Could not make CPU surface';
            return;
          }
        }
        const canvas = surface.getCanvas();

        const t_rate = 1.0 / (MAX_FRAMES-1);
        let seek = 0;
        let frame = 0;
        let loop = 0;
        const damageRect = Float32Array.of(0, 0, 0, 0);
        const bounds = CanvasKit.LTRBRect(0, 0, WIDTH, HEIGHT);
        const start = performance.now();

        const drawFrame = () => {
          if ((performance.now() - start) > MAX_SAMPLE_MS) {
              // This global variable signals we are done.
              window._skottieDone = true;
              return;
          }
          if (frame >= MAX_FRAMES) {
            // Reached the end of one loop.
            loop++;
            if (loop == MAX_LOOPS) {
              // This global variable signals we are done.
              window._skottieDone = true;
              return;
            }
            // Reset frame and seek to restart the loop.
            frame = 0;
            seek = 0;
          }

          let damage = animation.seek(seek, damageRect);
          if (damage[2] > damage[0] && damage[3] > damage[1]) {
            animation.render(canvas, bounds);
            surface.flush();
          }
          console.log(`Used seek: ${seek}`);
          seek += t_rate;
          frame++;
          window.requestAnimationFrame(drawFrame);
        };
        window.requestAnimationFrame(drawFrame);
      });
    })();
  </script>
</body>
</html>