first commit

node_modules/lottie-web/player/js/renderers/BaseRenderer.js

@@ -0,0 +1,187 @@
+import FontManager from '../utils/FontManager';
+import slotFactory from '../utils/SlotManager';
+import FootageElement from '../elements/FootageElement';
+import AudioElement from '../elements/AudioElement';
+
+function BaseRenderer() {}
+BaseRenderer.prototype.checkLayers = function (num) {
+  var i;
+  var len = this.layers.length;
+  var data;
+  this.completeLayers = true;
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (!this.elements[i]) {
+      data = this.layers[i];
+      if (data.ip - data.st <= (num - this.layers[i].st) && data.op - data.st > (num - this.layers[i].st)) {
+        this.buildItem(i);
+      }
+    }
+    this.completeLayers = this.elements[i] ? this.completeLayers : false;
+  }
+  this.checkPendingElements();
+};
+
+BaseRenderer.prototype.createItem = function (layer) {
+  switch (layer.ty) {
+    case 2:
+      return this.createImage(layer);
+    case 0:
+      return this.createComp(layer);
+    case 1:
+      return this.createSolid(layer);
+    case 3:
+      return this.createNull(layer);
+    case 4:
+      return this.createShape(layer);
+    case 5:
+      return this.createText(layer);
+    case 6:
+      return this.createAudio(layer);
+    case 13:
+      return this.createCamera(layer);
+    case 15:
+      return this.createFootage(layer);
+    default:
+      return this.createNull(layer);
+  }
+};
+
+BaseRenderer.prototype.createCamera = function () {
+  throw new Error('You\'re using a 3d camera. Try the html renderer.');
+};
+
+BaseRenderer.prototype.createAudio = function (data) {
+  return new AudioElement(data, this.globalData, this);
+};
+
+BaseRenderer.prototype.createFootage = function (data) {
+  return new FootageElement(data, this.globalData, this);
+};
+
+BaseRenderer.prototype.buildAllItems = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    this.buildItem(i);
+  }
+  this.checkPendingElements();
+};
+
+BaseRenderer.prototype.includeLayers = function (newLayers) {
+  this.completeLayers = false;
+  var i;
+  var len = newLayers.length;
+  var j;
+  var jLen = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    j = 0;
+    while (j < jLen) {
+      if (this.layers[j].id === newLayers[i].id) {
+        this.layers[j] = newLayers[i];
+        break;
+      }
+      j += 1;
+    }
+  }
+};
+
+BaseRenderer.prototype.setProjectInterface = function (pInterface) {
+  this.globalData.projectInterface = pInterface;
+};
+
+BaseRenderer.prototype.initItems = function () {
+  if (!this.globalData.progressiveLoad) {
+    this.buildAllItems();
+  }
+};
+BaseRenderer.prototype.buildElementParenting = function (element, parentName, hierarchy) {
+  var elements = this.elements;
+  var layers = this.layers;
+  var i = 0;
+  var len = layers.length;
+  while (i < len) {
+    if (layers[i].ind == parentName) { // eslint-disable-line eqeqeq
+      if (!elements[i] || elements[i] === true) {
+        this.buildItem(i);
+        this.addPendingElement(element);
+      } else {
+        hierarchy.push(elements[i]);
+        elements[i].setAsParent();
+        if (layers[i].parent !== undefined) {
+          this.buildElementParenting(element, layers[i].parent, hierarchy);
+        } else {
+          element.setHierarchy(hierarchy);
+        }
+      }
+    }
+    i += 1;
+  }
+};
+
+BaseRenderer.prototype.addPendingElement = function (element) {
+  this.pendingElements.push(element);
+};
+
+BaseRenderer.prototype.searchExtraCompositions = function (assets) {
+  var i;
+  var len = assets.length;
+  for (i = 0; i < len; i += 1) {
+    if (assets[i].xt) {
+      var comp = this.createComp(assets[i]);
+      comp.initExpressions();
+      this.globalData.projectInterface.registerComposition(comp);
+    }
+  }
+};
+
+BaseRenderer.prototype.getElementById = function (ind) {
+  var i;
+  var len = this.elements.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i].data.ind === ind) {
+      return this.elements[i];
+    }
+  }
+  return null;
+};
+
+BaseRenderer.prototype.getElementByPath = function (path) {
+  var pathValue = path.shift();
+  var element;
+  if (typeof pathValue === 'number') {
+    element = this.elements[pathValue];
+  } else {
+    var i;
+    var len = this.elements.length;
+    for (i = 0; i < len; i += 1) {
+      if (this.elements[i].data.nm === pathValue) {
+        element = this.elements[i];
+        break;
+      }
+    }
+  }
+  if (path.length === 0) {
+    return element;
+  }
+  return element.getElementByPath(path);
+};
+
+BaseRenderer.prototype.setupGlobalData = function (animData, fontsContainer) {
+  this.globalData.fontManager = new FontManager();
+  this.globalData.slotManager = slotFactory(animData);
+  this.globalData.fontManager.addChars(animData.chars);
+  this.globalData.fontManager.addFonts(animData.fonts, fontsContainer);
+  this.globalData.getAssetData = this.animationItem.getAssetData.bind(this.animationItem);
+  this.globalData.getAssetsPath = this.animationItem.getAssetsPath.bind(this.animationItem);
+  this.globalData.imageLoader = this.animationItem.imagePreloader;
+  this.globalData.audioController = this.animationItem.audioController;
+  this.globalData.frameId = 0;
+  this.globalData.frameRate = animData.fr;
+  this.globalData.nm = animData.nm;
+  this.globalData.compSize = {
+    w: animData.w,
+    h: animData.h,
+  };
+};
+
+export default BaseRenderer;

node_modules/lottie-web/player/js/renderers/CanvasRenderer.js

@@ -0,0 +1,60 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import Matrix from '../3rd_party/transformation-matrix';
+import CanvasRendererBase from './CanvasRendererBase';
+import CVContextData from '../elements/canvasElements/CVContextData';
+import CVCompElement from '../elements/canvasElements/CVCompElement';
+
+function CanvasRenderer(animationItem, config) {
+  this.animationItem = animationItem;
+  this.renderConfig = {
+    clearCanvas: (config && config.clearCanvas !== undefined) ? config.clearCanvas : true,
+    context: (config && config.context) || null,
+    progressiveLoad: (config && config.progressiveLoad) || false,
+    preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    contentVisibility: (config && config.contentVisibility) || 'visible',
+    className: (config && config.className) || '',
+    id: (config && config.id) || '',
+    runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
+  };
+  this.renderConfig.dpr = (config && config.dpr) || 1;
+  if (this.animationItem.wrapper) {
+    this.renderConfig.dpr = (config && config.dpr) || window.devicePixelRatio || 1;
+  }
+  this.renderedFrame = -1;
+  this.globalData = {
+    frameNum: -1,
+    _mdf: false,
+    renderConfig: this.renderConfig,
+    currentGlobalAlpha: -1,
+  };
+  this.contextData = new CVContextData();
+  this.elements = [];
+  this.pendingElements = [];
+  this.transformMat = new Matrix();
+  this.completeLayers = false;
+  this.rendererType = 'canvas';
+  if (this.renderConfig.clearCanvas) {
+    this.ctxTransform = this.contextData.transform.bind(this.contextData);
+    this.ctxOpacity = this.contextData.opacity.bind(this.contextData);
+    this.ctxFillStyle = this.contextData.fillStyle.bind(this.contextData);
+    this.ctxStrokeStyle = this.contextData.strokeStyle.bind(this.contextData);
+    this.ctxLineWidth = this.contextData.lineWidth.bind(this.contextData);
+    this.ctxLineCap = this.contextData.lineCap.bind(this.contextData);
+    this.ctxLineJoin = this.contextData.lineJoin.bind(this.contextData);
+    this.ctxMiterLimit = this.contextData.miterLimit.bind(this.contextData);
+    this.ctxFill = this.contextData.fill.bind(this.contextData);
+    this.ctxFillRect = this.contextData.fillRect.bind(this.contextData);
+    this.ctxStroke = this.contextData.stroke.bind(this.contextData);
+    this.save = this.contextData.save.bind(this.contextData);
+  }
+}
+extendPrototype([CanvasRendererBase], CanvasRenderer);
+
+CanvasRenderer.prototype.createComp = function (data) {
+  return new CVCompElement(data, this.globalData, this);
+};
+
+export default CanvasRenderer;

node_modules/lottie-web/player/js/renderers/CanvasRendererBase.js

@@ -0,0 +1,317 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../utils/helpers/arrays';
+import createTag from '../utils/helpers/html_elements';
+import SVGRenderer from './SVGRenderer';
+import BaseRenderer from './BaseRenderer';
+import CVShapeElement from '../elements/canvasElements/CVShapeElement';
+import CVTextElement from '../elements/canvasElements/CVTextElement';
+import CVImageElement from '../elements/canvasElements/CVImageElement';
+import CVSolidElement from '../elements/canvasElements/CVSolidElement';
+
+function CanvasRendererBase() {
+}
+extendPrototype([BaseRenderer], CanvasRendererBase);
+
+CanvasRendererBase.prototype.createShape = function (data) {
+  return new CVShapeElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createText = function (data) {
+  return new CVTextElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createImage = function (data) {
+  return new CVImageElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createSolid = function (data) {
+  return new CVSolidElement(data, this.globalData, this);
+};
+
+CanvasRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;
+
+CanvasRendererBase.prototype.ctxTransform = function (props) {
+  if (props[0] === 1 && props[1] === 0 && props[4] === 0 && props[5] === 1 && props[12] === 0 && props[13] === 0) {
+    return;
+  }
+  this.canvasContext.transform(props[0], props[1], props[4], props[5], props[12], props[13]);
+};
+
+CanvasRendererBase.prototype.ctxOpacity = function (op) {
+  this.canvasContext.globalAlpha *= op < 0 ? 0 : op;
+};
+
+CanvasRendererBase.prototype.ctxFillStyle = function (value) {
+  this.canvasContext.fillStyle = value;
+};
+
+CanvasRendererBase.prototype.ctxStrokeStyle = function (value) {
+  this.canvasContext.strokeStyle = value;
+};
+
+CanvasRendererBase.prototype.ctxLineWidth = function (value) {
+  this.canvasContext.lineWidth = value;
+};
+
+CanvasRendererBase.prototype.ctxLineCap = function (value) {
+  this.canvasContext.lineCap = value;
+};
+
+CanvasRendererBase.prototype.ctxLineJoin = function (value) {
+  this.canvasContext.lineJoin = value;
+};
+
+CanvasRendererBase.prototype.ctxMiterLimit = function (value) {
+  this.canvasContext.miterLimit = value;
+};
+
+CanvasRendererBase.prototype.ctxFill = function (rule) {
+  this.canvasContext.fill(rule);
+};
+
+CanvasRendererBase.prototype.ctxFillRect = function (x, y, w, h) {
+  this.canvasContext.fillRect(x, y, w, h);
+};
+
+CanvasRendererBase.prototype.ctxStroke = function () {
+  this.canvasContext.stroke();
+};
+
+CanvasRendererBase.prototype.reset = function () {
+  if (!this.renderConfig.clearCanvas) {
+    this.canvasContext.restore();
+    return;
+  }
+  this.contextData.reset();
+};
+
+CanvasRendererBase.prototype.save = function () {
+  this.canvasContext.save();
+};
+
+CanvasRendererBase.prototype.restore = function (actionFlag) {
+  if (!this.renderConfig.clearCanvas) {
+    this.canvasContext.restore();
+    return;
+  }
+  if (actionFlag) {
+    this.globalData.blendMode = 'source-over';
+  }
+  this.contextData.restore(actionFlag);
+};
+
+CanvasRendererBase.prototype.configAnimation = function (animData) {
+  if (this.animationItem.wrapper) {
+    this.animationItem.container = createTag('canvas');
+    var containerStyle = this.animationItem.container.style;
+    containerStyle.width = '100%';
+    containerStyle.height = '100%';
+    var origin = '0px 0px 0px';
+    containerStyle.transformOrigin = origin;
+    containerStyle.mozTransformOrigin = origin;
+    containerStyle.webkitTransformOrigin = origin;
+    containerStyle['-webkit-transform'] = origin;
+    containerStyle.contentVisibility = this.renderConfig.contentVisibility;
+    this.animationItem.wrapper.appendChild(this.animationItem.container);
+    this.canvasContext = this.animationItem.container.getContext('2d');
+    if (this.renderConfig.className) {
+      this.animationItem.container.setAttribute('class', this.renderConfig.className);
+    }
+    if (this.renderConfig.id) {
+      this.animationItem.container.setAttribute('id', this.renderConfig.id);
+    }
+  } else {
+    this.canvasContext = this.renderConfig.context;
+  }
+  this.contextData.setContext(this.canvasContext);
+  this.data = animData;
+  this.layers = animData.layers;
+  this.transformCanvas = {
+    w: animData.w,
+    h: animData.h,
+    sx: 0,
+    sy: 0,
+    tx: 0,
+    ty: 0,
+  };
+  this.setupGlobalData(animData, document.body);
+  this.globalData.canvasContext = this.canvasContext;
+  this.globalData.renderer = this;
+  this.globalData.isDashed = false;
+  this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
+  this.globalData.transformCanvas = this.transformCanvas;
+  this.elements = createSizedArray(animData.layers.length);
+
+  this.updateContainerSize();
+};
+
+CanvasRendererBase.prototype.updateContainerSize = function (width, height) {
+  this.reset();
+  var elementWidth;
+  var elementHeight;
+  if (width) {
+    elementWidth = width;
+    elementHeight = height;
+    this.canvasContext.canvas.width = elementWidth;
+    this.canvasContext.canvas.height = elementHeight;
+  } else {
+    if (this.animationItem.wrapper && this.animationItem.container) {
+      elementWidth = this.animationItem.wrapper.offsetWidth;
+      elementHeight = this.animationItem.wrapper.offsetHeight;
+    } else {
+      elementWidth = this.canvasContext.canvas.width;
+      elementHeight = this.canvasContext.canvas.height;
+    }
+    this.canvasContext.canvas.width = elementWidth * this.renderConfig.dpr;
+    this.canvasContext.canvas.height = elementHeight * this.renderConfig.dpr;
+  }
+
+  var elementRel;
+  var animationRel;
+  if (this.renderConfig.preserveAspectRatio.indexOf('meet') !== -1 || this.renderConfig.preserveAspectRatio.indexOf('slice') !== -1) {
+    var par = this.renderConfig.preserveAspectRatio.split(' ');
+    var fillType = par[1] || 'meet';
+    var pos = par[0] || 'xMidYMid';
+    var xPos = pos.substr(0, 4);
+    var yPos = pos.substr(4);
+    elementRel = elementWidth / elementHeight;
+    animationRel = this.transformCanvas.w / this.transformCanvas.h;
+    if ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice')) {
+      this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
+      this.transformCanvas.sy = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
+    } else {
+      this.transformCanvas.sx = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
+      this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
+    }
+
+    if (xPos === 'xMid' && ((animationRel < elementRel && fillType === 'meet') || (animationRel > elementRel && fillType === 'slice'))) {
+      this.transformCanvas.tx = ((elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) / 2) * this.renderConfig.dpr;
+    } else if (xPos === 'xMax' && ((animationRel < elementRel && fillType === 'meet') || (animationRel > elementRel && fillType === 'slice'))) {
+      this.transformCanvas.tx = (elementWidth - this.transformCanvas.w * (elementHeight / this.transformCanvas.h)) * this.renderConfig.dpr;
+    } else {
+      this.transformCanvas.tx = 0;
+    }
+    if (yPos === 'YMid' && ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice'))) {
+      this.transformCanvas.ty = ((elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w)) / 2) * this.renderConfig.dpr;
+    } else if (yPos === 'YMax' && ((animationRel > elementRel && fillType === 'meet') || (animationRel < elementRel && fillType === 'slice'))) {
+      this.transformCanvas.ty = ((elementHeight - this.transformCanvas.h * (elementWidth / this.transformCanvas.w))) * this.renderConfig.dpr;
+    } else {
+      this.transformCanvas.ty = 0;
+    }
+  } else if (this.renderConfig.preserveAspectRatio === 'none') {
+    this.transformCanvas.sx = elementWidth / (this.transformCanvas.w / this.renderConfig.dpr);
+    this.transformCanvas.sy = elementHeight / (this.transformCanvas.h / this.renderConfig.dpr);
+    this.transformCanvas.tx = 0;
+    this.transformCanvas.ty = 0;
+  } else {
+    this.transformCanvas.sx = this.renderConfig.dpr;
+    this.transformCanvas.sy = this.renderConfig.dpr;
+    this.transformCanvas.tx = 0;
+    this.transformCanvas.ty = 0;
+  }
+  this.transformCanvas.props = [this.transformCanvas.sx, 0, 0, 0, 0, this.transformCanvas.sy, 0, 0, 0, 0, 1, 0, this.transformCanvas.tx, this.transformCanvas.ty, 0, 1];
+  /* var i, len = this.elements.length;
+    for(i=0;i<len;i+=1){
+        if(this.elements[i] && this.elements[i].data.ty === 0){
+            this.elements[i].resize(this.globalData.transformCanvas);
+        }
+    } */
+  this.ctxTransform(this.transformCanvas.props);
+  this.canvasContext.beginPath();
+  this.canvasContext.rect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
+  this.canvasContext.closePath();
+  this.canvasContext.clip();
+
+  this.renderFrame(this.renderedFrame, true);
+};
+
+CanvasRendererBase.prototype.destroy = function () {
+  if (this.renderConfig.clearCanvas && this.animationItem.wrapper) {
+    this.animationItem.wrapper.innerText = '';
+  }
+  var i;
+  var len = this.layers ? this.layers.length : 0;
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.elements[i] && this.elements[i].destroy) {
+      this.elements[i].destroy();
+    }
+  }
+  this.elements.length = 0;
+  this.globalData.canvasContext = null;
+  this.animationItem.container = null;
+  this.destroyed = true;
+};
+
+CanvasRendererBase.prototype.renderFrame = function (num, forceRender) {
+  if ((this.renderedFrame === num && this.renderConfig.clearCanvas === true && !forceRender) || this.destroyed || num === -1) {
+    return;
+  }
+  this.renderedFrame = num;
+  this.globalData.frameNum = num - this.animationItem._isFirstFrame;
+  this.globalData.frameId += 1;
+  this.globalData._mdf = !this.renderConfig.clearCanvas || forceRender;
+  this.globalData.projectInterface.currentFrame = num;
+
+  // console.log('--------');
+  // console.log('NEW: ',num);
+  var i;
+  var len = this.layers.length;
+  if (!this.completeLayers) {
+    this.checkLayers(num);
+  }
+
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].prepareFrame(num - this.layers[i].st);
+    }
+  }
+  if (this.globalData._mdf) {
+    if (this.renderConfig.clearCanvas === true) {
+      this.canvasContext.clearRect(0, 0, this.transformCanvas.w, this.transformCanvas.h);
+    } else {
+      this.save();
+    }
+    for (i = len - 1; i >= 0; i -= 1) {
+      if (this.completeLayers || this.elements[i]) {
+        this.elements[i].renderFrame();
+      }
+    }
+    if (this.renderConfig.clearCanvas !== true) {
+      this.restore();
+    }
+  }
+};
+
+CanvasRendererBase.prototype.buildItem = function (pos) {
+  var elements = this.elements;
+  if (elements[pos] || this.layers[pos].ty === 99) {
+    return;
+  }
+  var element = this.createItem(this.layers[pos], this, this.globalData);
+  elements[pos] = element;
+  element.initExpressions();
+  /* if(this.layers[pos].ty === 0){
+        element.resize(this.globalData.transformCanvas);
+    } */
+};
+
+CanvasRendererBase.prototype.checkPendingElements = function () {
+  while (this.pendingElements.length) {
+    var element = this.pendingElements.pop();
+    element.checkParenting();
+  }
+};
+
+CanvasRendererBase.prototype.hide = function () {
+  this.animationItem.container.style.display = 'none';
+};
+
+CanvasRendererBase.prototype.show = function () {
+  this.animationItem.container.style.display = 'block';
+};
+
+export default CanvasRendererBase;

node_modules/lottie-web/player/js/renderers/CanvasRendererWorkerOverride.js

@@ -0,0 +1,54 @@
+import {
+  createSizedArray,
+} from '../utils/helpers/arrays';
+import CanvasRenderer from './CanvasRenderer';
+import createTag from '../utils/helpers/html_elements';
+
+CanvasRenderer.prototype.configAnimation = function (animData) {
+  if (this.animationItem.wrapper) {
+    this.animationItem.container = createTag('canvas');
+    var containerStyle = this.animationItem.container.style;
+    containerStyle.width = '100%';
+    containerStyle.height = '100%';
+    var origin = '0px 0px 0px';
+    containerStyle.transformOrigin = origin;
+    containerStyle.mozTransformOrigin = origin;
+    containerStyle.webkitTransformOrigin = origin;
+    containerStyle['-webkit-transform'] = origin;
+    this.animationItem.wrapper.appendChild(this.animationItem.container);
+    this.canvasContext = this.animationItem.container.getContext('2d');
+    if (this.renderConfig.className) {
+      this.animationItem.container.setAttribute('class', this.renderConfig.className);
+    }
+  } else {
+    this.canvasContext = this.renderConfig.context;
+  }
+  this.data = animData;
+  this.layers = animData.layers;
+  this.transformCanvas = {
+    w: animData.w,
+    h: animData.h,
+    sx: 0,
+    sy: 0,
+    tx: 0,
+    ty: 0,
+  };
+  this.globalData.frameId = 0;
+  this.globalData.frameRate = animData.fr;
+  this.globalData.nm = animData.nm;
+  this.globalData.compSize = {
+    w: animData.w,
+    h: animData.h,
+  };
+  this.globalData.canvasContext = this.canvasContext;
+  this.globalData.renderer = this;
+  this.globalData.isDashed = false;
+  this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
+  this.globalData.transformCanvas = this.transformCanvas;
+  this.elements = createSizedArray(animData.layers.length);
+
+  this.updateContainerSize();
+};
+
+// TODO: review export
+export default CanvasRenderer;

node_modules/lottie-web/player/js/renderers/HybridRenderer.js

@@ -0,0 +1,47 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import HybridRendererBase from './HybridRendererBase';
+import HCompElement from '../elements/htmlElements/HCompElement';
+import SVGCompElement from '../elements/svgElements/SVGCompElement';
+
+function HybridRenderer(animationItem, config) {
+  this.animationItem = animationItem;
+  this.layers = null;
+  this.renderedFrame = -1;
+  this.renderConfig = {
+    className: (config && config.className) || '',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    hideOnTransparent: !(config && config.hideOnTransparent === false),
+    filterSize: {
+      width: (config && config.filterSize && config.filterSize.width) || '400%',
+      height: (config && config.filterSize && config.filterSize.height) || '400%',
+      x: (config && config.filterSize && config.filterSize.x) || '-100%',
+      y: (config && config.filterSize && config.filterSize.y) || '-100%',
+    },
+    runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
+  };
+  this.globalData = {
+    _mdf: false,
+    frameNum: -1,
+    renderConfig: this.renderConfig,
+  };
+  this.pendingElements = [];
+  this.elements = [];
+  this.threeDElements = [];
+  this.destroyed = false;
+  this.camera = null;
+  this.supports3d = true;
+  this.rendererType = 'html';
+}
+
+extendPrototype([HybridRendererBase], HybridRenderer);
+
+HybridRenderer.prototype.createComp = function (data) {
+  if (!this.supports3d) {
+    return new SVGCompElement(data, this.globalData, this);
+  }
+  return new HCompElement(data, this.globalData, this);
+};
+
+export default HybridRenderer;

node_modules/lottie-web/player/js/renderers/HybridRendererBase.js

@@ -0,0 +1,344 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import createNS from '../utils/helpers/svg_elements';
+import createTag from '../utils/helpers/html_elements';
+import SVGRenderer from './SVGRenderer';
+import HSolidElement from '../elements/htmlElements/HSolidElement';
+import {
+  styleDiv,
+} from '../utils/common';
+import BaseRenderer from './BaseRenderer';
+import IImageElement from '../elements/ImageElement';
+import SVGShapeElement from '../elements/svgElements/SVGShapeElement';
+import HShapeElement from '../elements/htmlElements/HShapeElement';
+import HTextElement from '../elements/htmlElements/HTextElement';
+import HCameraElement from '../elements/htmlElements/HCameraElement';
+import HImageElement from '../elements/htmlElements/HImageElement';
+import ISolidElement from '../elements/SolidElement';
+import SVGTextLottieElement from '../elements/svgElements/SVGTextElement';
+
+function HybridRendererBase(animationItem, config) {
+  this.animationItem = animationItem;
+  this.layers = null;
+  this.renderedFrame = -1;
+  this.renderConfig = {
+    className: (config && config.className) || '',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    hideOnTransparent: !(config && config.hideOnTransparent === false),
+    filterSize: {
+      width: (config && config.filterSize && config.filterSize.width) || '400%',
+      height: (config && config.filterSize && config.filterSize.height) || '400%',
+      x: (config && config.filterSize && config.filterSize.x) || '-100%',
+      y: (config && config.filterSize && config.filterSize.y) || '-100%',
+    },
+  };
+  this.globalData = {
+    _mdf: false,
+    frameNum: -1,
+    renderConfig: this.renderConfig,
+  };
+  this.pendingElements = [];
+  this.elements = [];
+  this.threeDElements = [];
+  this.destroyed = false;
+  this.camera = null;
+  this.supports3d = true;
+  this.rendererType = 'html';
+}
+
+extendPrototype([BaseRenderer], HybridRendererBase);
+
+HybridRendererBase.prototype.buildItem = SVGRenderer.prototype.buildItem;
+
+HybridRendererBase.prototype.checkPendingElements = function () {
+  while (this.pendingElements.length) {
+    var element = this.pendingElements.pop();
+    element.checkParenting();
+  }
+};
+
+HybridRendererBase.prototype.appendElementInPos = function (element, pos) {
+  var newDOMElement = element.getBaseElement();
+  if (!newDOMElement) {
+    return;
+  }
+  var layer = this.layers[pos];
+  if (!layer.ddd || !this.supports3d) {
+    if (this.threeDElements) {
+      this.addTo3dContainer(newDOMElement, pos);
+    } else {
+      var i = 0;
+      var nextDOMElement;
+      var nextLayer;
+      var tmpDOMElement;
+      while (i < pos) {
+        if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement) {
+          nextLayer = this.elements[i];
+          tmpDOMElement = this.layers[i].ddd ? this.getThreeDContainerByPos(i) : nextLayer.getBaseElement();
+          nextDOMElement = tmpDOMElement || nextDOMElement;
+        }
+        i += 1;
+      }
+      if (nextDOMElement) {
+        if (!layer.ddd || !this.supports3d) {
+          this.layerElement.insertBefore(newDOMElement, nextDOMElement);
+        }
+      } else if (!layer.ddd || !this.supports3d) {
+        this.layerElement.appendChild(newDOMElement);
+      }
+    }
+  } else {
+    this.addTo3dContainer(newDOMElement, pos);
+  }
+};
+
+HybridRendererBase.prototype.createShape = function (data) {
+  if (!this.supports3d) {
+    return new SVGShapeElement(data, this.globalData, this);
+  }
+  return new HShapeElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createText = function (data) {
+  if (!this.supports3d) {
+    return new SVGTextLottieElement(data, this.globalData, this);
+  }
+  return new HTextElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createCamera = function (data) {
+  this.camera = new HCameraElement(data, this.globalData, this);
+  return this.camera;
+};
+
+HybridRendererBase.prototype.createImage = function (data) {
+  if (!this.supports3d) {
+    return new IImageElement(data, this.globalData, this);
+  }
+  return new HImageElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createSolid = function (data) {
+  if (!this.supports3d) {
+    return new ISolidElement(data, this.globalData, this);
+  }
+  return new HSolidElement(data, this.globalData, this);
+};
+
+HybridRendererBase.prototype.createNull = SVGRenderer.prototype.createNull;
+
+HybridRendererBase.prototype.getThreeDContainerByPos = function (pos) {
+  var i = 0;
+  var len = this.threeDElements.length;
+  while (i < len) {
+    if (this.threeDElements[i].startPos <= pos && this.threeDElements[i].endPos >= pos) {
+      return this.threeDElements[i].perspectiveElem;
+    }
+    i += 1;
+  }
+  return null;
+};
+
+HybridRendererBase.prototype.createThreeDContainer = function (pos, type) {
+  var perspectiveElem = createTag('div');
+  var style;
+  var containerStyle;
+  styleDiv(perspectiveElem);
+  var container = createTag('div');
+  styleDiv(container);
+  if (type === '3d') {
+    style = perspectiveElem.style;
+    style.width = this.globalData.compSize.w + 'px';
+    style.height = this.globalData.compSize.h + 'px';
+    var center = '50% 50%';
+    style.webkitTransformOrigin = center;
+    style.mozTransformOrigin = center;
+    style.transformOrigin = center;
+    containerStyle = container.style;
+    var matrix = 'matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)';
+    containerStyle.transform = matrix;
+    containerStyle.webkitTransform = matrix;
+  }
+
+  perspectiveElem.appendChild(container);
+  // this.resizerElem.appendChild(perspectiveElem);
+  var threeDContainerData = {
+    container: container,
+    perspectiveElem: perspectiveElem,
+    startPos: pos,
+    endPos: pos,
+    type: type,
+  };
+  this.threeDElements.push(threeDContainerData);
+  return threeDContainerData;
+};
+
+HybridRendererBase.prototype.build3dContainers = function () {
+  var i;
+  var len = this.layers.length;
+  var lastThreeDContainerData;
+  var currentContainer = '';
+  for (i = 0; i < len; i += 1) {
+    if (this.layers[i].ddd && this.layers[i].ty !== 3) {
+      if (currentContainer !== '3d') {
+        currentContainer = '3d';
+        lastThreeDContainerData = this.createThreeDContainer(i, '3d');
+      }
+      lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
+    } else {
+      if (currentContainer !== '2d') {
+        currentContainer = '2d';
+        lastThreeDContainerData = this.createThreeDContainer(i, '2d');
+      }
+      lastThreeDContainerData.endPos = Math.max(lastThreeDContainerData.endPos, i);
+    }
+  }
+  len = this.threeDElements.length;
+  for (i = len - 1; i >= 0; i -= 1) {
+    this.resizerElem.appendChild(this.threeDElements[i].perspectiveElem);
+  }
+};
+
+HybridRendererBase.prototype.addTo3dContainer = function (elem, pos) {
+  var i = 0;
+  var len = this.threeDElements.length;
+  while (i < len) {
+    if (pos <= this.threeDElements[i].endPos) {
+      var j = this.threeDElements[i].startPos;
+      var nextElement;
+      while (j < pos) {
+        if (this.elements[j] && this.elements[j].getBaseElement) {
+          nextElement = this.elements[j].getBaseElement();
+        }
+        j += 1;
+      }
+      if (nextElement) {
+        this.threeDElements[i].container.insertBefore(elem, nextElement);
+      } else {
+        this.threeDElements[i].container.appendChild(elem);
+      }
+      break;
+    }
+    i += 1;
+  }
+};
+
+HybridRendererBase.prototype.configAnimation = function (animData) {
+  var resizerElem = createTag('div');
+  var wrapper = this.animationItem.wrapper;
+  var style = resizerElem.style;
+  style.width = animData.w + 'px';
+  style.height = animData.h + 'px';
+  this.resizerElem = resizerElem;
+  styleDiv(resizerElem);
+  style.transformStyle = 'flat';
+  style.mozTransformStyle = 'flat';
+  style.webkitTransformStyle = 'flat';
+  if (this.renderConfig.className) {
+    resizerElem.setAttribute('class', this.renderConfig.className);
+  }
+  wrapper.appendChild(resizerElem);
+
+  style.overflow = 'hidden';
+  var svg = createNS('svg');
+  svg.setAttribute('width', '1');
+  svg.setAttribute('height', '1');
+  styleDiv(svg);
+  this.resizerElem.appendChild(svg);
+  var defs = createNS('defs');
+  svg.appendChild(defs);
+  this.data = animData;
+  // Mask animation
+  this.setupGlobalData(animData, svg);
+  this.globalData.defs = defs;
+  this.layers = animData.layers;
+  this.layerElement = this.resizerElem;
+  this.build3dContainers();
+  this.updateContainerSize();
+};
+
+HybridRendererBase.prototype.destroy = function () {
+  if (this.animationItem.wrapper) {
+    this.animationItem.wrapper.innerText = '';
+  }
+  this.animationItem.container = null;
+  this.globalData.defs = null;
+  var i;
+  var len = this.layers ? this.layers.length : 0;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i] && this.elements[i].destroy) {
+      this.elements[i].destroy();
+    }
+  }
+  this.elements.length = 0;
+  this.destroyed = true;
+  this.animationItem = null;
+};
+
+HybridRendererBase.prototype.updateContainerSize = function () {
+  var elementWidth = this.animationItem.wrapper.offsetWidth;
+  var elementHeight = this.animationItem.wrapper.offsetHeight;
+  var elementRel = elementWidth / elementHeight;
+  var animationRel = this.globalData.compSize.w / this.globalData.compSize.h;
+  var sx;
+  var sy;
+  var tx;
+  var ty;
+  if (animationRel > elementRel) {
+    sx = elementWidth / (this.globalData.compSize.w);
+    sy = elementWidth / (this.globalData.compSize.w);
+    tx = 0;
+    ty = ((elementHeight - this.globalData.compSize.h * (elementWidth / this.globalData.compSize.w)) / 2);
+  } else {
+    sx = elementHeight / (this.globalData.compSize.h);
+    sy = elementHeight / (this.globalData.compSize.h);
+    tx = (elementWidth - this.globalData.compSize.w * (elementHeight / this.globalData.compSize.h)) / 2;
+    ty = 0;
+  }
+  var style = this.resizerElem.style;
+  style.webkitTransform = 'matrix3d(' + sx + ',0,0,0,0,' + sy + ',0,0,0,0,1,0,' + tx + ',' + ty + ',0,1)';
+  style.transform = style.webkitTransform;
+};
+
+HybridRendererBase.prototype.renderFrame = SVGRenderer.prototype.renderFrame;
+
+HybridRendererBase.prototype.hide = function () {
+  this.resizerElem.style.display = 'none';
+};
+
+HybridRendererBase.prototype.show = function () {
+  this.resizerElem.style.display = 'block';
+};
+
+HybridRendererBase.prototype.initItems = function () {
+  this.buildAllItems();
+  if (this.camera) {
+    this.camera.setup();
+  } else {
+    var cWidth = this.globalData.compSize.w;
+    var cHeight = this.globalData.compSize.h;
+    var i;
+    var len = this.threeDElements.length;
+    for (i = 0; i < len; i += 1) {
+      var style = this.threeDElements[i].perspectiveElem.style;
+      style.webkitPerspective = Math.sqrt(Math.pow(cWidth, 2) + Math.pow(cHeight, 2)) + 'px';
+      style.perspective = style.webkitPerspective;
+    }
+  }
+};
+
+HybridRendererBase.prototype.searchExtraCompositions = function (assets) {
+  var i;
+  var len = assets.length;
+  var floatingContainer = createTag('div');
+  for (i = 0; i < len; i += 1) {
+    if (assets[i].xt) {
+      var comp = this.createComp(assets[i], floatingContainer, this.globalData.comp, null);
+      comp.initExpressions();
+      this.globalData.projectInterface.registerComposition(comp);
+    }
+  }
+};
+
+export default HybridRendererBase;

node_modules/lottie-web/player/js/renderers/SVGRenderer.js

@@ -0,0 +1,82 @@
+import {
+  createElementID,
+} from '../utils/common';
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import createNS from '../utils/helpers/svg_elements';
+
+import SVGCompElement from '../elements/svgElements/SVGCompElement';
+import SVGRendererBase from './SVGRendererBase';
+
+function SVGRenderer(animationItem, config) {
+  this.animationItem = animationItem;
+  this.layers = null;
+  this.renderedFrame = -1;
+  this.svgElement = createNS('svg');
+  var ariaLabel = '';
+  if (config && config.title) {
+    var titleElement = createNS('title');
+    var titleId = createElementID();
+    titleElement.setAttribute('id', titleId);
+    titleElement.textContent = config.title;
+    this.svgElement.appendChild(titleElement);
+    ariaLabel += titleId;
+  }
+  if (config && config.description) {
+    var descElement = createNS('desc');
+    var descId = createElementID();
+    descElement.setAttribute('id', descId);
+    descElement.textContent = config.description;
+    this.svgElement.appendChild(descElement);
+    ariaLabel += ' ' + descId;
+  }
+  if (ariaLabel) {
+    this.svgElement.setAttribute('aria-labelledby', ariaLabel);
+  }
+  var defs = createNS('defs');
+  this.svgElement.appendChild(defs);
+  var maskElement = createNS('g');
+  this.svgElement.appendChild(maskElement);
+  this.layerElement = maskElement;
+  this.renderConfig = {
+    preserveAspectRatio: (config && config.preserveAspectRatio) || 'xMidYMid meet',
+    imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
+    contentVisibility: (config && config.contentVisibility) || 'visible',
+    progressiveLoad: (config && config.progressiveLoad) || false,
+    hideOnTransparent: !((config && config.hideOnTransparent === false)),
+    viewBoxOnly: (config && config.viewBoxOnly) || false,
+    viewBoxSize: (config && config.viewBoxSize) || false,
+    className: (config && config.className) || '',
+    id: (config && config.id) || '',
+    focusable: config && config.focusable,
+    filterSize: {
+      width: (config && config.filterSize && config.filterSize.width) || '100%',
+      height: (config && config.filterSize && config.filterSize.height) || '100%',
+      x: (config && config.filterSize && config.filterSize.x) || '0%',
+      y: (config && config.filterSize && config.filterSize.y) || '0%',
+    },
+    width: (config && config.width),
+    height: (config && config.height),
+    runExpressions: !config || config.runExpressions === undefined || config.runExpressions,
+  };
+
+  this.globalData = {
+    _mdf: false,
+    frameNum: -1,
+    defs: defs,
+    renderConfig: this.renderConfig,
+  };
+  this.elements = [];
+  this.pendingElements = [];
+  this.destroyed = false;
+  this.rendererType = 'svg';
+}
+
+extendPrototype([SVGRendererBase], SVGRenderer);
+
+SVGRenderer.prototype.createComp = function (data) {
+  return new SVGCompElement(data, this.globalData, this);
+};
+
+export default SVGRenderer;

node_modules/lottie-web/player/js/renderers/SVGRendererBase.js

@@ -0,0 +1,255 @@
+import { getLocationHref } from '../main';
+import {
+  createElementID,
+  getExpressionsPlugin,
+} from '../utils/common';
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import {
+  createSizedArray,
+} from '../utils/helpers/arrays';
+import createNS from '../utils/helpers/svg_elements';
+import BaseRenderer from './BaseRenderer';
+import IImageElement from '../elements/ImageElement';
+import SVGShapeElement from '../elements/svgElements/SVGShapeElement';
+import SVGTextLottieElement from '../elements/svgElements/SVGTextElement'; // eslint-disable-line import/no-cycle
+import ISolidElement from '../elements/SolidElement';
+import NullElement from '../elements/NullElement';
+
+function SVGRendererBase() {
+}
+
+extendPrototype([BaseRenderer], SVGRendererBase);
+
+SVGRendererBase.prototype.createNull = function (data) {
+  return new NullElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createShape = function (data) {
+  return new SVGShapeElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createText = function (data) {
+  return new SVGTextLottieElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createImage = function (data) {
+  return new IImageElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.createSolid = function (data) {
+  return new ISolidElement(data, this.globalData, this);
+};
+
+SVGRendererBase.prototype.configAnimation = function (animData) {
+  this.svgElement.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+  this.svgElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+  if (this.renderConfig.viewBoxSize) {
+    this.svgElement.setAttribute('viewBox', this.renderConfig.viewBoxSize);
+  } else {
+    this.svgElement.setAttribute('viewBox', '0 0 ' + animData.w + ' ' + animData.h);
+  }
+
+  if (!this.renderConfig.viewBoxOnly) {
+    this.svgElement.setAttribute('width', animData.w);
+    this.svgElement.setAttribute('height', animData.h);
+    this.svgElement.style.width = '100%';
+    this.svgElement.style.height = '100%';
+    this.svgElement.style.transform = 'translate3d(0,0,0)';
+    this.svgElement.style.contentVisibility = this.renderConfig.contentVisibility;
+  }
+  if (this.renderConfig.width) {
+    this.svgElement.setAttribute('width', this.renderConfig.width);
+  }
+  if (this.renderConfig.height) {
+    this.svgElement.setAttribute('height', this.renderConfig.height);
+  }
+  if (this.renderConfig.className) {
+    this.svgElement.setAttribute('class', this.renderConfig.className);
+  }
+  if (this.renderConfig.id) {
+    this.svgElement.setAttribute('id', this.renderConfig.id);
+  }
+  if (this.renderConfig.focusable !== undefined) {
+    this.svgElement.setAttribute('focusable', this.renderConfig.focusable);
+  }
+  this.svgElement.setAttribute('preserveAspectRatio', this.renderConfig.preserveAspectRatio);
+  // this.layerElement.style.transform = 'translate3d(0,0,0)';
+  // this.layerElement.style.transformOrigin = this.layerElement.style.mozTransformOrigin = this.layerElement.style.webkitTransformOrigin = this.layerElement.style['-webkit-transform'] = "0px 0px 0px";
+  this.animationItem.wrapper.appendChild(this.svgElement);
+  // Mask animation
+  var defs = this.globalData.defs;
+
+  this.setupGlobalData(animData, defs);
+  this.globalData.progressiveLoad = this.renderConfig.progressiveLoad;
+  this.data = animData;
+
+  var maskElement = createNS('clipPath');
+  var rect = createNS('rect');
+  rect.setAttribute('width', animData.w);
+  rect.setAttribute('height', animData.h);
+  rect.setAttribute('x', 0);
+  rect.setAttribute('y', 0);
+  var maskId = createElementID();
+  maskElement.setAttribute('id', maskId);
+  maskElement.appendChild(rect);
+  this.layerElement.setAttribute('clip-path', 'url(' + getLocationHref() + '#' + maskId + ')');
+
+  defs.appendChild(maskElement);
+  this.layers = animData.layers;
+  this.elements = createSizedArray(animData.layers.length);
+};
+
+SVGRendererBase.prototype.destroy = function () {
+  if (this.animationItem.wrapper) {
+    this.animationItem.wrapper.innerText = '';
+  }
+  this.layerElement = null;
+  this.globalData.defs = null;
+  var i;
+  var len = this.layers ? this.layers.length : 0;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i] && this.elements[i].destroy) {
+      this.elements[i].destroy();
+    }
+  }
+  this.elements.length = 0;
+  this.destroyed = true;
+  this.animationItem = null;
+};
+
+SVGRendererBase.prototype.updateContainerSize = function () {
+};
+
+SVGRendererBase.prototype.findIndexByInd = function (ind) {
+  var i = 0;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.layers[i].ind === ind) {
+      return i;
+    }
+  }
+  return -1;
+};
+
+SVGRendererBase.prototype.buildItem = function (pos) {
+  var elements = this.elements;
+  if (elements[pos] || this.layers[pos].ty === 99) {
+    return;
+  }
+  elements[pos] = true;
+  var element = this.createItem(this.layers[pos]);
+
+  elements[pos] = element;
+  if (getExpressionsPlugin()) {
+    if (this.layers[pos].ty === 0) {
+      this.globalData.projectInterface.registerComposition(element);
+    }
+    element.initExpressions();
+  }
+  this.appendElementInPos(element, pos);
+  if (this.layers[pos].tt) {
+    var elementIndex = ('tp' in this.layers[pos])
+      ? this.findIndexByInd(this.layers[pos].tp)
+      : pos - 1;
+    if (elementIndex === -1) {
+      return;
+    }
+    if (!this.elements[elementIndex] || this.elements[elementIndex] === true) {
+      this.buildItem(elementIndex);
+      this.addPendingElement(element);
+    } else {
+      var matteElement = elements[elementIndex];
+      var matteMask = matteElement.getMatte(this.layers[pos].tt);
+      element.setMatte(matteMask);
+    }
+  }
+};
+
+SVGRendererBase.prototype.checkPendingElements = function () {
+  while (this.pendingElements.length) {
+    var element = this.pendingElements.pop();
+    element.checkParenting();
+    if (element.data.tt) {
+      var i = 0;
+      var len = this.elements.length;
+      while (i < len) {
+        if (this.elements[i] === element) {
+          var elementIndex = 'tp' in element.data
+            ? this.findIndexByInd(element.data.tp)
+            : i - 1;
+          var matteElement = this.elements[elementIndex];
+          var matteMask = matteElement.getMatte(this.layers[i].tt);
+          element.setMatte(matteMask);
+          break;
+        }
+        i += 1;
+      }
+    }
+  }
+};
+
+SVGRendererBase.prototype.renderFrame = function (num) {
+  if (this.renderedFrame === num || this.destroyed) {
+    return;
+  }
+  if (num === null) {
+    num = this.renderedFrame;
+  } else {
+    this.renderedFrame = num;
+  }
+  // console.log('-------');
+  // console.log('FRAME ',num);
+  this.globalData.frameNum = num;
+  this.globalData.frameId += 1;
+  this.globalData.projectInterface.currentFrame = num;
+  this.globalData._mdf = false;
+  var i;
+  var len = this.layers.length;
+  if (!this.completeLayers) {
+    this.checkLayers(num);
+  }
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].prepareFrame(num - this.layers[i].st);
+    }
+  }
+  if (this.globalData._mdf) {
+    for (i = 0; i < len; i += 1) {
+      if (this.completeLayers || this.elements[i]) {
+        this.elements[i].renderFrame();
+      }
+    }
+  }
+};
+
+SVGRendererBase.prototype.appendElementInPos = function (element, pos) {
+  var newElement = element.getBaseElement();
+  if (!newElement) {
+    return;
+  }
+  var i = 0;
+  var nextElement;
+  while (i < pos) {
+    if (this.elements[i] && this.elements[i] !== true && this.elements[i].getBaseElement()) {
+      nextElement = this.elements[i].getBaseElement();
+    }
+    i += 1;
+  }
+  if (nextElement) {
+    this.layerElement.insertBefore(newElement, nextElement);
+  } else {
+    this.layerElement.appendChild(newElement);
+  }
+};
+
+SVGRendererBase.prototype.hide = function () {
+  this.layerElement.style.display = 'none';
+};
+
+SVGRendererBase.prototype.show = function () {
+  this.layerElement.style.display = 'block';
+};
+
+export default SVGRendererBase;

node_modules/lottie-web/player/js/renderers/renderersManager.js

@@ -0,0 +1,29 @@
+const renderers = {};
+
+const registerRenderer = (key, value) => {
+  renderers[key] = value;
+};
+
+function getRenderer(key) {
+  return renderers[key];
+}
+
+function getRegisteredRenderer() {
+  // Returns canvas by default for compatibility
+  if (renderers.canvas) {
+    return 'canvas';
+  }
+  // Returns any renderer that is registered
+  for (const key in renderers) {
+    if (renderers[key]) {
+      return key;
+    }
+  }
+  return '';
+}
+
+export {
+  registerRenderer,
+  getRenderer,
+  getRegisteredRenderer,
+};