@lumen5/lottie-web 5.14.0

package/player/js/elements/AudioElement.js

@@ -0,0 +1,102 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import PropertyFactory from '../utils/PropertyFactory';
+import RenderableElement from './helpers/RenderableElement';
+import BaseElement from './BaseElement';
+import FrameElement from './helpers/FrameElement';
+
+function AudioElement(data, globalData, comp) {
+  this.initFrame();
+  this.initRenderable();
+  this.assetData = globalData.getAssetData(data.refId);
+  this.initBaseData(data, globalData, comp);
+  this._isPlaying = false;
+  this._canPlay = false;
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+  this.audio = this.globalData.audioController.createAudio(assetPath);
+  this._currentTime = 0;
+  this.globalData.audioController.addAudio(this);
+  this._volumeMultiplier = 1;
+  this._volume = 1;
+  this._previousVolume = null;
+  this.tm = data.tm ? PropertyFactory.getProp(this, data.tm, 0, globalData.frameRate, this) : { _placeholder: true };
+  this.lv = PropertyFactory.getProp(this, data.au && data.au.lv ? data.au.lv : { k: [100] }, 1, 0.01, this);
+}
+
+AudioElement.prototype.prepareFrame = function (num) {
+  this.prepareRenderableFrame(num, true);
+  this.prepareProperties(num, true);
+  if (!this.tm._placeholder) {
+    var timeRemapped = this.tm.v;
+    this._currentTime = timeRemapped;
+  } else {
+    this._currentTime = num / this.data.sr;
+  }
+  this._volume = this.lv.v[0];
+  var totalVolume = this._volume * this._volumeMultiplier;
+  if (this._previousVolume !== totalVolume) {
+    this._previousVolume = totalVolume;
+    this.audio.volume(totalVolume);
+  }
+};
+
+extendPrototype([RenderableElement, BaseElement, FrameElement], AudioElement);
+
+AudioElement.prototype.renderFrame = function () {
+  if (this.isInRange && this._canPlay) {
+    if (!this._isPlaying) {
+      this.audio.play();
+      this.audio.seek(this._currentTime / this.globalData.frameRate);
+      this._isPlaying = true;
+    } else if (!this.audio.playing()
+      || Math.abs(this._currentTime / this.globalData.frameRate - this.audio.seek()) > 0.1
+    ) {
+      this.audio.seek(this._currentTime / this.globalData.frameRate);
+    }
+  }
+};
+
+AudioElement.prototype.show = function () {
+  // this.audio.play()
+};
+
+AudioElement.prototype.hide = function () {
+  this.audio.pause();
+  this._isPlaying = false;
+};
+
+AudioElement.prototype.pause = function () {
+  this.audio.pause();
+  this._isPlaying = false;
+  this._canPlay = false;
+};
+
+AudioElement.prototype.resume = function () {
+  this._canPlay = true;
+};
+
+AudioElement.prototype.setRate = function (rateValue) {
+  this.audio.rate(rateValue);
+};
+
+AudioElement.prototype.volume = function (volumeValue) {
+  this._volumeMultiplier = volumeValue;
+  this._previousVolume = volumeValue * this._volume;
+  this.audio.volume(this._previousVolume);
+};
+
+AudioElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+AudioElement.prototype.destroy = function () {
+};
+
+AudioElement.prototype.sourceRectAtTime = function () {
+};
+
+AudioElement.prototype.initExpressions = function () {
+};
+
+export default AudioElement;

package/player/js/elements/BaseElement.js

@@ -0,0 +1,78 @@
+import {
+  createElementID,
+  getExpressionInterfaces,
+} from '../utils/common';
+import getBlendMode from '../utils/helpers/blendModes';
+import EffectsManager from '../EffectsManager';
+
+function BaseElement() {
+}
+
+BaseElement.prototype = {
+  checkMasks: function () {
+    if (!this.data.hasMask) {
+      return false;
+    }
+    var i = 0;
+    var len = this.data.masksProperties.length;
+    while (i < len) {
+      if ((this.data.masksProperties[i].mode !== 'n' && this.data.masksProperties[i].cl !== false)) {
+        return true;
+      }
+      i += 1;
+    }
+    return false;
+  },
+  initExpressions: function () {
+    const expressionsInterfaces = getExpressionInterfaces();
+    if (!expressionsInterfaces) {
+      return;
+    }
+    const LayerExpressionInterface = expressionsInterfaces('layer');
+    const EffectsExpressionInterface = expressionsInterfaces('effects');
+    const ShapeExpressionInterface = expressionsInterfaces('shape');
+    const TextExpressionInterface = expressionsInterfaces('text');
+    const CompExpressionInterface = expressionsInterfaces('comp');
+    this.layerInterface = LayerExpressionInterface(this);
+    if (this.data.hasMask && this.maskManager) {
+      this.layerInterface.registerMaskInterface(this.maskManager);
+    }
+    var effectsInterface = EffectsExpressionInterface.createEffectsInterface(this, this.layerInterface);
+    this.layerInterface.registerEffectsInterface(effectsInterface);
+
+    if (this.data.ty === 0 || this.data.xt) {
+      this.compInterface = CompExpressionInterface(this);
+    } else if (this.data.ty === 4) {
+      this.layerInterface.shapeInterface = ShapeExpressionInterface(this.shapesData, this.itemsData, this.layerInterface);
+      this.layerInterface.content = this.layerInterface.shapeInterface;
+    } else if (this.data.ty === 5) {
+      this.layerInterface.textInterface = TextExpressionInterface(this);
+      this.layerInterface.text = this.layerInterface.textInterface;
+    }
+  },
+  setBlendMode: function () {
+    var blendModeValue = getBlendMode(this.data.bm);
+    var elem = this.baseElement || this.layerElement;
+
+    elem.style['mix-blend-mode'] = blendModeValue;
+  },
+  initBaseData: function (data, globalData, comp) {
+    this.globalData = globalData;
+    this.comp = comp;
+    this.data = data;
+    this.layerId = createElementID();
+
+    // Stretch factor for old animations missing this property.
+    if (!this.data.sr) {
+      this.data.sr = 1;
+    }
+    // effects manager
+    this.effectsManager = new EffectsManager(this.data, this, this.dynamicProperties);
+  },
+  getType: function () {
+    return this.type;
+  },
+  sourceRectAtTime: function () {},
+};
+
+export default BaseElement;

package/player/js/elements/BaseTextElement.js

@@ -0,0 +1,4 @@
+const BaseTextElement = function () {
+};
+
+export default BaseTextElement;

package/player/js/elements/CompElement.js

@@ -0,0 +1,107 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import BaseElement from './BaseElement';
+import TransformElement from './helpers/TransformElement';
+import HierarchyElement from './helpers/HierarchyElement';
+import FrameElement from './helpers/FrameElement';
+import RenderableDOMElement from './helpers/RenderableDOMElement';
+
+function ICompElement() {}
+
+extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement, RenderableDOMElement], ICompElement);
+
+ICompElement.prototype.initElement = function (data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initTransform(data, globalData, comp);
+  this.initRenderable();
+  this.initHierarchy();
+  this.initRendererElement();
+  this.createContainerElements();
+  this.createRenderableComponents();
+  if (this.data.xt || !globalData.progressiveLoad) {
+    this.buildAllItems();
+  }
+  this.hide();
+};
+
+/* ICompElement.prototype.hide = function(){
+    if(!this.hidden){
+        this.hideElement();
+        var i,len = this.elements.length;
+        for( i = 0; i < len; i+=1 ){
+            if(this.elements[i]){
+                this.elements[i].hide();
+            }
+        }
+    }
+}; */
+
+ICompElement.prototype.prepareFrame = function (num) {
+  this._mdf = false;
+  this.prepareRenderableFrame(num);
+  this.prepareProperties(num, this.isInRange);
+  if (!this.isInRange && !this.data.xt) {
+    return;
+  }
+
+  if (!this.tm._placeholder) {
+    var timeRemapped = this.tm.v;
+    if (timeRemapped === this.data.op) {
+      timeRemapped = this.data.op - 1;
+    }
+    this.renderedFrame = timeRemapped;
+  } else {
+    this.renderedFrame = num / this.data.sr;
+  }
+  var i;
+  var len = this.elements.length;
+  if (!this.completeLayers) {
+    this.checkLayers(this.renderedFrame);
+  }
+  // This iteration needs to be backwards because of how expressions connect between each other
+  for (i = len - 1; i >= 0; i -= 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].prepareFrame(this.renderedFrame - this.layers[i].st);
+      if (this.elements[i]._mdf) {
+        this._mdf = true;
+      }
+    }
+  }
+};
+
+ICompElement.prototype.renderInnerContent = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.completeLayers || this.elements[i]) {
+      this.elements[i].renderFrame();
+    }
+  }
+};
+
+ICompElement.prototype.setElements = function (elems) {
+  this.elements = elems;
+};
+
+ICompElement.prototype.getElements = function () {
+  return this.elements;
+};
+
+ICompElement.prototype.destroyElements = function () {
+  var i;
+  var len = this.layers.length;
+  for (i = 0; i < len; i += 1) {
+    if (this.elements[i]) {
+      this.elements[i].destroy();
+    }
+  }
+};
+
+ICompElement.prototype.destroy = function () {
+  this.destroyElements();
+  this.destroyBaseElement();
+};
+
+export default ICompElement;

package/player/js/elements/FootageElement.js

@@ -0,0 +1,47 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import {
+  getExpressionInterfaces,
+} from '../utils/common';
+import RenderableElement from './helpers/RenderableElement';
+import BaseElement from './BaseElement';
+import FrameElement from './helpers/FrameElement';
+
+function FootageElement(data, globalData, comp) {
+  this.initFrame();
+  this.initRenderable();
+  this.assetData = globalData.getAssetData(data.refId);
+  this.footageData = globalData.imageLoader.getAsset(this.assetData);
+  this.initBaseData(data, globalData, comp);
+}
+
+FootageElement.prototype.prepareFrame = function () {
+};
+
+extendPrototype([RenderableElement, BaseElement, FrameElement], FootageElement);
+
+FootageElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+FootageElement.prototype.renderFrame = function () {
+};
+
+FootageElement.prototype.destroy = function () {
+};
+
+FootageElement.prototype.initExpressions = function () {
+  const expressionsInterfaces = getExpressionInterfaces();
+  if (!expressionsInterfaces) {
+    return;
+  }
+  const FootageInterface = expressionsInterfaces('footage');
+  this.layerInterface = FootageInterface(this);
+};
+
+FootageElement.prototype.getFootageData = function () {
+  return this.footageData;
+};
+
+export default FootageElement;

package/player/js/elements/ImageElement.js

@@ -0,0 +1,42 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+
+import createNS from '../utils/helpers/svg_elements';
+import BaseElement from './BaseElement';
+import TransformElement from './helpers/TransformElement';
+import SVGBaseElement from './svgElements/SVGBaseElement';
+import HierarchyElement from './helpers/HierarchyElement';
+import FrameElement from './helpers/FrameElement';
+import RenderableDOMElement from './helpers/RenderableDOMElement';
+
+function IImageElement(data, globalData, comp) {
+  this.assetData = globalData.getAssetData(data.refId);
+  if (this.assetData && this.assetData.sid) {
+    this.assetData = globalData.slotManager.getProp(this.assetData);
+  }
+  this.initElement(data, globalData, comp);
+  this.sourceRect = {
+    top: 0, left: 0, width: this.assetData.w, height: this.assetData.h,
+  };
+}
+
+extendPrototype([BaseElement, TransformElement, SVGBaseElement, HierarchyElement, FrameElement, RenderableDOMElement], IImageElement);
+
+IImageElement.prototype.createContent = function () {
+  var assetPath = this.globalData.getAssetsPath(this.assetData);
+
+  this.innerElem = createNS('image');
+  this.innerElem.setAttribute('width', this.assetData.w + 'px');
+  this.innerElem.setAttribute('height', this.assetData.h + 'px');
+  this.innerElem.setAttribute('preserveAspectRatio', this.assetData.pr || this.globalData.renderConfig.imagePreserveAspectRatio);
+  this.innerElem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', assetPath);
+
+  this.layerElement.appendChild(this.innerElem);
+};
+
+IImageElement.prototype.sourceRectAtTime = function () {
+  return this.sourceRect;
+};
+
+export default IImageElement;

package/player/js/elements/NullElement.js

@@ -0,0 +1,39 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import BaseElement from './BaseElement';
+import TransformElement from './helpers/TransformElement';
+import HierarchyElement from './helpers/HierarchyElement';
+import FrameElement from './helpers/FrameElement';
+
+function NullElement(data, globalData, comp) {
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.initFrame();
+  this.initTransform(data, globalData, comp);
+  this.initHierarchy();
+}
+
+NullElement.prototype.prepareFrame = function (num) {
+  this.prepareProperties(num, true);
+};
+
+NullElement.prototype.renderFrame = function () {
+};
+
+NullElement.prototype.getBaseElement = function () {
+  return null;
+};
+
+NullElement.prototype.destroy = function () {
+};
+
+NullElement.prototype.sourceRectAtTime = function () {
+};
+
+NullElement.prototype.hide = function () {
+};
+
+extendPrototype([BaseElement, TransformElement, HierarchyElement, FrameElement], NullElement);
+
+export default NullElement;

package/player/js/elements/ShapeElement.js

@@ -0,0 +1,76 @@
+import ProcessedElement from './helpers/shapes/ProcessedElement';
+
+function IShapeElement() {
+}
+
+IShapeElement.prototype = {
+  addShapeToModifiers: function (data) {
+    var i;
+    var len = this.shapeModifiers.length;
+    for (i = 0; i < len; i += 1) {
+      this.shapeModifiers[i].addShape(data);
+    }
+  },
+  isShapeInAnimatedModifiers: function (data) {
+    var i = 0;
+    var len = this.shapeModifiers.length;
+    while (i < len) {
+      if (this.shapeModifiers[i].isAnimatedWithShape(data)) {
+        return true;
+      }
+    }
+    return false;
+  },
+  renderModifiers: function () {
+    if (!this.shapeModifiers.length) {
+      return;
+    }
+    var i;
+    var len = this.shapes.length;
+    for (i = 0; i < len; i += 1) {
+      this.shapes[i].sh.reset();
+    }
+
+    len = this.shapeModifiers.length;
+    var shouldBreakProcess;
+    for (i = len - 1; i >= 0; i -= 1) {
+      shouldBreakProcess = this.shapeModifiers[i].processShapes(this._isFirstFrame);
+      // workaround to fix cases where a repeater resets the shape so the following processes get called twice
+      // TODO: find a better solution for this
+      if (shouldBreakProcess) {
+        break;
+      }
+    }
+  },
+
+  searchProcessedElement: function (elem) {
+    var elements = this.processedElements;
+    var i = 0;
+    var len = elements.length;
+    while (i < len) {
+      if (elements[i].elem === elem) {
+        return elements[i].pos;
+      }
+      i += 1;
+    }
+    return 0;
+  },
+  addProcessedElement: function (elem, pos) {
+    var elements = this.processedElements;
+    var i = elements.length;
+    while (i) {
+      i -= 1;
+      if (elements[i].elem === elem) {
+        elements[i].pos = pos;
+        return;
+      }
+    }
+    elements.push(new ProcessedElement(elem, pos));
+  },
+  prepareFrame: function (num) {
+    this.prepareRenderableFrame(num);
+    this.prepareProperties(num, this.isInRange);
+  },
+};
+
+export default IShapeElement;

package/player/js/elements/SolidElement.js

@@ -0,0 +1,23 @@
+import {
+  extendPrototype,
+} from '../utils/functionExtensions';
+import createNS from '../utils/helpers/svg_elements';
+import IImageElement from './ImageElement';
+
+function ISolidElement(data, globalData, comp) {
+  this.initElement(data, globalData, comp);
+}
+extendPrototype([IImageElement], ISolidElement);
+
+ISolidElement.prototype.createContent = function () {
+  var rect = createNS('rect');
+  /// /rect.style.width = this.data.sw;
+  /// /rect.style.height = this.data.sh;
+  /// /rect.style.fill = this.data.sc;
+  rect.setAttribute('width', this.data.sw);
+  rect.setAttribute('height', this.data.sh);
+  rect.setAttribute('fill', this.data.sc);
+  this.layerElement.appendChild(rect);
+};
+
+export default ISolidElement;

package/player/js/elements/TextElement.js

@@ -0,0 +1,94 @@
+import LetterProps from '../utils/text/LetterProps';
+import TextProperty from '../utils/text/TextProperty';
+import TextAnimatorProperty from '../utils/text/TextAnimatorProperty';
+import buildShapeString from '../utils/shapes/shapePathBuilder';
+
+function ITextElement() {
+}
+
+ITextElement.prototype.initElement = function (data, globalData, comp) {
+  this.lettersChangedFlag = true;
+  this.initFrame();
+  this.initBaseData(data, globalData, comp);
+  this.textProperty = new TextProperty(this, data.t, this.dynamicProperties);
+  this.textAnimator = new TextAnimatorProperty(data.t, this.renderType, this);
+  this.initTransform(data, globalData, comp);
+  this.initHierarchy();
+  this.initRenderable();
+  this.initRendererElement();
+  this.createContainerElements();
+  this.createRenderableComponents();
+  this.createContent();
+  this.hide();
+  this.textAnimator.searchProperties(this.dynamicProperties);
+};
+
+ITextElement.prototype.prepareFrame = function (num) {
+  this._mdf = false;
+  this.prepareRenderableFrame(num);
+  this.prepareProperties(num, this.isInRange);
+};
+
+ITextElement.prototype.createPathShape = function (matrixHelper, shapes) {
+  var j;
+  var jLen = shapes.length;
+  var pathNodes;
+  var shapeStr = '';
+  for (j = 0; j < jLen; j += 1) {
+    if (shapes[j].ty === 'sh') {
+      pathNodes = shapes[j].ks.k;
+      shapeStr += buildShapeString(pathNodes, pathNodes.i.length, true, matrixHelper);
+    }
+  }
+  return shapeStr;
+};
+
+ITextElement.prototype.updateDocumentData = function (newData, index) {
+  this.textProperty.updateDocumentData(newData, index);
+};
+
+ITextElement.prototype.canResizeFont = function (_canResize) {
+  this.textProperty.canResizeFont(_canResize);
+};
+
+ITextElement.prototype.setMinimumFontSize = function (_fontSize) {
+  this.textProperty.setMinimumFontSize(_fontSize);
+};
+
+ITextElement.prototype.applyTextPropertiesToMatrix = function (documentData, matrixHelper, lineNumber, xPos, yPos) {
+  if (documentData.ps) {
+    matrixHelper.translate(documentData.ps[0], documentData.ps[1] + documentData.ascent, 0);
+  }
+  matrixHelper.translate(0, -documentData.ls, 0);
+  switch (documentData.j) {
+    case 1:
+      matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]), 0, 0);
+      break;
+    case 2:
+      matrixHelper.translate(documentData.justifyOffset + (documentData.boxWidth - documentData.lineWidths[lineNumber]) / 2, 0, 0);
+      break;
+    default:
+      break;
+  }
+  matrixHelper.translate(xPos, yPos, 0);
+};
+
+ITextElement.prototype.buildColor = function (colorData) {
+  return 'rgb(' + Math.round(colorData[0] * 255) + ',' + Math.round(colorData[1] * 255) + ',' + Math.round(colorData[2] * 255) + ')';
+};
+
+ITextElement.prototype.emptyProp = new LetterProps();
+
+ITextElement.prototype.destroy = function () {
+
+};
+
+ITextElement.prototype.validateText = function () {
+  if (this.textProperty._mdf || this.textProperty._isFirstFrame) {
+    this.buildNewText();
+    this.textProperty._isFirstFrame = false;
+    this.textProperty._mdf = false;
+  }
+};
+
+export default ITextElement;