<!DOCTYPE html>
<html>
<head>
    <title>Lottie Filmstrip Capture</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="/lottie.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
      body,
      main,
      .anim {
        margin: 0;
        padding: 0;
      }

      main {
        display: flex;
        width: 1000px;
        height: 1000px;
        flex-flow: row wrap;
      }
    </style>
</head>
<body>
  <main>
    <div class=anim></div>
  </main>
  <script type="text/javascript" charset="utf-8">
    (function () {
      const TILE_COUNT = 5; // Number of tiles in x or y direction.
      const TARGET_SIZE = 1000; // Image size in pixels both x and y direction.
      const PATH = '/lottie.json';

      // This global is used by puppeteer to determine if all tiles have finished drawing.
      window._tileCount = 0;

      // First load the animation for just a single tile
      // so we can read out some values and calculate what
      // the filmstrip should look like.
      let anim = lottie.loadAnimation({
        container: document.querySelector('.anim'),
        renderer: 'svg',
        loop: false,
        autoplay: true,
        path: PATH,
        rendererSettings: {
          preserveAspectRatio:'xMidYMid meet'
        },
      });

      anim.addEventListener('data_ready', (e) => {
        // Once the first tile is loaded, calculate what
        // the filmstrip should look like.
        let width = anim.animationData.w;
        let height = anim.animationData.h;
        let scale = TARGET_SIZE / (TILE_COUNT * Math.max(width, height));
        let tileWidth = Math.ceil(scale * width);
        let tileHeight = Math.ceil(scale * height);

        let inPoint = (anim.animationData.ip || 0) / anim.frameRate;
        let outPoint = (anim.animationData.op || (anim.animationData.totalFrames - 1)) / anim.frameRate;
        let frameStep = (outPoint - inPoint) / (TILE_COUNT * TILE_COUNT - 1);

        let main = document.querySelector('main');

        let renderer = 'svg';
        let hash = window.location.hash;
        if (hash) {
          renderer = hash.slice(1);
        }

        // Clear out the first div now that our measurements are done.
        main.firstElementChild.remove();

        // Add in all the tiles.
        for (let i = 0; i < TILE_COUNT*TILE_COUNT; i++) {
          let div = document.createElement('div');
          div.classList.add('anim');
          div.style.width = tileWidth + 'px';
          div.style.height = tileHeight + 'px';
          main.appendChild(div);

          let frameStop = i * frameStep;

          let anim = lottie.loadAnimation({
            container: div,
            renderer: renderer,
            loop: false,
            autoplay: false,
            path: PATH,
            rendererSettings: {
              preserveAspectRatio:'xMidYMid meet'
            },
          });

          anim.addEventListener('data_ready', (e) => {
            console.log(frameStop*1000);
            // Once data is loaded, jump to the right frame.
            anim.goToAndStop(frameStop * anim.frameRate, true);
            window._tileCount += 1;
          });
        }
      });
    })();
  </script>
</body>
</html>