@lottielab/lottie-player/dist/esm/react.mjs.map

Versatile Lottie animation player based on lottie-web. Supports HTML (via Web Components) and React.

{"version":3,"file":"react.mjs","sources":["../../node_modules/lottie-web/build/player/lottie_lottielab.js","../../src/common/renderer.ts","../../src/common/morphing.ts","../../src/common/event.ts","../../src/common/driven-renderer.ts","../../src/common/playback.ts","../../src/common/interactivity/definition.ts","../../src/common/expressions/parser.ts","../../src/common/expressions/evaluator.ts","../../src/common/interactivity/variables.ts","../../src/common/interactivity/driver.ts","../../src/common/interactivity/bezier.ts","../../src/common/interactivity/events.ts","../../src/common/interactivity/index.ts","../../src/common/player.ts","../../src/react/index.tsx"],"sourcesContent":["(typeof navigator !== \"undefined\") && (function (global, factory) {\n  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n  typeof define === 'function' && define.amd ? define(factory) :\n  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lottie = factory());\n})(this, (function () { 'use strict';\n\n  var svgNS = 'http://www.w3.org/2000/svg';\n  var locationHref = '';\n  var _useWebWorker = false;\n  var initialDefaultFrame = -999999;\n  var setWebWorker = function setWebWorker(flag) {\n    _useWebWorker = !!flag;\n  };\n  var getWebWorker = function getWebWorker() {\n    return _useWebWorker;\n  };\n  var setLocationHref = function setLocationHref(value) {\n    locationHref = value;\n  };\n  var getLocationHref = function getLocationHref() {\n    return locationHref;\n  };\n\n  function createTag(type) {\n    // return {appendChild:function(){},setAttribute:function(){},style:{}}\n    return document.createElement(type);\n  }\n\n  function extendPrototype(sources, destination) {\n    var i;\n    var len = sources.length;\n    var sourcePrototype;\n    for (i = 0; i < len; i += 1) {\n      sourcePrototype = sources[i].prototype;\n      for (var attr in sourcePrototype) {\n        if (Object.prototype.hasOwnProperty.call(sourcePrototype, attr)) destination.prototype[attr] = sourcePrototype[attr];\n      }\n    }\n  }\n  function getDescriptor(object, prop) {\n    return Object.getOwnPropertyDescriptor(object, prop);\n  }\n  function createProxyFunction(prototype) {\n    function ProxyFunction() {}\n    ProxyFunction.prototype = prototype;\n    return ProxyFunction;\n  }\n\n  // import Howl from '../../3rd_party/howler';\n\n  var audioControllerFactory = function () {\n    function AudioController(audioFactory) {\n      this.audios = [];\n      this.audioFactory = audioFactory;\n      this._volume = 1;\n      this._isMuted = false;\n    }\n    AudioController.prototype = {\n      addAudio: function addAudio(audio) {\n        this.audios.push(audio);\n      },\n      pause: function pause() {\n        var i;\n        var len = this.audios.length;\n        for (i = 0; i < len; i += 1) {\n          this.audios[i].pause();\n        }\n      },\n      resume: function resume() {\n        var i;\n        var len = this.audios.length;\n        for (i = 0; i < len; i += 1) {\n          this.audios[i].resume();\n        }\n      },\n      setRate: function setRate(rateValue) {\n        var i;\n        var len = this.audios.length;\n        for (i = 0; i < len; i += 1) {\n          this.audios[i].setRate(rateValue);\n        }\n      },\n      createAudio: function createAudio(assetPath) {\n        if (this.audioFactory) {\n          return this.audioFactory(assetPath);\n        }\n        if (window.Howl) {\n          return new window.Howl({\n            src: [assetPath]\n          });\n        }\n        return {\n          isPlaying: false,\n          play: function play() {\n            this.isPlaying = true;\n          },\n          seek: function seek() {\n            this.isPlaying = false;\n          },\n          playing: function playing() {},\n          rate: function rate() {},\n          setVolume: function setVolume() {}\n        };\n      },\n      setAudioFactory: function setAudioFactory(audioFactory) {\n        this.audioFactory = audioFactory;\n      },\n      setVolume: function setVolume(value) {\n        this._volume = value;\n        this._updateVolume();\n      },\n      mute: function mute() {\n        this._isMuted = true;\n        this._updateVolume();\n      },\n      unmute: function unmute() {\n        this._isMuted = false;\n        this._updateVolume();\n      },\n      getVolume: function getVolume() {\n        return this._volume;\n      },\n      _updateVolume: function _updateVolume() {\n        var i;\n        var len = this.audios.length;\n        for (i = 0; i < len; i += 1) {\n          this.audios[i].volume(this._volume * (this._isMuted ? 0 : 1));\n        }\n      }\n    };\n    return function () {\n      return new AudioController();\n    };\n  }();\n\n  var createTypedArray = function () {\n    function createRegularArray(type, len) {\n      var i = 0;\n      var arr = [];\n      var value;\n      switch (type) {\n        case 'int16':\n        case 'uint8c':\n          value = 1;\n          break;\n        default:\n          value = 1.1;\n          break;\n      }\n      for (i = 0; i < len; i += 1) {\n        arr.push(value);\n      }\n      return arr;\n    }\n    function createTypedArrayFactory(type, len) {\n      if (type === 'float32') {\n        return new Float32Array(len);\n      }\n      if (type === 'int16') {\n        return new Int16Array(len);\n      }\n      if (type === 'uint8c') {\n        return new Uint8ClampedArray(len);\n      }\n      return createRegularArray(type, len);\n    }\n    if (typeof Uint8ClampedArray === 'function' && typeof Float32Array === 'function') {\n      return createTypedArrayFactory;\n    }\n    return createRegularArray;\n  }();\n  function createSizedArray(len) {\n    return Array.apply(null, {\n      length: len\n    });\n  }\n\n  function _typeof$3(obj) { \"@babel/helpers - typeof\"; return _typeof$3 = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof$3(obj); }\n  var subframeEnabled = true;\n  var expressionsPlugin = null;\n  var expressionsInterfaces = null;\n  var idPrefix$1 = '';\n  var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);\n  var _shouldRoundValues = false;\n  var bmPow = Math.pow;\n  var bmSqrt = Math.sqrt;\n  var bmFloor = Math.floor;\n  var bmMax = Math.max;\n  var bmMin = Math.min;\n  var BMMath = {};\n  (function () {\n    var propertyNames = ['abs', 'acos', 'acosh', 'asin', 'asinh', 'atan', 'atanh', 'atan2', 'ceil', 'cbrt', 'expm1', 'clz32', 'cos', 'cosh', 'exp', 'floor', 'fround', 'hypot', 'imul', 'log', 'log1p', 'log2', 'log10', 'max', 'min', 'pow', 'random', 'round', 'sign', 'sin', 'sinh', 'sqrt', 'tan', 'tanh', 'trunc', 'E', 'LN10', 'LN2', 'LOG10E', 'LOG2E', 'PI', 'SQRT1_2', 'SQRT2'];\n    var i;\n    var len = propertyNames.length;\n    for (i = 0; i < len; i += 1) {\n      BMMath[propertyNames[i]] = Math[propertyNames[i]];\n    }\n  })();\n  function ProjectInterface$1() {\n    return {};\n  }\n  BMMath.random = Math.random;\n  BMMath.abs = function (val) {\n    var tOfVal = _typeof$3(val);\n    if (tOfVal === 'object' && val.length) {\n      var absArr = createSizedArray(val.length);\n      var i;\n      var len = val.length;\n      for (i = 0; i < len; i += 1) {\n        absArr[i] = Math.abs(val[i]);\n      }\n      return absArr;\n    }\n    return Math.abs(val);\n  };\n  var defaultCurveSegments = 150;\n  var degToRads = Math.PI / 180;\n  var roundCorner = 0.5519;\n  function roundValues(flag) {\n    _shouldRoundValues = !!flag;\n  }\n  function bmRnd(value) {\n    if (_shouldRoundValues) {\n      return Math.round(value);\n    }\n    return value;\n  }\n  function styleDiv(element) {\n    element.style.position = 'absolute';\n    element.style.top = 0;\n    element.style.left = 0;\n    element.style.display = 'block';\n    element.style.transformOrigin = '0 0';\n    element.style.webkitTransformOrigin = '0 0';\n    element.style.backfaceVisibility = 'visible';\n    element.style.webkitBackfaceVisibility = 'visible';\n    element.style.transformStyle = 'preserve-3d';\n    element.style.webkitTransformStyle = 'preserve-3d';\n    element.style.mozTransformStyle = 'preserve-3d';\n  }\n  function BMEnterFrameEvent(type, currentTime, totalTime, frameMultiplier) {\n    this.type = type;\n    this.currentTime = currentTime;\n    this.totalTime = totalTime;\n    this.direction = frameMultiplier < 0 ? -1 : 1;\n  }\n  function BMCompleteEvent(type, frameMultiplier) {\n    this.type = type;\n    this.direction = frameMultiplier < 0 ? -1 : 1;\n  }\n  function BMCompleteLoopEvent(type, totalLoops, currentLoop, frameMultiplier) {\n    this.type = type;\n    this.currentLoop = currentLoop;\n    this.totalLoops = totalLoops;\n    this.direction = frameMultiplier < 0 ? -1 : 1;\n  }\n  function BMSegmentStartEvent(type, firstFrame, totalFrames) {\n    this.type = type;\n    this.firstFrame = firstFrame;\n    this.totalFrames = totalFrames;\n  }\n  function BMDestroyEvent(type, target) {\n    this.type = type;\n    this.target = target;\n  }\n  function BMRenderFrameErrorEvent(nativeError, currentTime) {\n    this.type = 'renderFrameError';\n    this.nativeError = nativeError;\n    this.currentTime = currentTime;\n  }\n  function BMConfigErrorEvent(nativeError) {\n    this.type = 'configError';\n    this.nativeError = nativeError;\n  }\n  function BMAnimationConfigErrorEvent(type, nativeError) {\n    this.type = type;\n    this.nativeError = nativeError;\n  }\n  var createElementID = function () {\n    var _count = 0;\n    return function createID() {\n      _count += 1;\n      return idPrefix$1 + '__lottie_element_' + _count;\n    };\n  }();\n  function HSVtoRGB(h, s, v) {\n    var r;\n    var g;\n    var b;\n    var i;\n    var f;\n    var p;\n    var q;\n    var t;\n    i = Math.floor(h * 6);\n    f = h * 6 - i;\n    p = v * (1 - s);\n    q = v * (1 - f * s);\n    t = v * (1 - (1 - f) * s);\n    switch (i % 6) {\n      case 0:\n        r = v;\n        g = t;\n        b = p;\n        break;\n      case 1:\n        r = q;\n        g = v;\n        b = p;\n        break;\n      case 2:\n        r = p;\n        g = v;\n        b = t;\n        break;\n      case 3:\n        r = p;\n        g = q;\n        b = v;\n        break;\n      case 4:\n        r = t;\n        g = p;\n        b = v;\n        break;\n      case 5:\n        r = v;\n        g = p;\n        b = q;\n        break;\n      default:\n        break;\n    }\n    return [r, g, b];\n  }\n  function RGBtoHSV(r, g, b) {\n    var max = Math.max(r, g, b);\n    var min = Math.min(r, g, b);\n    var d = max - min;\n    var h;\n    var s = max === 0 ? 0 : d / max;\n    var v = max / 255;\n    switch (max) {\n      case min:\n        h = 0;\n        break;\n      case r:\n        h = g - b + d * (g < b ? 6 : 0);\n        h /= 6 * d;\n        break;\n      case g:\n        h = b - r + d * 2;\n        h /= 6 * d;\n        break;\n      case b:\n        h = r - g + d * 4;\n        h /= 6 * d;\n        break;\n      default:\n        break;\n    }\n    return [h, s, v];\n  }\n  function addSaturationToRGB(color, offset) {\n    var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);\n    hsv[1] += offset;\n    if (hsv[1] > 1) {\n      hsv[1] = 1;\n    } else if (hsv[1] <= 0) {\n      hsv[1] = 0;\n    }\n    return HSVtoRGB(hsv[0], hsv[1], hsv[2]);\n  }\n  function addBrightnessToRGB(color, offset) {\n    var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);\n    hsv[2] += offset;\n    if (hsv[2] > 1) {\n      hsv[2] = 1;\n    } else if (hsv[2] < 0) {\n      hsv[2] = 0;\n    }\n    return HSVtoRGB(hsv[0], hsv[1], hsv[2]);\n  }\n  function addHueToRGB(color, offset) {\n    var hsv = RGBtoHSV(color[0] * 255, color[1] * 255, color[2] * 255);\n    hsv[0] += offset / 360;\n    if (hsv[0] > 1) {\n      hsv[0] -= 1;\n    } else if (hsv[0] < 0) {\n      hsv[0] += 1;\n    }\n    return HSVtoRGB(hsv[0], hsv[1], hsv[2]);\n  }\n  var rgbToHex = function () {\n    var colorMap = [];\n    var i;\n    var hex;\n    for (i = 0; i < 256; i += 1) {\n      hex = i.toString(16);\n      colorMap[i] = hex.length === 1 ? '0' + hex : hex;\n    }\n    return function (r, g, b) {\n      if (r < 0) {\n        r = 0;\n      }\n      if (g < 0) {\n        g = 0;\n      }\n      if (b < 0) {\n        b = 0;\n      }\n      return '#' + colorMap[r] + colorMap[g] + colorMap[b];\n    };\n  }();\n  var setSubframeEnabled = function setSubframeEnabled(flag) {\n    subframeEnabled = !!flag;\n  };\n  var getSubframeEnabled = function getSubframeEnabled() {\n    return subframeEnabled;\n  };\n  var setExpressionsPlugin = function setExpressionsPlugin(value) {\n    expressionsPlugin = value;\n  };\n  var getExpressionsPlugin = function getExpressionsPlugin() {\n    return expressionsPlugin;\n  };\n  var setExpressionInterfaces = function setExpressionInterfaces(value) {\n    expressionsInterfaces = value;\n  };\n  var getExpressionInterfaces = function getExpressionInterfaces() {\n    return expressionsInterfaces;\n  };\n  var setDefaultCurveSegments = function setDefaultCurveSegments(value) {\n    defaultCurveSegments = value;\n  };\n  var getDefaultCurveSegments = function getDefaultCurveSegments() {\n    return defaultCurveSegments;\n  };\n  var setIdPrefix = function setIdPrefix(value) {\n    idPrefix$1 = value;\n  };\n  var getIdPrefix = function getIdPrefix() {\n    return idPrefix$1;\n  };\n\n  function createNS(type) {\n    // return {appendChild:function(){},setAttribute:function(){},style:{}}\n    return document.createElementNS(svgNS, type);\n  }\n\n  function _typeof$2(obj) { \"@babel/helpers - typeof\"; return _typeof$2 = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof$2(obj); }\n  var dataManager = function () {\n    var _counterId = 1;\n    var processes = [];\n    var workerFn;\n    var workerInstance;\n    var workerProxy = {\n      onmessage: function onmessage() {},\n      postMessage: function postMessage(path) {\n        workerFn({\n          data: path\n        });\n      }\n    };\n    var _workerSelf = {\n      postMessage: function postMessage(data) {\n        workerProxy.onmessage({\n          data: data\n        });\n      }\n    };\n    function createWorker(fn) {\n      if (window.Worker && window.Blob && getWebWorker()) {\n        var blob = new Blob(['var _workerSelf = self; self.onmessage = ', fn.toString()], {\n          type: 'text/javascript'\n        });\n        // var blob = new Blob(['self.onmessage = ', fn.toString()], { type: 'text/javascript' });\n        var url = URL.createObjectURL(blob);\n        return new Worker(url);\n      }\n      workerFn = fn;\n      return workerProxy;\n    }\n    function setupWorker() {\n      if (!workerInstance) {\n        workerInstance = createWorker(function workerStart(e) {\n          function dataFunctionManager() {\n            function completeLayers(layers, comps) {\n              var layerData;\n              var i;\n              var len = layers.length;\n              var j;\n              var jLen;\n              var k;\n              var kLen;\n              for (i = 0; i < len; i += 1) {\n                layerData = layers[i];\n                if ('ks' in layerData && !layerData.completed) {\n                  layerData.completed = true;\n                  if (layerData.hasMask) {\n                    var maskProps = layerData.masksProperties;\n                    jLen = maskProps.length;\n                    for (j = 0; j < jLen; j += 1) {\n                      if (maskProps[j].pt.k.i) {\n                        convertPathsToAbsoluteValues(maskProps[j].pt.k);\n                      } else {\n                        kLen = maskProps[j].pt.k.length;\n                        for (k = 0; k < kLen; k += 1) {\n                          if (maskProps[j].pt.k[k].s) {\n                            convertPathsToAbsoluteValues(maskProps[j].pt.k[k].s[0]);\n                          }\n                          if (maskProps[j].pt.k[k].e) {\n                            convertPathsToAbsoluteValues(maskProps[j].pt.k[k].e[0]);\n                          }\n                        }\n                      }\n                    }\n                  }\n                  if (layerData.ty === 0) {\n                    layerData.layers = findCompLayers(layerData.refId, comps);\n                    completeLayers(layerData.layers, comps);\n                  } else if (layerData.ty === 4) {\n                    completeShapes(layerData.shapes);\n                  } else if (layerData.ty === 5) {\n                    completeText(layerData);\n                  }\n                }\n              }\n            }\n            function completeChars(chars, assets) {\n              if (chars) {\n                var i = 0;\n                var len = chars.length;\n                for (i = 0; i < len; i += 1) {\n                  if (chars[i].t === 1) {\n                    // var compData = findComp(chars[i].data.refId, assets);\n                    chars[i].data.layers = findCompLayers(chars[i].data.refId, assets);\n                    // chars[i].data.ip = 0;\n                    // chars[i].data.op = 99999;\n                    // chars[i].data.st = 0;\n                    // chars[i].data.sr = 1;\n                    // chars[i].w = compData.w;\n                    // chars[i].data.ks = {\n                    //   a: { k: [0, 0, 0], a: 0 },\n                    //   p: { k: [0, -compData.h, 0], a: 0 },\n                    //   r: { k: 0, a: 0 },\n                    //   s: { k: [100, 100], a: 0 },\n                    //   o: { k: 100, a: 0 },\n                    // };\n                    completeLayers(chars[i].data.layers, assets);\n                  }\n                }\n              }\n            }\n            function findComp(id, comps) {\n              var i = 0;\n              var len = comps.length;\n              while (i < len) {\n                if (comps[i].id === id) {\n                  return comps[i];\n                }\n                i += 1;\n              }\n              return null;\n            }\n            function findCompLayers(id, comps) {\n              var comp = findComp(id, comps);\n              if (comp) {\n                if (!comp.layers.__used) {\n                  comp.layers.__used = true;\n                  return comp.layers;\n                }\n                return JSON.parse(JSON.stringify(comp.layers));\n              }\n              return null;\n            }\n            function completeShapes(arr) {\n              var i;\n              var len = arr.length;\n              var j;\n              var jLen;\n              for (i = len - 1; i >= 0; i -= 1) {\n                if (arr[i].ty === 'sh') {\n                  if (arr[i].ks.k.i) {\n                    convertPathsToAbsoluteValues(arr[i].ks.k);\n                  } else {\n                    jLen = arr[i].ks.k.length;\n                    for (j = 0; j < jLen; j += 1) {\n                      if (arr[i].ks.k[j].s) {\n                        convertPathsToAbsoluteValues(arr[i].ks.k[j].s[0]);\n                      }\n                      if (arr[i].ks.k[j].e) {\n                        convertPathsToAbsoluteValues(arr[i].ks.k[j].e[0]);\n                      }\n                    }\n                  }\n                } else if (arr[i].ty === 'gr') {\n                  completeShapes(arr[i].it);\n                }\n              }\n            }\n            function convertPathsToAbsoluteValues(path) {\n              var i;\n              var len = path.i.length;\n              for (i = 0; i < len; i += 1) {\n                path.i[i][0] += path.v[i][0];\n                path.i[i][1] += path.v[i][1];\n                path.o[i][0] += path.v[i][0];\n                path.o[i][1] += path.v[i][1];\n              }\n            }\n            function checkVersion(minimum, animVersionString) {\n              var animVersion = animVersionString ? animVersionString.split('.') : [100, 100, 100];\n              if (minimum[0] > animVersion[0]) {\n                return true;\n              }\n              if (animVersion[0] > minimum[0]) {\n                return false;\n              }\n              if (minimum[1] > animVersion[1]) {\n                return true;\n              }\n              if (animVersion[1] > minimum[1]) {\n                return false;\n              }\n              if (minimum[2] > animVersion[2]) {\n                return true;\n              }\n              if (animVersion[2] > minimum[2]) {\n                return false;\n              }\n              return null;\n            }\n            var checkText = function () {\n              var minimumVersion = [4, 4, 14];\n              function updateTextLayer(textLayer) {\n                var documentData = textLayer.t.d;\n                textLayer.t.d = {\n                  k: [{\n                    s: documentData,\n                    t: 0\n                  }]\n                };\n              }\n              function iterateLayers(layers) {\n                var i;\n                var len = layers.length;\n                for (i = 0; i < len; i += 1) {\n                  if (layers[i].ty === 5) {\n                    updateTextLayer(layers[i]);\n                  }\n                }\n              }\n              return function (animationData) {\n                if (checkVersion(minimumVersion, animationData.v)) {\n                  iterateLayers(animationData.layers);\n                  if (animationData.assets) {\n                    var i;\n                    var len = animationData.assets.length;\n                    for (i = 0; i < len; i += 1) {\n                      if (animationData.assets[i].layers) {\n                        iterateLayers(animationData.assets[i].layers);\n                      }\n                    }\n                  }\n                }\n              };\n            }();\n            var checkChars = function () {\n              var minimumVersion = [4, 7, 99];\n              return function (animationData) {\n                if (animationData.chars && !checkVersion(minimumVersion, animationData.v)) {\n                  var i;\n                  var len = animationData.chars.length;\n                  for (i = 0; i < len; i += 1) {\n                    var charData = animationData.chars[i];\n                    if (charData.data && charData.data.shapes) {\n                      completeShapes(charData.data.shapes);\n                      charData.data.ip = 0;\n                      charData.data.op = 99999;\n                      charData.data.st = 0;\n                      charData.data.sr = 1;\n                      charData.data.ks = {\n                        p: {\n                          k: [0, 0],\n                          a: 0\n                        },\n                        s: {\n                          k: [100, 100],\n                          a: 0\n                        },\n                        a: {\n                          k: [0, 0],\n                          a: 0\n                        },\n                        r: {\n                          k: 0,\n                          a: 0\n                        },\n                        o: {\n                          k: 100,\n                          a: 0\n                        }\n                      };\n                      if (!animationData.chars[i].t) {\n                        charData.data.shapes.push({\n                          ty: 'no'\n                        });\n                        charData.data.shapes[0].it.push({\n                          p: {\n                            k: [0, 0],\n                            a: 0\n                          },\n                          s: {\n                            k: [100, 100],\n                            a: 0\n                          },\n                          a: {\n                            k: [0, 0],\n                            a: 0\n                          },\n                          r: {\n                            k: 0,\n                            a: 0\n                          },\n                          o: {\n                            k: 100,\n                            a: 0\n                          },\n                          sk: {\n                            k: 0,\n                            a: 0\n                          },\n                          sa: {\n                            k: 0,\n                            a: 0\n                          },\n                          ty: 'tr'\n                        });\n                      }\n                    }\n                  }\n                }\n              };\n            }();\n            var checkPathProperties = function () {\n              var minimumVersion = [5, 7, 15];\n              function updateTextLayer(textLayer) {\n                var pathData = textLayer.t.p;\n                if (typeof pathData.a === 'number') {\n                  pathData.a = {\n                    a: 0,\n                    k: pathData.a\n                  };\n                }\n                if (typeof pathData.p === 'number') {\n                  pathData.p = {\n                    a: 0,\n                    k: pathData.p\n                  };\n                }\n                if (typeof pathData.r === 'number') {\n                  pathData.r = {\n                    a: 0,\n                    k: pathData.r\n                  };\n                }\n              }\n              function iterateLayers(layers) {\n                var i;\n                var len = layers.length;\n                for (i = 0; i < len; i += 1) {\n                  if (layers[i].ty === 5) {\n                    updateTextLayer(layers[i]);\n                  }\n                }\n              }\n              return function (animationData) {\n                if (checkVersion(minimumVersion, animationData.v)) {\n                  iterateLayers(animationData.layers);\n                  if (animationData.assets) {\n                    var i;\n                    var len = animationData.assets.length;\n                    for (i = 0; i < len; i += 1) {\n                      if (animationData.assets[i].layers) {\n                        iterateLayers(animationData.assets[i].layers);\n                      }\n                    }\n                  }\n                }\n              };\n            }();\n            var checkColors = function () {\n              var minimumVersion = [4, 1, 9];\n              function iterateShapes(shapes) {\n                var i;\n                var len = shapes.length;\n                var j;\n                var jLen;\n                for (i = 0; i < len; i += 1) {\n                  if (shapes[i].ty === 'gr') {\n                    iterateShapes(shapes[i].it);\n                  } else if (shapes[i].ty === 'fl' || shapes[i].ty === 'st') {\n                    if (shapes[i].c.k && shapes[i].c.k[0].i) {\n                      jLen = shapes[i].c.k.length;\n                      for (j = 0; j < jLen; j += 1) {\n                        if (shapes[i].c.k[j].s) {\n                          shapes[i].c.k[j].s[0] /= 255;\n                          shapes[i].c.k[j].s[1] /= 255;\n                          shapes[i].c.k[j].s[2] /= 255;\n                          shapes[i].c.k[j].s[3] /= 255;\n                        }\n                        if (shapes[i].c.k[j].e) {\n                          shapes[i].c.k[j].e[0] /= 255;\n                          shapes[i].c.k[j].e[1] /= 255;\n                          shapes[i].c.k[j].e[2] /= 255;\n                          shapes[i].c.k[j].e[3] /= 255;\n                        }\n                      }\n                    } else {\n                      shapes[i].c.k[0] /= 255;\n                      shapes[i].c.k[1] /= 255;\n                      shapes[i].c.k[2] /= 255;\n                      shapes[i].c.k[3] /= 255;\n                    }\n                  }\n                }\n              }\n              function iterateLayers(layers) {\n                var i;\n                var len = layers.length;\n                for (i = 0; i < len; i += 1) {\n                  if (layers[i].ty === 4) {\n                    iterateShapes(layers[i].shapes);\n                  }\n                }\n              }\n              return function (animationData) {\n                if (checkVersion(minimumVersion, animationData.v)) {\n                  iterateLayers(animationData.layers);\n                  if (animationData.assets) {\n                    var i;\n                    var len = animationData.assets.length;\n                    for (i = 0; i < len; i += 1) {\n                      if (animationData.assets[i].layers) {\n                        iterateLayers(animationData.assets[i].layers);\n                      }\n                    }\n                  }\n                }\n              };\n            }();\n            var checkShapes = function () {\n              var minimumVersion = [4, 4, 18];\n              function completeClosingShapes(arr) {\n                var i;\n                var len = arr.length;\n                var j;\n                var jLen;\n                for (i = len - 1; i >= 0; i -= 1) {\n                  if (arr[i].ty === 'sh') {\n                    if (arr[i].ks.k.i) {\n                      arr[i].ks.k.c = arr[i].closed;\n                    } else {\n                      jLen = arr[i].ks.k.length;\n                      for (j = 0; j < jLen; j += 1) {\n                        if (arr[i].ks.k[j].s) {\n                          arr[i].ks.k[j].s[0].c = arr[i].closed;\n                        }\n                        if (arr[i].ks.k[j].e) {\n                          arr[i].ks.k[j].e[0].c = arr[i].closed;\n                        }\n                      }\n                    }\n                  } else if (arr[i].ty === 'gr') {\n                    completeClosingShapes(arr[i].it);\n                  }\n                }\n              }\n              function iterateLayers(layers) {\n                var layerData;\n                var i;\n                var len = layers.length;\n                var j;\n                var jLen;\n                var k;\n                var kLen;\n                for (i = 0; i < len; i += 1) {\n                  layerData = layers[i];\n                  if (layerData.hasMask) {\n                    var maskProps = layerData.masksProperties;\n                    jLen = maskProps.length;\n                    for (j = 0; j < jLen; j += 1) {\n                      if (maskProps[j].pt.k.i) {\n                        maskProps[j].pt.k.c = maskProps[j].cl;\n                      } else {\n                        kLen = maskProps[j].pt.k.length;\n                        for (k = 0; k < kLen; k += 1) {\n                          if (maskProps[j].pt.k[k].s) {\n                            maskProps[j].pt.k[k].s[0].c = maskProps[j].cl;\n                          }\n                          if (maskProps[j].pt.k[k].e) {\n                            maskProps[j].pt.k[k].e[0].c = maskProps[j].cl;\n                          }\n                        }\n                      }\n                    }\n                  }\n                  if (layerData.ty === 4) {\n                    completeClosingShapes(layerData.shapes);\n                  }\n                }\n              }\n              return function (animationData) {\n                if (checkVersion(minimumVersion, animationData.v)) {\n                  iterateLayers(animationData.layers);\n                  if (animationData.assets) {\n                    var i;\n                    var len = animationData.assets.length;\n                    for (i = 0; i < len; i += 1) {\n                      if (animationData.assets[i].layers) {\n                        iterateLayers(animationData.assets[i].layers);\n                      }\n                    }\n                  }\n                }\n              };\n            }();\n            function completeData(animationData) {\n              if (animationData.__complete) {\n                return;\n              }\n              checkColors(animationData);\n              checkText(animationData);\n              checkChars(animationData);\n              checkPathProperties(animationData);\n              checkShapes(animationData);\n              completeLayers(animationData.layers, animationData.assets);\n              completeChars(animationData.chars, animationData.assets);\n              animationData.__complete = true;\n            }\n            function completeText(data) {\n              if (data.t.a.length === 0 && !('m' in data.t.p)) {\n                // data.singleShape = true;\n              }\n            }\n            var moduleOb = {};\n            moduleOb.completeData = completeData;\n            moduleOb.checkColors = checkColors;\n            moduleOb.checkChars = checkChars;\n            moduleOb.checkPathProperties = checkPathProperties;\n            moduleOb.checkShapes = checkShapes;\n            moduleOb.completeLayers = completeLayers;\n            return moduleOb;\n          }\n          if (!_workerSelf.dataManager) {\n            _workerSelf.dataManager = dataFunctionManager();\n          }\n          if (!_workerSelf.assetLoader) {\n            _workerSelf.assetLoader = function () {\n              function formatResponse(xhr) {\n                // using typeof doubles the time of execution of this method,\n                // so if available, it's better to use the header to validate the type\n                var contentTypeHeader = xhr.getResponseHeader('content-type');\n                if (contentTypeHeader && xhr.responseType === 'json' && contentTypeHeader.indexOf('json') !== -1) {\n                  return xhr.response;\n                }\n                if (xhr.response && _typeof$2(xhr.response) === 'object') {\n                  return xhr.response;\n                }\n                if (xhr.response && typeof xhr.response === 'string') {\n                  return JSON.parse(xhr.response);\n                }\n                if (xhr.responseText) {\n                  return JSON.parse(xhr.responseText);\n                }\n                return null;\n              }\n              function loadAsset(path, fullPath, callback, errorCallback) {\n                var response;\n                var xhr = new XMLHttpRequest();\n                // set responseType after calling open or IE will break.\n                try {\n                  // This crashes on Android WebView prior to KitKat\n                  xhr.responseType = 'json';\n                } catch (err) {} // eslint-disable-line no-empty\n                xhr.onreadystatechange = function () {\n                  if (xhr.readyState === 4) {\n                    if (xhr.status === 200) {\n                      response = formatResponse(xhr);\n                      callback(response);\n                    } else {\n                      try {\n                        response = formatResponse(xhr);\n                        callback(response);\n                      } catch (err) {\n                        if (errorCallback) {\n                          errorCallback(err);\n                        }\n                      }\n                    }\n                  }\n                };\n                try {\n                  // Hack to workaround banner validation\n                  xhr.open(['G', 'E', 'T'].join(''), path, true);\n                } catch (error) {\n                  // Hack to workaround banner validation\n                  xhr.open(['G', 'E', 'T'].join(''), fullPath + '/' + path, true);\n                }\n                xhr.send();\n              }\n              return {\n                load: loadAsset\n              };\n            }();\n          }\n          if (e.data.type === 'loadAnimation') {\n            _workerSelf.assetLoader.load(e.data.path, e.data.fullPath, function (data) {\n              _workerSelf.dataManager.completeData(data);\n              _workerSelf.postMessage({\n                id: e.data.id,\n                payload: data,\n                status: 'success'\n              });\n            }, function () {\n              _workerSelf.postMessage({\n                id: e.data.id,\n                status: 'error'\n              });\n            });\n          } else if (e.data.type === 'complete') {\n            var animation = e.data.animation;\n            _workerSelf.dataManager.completeData(animation);\n            _workerSelf.postMessage({\n              id: e.data.id,\n              payload: animation,\n              status: 'success'\n            });\n          } else if (e.data.type === 'loadData') {\n            _workerSelf.assetLoader.load(e.data.path, e.data.fullPath, function (data) {\n              _workerSelf.postMessage({\n                id: e.data.id,\n                payload: data,\n                status: 'success'\n              });\n            }, function () {\n              _workerSelf.postMessage({\n                id: e.data.id,\n                status: 'error'\n              });\n            });\n          }\n        });\n        workerInstance.onmessage = function (event) {\n          var data = event.data;\n          var id = data.id;\n          var process = processes[id];\n          processes[id] = null;\n          if (data.status === 'success') {\n            process.onComplete(data.payload);\n          } else if (process.onError) {\n            process.onError();\n          }\n        };\n      }\n    }\n    function createProcess(onComplete, onError) {\n      _counterId += 1;\n      var id = 'processId_' + _counterId;\n      processes[id] = {\n        onComplete: onComplete,\n        onError: onError\n      };\n      return id;\n    }\n    function loadAnimation(path, onComplete, onError) {\n      setupWorker();\n      var processId = createProcess(onComplete, onError);\n      workerInstance.postMessage({\n        type: 'loadAnimation',\n        path: path,\n        fullPath: window.location.origin + window.location.pathname,\n        id: processId\n      });\n    }\n    function loadData(path, onComplete, onError) {\n      setupWorker();\n      var processId = createProcess(onComplete, onError);\n      workerInstance.postMessage({\n        type: 'loadData',\n        path: path,\n        fullPath: window.location.origin + window.location.pathname,\n        id: processId\n      });\n    }\n    function completeAnimation(anim, onComplete, onError) {\n      setupWorker();\n      var processId = createProcess(onComplete, onError);\n      workerInstance.postMessage({\n        type: 'complete',\n        animation: anim,\n        id: processId\n      });\n    }\n    return {\n      loadAnimation: loadAnimation,\n      loadData: loadData,\n      completeAnimation: completeAnimation\n    };\n  }();\n\n  var ImagePreloader = function () {\n    var proxyImage = function () {\n      var canvas = createTag('canvas');\n      canvas.width = 1;\n      canvas.height = 1;\n      var ctx = canvas.getContext('2d');\n      ctx.fillStyle = 'rgba(0,0,0,0)';\n      ctx.fillRect(0, 0, 1, 1);\n      return canvas;\n    }();\n    function imageLoaded() {\n      this.loadedAssets += 1;\n      if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {\n        if (this.imagesLoadedCb) {\n          this.imagesLoadedCb(null);\n        }\n      }\n    }\n    function footageLoaded() {\n      this.loadedFootagesCount += 1;\n      if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {\n        if (this.imagesLoadedCb) {\n          this.imagesLoadedCb(null);\n        }\n      }\n    }\n    function getAssetsPath(assetData, assetsPath, originalPath) {\n      var path = '';\n      if (assetData.e) {\n        path = assetData.p;\n      } else if (assetsPath) {\n        var imagePath = assetData.p;\n        if (imagePath.indexOf('images/') !== -1) {\n          imagePath = imagePath.split('/')[1];\n        }\n        path = assetsPath + imagePath;\n      } else {\n        path = originalPath;\n        path += assetData.u ? assetData.u : '';\n        path += assetData.p;\n      }\n      return path;\n    }\n    function testImageLoaded(img) {\n      var _count = 0;\n      var intervalId = setInterval(function () {\n        var box = img.getBBox();\n        if (box.width || _count > 500) {\n          this._imageLoaded();\n          clearInterval(intervalId);\n        }\n        _count += 1;\n      }.bind(this), 50);\n    }\n    function createImageData(assetData) {\n      var path = getAssetsPath(assetData, this.assetsPath, this.path);\n      var img = createNS('image');\n      if (isSafari) {\n        this.testImageLoaded(img);\n      } else {\n        img.addEventListener('load', this._imageLoaded, false);\n      }\n      img.addEventListener('error', function () {\n        ob.img = proxyImage;\n        this._imageLoaded();\n      }.bind(this), false);\n      img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);\n      if (this._elementHelper.append) {\n        this._elementHelper.append(img);\n      } else {\n        this._elementHelper.appendChild(img);\n      }\n      var ob = {\n        img: img,\n        assetData: assetData\n      };\n      return ob;\n    }\n    function createImgData(assetData) {\n      var path = getAssetsPath(assetData, this.assetsPath, this.path);\n      var img = createTag('img');\n      img.crossOrigin = 'anonymous';\n      img.addEventListener('load', this._imageLoaded, false);\n      img.addEventListener('error', function () {\n        ob.img = proxyImage;\n        this._imageLoaded();\n      }.bind(this), false);\n      img.src = path;\n      var ob = {\n        img: img,\n        assetData: assetData\n      };\n      return ob;\n    }\n    function createFootageData(data) {\n      var ob = {\n        assetData: data\n      };\n      var path = getAssetsPath(data, this.assetsPath, this.path);\n      dataManager.loadData(path, function (footageData) {\n        ob.img = footageData;\n        this._footageLoaded();\n      }.bind(this), function () {\n        ob.img = {};\n        this._footageLoaded();\n      }.bind(this));\n      return ob;\n    }\n    function loadAssets(assets, cb) {\n      this.imagesLoadedCb = cb;\n      var i;\n      var len = assets.length;\n      for (i = 0; i < len; i += 1) {\n        if (!assets[i].layers) {\n          if (!assets[i].t || assets[i].t === 'seq') {\n            this.totalImages += 1;\n            this.images.push(this._createImageData(assets[i]));\n          } else if (assets[i].t === 3) {\n            this.totalFootages += 1;\n            this.images.push(this.createFootageData(assets[i]));\n          }\n        }\n      }\n    }\n    function setPath(path) {\n      this.path = path || '';\n    }\n    function setAssetsPath(path) {\n      this.assetsPath = path || '';\n    }\n    function getAsset(assetData) {\n      var i = 0;\n      var len = this.images.length;\n      while (i < len) {\n        if (this.images[i].assetData === assetData) {\n          return this.images[i].img;\n        }\n        i += 1;\n      }\n      return null;\n    }\n    function destroy() {\n      this.imagesLoadedCb = null;\n      this.images.length = 0;\n    }\n    function loadedImages() {\n      return this.totalImages === this.loadedAssets;\n    }\n    function loadedFootages() {\n      return this.totalFootages === this.loadedFootagesCount;\n    }\n    function setCacheType(type, elementHelper) {\n      if (type === 'svg') {\n        this._elementHelper = elementHelper;\n        this._createImageData = this.createImageData.bind(this);\n      } else {\n        this._createImageData = this.createImgData.bind(this);\n      }\n    }\n    function ImagePreloaderFactory() {\n      this._imageLoaded = imageLoaded.bind(this);\n      this._footageLoaded = footageLoaded.bind(this);\n      this.testImageLoaded = testImageLoaded.bind(this);\n      this.createFootageData = createFootageData.bind(this);\n      this.assetsPath = '';\n      this.path = '';\n      this.totalImages = 0;\n      this.totalFootages = 0;\n      this.loadedAssets = 0;\n      this.loadedFootagesCount = 0;\n      this.imagesLoadedCb = null;\n      this.images = [];\n    }\n    ImagePreloaderFactory.prototype = {\n      loadAssets: loadAssets,\n      setAssetsPath: setAssetsPath,\n      setPath: setPath,\n      loadedImages: loadedImages,\n      loadedFootages: loadedFootages,\n      destroy: destroy,\n      getAsset: getAsset,\n      createImgData: createImgData,\n      createImageData: createImageData,\n      imageLoaded: imageLoaded,\n      footageLoaded: footageLoaded,\n      setCacheType: setCacheType\n    };\n    return ImagePreloaderFactory;\n  }();\n\n  function BaseEvent() {}\n  BaseEvent.prototype = {\n    triggerEvent: function triggerEvent(eventName, args) {\n      if (this._cbs[eventName]) {\n        var callbacks = this._cbs[eventName];\n        for (var i = 0; i < callbacks.length; i += 1) {\n          callbacks[i](args);\n        }\n      }\n    },\n    addEventListener: function addEventListener(eventName, callback) {\n      if (!this._cbs[eventName]) {\n        this._cbs[eventName] = [];\n      }\n      this._cbs[eventName].push(callback);\n      return function () {\n        this.removeEventListener(eventName, callback);\n      }.bind(this);\n    },\n    removeEventListener: function removeEventListener(eventName, callback) {\n      if (!callback) {\n        this._cbs[eventName] = null;\n      } else if (this._cbs[eventName]) {\n        var i = 0;\n        var len = this._cbs[eventName].length;\n        while (i < len) {\n          if (this._cbs[eventName][i] === callback) {\n            this._cbs[eventName].splice(i, 1);\n            i -= 1;\n            len -= 1;\n          }\n          i += 1;\n        }\n        if (!this._cbs[eventName].length) {\n          this._cbs[eventName] = null;\n        }\n      }\n    }\n  };\n\n  var markerParser = function () {\n    function parsePayloadLines(payload) {\n      var lines = payload.split('\\r\\n');\n      var keys = {};\n      var line;\n      var keysCount = 0;\n      for (var i = 0; i < lines.length; i += 1) {\n        line = lines[i].split(':');\n        if (line.length === 2) {\n          keys[line[0]] = line[1].trim();\n          keysCount += 1;\n        }\n      }\n      if (keysCount === 0) {\n        throw new Error();\n      }\n      return keys;\n    }\n    return function (_markers) {\n      var markers = [];\n      for (var i = 0; i < _markers.length; i += 1) {\n        var _marker = _markers[i];\n        var markerData = {\n          time: _marker.tm,\n          duration: _marker.dr\n        };\n        try {\n          markerData.payload = JSON.parse(_markers[i].cm);\n        } catch (_) {\n          try {\n            markerData.payload = parsePayloadLines(_markers[i].cm);\n          } catch (__) {\n            markerData.payload = {\n              name: _markers[i].cm\n            };\n          }\n        }\n        markers.push(markerData);\n      }\n      return markers;\n    };\n  }();\n\n  var ProjectInterface = function () {\n    function registerComposition(comp) {\n      this.compositions.push(comp);\n    }\n    return function () {\n      function _thisProjectFunction(name) {\n        var i = 0;\n        var len = this.compositions.length;\n        while (i < len) {\n          if (this.compositions[i].data && this.compositions[i].data.nm === name) {\n            if (this.compositions[i].prepareFrame && this.compositions[i].data.xt) {\n              this.compositions[i].prepareFrame(this.currentFrame);\n            }\n            return this.compositions[i].compInterface;\n          }\n          i += 1;\n        }\n        return null;\n      }\n      _thisProjectFunction.compositions = [];\n      _thisProjectFunction.currentFrame = 0;\n      _thisProjectFunction.registerComposition = registerComposition;\n      return _thisProjectFunction;\n    };\n  }();\n\n  var renderers = {};\n  var registerRenderer = function registerRenderer(key, value) {\n    renderers[key] = value;\n  };\n  function getRenderer(key) {\n    return renderers[key];\n  }\n  function getRegisteredRenderer() {\n    // Returns canvas by default for compatibility\n    if (renderers.canvas) {\n      return 'canvas';\n    }\n    // Returns any renderer that is registered\n    for (var key in renderers) {\n      if (renderers[key]) {\n        return key;\n      }\n    }\n    return '';\n  }\n\n  function _typeof$1(obj) { \"@babel/helpers - typeof\"; return _typeof$1 = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && \"function\" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }, _typeof$1(obj); }\n  var AnimationItem = function AnimationItem() {\n    this._cbs = [];\n    this.name = '';\n    this.path = '';\n    this.isLoaded = false;\n    this.currentFrame = 0;\n    this.currentRawFrame = 0;\n    this.firstFrame = 0;\n    this.totalFrames = 0;\n    this.frameRate = 0;\n    this.frameMult = 0;\n    this.playSpeed = 1;\n    this.playDirection = 1;\n    this.playCount = 0;\n    this.animationData = {};\n