added FootageElement support
diff --git a/player/index.html b/player/index.html
index b09e35f..061a793 100644
--- a/player/index.html
+++ b/player/index.html
@@ -108,6 +108,7 @@
<script src="js/elements/ImageElement.js"></script>
<script src="js/elements/SolidElement.js"></script>
<script src="js/elements/AudioElement.js"></script>
+ <script src="js/elements/FootageElement.js"></script>
<script src="js/elements/svgElements/SVGCompElement.js" data-builds="full,svg,svg_light,html,html_light"></script>
<script src="js/elements/svgElements/SVGTextElement.js" data-builds="full,svg,svg_light,html,html_light"></script>
<script src="js/elements/svgElements/SVGShapeElement.js"></script>
@@ -154,6 +155,7 @@
<script src="js/utils/expressions/shapes/ShapePathInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
<script src="js/utils/expressions/TextInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
<script src="js/utils/expressions/LayerInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
+ <script src="js/utils/expressions/FootageInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
<script src="js/utils/expressions/CompInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
<script src="js/utils/expressions/TransformInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
<script src="js/utils/expressions/ProjectInterface.js" data-builds="full,svg,canvas,html,canvas_worker"></script>
@@ -181,9 +183,9 @@
var elem = document.getElementById('lottie');
var animData = {
container: elem,
- renderer: 'svg',
+ renderer: 'canvas',
loop: true,
- autoplay: true,
+ autoplay: false,
rendererSettings: {
progressiveLoad:false,
preserveAspectRatio: 'xMidYMid meet',
diff --git a/player/js/animation/AnimationItem.js b/player/js/animation/AnimationItem.js
index 9f15981..6ba5c2d 100644
--- a/player/js/animation/AnimationItem.js
+++ b/player/js/animation/AnimationItem.js
@@ -299,7 +299,8 @@
AnimationItem.prototype.checkLoaded = function () {
if (!this.isLoaded
&& this.renderer.globalData.fontManager.isLoaded
- && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')
+ && (this.imagePreloader.loadedImages() || this.renderer.rendererType !== 'canvas')
+ && (this.imagePreloader.loadedFootages())
) {
this.isLoaded = true;
dataManager.completeData(this.animationData, this.renderer.globalData.fontManager);
diff --git a/player/js/elements/FootageElement.js b/player/js/elements/FootageElement.js
new file mode 100644
index 0000000..54c8036
--- /dev/null
+++ b/player/js/elements/FootageElement.js
@@ -0,0 +1,32 @@
+/* global extendPrototype, RenderableElement, BaseElement, FrameElement, FootageInterface */
+
+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 () {
+ this.layerInterface = FootageInterface(this);
+};
+
+FootageElement.prototype.getFootageData = function () {
+ return this.footageData;
+};
diff --git a/player/js/elements/canvasElements/CVImageElement.js b/player/js/elements/canvasElements/CVImageElement.js
index e810845..82c827c 100644
--- a/player/js/elements/canvasElements/CVImageElement.js
+++ b/player/js/elements/canvasElements/CVImageElement.js
@@ -3,7 +3,7 @@
function CVImageElement(data, globalData, comp) {
this.assetData = globalData.getAssetData(data.refId);
- this.img = globalData.imageLoader.getImage(this.assetData);
+ this.img = globalData.imageLoader.getAsset(this.assetData);
this.initElement(data, globalData, comp);
}
extendPrototype([BaseElement, TransformElement, CVBaseElement, HierarchyElement, FrameElement, RenderableElement], CVImageElement);
diff --git a/player/js/renderers/BaseRenderer.js b/player/js/renderers/BaseRenderer.js
index 3105bbb..14f2570 100644
--- a/player/js/renderers/BaseRenderer.js
+++ b/player/js/renderers/BaseRenderer.js
@@ -1,4 +1,4 @@
-/* global AudioElement, FontManager */
+/* global AudioElement, FootageElement, FontManager */
function BaseRenderer() {}
BaseRenderer.prototype.checkLayers = function (num) {
@@ -36,6 +36,8 @@
return this.createAudio(layer);
case 13:
return this.createCamera(layer);
+ case 15:
+ return this.createFootage(layer);
default:
return this.createNull(layer);
}
@@ -49,6 +51,10 @@
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;
diff --git a/player/js/utils/expressions/FootageInterface.js b/player/js/utils/expressions/FootageInterface.js
new file mode 100644
index 0000000..a1e5ee7
--- /dev/null
+++ b/player/js/utils/expressions/FootageInterface.js
@@ -0,0 +1,61 @@
+/* global */
+/* exported FootageInterface */
+
+var FootageInterface = (function () {
+ var outlineInterfaceFactory = (function (elem) {
+ var currentPropertyName = '';
+ var currentProperty = elem.getFootageData();
+ function init() {
+ currentPropertyName = '';
+ currentProperty = elem.getFootageData();
+ return searchProperty;
+ }
+ function searchProperty(value) {
+ if (currentProperty[value]) {
+ currentPropertyName = value;
+ currentProperty = currentProperty[value];
+ if (typeof currentProperty === 'object') {
+ return searchProperty;
+ }
+ return currentProperty;
+ }
+ var propertyNameIndex = value.indexOf(currentPropertyName);
+ if (propertyNameIndex !== -1) {
+ var index = parseInt(value.substr(propertyNameIndex + currentPropertyName.length), 10);
+ currentProperty = currentProperty[index];
+ if (typeof currentProperty === 'object') {
+ return searchProperty;
+ }
+ return currentProperty;
+ }
+ return '';
+ }
+ return init;
+ });
+
+ var dataInterfaceFactory = function (elem) {
+ function interfaceFunction(value) {
+ if (value === 'Outline') {
+ return interfaceFunction.outlineInterface();
+ }
+ return null;
+ }
+
+ interfaceFunction._name = 'Outline';
+ interfaceFunction.outlineInterface = outlineInterfaceFactory(elem);
+ return interfaceFunction;
+ };
+
+ return function (elem) {
+ function _interfaceFunction(value) {
+ if (value === 'Data') {
+ return _interfaceFunction.dataInterface;
+ }
+ return null;
+ }
+
+ _interfaceFunction._name = 'Data';
+ _interfaceFunction.dataInterface = dataInterfaceFactory(elem);
+ return _interfaceFunction;
+ };
+}());
diff --git a/player/js/utils/imagePreloader.js b/player/js/utils/imagePreloader.js
index b0d3266..a8979f6 100644
--- a/player/js/utils/imagePreloader.js
+++ b/player/js/utils/imagePreloader.js
@@ -1,4 +1,4 @@
-/* global createTag, createNS, isSafari */
+/* global createTag, createNS, isSafari, assetLoader */
/* exported ImagePreloader */
var ImagePreloader = (function () {
@@ -14,7 +14,15 @@
function imageLoaded() {
this.loadedAssets += 1;
- if (this.loadedAssets === this.totalImages) {
+ 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);
}
@@ -93,14 +101,34 @@
return ob;
}
+ function createFootageData(data) {
+ var ob = {
+ assetData: data,
+ };
+ var path = getAssetsPath(data, this.assetsPath, this.path);
+ assetLoader.load(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) {
- this.totalImages += 1;
- this.images.push(this._createImageData(assets[i]));
+ if (!assets[i].t) {
+ 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]));
+ }
}
}
}
@@ -113,7 +141,7 @@
this.assetsPath = path || '';
}
- function getImage(assetData) {
+ function getAsset(assetData) {
var i = 0;
var len = this.images.length;
while (i < len) {
@@ -130,10 +158,14 @@
this.images.length = 0;
}
- function loaded() {
+ function loadedImages() {
return this.totalImages === this.loadedAssets;
}
+ function loadedFootages() {
+ return this.totalFootages === this.loadedFootagesCount;
+ }
+
function setCacheType(type, elementHelper) {
if (type === 'svg') {
this._elementHelper = elementHelper;
@@ -145,11 +177,15 @@
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 = [];
}
@@ -158,12 +194,14 @@
loadAssets: loadAssets,
setAssetsPath: setAssetsPath,
setPath: setPath,
- loaded: loaded,
+ loadedImages: loadedImages,
+ loadedFootages: loadedFootages,
destroy: destroy,
- getImage: getImage,
+ getAsset: getAsset,
createImgData: createImgData,
createImageData: createImageData,
imageLoaded: imageLoaded,
+ footageLoaded: footageLoaded,
setCacheType: setCacheType,
};
diff --git a/tasks/build.js b/tasks/build.js
index d301b35..e8bcc2b 100644
--- a/tasks/build.js
+++ b/tasks/build.js
@@ -344,6 +344,10 @@
builds: defaultBuilds
},
{
+ src: 'js/elements/FootageElement.js',
+ builds: ['full','svg','canvas','html','canvas_worker'],
+ },
+ {
src: 'js/elements/svgElements/SVGCompElement.js',
builds: ['full','svg','svg_light','html','html_light']
},
@@ -524,6 +528,10 @@
builds: ['full','svg','canvas','html','canvas_worker']
},
{
+ src: 'js/utils/expressions/FootageInterface.js',
+ builds: ['full','svg','canvas','html','canvas_worker']
+ },
+ {
src: 'js/utils/expressions/CompInterface.js',
builds: ['full','svg','canvas','html','canvas_worker']
},