@lumen5/lottie-web 5.14.0

package/player/js/modules/main.js

@@ -0,0 +1,162 @@
+import { setLocationHref, setWebWorker } from '../main';
+import animationManager from '../animation/AnimationManager';
+import {
+  setDefaultCurveSegments,
+  getDefaultCurveSegments,
+  roundValues,
+  setIdPrefix,
+  setSubframeEnabled,
+  setExpressionsPlugin,
+} from '../utils/common';
+import PropertyFactory from '../utils/PropertyFactory';
+import ShapePropertyFactory from '../utils/shapes/ShapeProperty';
+import Matrix from '../3rd_party/transformation-matrix';
+
+const lottie = {};
+var standalone = '__[STANDALONE]__';
+var animationData = '__[ANIMATIONDATA]__';
+var renderer = '';
+
+function setLocation(href) {
+  setLocationHref(href);
+}
+
+function searchAnimations() {
+  if (standalone === true) {
+    animationManager.searchAnimations(animationData, standalone, renderer);
+  } else {
+    animationManager.searchAnimations();
+  }
+}
+
+function setSubframeRendering(flag) {
+  setSubframeEnabled(flag);
+}
+
+function setPrefix(prefix) {
+  setIdPrefix(prefix);
+}
+
+function loadAnimation(params) {
+  if (standalone === true) {
+    params.animationData = JSON.parse(animationData);
+  }
+  return animationManager.loadAnimation(params);
+}
+
+function setQuality(value) {
+  if (typeof value === 'string') {
+    switch (value) {
+      case 'high':
+        setDefaultCurveSegments(200);
+        break;
+      default:
+      case 'medium':
+        setDefaultCurveSegments(50);
+        break;
+      case 'low':
+        setDefaultCurveSegments(10);
+        break;
+    }
+  } else if (!isNaN(value) && value > 1) {
+    setDefaultCurveSegments(value);
+  }
+  if (getDefaultCurveSegments() >= 50) {
+    roundValues(false);
+  } else {
+    roundValues(true);
+  }
+}
+
+function inBrowser() {
+  return typeof navigator !== 'undefined';
+}
+
+function installPlugin(type, plugin) {
+  if (type === 'expressions') {
+    setExpressionsPlugin(plugin);
+  }
+}
+
+function getFactory(name) {
+  switch (name) {
+    case 'propertyFactory':
+      return PropertyFactory;
+    case 'shapePropertyFactory':
+      return ShapePropertyFactory;
+    case 'matrix':
+      return Matrix;
+    default:
+      return null;
+  }
+}
+
+lottie.play = animationManager.play;
+lottie.pause = animationManager.pause;
+lottie.setLocationHref = setLocation;
+lottie.togglePause = animationManager.togglePause;
+lottie.setSpeed = animationManager.setSpeed;
+lottie.setDirection = animationManager.setDirection;
+lottie.stop = animationManager.stop;
+lottie.searchAnimations = searchAnimations;
+lottie.registerAnimation = animationManager.registerAnimation;
+lottie.loadAnimation = loadAnimation;
+lottie.setSubframeRendering = setSubframeRendering;
+lottie.resize = animationManager.resize;
+// lottie.start = start;
+lottie.goToAndStop = animationManager.goToAndStop;
+lottie.destroy = animationManager.destroy;
+lottie.setQuality = setQuality;
+lottie.inBrowser = inBrowser;
+lottie.installPlugin = installPlugin;
+lottie.freeze = animationManager.freeze;
+lottie.unfreeze = animationManager.unfreeze;
+lottie.setVolume = animationManager.setVolume;
+lottie.mute = animationManager.mute;
+lottie.unmute = animationManager.unmute;
+lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
+lottie.useWebWorker = setWebWorker;
+lottie.setIDPrefix = setPrefix;
+lottie.__getFactory = getFactory;
+lottie.version = '[[BM_VERSION]]';
+
+function checkReady() {
+  if (document.readyState === 'complete') {
+    clearInterval(readyStateCheckInterval);
+    searchAnimations();
+  }
+}
+
+function getQueryVariable(variable) {
+  var vars = queryString.split('&');
+  for (var i = 0; i < vars.length; i += 1) {
+    var pair = vars[i].split('=');
+    if (decodeURIComponent(pair[0]) == variable) { // eslint-disable-line eqeqeq
+      return decodeURIComponent(pair[1]);
+    }
+  }
+  return null;
+}
+var queryString = '';
+if (standalone) {
+  var scripts = document.getElementsByTagName('script');
+  var index = scripts.length - 1;
+  var myScript = scripts[index] || {
+    src: '',
+  };
+  queryString = myScript.src ? myScript.src.replace(/^[^\?]+\??/, '') : ''; // eslint-disable-line no-useless-escape
+  renderer = getQueryVariable('renderer');
+}
+var readyStateCheckInterval = setInterval(checkReady, 100);
+
+// this adds bodymovin to the window object for backwards compatibility
+try {
+  if (!(typeof exports === 'object' && typeof module !== 'undefined')
+    && !(typeof define === 'function' && define.amd) // eslint-disable-line no-undef
+  ) {
+    window.bodymovin = lottie;
+  }
+} catch (err) {
+  //
+}
+export default lottie;

package/player/js/modules/svg.js

@@ -0,0 +1,37 @@
+import lottie from './svg_light';
+import {
+  setExpressionsPlugin,
+  setExpressionInterfaces,
+} from '../utils/common';
+import Expressions from '../utils/expressions/Expressions';
+import interfacesProvider from '../utils/expressions/InterfacesProvider';
+import expressionPropertyDecorator from '../utils/expressions/ExpressionPropertyDecorator';
+import expressionTextPropertyDecorator from '../utils/expressions/ExpressionTextPropertyDecorator';
+// SVG effects
+import { registerEffect } from '../elements/svgElements/SVGEffects';
+import SVGTintFilter from '../elements/svgElements/effects/SVGTintEffect';
+import SVGFillFilter from '../elements/svgElements/effects/SVGFillFilter';
+import SVGStrokeEffect from '../elements/svgElements/effects/SVGStrokeEffect';
+import SVGTritoneFilter from '../elements/svgElements/effects/SVGTritoneFilter';
+import SVGProLevelsFilter from '../elements/svgElements/effects/SVGProLevelsFilter';
+import SVGDropShadowEffect from '../elements/svgElements/effects/SVGDropShadowEffect';
+import SVGMatte3Effect from '../elements/svgElements/effects/SVGMatte3Effect';
+import SVGGaussianBlurEffect from '../elements/svgElements/effects/SVGGaussianBlurEffect';
+import SVGTransformEffect from '../elements/svgElements/effects/SVGTransformEffect';
+
+// Registering expression plugin
+setExpressionsPlugin(Expressions);
+setExpressionInterfaces(interfacesProvider);
+expressionPropertyDecorator();
+expressionTextPropertyDecorator();
+registerEffect(20, SVGTintFilter, true);
+registerEffect(21, SVGFillFilter, true);
+registerEffect(22, SVGStrokeEffect, false);
+registerEffect(23, SVGTritoneFilter, true);
+registerEffect(24, SVGProLevelsFilter, true);
+registerEffect(25, SVGDropShadowEffect, true);
+registerEffect(28, SVGMatte3Effect, false);
+registerEffect(29, SVGGaussianBlurEffect, true);
+registerEffect(35, SVGTransformEffect, false);
+
+export default lottie;

package/player/js/modules/svg_light.js

@@ -0,0 +1,25 @@
+import lottie from './main';
+import { ShapeModifiers } from '../utils/shapes/ShapeModifiers';
+import TrimModifier from '../utils/shapes/TrimModifier';
+import PuckerAndBloatModifier from '../utils/shapes/PuckerAndBloatModifier';
+import RepeaterModifier from '../utils/shapes/RepeaterModifier';
+import RoundCornersModifier from '../utils/shapes/RoundCornersModifier';
+import ZigZagModifier from '../utils/shapes/ZigZagModifier';
+import OffsetPathModifier from '../utils/shapes/OffsetPathModifier';
+import SVGRenderer from '../renderers/SVGRenderer';
+import {
+  registerRenderer,
+} from '../renderers/renderersManager';
+
+// Registering renderers
+registerRenderer('svg', SVGRenderer);
+
+// Registering shape modifiers
+ShapeModifiers.registerModifier('tm', TrimModifier);
+ShapeModifiers.registerModifier('pb', PuckerAndBloatModifier);
+ShapeModifiers.registerModifier('rp', RepeaterModifier);
+ShapeModifiers.registerModifier('rd', RoundCornersModifier);
+ShapeModifiers.registerModifier('zz', ZigZagModifier);
+ShapeModifiers.registerModifier('op', OffsetPathModifier);
+
+export default lottie;

package/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;

package/player/js/renderers/CanvasRenderer.js

@@ -0,0 +1,67 @@
+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';
+import bufferManager from '../utils/helpers/bufferManager';
+
+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) || '',
+    bufferManager: bufferManager,
+    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);
+  }
+  this.animationItem.addEventListener('error', function (event) {
+    if (event.type === 'renderFrameError') {
+      this.renderConfig.bufferManager.releaseAll();
+    }
+  }.bind(this));
+}
+extendPrototype([CanvasRendererBase], CanvasRenderer);
+
+CanvasRenderer.prototype.createComp = function (data) {
+  return new CVCompElement(data, this.globalData, this);
+};
+
+export default CanvasRenderer;