@lumen5/lottie-web 5.14.0

package/player/js/utils/imagePreloader.js

@@ -0,0 +1,213 @@
+import { isSafari } from './common';
+import createNS from './helpers/svg_elements';
+import dataManager from './DataManager';
+import createTag from './helpers/html_elements';
+
+const ImagePreloader = (function () {
+  var proxyImage = (function () {
+    var canvas = createTag('canvas');
+    canvas.width = 1;
+    canvas.height = 1;
+    var ctx = canvas.getContext('2d');
+    ctx.fillStyle = 'rgba(0,0,0,0)';
+    ctx.fillRect(0, 0, 1, 1);
+    return canvas;
+  }());
+
+  function imageLoaded() {
+    this.loadedAssets += 1;
+    if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {
+      if (this.imagesLoadedCb) {
+        this.imagesLoadedCb(null);
+      }
+    }
+  }
+  function footageLoaded() {
+    this.loadedFootagesCount += 1;
+    if (this.loadedAssets === this.totalImages && this.loadedFootagesCount === this.totalFootages) {
+      if (this.imagesLoadedCb) {
+        this.imagesLoadedCb(null);
+      }
+    }
+  }
+
+  function getAssetsPath(assetData, assetsPath, originalPath) {
+    var path = '';
+    if (assetData.e) {
+      path = assetData.p;
+    } else if (assetsPath) {
+      var imagePath = assetData.p;
+      if (imagePath.indexOf('images/') !== -1) {
+        imagePath = imagePath.split('/')[1];
+      }
+      path = assetsPath + imagePath;
+    } else {
+      path = originalPath;
+      path += assetData.u ? assetData.u : '';
+      path += assetData.p;
+    }
+    return path;
+  }
+
+  function testImageLoaded(img) {
+    var _count = 0;
+    var intervalId = setInterval(function () {
+      var box = img.getBBox();
+      if (box.width || _count > 500) {
+        this._imageLoaded();
+        clearInterval(intervalId);
+      }
+      _count += 1;
+    }.bind(this), 50);
+  }
+
+  function createImageData(assetData) {
+    var path = getAssetsPath(assetData, this.assetsPath, this.path);
+    var img = createNS('image');
+    if (isSafari) {
+      this.testImageLoaded(img);
+    } else {
+      img.addEventListener('load', this._imageLoaded, false);
+    }
+    img.addEventListener('error', function () {
+      ob.img = proxyImage;
+      this._imageLoaded();
+    }.bind(this), false);
+    img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path);
+    if (this._elementHelper.append) {
+      this._elementHelper.append(img);
+    } else {
+      this._elementHelper.appendChild(img);
+    }
+    var ob = {
+      img: img,
+      assetData: assetData,
+    };
+    return ob;
+  }
+
+  function createImgData(assetData) {
+    var path = getAssetsPath(assetData, this.assetsPath, this.path);
+    var img = createTag('img');
+    img.crossOrigin = 'anonymous';
+    img.addEventListener('load', this._imageLoaded, false);
+    img.addEventListener('error', function () {
+      ob.img = proxyImage;
+      this._imageLoaded();
+    }.bind(this), false);
+    img.src = path;
+    var ob = {
+      img: img,
+      assetData: assetData,
+    };
+    return ob;
+  }
+
+  function createFootageData(data) {
+    var ob = {
+      assetData: data,
+    };
+    var path = getAssetsPath(data, this.assetsPath, this.path);
+    dataManager.loadData(path, function (footageData) {
+      ob.img = footageData;
+      this._footageLoaded();
+    }.bind(this), function () {
+      ob.img = {};
+      this._footageLoaded();
+    }.bind(this));
+    return ob;
+  }
+
+  function loadAssets(assets, cb) {
+    this.imagesLoadedCb = cb;
+    var i;
+    var len = assets.length;
+    for (i = 0; i < len; i += 1) {
+      if (!assets[i].layers) {
+        if (!assets[i].t || assets[i].t === 'seq') {
+          this.totalImages += 1;
+          this.images.push(this._createImageData(assets[i]));
+        } else if (assets[i].t === 3) {
+          this.totalFootages += 1;
+          this.images.push(this.createFootageData(assets[i]));
+        }
+      }
+    }
+  }
+
+  function setPath(path) {
+    this.path = path || '';
+  }
+
+  function setAssetsPath(path) {
+    this.assetsPath = path || '';
+  }
+
+  function getAsset(assetData) {
+    var i = 0;
+    var len = this.images.length;
+    while (i < len) {
+      if (this.images[i].assetData === assetData) {
+        return this.images[i].img;
+      }
+      i += 1;
+    }
+    return null;
+  }
+
+  function destroy() {
+    this.imagesLoadedCb = null;
+    this.images.length = 0;
+  }
+
+  function loadedImages() {
+    return this.totalImages === this.loadedAssets;
+  }
+
+  function loadedFootages() {
+    return this.totalFootages === this.loadedFootagesCount;
+  }
+
+  function setCacheType(type, elementHelper) {
+    if (type === 'svg') {
+      this._elementHelper = elementHelper;
+      this._createImageData = this.createImageData.bind(this);
+    } else {
+      this._createImageData = this.createImgData.bind(this);
+    }
+  }
+
+  function ImagePreloaderFactory() {
+    this._imageLoaded = imageLoaded.bind(this);
+    this._footageLoaded = footageLoaded.bind(this);
+    this.testImageLoaded = testImageLoaded.bind(this);
+    this.createFootageData = createFootageData.bind(this);
+    this.assetsPath = '';
+    this.path = '';
+    this.totalImages = 0;
+    this.totalFootages = 0;
+    this.loadedAssets = 0;
+    this.loadedFootagesCount = 0;
+    this.imagesLoadedCb = null;
+    this.images = [];
+  }
+
+  ImagePreloaderFactory.prototype = {
+    loadAssets: loadAssets,
+    setAssetsPath: setAssetsPath,
+    setPath: setPath,
+    loadedImages: loadedImages,
+    loadedFootages: loadedFootages,
+    destroy: destroy,
+    getAsset: getAsset,
+    createImgData: createImgData,
+    createImageData: createImageData,
+    imageLoaded: imageLoaded,
+    footageLoaded: footageLoaded,
+    setCacheType: setCacheType,
+  };
+
+  return ImagePreloaderFactory;
+}());
+
+export default ImagePreloader;

package/player/js/utils/imagePreloaderWorkerOverride.js

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

package/player/js/utils/markers/markerParser.js

@@ -0,0 +1,47 @@
+const markerParser = (
+
+  function () {
+    function parsePayloadLines(payload) {
+      var lines = payload.split('\r\n');
+      var keys = {};
+      var line;
+      var keysCount = 0;
+      for (var i = 0; i < lines.length; i += 1) {
+        line = lines[i].split(':');
+        if (line.length === 2) {
+          keys[line[0]] = line[1].trim();
+          keysCount += 1;
+        }
+      }
+      if (keysCount === 0) {
+        throw new Error();
+      }
+      return keys;
+    }
+
+    return function (_markers) {
+      var markers = [];
+      for (var i = 0; i < _markers.length; i += 1) {
+        var _marker = _markers[i];
+        var markerData = {
+          time: _marker.tm,
+          duration: _marker.dr,
+        };
+        try {
+          markerData.payload = JSON.parse(_markers[i].cm);
+        } catch (_) {
+          try {
+            markerData.payload = parsePayloadLines(_markers[i].cm);
+          } catch (__) {
+            markerData.payload = {
+              name: _markers[i].cm,
+            };
+          }
+        }
+        markers.push(markerData);
+      }
+      return markers;
+    };
+  }());
+
+export default markerParser;

package/player/js/utils/pooling/bezier_length_pool.js

@@ -0,0 +1,20 @@
+import {
+  getDefaultCurveSegments,
+} from '../common';
+import {
+  createTypedArray,
+} from '../helpers/arrays';
+import poolFactory from './pool_factory';
+
+const bezierLengthPool = (function () {
+  function create() {
+    return {
+      addedLength: 0,
+      percents: createTypedArray('float32', getDefaultCurveSegments()),
+      lengths: createTypedArray('float32', getDefaultCurveSegments()),
+    };
+  }
+  return poolFactory(8, create);
+}());
+
+export default bezierLengthPool;

package/player/js/utils/pooling/point_pool.js

@@ -0,0 +1,13 @@
+import {
+  createTypedArray,
+} from '../helpers/arrays';
+import poolFactory from './pool_factory';
+
+const pointPool = (function () {
+  function create() {
+    return createTypedArray('float32', 2);
+  }
+  return poolFactory(8, create);
+}());
+
+export default pointPool;

package/player/js/utils/pooling/pool_factory.js

@@ -0,0 +1,44 @@
+import {
+  createSizedArray,
+} from '../helpers/arrays';
+import pooling from './pooling';
+
+const poolFactory = (function () {
+  return function (initialLength, _create, _release) {
+    var _length = 0;
+    var _maxLength = initialLength;
+    var pool = createSizedArray(_maxLength);
+
+    var ob = {
+      newElement: newElement,
+      release: release,
+    };
+
+    function newElement() {
+      var element;
+      if (_length) {
+        _length -= 1;
+        element = pool[_length];
+      } else {
+        element = _create();
+      }
+      return element;
+    }
+
+    function release(element) {
+      if (_length === _maxLength) {
+        pool = pooling.double(pool);
+        _maxLength *= 2;
+      }
+      if (_release) {
+        _release(element);
+      }
+      pool[_length] = element;
+      _length += 1;
+    }
+
+    return ob;
+  };
+}());
+
+export default poolFactory;

package/player/js/utils/pooling/pooling.js

@@ -0,0 +1,15 @@
+import {
+  createSizedArray,
+} from '../helpers/arrays';
+
+const pooling = (function () {
+  function double(arr) {
+    return arr.concat(createSizedArray(arr.length));
+  }
+
+  return {
+    double: double,
+  };
+}());
+
+export default pooling;

package/player/js/utils/pooling/segments_length_pool.js

@@ -0,0 +1,24 @@
+import bezierLengthPool from './bezier_length_pool';
+import poolFactory from './pool_factory';
+
+const segmentsLengthPool = (function () {
+  function create() {
+    return {
+      lengths: [],
+      totalLength: 0,
+    };
+  }
+
+  function release(element) {
+    var i;
+    var len = element.lengths.length;
+    for (i = 0; i < len; i += 1) {
+      bezierLengthPool.release(element.lengths[i]);
+    }
+    element.lengths.length = 0;
+  }
+
+  return poolFactory(8, create, release);
+}());
+
+export default segmentsLengthPool;

package/player/js/utils/pooling/shapeCollection_pool.js

@@ -0,0 +1,48 @@
+import {
+  createSizedArray,
+} from '../helpers/arrays';
+import shapePool from './shape_pool';
+import pooling from './pooling';
+import ShapeCollection from '../shapes/ShapeCollection';
+
+const shapeCollectionPool = (function () {
+  var ob = {
+    newShapeCollection: newShapeCollection,
+    release: release,
+  };
+
+  var _length = 0;
+  var _maxLength = 4;
+  var pool = createSizedArray(_maxLength);
+
+  function newShapeCollection() {
+    var shapeCollection;
+    if (_length) {
+      _length -= 1;
+      shapeCollection = pool[_length];
+    } else {
+      shapeCollection = new ShapeCollection();
+    }
+    return shapeCollection;
+  }
+
+  function release(shapeCollection) {
+    var i;
+    var len = shapeCollection._length;
+    for (i = 0; i < len; i += 1) {
+      shapePool.release(shapeCollection.shapes[i]);
+    }
+    shapeCollection._length = 0;
+
+    if (_length === _maxLength) {
+      pool = pooling.double(pool);
+      _maxLength *= 2;
+    }
+    pool[_length] = shapeCollection;
+    _length += 1;
+  }
+
+  return ob;
+}());
+
+export default shapeCollectionPool;

package/player/js/utils/pooling/shape_pool.js

@@ -0,0 +1,44 @@
+import poolFactory from './pool_factory';
+import pointPool from './point_pool';
+import ShapePath from '../shapes/ShapePath';
+
+const shapePool = (function () {
+  function create() {
+    return new ShapePath();
+  }
+
+  function release(shapePath) {
+    var len = shapePath._length;
+    var i;
+    for (i = 0; i < len; i += 1) {
+      pointPool.release(shapePath.v[i]);
+      pointPool.release(shapePath.i[i]);
+      pointPool.release(shapePath.o[i]);
+      shapePath.v[i] = null;
+      shapePath.i[i] = null;
+      shapePath.o[i] = null;
+    }
+    shapePath._length = 0;
+    shapePath.c = false;
+  }
+
+  function clone(shape) {
+    var cloned = factory.newElement();
+    var i;
+    var len = shape._length === undefined ? shape.v.length : shape._length;
+    cloned.setLength(len);
+    cloned.c = shape.c;
+
+    for (i = 0; i < len; i += 1) {
+      cloned.setTripleAt(shape.v[i][0], shape.v[i][1], shape.o[i][0], shape.o[i][1], shape.i[i][0], shape.i[i][1], i);
+    }
+    return cloned;
+  }
+
+  var factory = poolFactory(4, create, release);
+  factory.clone = clone;
+
+  return factory;
+}());
+
+export default shapePool;

package/player/js/utils/shapes/DashProperty.js

@@ -0,0 +1,63 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import DynamicPropertyContainer from '../helpers/dynamicProperties';
+import {
+  createSizedArray,
+  createTypedArray,
+} from '../helpers/arrays';
+import PropertyFactory from '../PropertyFactory';
+
+function DashProperty(elem, data, renderer, container) {
+  this.elem = elem;
+  this.frameId = -1;
+  this.dataProps = createSizedArray(data.length);
+  this.renderer = renderer;
+  this.k = false;
+  this.dashStr = '';
+  this.dashArray = createTypedArray('float32', data.length ? data.length - 1 : 0);
+  this.dashoffset = createTypedArray('float32', 1);
+  this.initDynamicPropertyContainer(container);
+  var i;
+  var len = data.length || 0;
+  var prop;
+  for (i = 0; i < len; i += 1) {
+    prop = PropertyFactory.getProp(elem, data[i].v, 0, 0, this);
+    this.k = prop.k || this.k;
+    this.dataProps[i] = { n: data[i].n, p: prop };
+  }
+  if (!this.k) {
+    this.getValue(true);
+  }
+  this._isAnimated = this.k;
+}
+
+DashProperty.prototype.getValue = function (forceRender) {
+  if (this.elem.globalData.frameId === this.frameId && !forceRender) {
+    return;
+  }
+  this.frameId = this.elem.globalData.frameId;
+  this.iterateDynamicProperties();
+  this._mdf = this._mdf || forceRender;
+  if (this._mdf) {
+    var i = 0;
+    var len = this.dataProps.length;
+    if (this.renderer === 'svg') {
+      this.dashStr = '';
+    }
+    for (i = 0; i < len; i += 1) {
+      if (this.dataProps[i].n !== 'o') {
+        if (this.renderer === 'svg') {
+          this.dashStr += ' ' + this.dataProps[i].p.v;
+        } else {
+          this.dashArray[i] = this.dataProps[i].p.v;
+        }
+      } else {
+        this.dashoffset[0] = this.dataProps[i].p.v;
+      }
+    }
+  }
+};
+extendPrototype([DynamicPropertyContainer], DashProperty);
+
+export default DashProperty;

package/player/js/utils/shapes/GradientProperty.js

@@ -0,0 +1,93 @@
+import {
+  extendPrototype,
+} from '../functionExtensions';
+import DynamicPropertyContainer from '../helpers/dynamicProperties';
+import {
+  createTypedArray,
+} from '../helpers/arrays';
+import PropertyFactory from '../PropertyFactory';
+
+function GradientProperty(elem, data, container) {
+  this.data = data;
+  this.c = createTypedArray('uint8c', data.p * 4);
+  var cLength = data.k.k[0].s ? (data.k.k[0].s.length - data.p * 4) : data.k.k.length - data.p * 4;
+  this.o = createTypedArray('float32', cLength);
+  this._cmdf = false;
+  this._omdf = false;
+  this._collapsable = this.checkCollapsable();
+  this._hasOpacity = cLength;
+  this.initDynamicPropertyContainer(container);
+  this.prop = PropertyFactory.getProp(elem, data.k, 1, null, this);
+  this.k = this.prop.k;
+  this.getValue(true);
+}
+
+GradientProperty.prototype.comparePoints = function (values, points) {
+  var i = 0;
+  var len = this.o.length / 2;
+  var diff;
+  while (i < len) {
+    diff = Math.abs(values[i * 4] - values[points * 4 + i * 2]);
+    if (diff > 0.01) {
+      return false;
+    }
+    i += 1;
+  }
+  return true;
+};
+
+GradientProperty.prototype.checkCollapsable = function () {
+  if (this.o.length / 2 !== this.c.length / 4) {
+    return false;
+  }
+  if (this.data.k.k[0].s) {
+    var i = 0;
+    var len = this.data.k.k.length;
+    while (i < len) {
+      if (!this.comparePoints(this.data.k.k[i].s, this.data.p)) {
+        return false;
+      }
+      i += 1;
+    }
+  } else if (!this.comparePoints(this.data.k.k, this.data.p)) {
+    return false;
+  }
+  return true;
+};
+
+GradientProperty.prototype.getValue = function (forceRender) {
+  this.prop.getValue();
+  this._mdf = false;
+  this._cmdf = false;
+  this._omdf = false;
+  if (this.prop._mdf || forceRender) {
+    var i;
+    var len = this.data.p * 4;
+    var mult;
+    var val;
+    for (i = 0; i < len; i += 1) {
+      mult = i % 4 === 0 ? 100 : 255;
+      val = Math.round(this.prop.v[i] * mult);
+      if (this.c[i] !== val) {
+        this.c[i] = val;
+        this._cmdf = !forceRender;
+      }
+    }
+    if (this.o.length) {
+      len = this.prop.v.length;
+      for (i = this.data.p * 4; i < len; i += 1) {
+        mult = i % 2 === 0 ? 100 : 1;
+        val = i % 2 === 0 ? Math.round(this.prop.v[i] * 100) : this.prop.v[i];
+        if (this.o[i - this.data.p * 4] !== val) {
+          this.o[i - this.data.p * 4] = val;
+          this._omdf = !forceRender;
+        }
+      }
+    }
+    this._mdf = !forceRender;
+  }
+};
+
+extendPrototype([DynamicPropertyContainer], GradientProperty);
+
+export default GradientProperty;