first commit

node_modules/lottie-web/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;