wibbitz-lottie-web - npm Package Compare versions

Comparing version 5.6.2 to 5.7.5-1

CHANGELOG.md

@@ -0,1 +1,90 @@
+## V 5.7.5-1
+- FontManager.js - create font caching
+- AnimtionItem.js - removed image preloading for faster performance
+
+## V 5.7.5
+- FIX: Enable HImageElement to use preloaded images thanks @dbettini
+- FIX: lottie-light effects breaking on destroy
+- FIX: loaded_images event fired in safari
+
+## V 5.7.4
+- FIX: `addEventListener` method returns function except `void`
+- EXPRESSIONS:  added support for toWorldVec, fromWorldVec and getValueAtTime for transforms
+- EXPRESSIONS: fixed propertyGroup expression
+- FIX: added svg effects placeholder
+- FIX: added check for wrapper on destroy canvas
+- EXPORTER: missing layer styles
+- EXPORTER: export only work area
+
+## V 5.7.3
+- EXPRESSIONS: Added more expressions support
+
+## V 5.7.2
+- FIX: Trusted Types compliance by removing calls to .innerHTML
+- FIX: make callback parameter of removeEventListener optional
+- FEATURE: Audio Support
+
+## V 5.7.1
+- REPORT: Improved animation report
+- FIX: Expressions separate dimensions
+- FIX: propertyGroup for expressions (Duik bones are supported)
+- FEATURE: supported Pucked and Bloat
+
+## V 5.7.0
+- FEATURE: Extension: reports for not supported features
+- FEATURE: Extension: baking keyframes for unsupported expressions
+- FEATURE: Extension: improved preview and added Skottie preview
+
+## V 5.6.10
+- FIX: default loop to true
+- FIX: removing sans-serif and monospace from font preloader to calculate correctly when font is loaded
+- FIX: improved image caching when preloading svg image tags
+- updated definitions
+
+## V 5.6.9
+- fix compression options
+- initialization improvement
+
+## V 5.6.8
+- not using non breaking spaces for text spaces
+- added support for exporting video layers (only export, players don't support them)
+- fix for path properties open without nodes
+
+## V 5.6.7
+- use original comp name as export name
+- added default filter values for banner template
+- added option to load local file as lottie player
+- initialSegment set before animation configuration
+
+## V 5.6.6
+- reading file extension correctly when copying original assets
+- fixed inlined json objects with carriage returns
+- added loop support for banners
+- exporting adjustment layers as null layers
+- added checkbox to select comp names as default
+- added filter size configuration and defaulting to 100%
+- Add missing animation event name definitions
+
+## V 5.6.5
+- added initialSegment property
+- fix for zip file without root folder
+- support for including json in banner html template
+- Export 'blur' text animator property
+
+## V 5.6.4
+- added support for using original images as assets
+- Improved log error fix
+- Fixed missing assets during export
+
+## V 5.6.3
+- Fix saving json files with special characters
+- Improved lottie import
+
+## V 5.6.2
+- Fix lottie importer gradient data without keyframes
+- Added hidden layers and hidden properties support for importer
+- Improved error messaging
+- Added assetsPath configuration for typescript
+- fixed mangled lottie declaration
+
 ## V 5.6.1
@@ -2,0 +91,0 @@ - Fix on the exporter for older AE versions when a new project didn't have a saved destination yet

docs/json/effects/proLevels.json

@@ -28,3 +28,3 @@ {
       "title": "Effects",
-      "description": "ffect List of properties.",
+      "description": "Effect List of properties.",
       "type": "array",
@@ -31,0 +31,0 @@ "items": [

History.md

@@ -0,1 +1,87 @@
+## V 5.7.5
+- FIX: Enable HImageElement to use preloaded images thanks @dbettini
+- FIX: lottie-light effects breaking on destroy
+- FIX: loaded_images event fired in safari
+- FIX: original asset names for audios
+
+## V 5.7.4
+- FIX: `addEventListener` method returns function except `void`
+- EXPRESSIONS:  added support for toWorldVec, fromWorldVec and getValueAtTime for transforms
+- EXPRESSIONS: fixed propertyGroup expression
+- FIX: added svg effects placeholder
+- FIX: added check for wrapper on destroy canvas
+- EXPORTER: missing layer styles
+- EXPORTER: export only work area
+
+## V 5.7.3
+- EXPRESSIONS: Added more expressions support
+
+## V 5.7.2
+- FIX: Trusted Types compliance by removing calls to .innerHTML
+- FIX: make callback parameter of removeEventListener optional
+- FEATURE: Audio Support
+
+## V 5.7.1
+- REPORT: Improved animation report
+- FIX: Expressions separate dimensions
+- FIX: propertyGroup for expressions (Duik bones are supported)
+- FEATURE: supported Pucked and Bloat
+
+## V 5.7.0
+- FEATURE: Extension: reports for not supported features
+- FEATURE: Extension: baking keyframes for unsupported expressions
+- FEATURE: Extension: improved preview and added Skottie preview
+
+## V 5.6.10
+- FIX: default loop to true
+- FIX: removing sans-serif and monospace from font preloader to calculate correctly when font is loaded
+- FIX: improved image caching when preloading svg image tags
+- updated definitions
+
+## V 5.6.9
+- fix compression options
+- initialization improvement
+
+## V 5.6.8
+- not using non breaking spaces for text spaces
+- added support for exporting video layers (only export, players don't support them)
+- fix for path properties open without nodes
+
+## V 5.6.7
+- use original comp name as export name
+- added default filter values for banner template
+- added option to load local file as lottie player
+- initialSegment set before animation configuration
+
+## V 5.6.6
+- reading file extension correctly when copying original assets
+- fixed inlined json objects with carriage returns
+- added loop support for banners
+- exporting adjustment layers as null layers
+- added checkbox to select comp names as default
+- added filter size configuration and defaulting to 100%
+- Add missing animation event name definitions
+
+## V 5.6.5
+- added initialSegment property
+- fix for zip file without root folder
+- support for including json in banner html template
+- Export 'blur' text animator property
+
+## V 5.6.4
+- added support for using original images as assets
+- Improved log error fix
+- Fixed missing assets during export
+
+## V 5.6.3
+- Fix saving json files with special characters
+- Improved lottie import
+
+## V 5.6.2
+- Fix lottie importer gradient data without keyframes
+- Added hidden layers and hidden properties support for importer
+- Improved error messaging
+- Added assetsPath configuration for typescript
+- fixed mangled lottie declaration
+
 ## V 5.6.1
@@ -2,0 +88,0 @@ - Fix on the exporter for older AE versions when a new project didn't have a saved destination yet

index.d.ts

 export type AnimationDirection = 1 | -1;
 export type AnimationSegment = [number, number];
-export type AnimationEventName = 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'error';
+export type AnimationEventName = 'enterFrame' | 'loopComplete' | 'complete' | 'segmentStart' | 'destroy' | 'config_ready' | 'data_ready' | 'DOMLoaded' | 'error' | 'data_failed' | 'loaded_images';
 export type AnimationEventCallback<T = any> = (args: T) => void;
 
 export type AnimationItem = {
-    play(): void;
-    stop(): void;
-    pause(): void;
+    name: string;
+    isLoaded: boolean;
+    currentFrame: number;
+    currentRawFrame: number;
+    firstFrame: number;
+    totalFrames: number;
+    frameRate: number;
+    frameMult: number;
+    playSpeed: number;
+    playDirection: number;
+    playCount: number;
+    isPaused: boolean;
+    autoplay: boolean;
+    loop: boolean;
+    renderer: any;
+    animationID: string;
+    assetsPath: string;
+    timeCompleted: number;
+    segmentPos: number;
+    isSubframeEnabled: boolean;
+    segments: AnimationSegment | AnimationSegment[];
+    play(name?: string): void;
+    stop(name?: string): void;
+    togglePause(name?: string): void;
+    destroy(name?: string): void;
+    pause(name?: string): void;
+    goToAndStop(value: number, isFrame?: boolean, name?: string): void;
+    goToAndPlay(value: number, isFrame?: boolean, name?: string): void;
+    includeLayers(data: any): void;
+    setSegment(init: number, end: number): void;
+    resetSegments(forceFlag: boolean): void;
+    hide(): void;
+    show(): void;
     resize(): void;
     setSpeed(speed: number): void;
-    goToAndPlay(value: number, isFrame?: boolean): void;
-    goToAndStop(value: number, isFrame?: boolean): void;
     setDirection(direction: AnimationDirection): void;
     playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag?: boolean): void;
     setSubframe(useSubFrames: boolean): void;
-    destroy(): void;
     getDuration(inFrames?: boolean): number;
     triggerEvent<T = any>(name: AnimationEventName, args: T): void;
-    addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
-    removeEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): void;
+    addEventListener<T = any>(name: AnimationEventName, callback: AnimationEventCallback<T>): () => void;
+    removeEventListener<T = any>(name: AnimationEventName, callback?: AnimationEventCallback<T>): void;
 }
@@ -38,2 +65,3 @@
     focusable?: boolean;
+    filterSize?: FilterSizeConfig;
 };
@@ -57,3 +85,5 @@
     autoplay?: boolean;
+    initialSegment?: AnimationSegment;
     name?: string;
+    assetsPath?: string;
     rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig;
@@ -70,4 +100,12 @@ }
 
-type LottiePlayer = {
+export type FilterSizeConfig = {
+    width: string;
+    height: string;
+    x: string;
+    y: string;
+};
+
+export type LottiePlayer = {
     play(name?: string): void;
+    pause(name?: string): void;
     stop(name?: string): void;
@@ -74,0 +112,0 @@ setSpeed(speed: number, name?: string): void;

package.json

 {
   "name": "wibbitz-lottie-web",
-  "version": "5.6.2",
+  "version": "5.7.5-1",
   "description": "After Effects plugin for exporting animations to SVG + JavaScript or canvas + JavaScript",
@@ -5,0 +5,0 @@ "main": "./build/player/lottie.js",

player/js/3rd_party/transformation-matrix.js

@@ -234,2 +234,3 @@ /*!
         }
+        return matr;
     }
@@ -323,3 +324,7 @@
         } else {
-            arr = [x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]];
+            arr = [
+                x * this.props[0] + y * this.props[4] + z * this.props[8] + this.props[12],
+                x * this.props[1] + y * this.props[5] + z * this.props[9] + this.props[13],
+                x * this.props[2] + y * this.props[6] + z * this.props[10] + this.props[14]
+            ];
         }
@@ -326,0 +331,0 @@ return arr;

player/js/animation/AnimationItem.js

@@ -8,2 +8,3 @@ var AnimationItem = function () {
     this.currentRawFrame = 0;
+    this.firstFrame = 0;
     this.totalFrames = 0;
@@ -25,3 +26,3 @@ this.frameRate = 0;
     this.segmentPos = 0;
-    this.subframeEnabled = subframeEnabled;
+    this.isSubframeEnabled = subframeEnabled;
     this.segments = [];
@@ -32,2 +33,3 @@ this._idle = true;
     this.imagePreloader = new ImagePreloader();
+    this.audioController = audioControllerFactory();
 };
@@ -38,5 +40,2 @@
 AnimationItem.prototype.setParams = function(params) {
-    if(params.context){
-        this.context = params.context;
-    }
     if(params.wrapper || params.container){
@@ -57,11 +56,14 @@ this.wrapper = params.wrapper || params.container;
     }
+    this.imagePreloader.setCacheType(animType, this.renderer.globalData.defs);
     this.renderer.setProjectInterface(this.projectInterface);
     this.animType = animType;
-
-    if(params.loop === '' || params.loop === null){
-    }else if(params.loop === false){
+    if (params.loop === ''
+        || params.loop === null
+        || params.loop === undefined
+        || params.loop === true)
+    {
+        this.loop = true;
+    } else if (params.loop === false) {
         this.loop = false;
-    }else if(params.loop === true){
-        this.loop = true;
-    }else{
+    } else {
         this.loop = parseInt(params.loop);
@@ -73,2 +75,6 @@ }
     this.assetsPath = params.assetsPath;
+    this.initialSegment = params.initialSegment;
+    if (params.audioFactory) {
+        this.audioController.setAudioFactory(params.audioFactory);
+    }
     if (params.animationData) {
@@ -90,2 +96,3 @@ this.configAnimation(params.animationData);
     }
+
 };
@@ -203,3 +210,10 @@
         this.animationData = animData;
-        this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
+
+        if (this.initialSegment) {
+            this.totalFrames = Math.floor(this.initialSegment[1] - this.initialSegment[0]);
+            this.firstFrame = Math.round(this.initialSegment[0]);
+        } else {
+            this.totalFrames = Math.floor(this.animationData.op - this.animationData.ip);
+            this.firstFrame = Math.round(this.animationData.ip);
+        }
         this.renderer.configAnimation(animData);
@@ -212,10 +226,12 @@ if(!animData.assets){
         this.frameRate = this.animationData.fr;
-        this.firstFrame = Math.round(this.animationData.ip);
         this.frameMult = this.animationData.fr / 1000;
         this.renderer.searchExtraCompositions(animData.assets);
         this.trigger('config_ready');
-        this.preloadImages();
+        // this.preloadImages();
         this.loadSegments();
         this.updaFrameModifier();
         this.waitForFontsLoaded();
+        if (this.isPaused) {
+            this.audioController.pause();
+        }
     } catch(error) {
@@ -230,3 +246,3 @@ this.triggerConfigError(error);
     }
-    if(this.renderer.globalData.fontManager.loaded()){
+    if(this.renderer.globalData.fontManager.isLoaded){
         this.checkLoaded();
@@ -239,3 +255,6 @@ }else{
 AnimationItem.prototype.checkLoaded = function () {
-    if (!this.isLoaded && this.renderer.globalData.fontManager.loaded() && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')) {
+    if (!this.isLoaded 
+        && this.renderer.globalData.fontManager.isLoaded
+        && (this.imagePreloader.loaded() || this.renderer.rendererType !== 'canvas')
+    ) {
         this.isLoaded = true;
@@ -262,7 +281,7 @@ dataManager.completeData(this.animationData, this.renderer.globalData.fontManager);
 AnimationItem.prototype.setSubframe = function(flag){
-    this.subframeEnabled = flag ? true : false;
+    this.isSubframeEnabled = !!flag;
 };
 
 AnimationItem.prototype.gotoFrame = function () {
-    this.currentFrame = this.subframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame;
+    this.currentFrame = this.isSubframeEnabled ? this.currentRawFrame : ~~this.currentRawFrame;
 
@@ -291,4 +310,5 @@ if(this.timeCompleted !== this.totalFrames && this.currentFrame > this.timeCompleted){
     }
-    if(this.isPaused === true){
+    if (this.isPaused === true) {
         this.isPaused = false;
+        this.audioController.resume();
         if(this._idle){
@@ -309,2 +329,3 @@ this._idle = false;
         this.trigger('_idle');
+        this.audioController.pause();
     }
@@ -506,4 +527,30 @@ };
 
+AnimationItem.prototype.setVolume = function (val, name) {
+    if (name && this.name !== name) {
+        return;
+    }
+    this.audioController.setVolume(val);
+};
+
+AnimationItem.prototype.getVolume = function () {
+    return this.audioController.getVolume();
+};
+
+AnimationItem.prototype.mute = function (name) {
+    if (name && this.name !== name) {
+        return;
+    }
+    this.audioController.mute();
+};
+
+AnimationItem.prototype.unmute = function (name) {
+    if(name && this.name !== name){
+        return;
+    }
+    this.audioController.unmute();
+};
+
 AnimationItem.prototype.updaFrameModifier = function () {
     this.frameModifier = this.frameMult * this.playSpeed * this.playDirection;
+    this.audioController.setRate(this.playSpeed * this.playDirection)
 };
@@ -510,0 +557,0 @@

player/js/animation/AnimationManager.js

@@ -166,3 +166,3 @@ var animationManager = (function(){
             var body = document.getElementsByTagName('body')[0];
-            body.innerHTML = '';
+            body.innerText = '';
             var div = createTag('div');
@@ -202,2 +202,23 @@ div.style.width = '100%';
 
+    function setVolume(val,animation) {
+        var i;
+        for(i=0;i<len;i+=1){
+            registeredAnimations[i].animation.setVolume(val, animation);
+        }
+    }
+
+    function mute(animation) {
+        var i;
+        for(i=0;i<len;i+=1){
+            registeredAnimations[i].animation.mute(animation);
+        }
+    }
+
+    function unmute(animation) {
+        var i;
+        for(i=0;i<len;i+=1){
+            registeredAnimations[i].animation.unmute(animation);
+        }
+    }
+
     moduleOb.registerAnimation = registerAnimation;
@@ -218,4 +239,7 @@ moduleOb.loadAnimation = loadAnimation;
     moduleOb.unfreeze = unfreeze;
+    moduleOb.setVolume = setVolume;
+    moduleOb.mute = mute;
+    moduleOb.unmute = unmute;
     moduleOb.getRegisteredAnimations = getRegisteredAnimations;
     return moduleOb;
 }());

player/js/effects/EffectsManagerPlaceholder.js

@@ -1,1 +0,3 @@
-function EffectsManager(){}
+function EffectsManager(){
+    this.effectElements = [];
+}

player/js/elements/canvasElements/CVShapeElement.js

@@ -185,3 +185,3 @@ function CVShapeElement(data, globalData, comp) {
             
-        }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd'){
+        }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'pb'){
             if(!processedPos){
@@ -188,0 +188,0 @@ modifier = ShapeModifiers.getModifier(arr[i].ty);

player/js/elements/htmlElements/HImageElement.js

@@ -24,2 +24,3 @@ function HImageElement(data,globalData,comp){
     }
+    img.crossOrigin = 'anonymous';
     img.src = assetPath;
@@ -26,0 +27,0 @@ if(this.data.ln){

player/js/elements/svgElements/effects/SVGDropShadowEffect.js

@@ -1,6 +0,7 @@
-function SVGDropShadowEffect(filter, filterManager){
-    filter.setAttribute('x','-100%');
-    filter.setAttribute('y','-100%');
-    filter.setAttribute('width','400%');
-    filter.setAttribute('height','400%');
+function SVGDropShadowEffect(filter, filterManager) {
+    var filterSize = filterManager.container.globalData.renderConfig.filterSize
+    filter.setAttribute('x', filterSize.x);
+    filter.setAttribute('y', filterSize.y);
+    filter.setAttribute('width', filterSize.width);
+    filter.setAttribute('height', filterSize.height);
     this.filterManager = filterManager;
@@ -7,0 +8,0 @@

player/js/elements/svgElements/SVGShapeElement.js

@@ -243,3 +243,3 @@ function SVGShapeElement(data,globalData,comp){
 
-        }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'ms'){
+        }else if(arr[i].ty == 'tm' || arr[i].ty == 'rd' || arr[i].ty == 'ms' || arr[i].ty == 'pb'){
             if(!processedPos){
@@ -246,0 +246,0 @@ modifier = ShapeModifiers.getModifier(arr[i].ty);

player/js/module_worker.js

@@ -49,2 +49,5 @@ var lottiejs = (function(window) {
     lottiejs.unfreeze = animationManager.unfreeze;
+    lottie.setVolume = animationManager.setVolume;
+    lottie.mute = animationManager.mute;
+    lottie.unmute = animationManager.unmute;
     lottiejs.getRegisteredAnimations = animationManager.getRegisteredAnimations;
@@ -51,0 +54,0 @@ lottiejs.version = '[[BM_VERSION]]';

player/js/module.js

@@ -94,2 +94,5 @@ "use strict";
 lottie.unfreeze = animationManager.unfreeze;
+lottie.setVolume = animationManager.setVolume;
+lottie.mute = animationManager.mute;
+lottie.unmute = animationManager.unmute;
 lottie.getRegisteredAnimations = animationManager.getRegisteredAnimations;
@@ -96,0 +99,0 @@ lottie.__getFactory = getFactory;

player/js/renderers/BaseRenderer.js

@@ -32,2 +32,4 @@ function BaseRenderer(){}
             return this.createText(layer);
+        case 6:
+            return this.createAudio(layer);
         case 13:
@@ -43,2 +45,6 @@ return this.createCamera(layer);
 
+BaseRenderer.prototype.createAudio = function(data){
+    return new AudioElement(data, this.globalData, this);
+};
+
 BaseRenderer.prototype.buildAllItems = function(){
@@ -122,2 +128,3 @@ var i, len = this.layers.length;
     this.globalData.imageLoader = this.animationItem.imagePreloader;
+    this.globalData.audioController = this.animationItem.audioController;
     this.globalData.frameId = 0;
@@ -124,0 +131,0 @@ this.globalData.frameRate = animData.fr;

player/js/renderers/CanvasRenderer.js

@@ -251,4 +251,4 @@ function CanvasRenderer(animationItem, config){
 CanvasRenderer.prototype.destroy = function () {
-    if(this.renderConfig.clearCanvas) {
-        this.animationItem.wrapper.innerHTML = '';
+    if(this.renderConfig.clearCanvas && this.animationItem.wrapper) {
+        this.animationItem.wrapper.innerText = '';
     }
@@ -255,0 +255,0 @@ var i, len = this.layers ? this.layers.length : 0;

player/js/renderers/HybridRenderer.js

@@ -8,3 +8,9 @@ function HybridRenderer(animationItem, config){
         imagePreserveAspectRatio: (config && config.imagePreserveAspectRatio) || 'xMidYMid slice',
-        hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true
+        hideOnTransparent: (config && config.hideOnTransparent === false) ? false : true,
+        filterSize: {
+            width: config && config.filterSize && config.filterSize.width || '400%',
+            height: config && config.filterSize && config.filterSize.height || '400%',
+            x: config && config.filterSize && config.filterSize.x || '-100%',
+            y: config && config.filterSize && config.filterSize.y || '-100%',
+        }
     };
@@ -231,3 +237,5 @@ this.globalData = {
 HybridRenderer.prototype.destroy = function () {
-    this.animationItem.wrapper.innerHTML = '';
+    if (this.animationItem.wrapper) {
+        this.animationItem.wrapper.innerText = '';
+    }
     this.animationItem.container = null;
@@ -234,0 +242,0 @@ this.globalData.defs = null;

player/js/renderers/SVGRenderer.js

@@ -40,3 +40,9 @@ function SVGRenderer(animationItem, config){
         id: (config && config.id) || '',
-        focusable: config && config.focusable
+        focusable: config && config.focusable,
+        filterSize: {
+            width: config && config.filterSize && config.filterSize.width || '100%',
+            height: config && config.filterSize && config.filterSize.height || '100%',
+            x: config && config.filterSize && config.filterSize.x || '0%',
+            y: config && config.filterSize && config.filterSize.y || '0%',
+        }
     };
@@ -138,3 +144,5 @@
 SVGRenderer.prototype.destroy = function () {
-    this.animationItem.wrapper.innerHTML = '';
+    if (this.animationItem.wrapper) {
+        this.animationItem.wrapper.innerText = '';
+    }
     this.layerElement = null;
@@ -141,0 +149,0 @@ this.globalData.defs = null;

player/js/utils/expressions/EffectInterface.js

@@ -16,4 +16,5 @@ var EffectsExpressionInterface = (function (){
 
-            return function(name){
-                var effects = elem.data.ef || [], i = 0, len = effects.length;
+            var effects = elem.data.ef || [];
+            var groupInterface = function(name){
+                i = 0, len = effects.length;
                 while(i<len) {
@@ -26,2 +27,8 @@ if(name === effects[i].nm || name === effects[i].mn || name === effects[i].ix){
             };
+            Object.defineProperty(groupInterface, 'numProperties', {
+                get: function(){
+                    return effects.length;
+                }
+            });
+            return groupInterface
         }
@@ -31,21 +38,4 @@ }
     function createGroupInterface(data,elements, propertyGroup, elem){
-        var effectElements = [];
-        var i, len = data.ef.length;
-        for(i=0;i<len;i+=1){
-            if(data.ef[i].ty === 5){
-                effectElements.push(createGroupInterface(data.ef[i],elements.effectElements[i],elements.effectElements[i].propertyGroup, elem));
-            } else {
-                effectElements.push(createValueInterface(elements.effectElements[i],data.ef[i].ty, elem, _propertyGroup));
-            }
-        }
 
-        function _propertyGroup(val) {
-            if(val === 1){
-               return groupInterface;
-            } else{
-               return propertyGroup(val-1);
-            }
-        }
-
-        var groupInterface = function(name){
+        function groupInterface(name){
             var effects = data.ef, i = 0, len = effects.length;
@@ -62,6 +52,15 @@ while(i<len) {
             }
-            return effectElements[0]();
+            throw new Error();
         };
+        var _propertyGroup = propertyGroupFactory(groupInterface, propertyGroup);
 
-        groupInterface.propertyGroup = _propertyGroup;
+        var effectElements = [];
+        var i, len = data.ef.length;
+        for(i=0;i<len;i+=1){
+            if(data.ef[i].ty === 5){
+                effectElements.push(createGroupInterface(data.ef[i],elements.effectElements[i],elements.effectElements[i].propertyGroup, elem));
+            } else {
+                effectElements.push(createValueInterface(elements.effectElements[i],data.ef[i].ty, elem, _propertyGroup));
+            }
+        }
 
@@ -75,6 +74,10 @@ if(data.mn === 'ADBE Color Control'){
         }
-        Object.defineProperty(groupInterface, 'numProperties', {
-            get: function(){
-                return data.np;
-            }
+        Object.defineProperties(groupInterface, {
+            numProperties: {
+                get: function(){
+                    return data.np;
+                }
+            },
+            _name: { value: data.nm },
+            propertyGroup: {value: _propertyGroup},
         });
@@ -95,3 +98,3 @@ groupInterface.active = groupInterface.enabled = data.en !== 0;
         if(element.p.setGroupProperty) {
-            element.p.setGroupProperty(propertyGroup);
+            element.p.setGroupProperty(PropertyInterface('', propertyGroup));
         }
@@ -98,0 +101,0 @@

player/js/utils/expressions/ExpressionManager.js

@@ -653,3 +653,2 @@ var ExpressionManager = (function(){
 
-
             //TODO: Check if it's possible to return on ShapeInterface the .v value
@@ -656,0 +655,0 @@ if (scoped_bm_rt.propType === "shape") {

player/js/utils/expressions/ExpressionPropertyDecorator.js

@@ -184,7 +184,73 @@ (function addPropertyDecorator() {
     function getTransformValueAtTime(time) {
-        console.warn('Transform at time not supported');
+        if (!this._transformCachingAtTime) {
+            this._transformCachingAtTime = {
+                v: new Matrix(),
+            };
+        }
+        ////
+        var matrix = this._transformCachingAtTime.v;
+        matrix.cloneFromProps(this.pre.props);
+        if (this.appliedTransformations < 1) {
+            var anchor = this.a.getValueAtTime(time);
+            matrix.translate(
+                -anchor[0] * this.a.mult,
+                -anchor[1] * this.a.mult,
+                anchor[2] * this.a.mult
+            );
+        }
+        if (this.appliedTransformations < 2) {
+            var scale = this.s.getValueAtTime(time);
+            matrix.scale(
+                scale[0] * this.s.mult,
+                scale[1] * this.s.mult,
+                scale[2] * this.s.mult
+            );
+        }
+        if (this.sk && this.appliedTransformations < 3) {
+            var skew = this.sk.getValueAtTime(time);
+            var skewAxis = this.sa.getValueAtTime(time);
+            matrix.skewFromAxis(-skew * this.sk.mult, skewAxis * this.sa.mult);
+        }
+        if (this.r && this.appliedTransformations < 4) {
+            var rotation = this.r.getValueAtTime(time);
+            matrix.rotate(-rotation * this.r.mult);
+        } else if (!this.r && this.appliedTransformations < 4){
+            var rotationZ = this.rz.getValueAtTime(time);
+            var rotationY = this.ry.getValueAtTime(time);
+            var rotationX = this.rx.getValueAtTime(time);
+            var orientation = this.or.getValueAtTime(time);
+            matrix.rotateZ(-rotationZ * this.rz.mult)
+            .rotateY(rotationY * this.ry.mult)
+            .rotateX(rotationX * this.rx.mult)
+            .rotateZ(-orientation[2] * this.or.mult)
+            .rotateY(orientation[1] * this.or.mult)
+            .rotateX(orientation[0] * this.or.mult);
+        }
+        if (this.data.p && this.data.p.s) {
+            var positionX = this.px.getValueAtTime(time);
+            var positionY = this.py.getValueAtTime(time);
+            if (this.data.p.z) {
+                var positionZ = this.pz.getValueAtTime(time);
+                matrix.translate(
+                    positionX * this.px.mult,
+                    positionY * this.py.mult,
+                    -positionZ * this.pz.mult
+                );
+            } else {
+                matrix.translate(positionX * this.px.mult, positionY * this.py.mult, 0);
+            }
+        } else {
+            var position = this.p.getValueAtTime(time);
+            matrix.translate(
+                position[0] * this.p.mult,
+                position[1] * this.p.mult,
+                -position[2] * this.p.mult
+            );
+        }
+        return matrix;
+        ////
     }
 
     function getTransformStaticValueAtTime(time) {
-
+        return this.v.clone(new Matrix());
     }
@@ -191,0 +257,0 @@

player/js/utils/expressions/ExpressionValueFactory.js

@@ -27,2 +27,3 @@ var ExpressionPropertyInterface = (function() {
                 valueProp.time = property.keyframes[pos-1].t / property.elem.comp.globalData.frameRate;
+                valueProp.value = type === 'unidimensional' ? value[0] : value;
                 return valueProp;
@@ -66,3 +67,3 @@ }
         var mult = 1 / property.mult;
-        var len = property.pv.length;
+        var len = (property.data && property.data.l) || property.pv.length;
         var expressionValue = createTypedArray('float32', len);
@@ -69,0 +70,0 @@ var arrValue = createTypedArray('float32', len);

player/js/utils/expressions/LayerInterface.js

 var LayerExpressionInterface = (function (){
-    function toWorld(arr, time){
+
+    function getMatrix(time) {
         var toWorldMat = new Matrix();
-        toWorldMat.reset();
-        var transformMat;
-        if(time) {
-            //Todo implement value at time on transform properties
-            //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
-            transformMat = this._elem.finalTransform.mProp;
+        if (time !== undefined) {
+            var propMatrix = this._elem.finalTransform.mProp.getValueAtTime(time);
+            propMatrix.clone(toWorldMat);
         } else {
-            transformMat = this._elem.finalTransform.mProp;
+            var transformMat = this._elem.finalTransform.mProp;
+            transformMat.applyToMatrix(toWorldMat);
         }
-        transformMat.applyToMatrix(toWorldMat);
+        return toWorldMat;
+    }
+
+    function toWorldVec(arr, time){
+        var toWorldMat = this.getMatrix(time);
+        toWorldMat.props[12] = toWorldMat.props[13] = toWorldMat.props[14] = 0;
+        return this.applyPoint(toWorldMat, arr);
+    }
+
+    function toWorld(arr, time){
+        var toWorldMat = this.getMatrix(time);
+        return this.applyPoint(toWorldMat, arr);
+    }
+
+    function fromWorldVec(arr, time){
+        var toWorldMat = this.getMatrix(time);
+        toWorldMat.props[12] = toWorldMat.props[13] = toWorldMat.props[14] = 0;
+        return this.invertPoint(toWorldMat, arr);
+    }
+
+    function fromWorld(arr, time){
+        var toWorldMat = this.getMatrix(time);
+        return this.invertPoint(toWorldMat, arr);
+    }
+
+    function applyPoint(matrix, arr) {
         if(this._elem.hierarchy && this._elem.hierarchy.length){
             var i, len = this._elem.hierarchy.length;
             for(i=0;i<len;i+=1){
-                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
+                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(matrix);
             }
-            return toWorldMat.applyToPointArray(arr[0],arr[1],arr[2]||0);
         }
-        return toWorldMat.applyToPointArray(arr[0],arr[1],arr[2]||0);
+        return matrix.applyToPointArray(arr[0],arr[1],arr[2]||0);
     }
-    function fromWorld(arr, time){
-        var toWorldMat = new Matrix();
-        toWorldMat.reset();
-        var transformMat;
-        if(time) {
-            //Todo implement value at time on transform properties
-            //transformMat = this._elem.finalTransform.mProp.getValueAtTime(time);
-            transformMat = this._elem.finalTransform.mProp;
-        } else {
-            transformMat = this._elem.finalTransform.mProp;
-        }
-        transformMat.applyToMatrix(toWorldMat);
-        if(this._elem.hierarchy && this._elem.hierarchy.length){
+
+    function invertPoint(matrix, arr) {
+        if (this._elem.hierarchy && this._elem.hierarchy.length){
             var i, len = this._elem.hierarchy.length;
             for(i=0;i<len;i+=1){
-                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(toWorldMat);
+                this._elem.hierarchy[i].finalTransform.mProp.applyToMatrix(matrix);
             }
-            return toWorldMat.inversePoint(arr);
         }
-        return toWorldMat.inversePoint(arr);
+        return matrix.inversePoint(arr);
     }
+
     function fromComp(arr){
@@ -91,6 +104,13 @@ var toWorldMat = new Matrix();
                     return _thisLayerFunction.effect;
+                case "ADBE Text Properties":
+                    return _thisLayerFunction.textInterface;
             }
         }
+        _thisLayerFunction.getMatrix = getMatrix;
+        _thisLayerFunction.invertPoint = invertPoint;
+        _thisLayerFunction.applyPoint = applyPoint;
         _thisLayerFunction.toWorld = toWorld;
+        _thisLayerFunction.toWorldVec = toWorldVec;
         _thisLayerFunction.fromWorld = fromWorld;
+        _thisLayerFunction.fromWorldVec = fromWorldVec;
         _thisLayerFunction.toComp = toWorld;
@@ -97,0 +117,0 @@ _thisLayerFunction.fromComp = fromComp;

player/js/utils/expressions/ShapeInterface.js

@@ -22,3 +22,3 @@ var ShapeExpressionInterface = (function(){
             } else if(shapes[i].ty == 'sh'){
-                arr.push(pathInterfaceFactory(shapes[i],view[i],propertyGroup));
+                arr.push(ShapePathInterface(shapes[i],view[i],propertyGroup));
             } else if(shapes[i].ty == 'rc'){
@@ -49,11 +49,8 @@ arr.push(rectInterfaceFactory(shapes[i],view[i],propertyGroup));
        };
-       interfaceFunction.propertyGroup = function(val){
-           if(val === 1){
-               return interfaceFunction;
-           } else{
-               return propertyGroup(val-1);
-           }
-       };
+
+       interfaceFunction.propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
        interfaces = iterateElements(shape.it, view.it, interfaceFunction.propertyGroup);
        interfaceFunction.numProperties = interfaces.length;
+       var transformInterface = transformInterfaceFactory(shape.it[shape.it.length - 1],view.it[view.it.length - 1],interfaceFunction.propertyGroup);
+       interfaceFunction.transform = transformInterface;
        interfaceFunction.propertyIndex = shape.cix;
@@ -79,9 +76,3 @@ interfaceFunction._name = shape.nm;
         };
-        interfaceFunction.propertyGroup = function(val){
-            if(val === 1){
-                return interfaceFunction;
-            } else{
-                return propertyGroup(val-1);
-            }
-        };
+        interfaceFunction.propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
         var content = contentsInterfaceFactory(shape,view,interfaceFunction.propertyGroup);
@@ -123,4 +114,4 @@ var transformInterface = transformInterfaceFactory(shape.it[shape.it.length - 1],view.it[view.it.length - 1],interfaceFunction.propertyGroup);
 
-        view.c.setGroupProperty(propertyGroup);
-        view.o.setGroupProperty(propertyGroup);
+        view.c.setGroupProperty(PropertyInterface('Color', propertyGroup));
+        view.o.setGroupProperty(PropertyInterface('Opacity', propertyGroup));
         return interfaceFunction;
@@ -130,16 +121,4 @@ }
     function strokeInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val === 1){
-                return ob;
-            } else{
-                return propertyGroup(val-1);
-            }
-        }
-        function _dashPropertyGroup(val){
-            if(val === 1){
-                return dashOb;
-            } else{
-                return _propertyGroup(val-1);
-            }
-        }
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+        var _dashPropertyGroup = propertyGroupFactory(dashOb, _propertyGroup);
         function addPropertyToDashOb(i) {
@@ -185,5 +164,5 @@ Object.defineProperty(dashOb, shape.d[i].nm, {
 
-        view.c.setGroupProperty(_propertyGroup);
-        view.o.setGroupProperty(_propertyGroup);
-        view.w.setGroupProperty(_propertyGroup);
+        view.c.setGroupProperty(PropertyInterface('Color', _propertyGroup));
+        view.o.setGroupProperty(PropertyInterface('Opacity', _propertyGroup));
+        view.w.setGroupProperty(PropertyInterface('Stroke Width', _propertyGroup));
         return interfaceFunction;
@@ -193,15 +172,3 @@ }
     function trimInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        interfaceFunction.propertyIndex = shape.ix;
 
-        view.s.setGroupProperty(_propertyGroup);
-        view.e.setGroupProperty(_propertyGroup);
-        view.o.setGroupProperty(_propertyGroup);
-
         function interfaceFunction(val){
@@ -218,3 +185,10 @@ if(val === shape.e.ix || val === 'End' || val === 'end'){
         }
+
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
         interfaceFunction.propertyIndex = shape.ix;
+
+        view.s.setGroupProperty(PropertyInterface('Start', _propertyGroup));
+        view.e.setGroupProperty(PropertyInterface('End', _propertyGroup));
+        view.o.setGroupProperty(PropertyInterface('Offset', _propertyGroup));
+        interfaceFunction.propertyIndex = shape.ix;
         interfaceFunction.propertyGroup = propertyGroup;
@@ -239,19 +213,2 @@
     function transformInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        view.transform.mProps.o.setGroupProperty(_propertyGroup);
-        view.transform.mProps.p.setGroupProperty(_propertyGroup);
-        view.transform.mProps.a.setGroupProperty(_propertyGroup);
-        view.transform.mProps.s.setGroupProperty(_propertyGroup);
-        view.transform.mProps.r.setGroupProperty(_propertyGroup);
-        if(view.transform.mProps.sk){
-            view.transform.mProps.sk.setGroupProperty(_propertyGroup);
-            view.transform.mProps.sa.setGroupProperty(_propertyGroup);
-        }
-        view.transform.op.setGroupProperty(_propertyGroup);
 
@@ -280,4 +237,15 @@ function interfaceFunction(value){
             }
-
         }
+        
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+        view.transform.mProps.o.setGroupProperty(PropertyInterface('Opacity', _propertyGroup));
+        view.transform.mProps.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+        view.transform.mProps.a.setGroupProperty(PropertyInterface('Anchor Point', _propertyGroup));
+        view.transform.mProps.s.setGroupProperty(PropertyInterface('Scale', _propertyGroup));
+        view.transform.mProps.r.setGroupProperty(PropertyInterface('Rotation', _propertyGroup));
+        if(view.transform.mProps.sk){
+            view.transform.mProps.sk.setGroupProperty(PropertyInterface('Skew', _propertyGroup));
+            view.transform.mProps.sa.setGroupProperty(PropertyInterface('Skew Angle', _propertyGroup));
+        }
+        view.transform.op.setGroupProperty(PropertyInterface('Opacity', _propertyGroup));
         Object.defineProperties(interfaceFunction, {
@@ -314,13 +282,3 @@ 'opacity': {
     function ellipseInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        interfaceFunction.propertyIndex = shape.ix;
-        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
-        prop.s.setGroupProperty(_propertyGroup);
-        prop.p.setGroupProperty(_propertyGroup);
+
         function interfaceFunction(value){
@@ -334,2 +292,7 @@ if(shape.p.ix === value){
         }
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+        interfaceFunction.propertyIndex = shape.ix;
+        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+        prop.s.setGroupProperty(PropertyInterface('Size', _propertyGroup));
+        prop.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
 
@@ -350,20 +313,2 @@ Object.defineProperties(interfaceFunction, {
     function starInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
-        interfaceFunction.propertyIndex = shape.ix;
-        prop.or.setGroupProperty(_propertyGroup);
-        prop.os.setGroupProperty(_propertyGroup);
-        prop.pt.setGroupProperty(_propertyGroup);
-        prop.p.setGroupProperty(_propertyGroup);
-        prop.r.setGroupProperty(_propertyGroup);
-        if(shape.ir){
-            prop.ir.setGroupProperty(_propertyGroup);
-            prop.is.setGroupProperty(_propertyGroup);
-        }
 
@@ -395,2 +340,15 @@ function interfaceFunction(value){
 
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+        interfaceFunction.propertyIndex = shape.ix;
+        prop.or.setGroupProperty(PropertyInterface('Outer Radius', _propertyGroup));
+        prop.os.setGroupProperty(PropertyInterface('Outer Roundness', _propertyGroup));
+        prop.pt.setGroupProperty(PropertyInterface('Points', _propertyGroup));
+        prop.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+        prop.r.setGroupProperty(PropertyInterface('Rotation', _propertyGroup));
+        if(shape.ir){
+            prop.ir.setGroupProperty(PropertyInterface('Inner Radius', _propertyGroup));
+            prop.is.setGroupProperty(PropertyInterface('Inner Roundness', _propertyGroup));
+        }
+
         Object.defineProperties(interfaceFunction, {
@@ -425,14 +383,2 @@ 'position': {
     function rectInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
-        interfaceFunction.propertyIndex = shape.ix;
-        prop.p.setGroupProperty(_propertyGroup);
-        prop.s.setGroupProperty(_propertyGroup);
-        prop.r.setGroupProperty(_propertyGroup);
 
@@ -451,2 +397,10 @@ function interfaceFunction(value){
         }
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+
+        var prop = view.sh.ty === 'tm' ? view.sh.prop : view.sh;
+        interfaceFunction.propertyIndex = shape.ix;
+        prop.p.setGroupProperty(PropertyInterface('Position', _propertyGroup));
+        prop.s.setGroupProperty(PropertyInterface('Size', _propertyGroup));
+        prop.r.setGroupProperty(PropertyInterface('Rotation', _propertyGroup));
+
         Object.defineProperties(interfaceFunction, {
@@ -469,19 +423,14 @@ 'position': {
     function roundedInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
+       
+        function interfaceFunction(value){
+            if(shape.r.ix === value || 'Round Corners 1' === value){
+                return interfaceFunction.radius;
             }
         }
+
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
         var prop = view;
         interfaceFunction.propertyIndex = shape.ix;
-        prop.rd.setGroupProperty(_propertyGroup);
+        prop.rd.setGroupProperty(PropertyInterface('Radius', _propertyGroup));
 
-        function interfaceFunction(value){
-            if(shape.r.ix === value || 'Round Corners 1' === value){
-                return interfaceFunction.radius;
-            }
-
-        }
         Object.defineProperties(interfaceFunction, {
@@ -498,13 +447,2 @@ 'radius': {
     function repeaterInterfaceFactory(shape,view,propertyGroup){
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        var prop = view;
-        interfaceFunction.propertyIndex = shape.ix;
-        prop.c.setGroupProperty(_propertyGroup);
-        prop.o.setGroupProperty(_propertyGroup);
 
@@ -517,4 +455,9 @@ function interfaceFunction(value){
             }
+        }
 
-        }
+        var _propertyGroup = propertyGroupFactory(interfaceFunction, propertyGroup);
+        var prop = view;
+        interfaceFunction.propertyIndex = shape.ix;
+        prop.c.setGroupProperty(PropertyInterface('Copies', _propertyGroup));
+        prop.o.setGroupProperty(PropertyInterface('Offset', _propertyGroup));
         Object.defineProperties(interfaceFunction, {
@@ -533,43 +476,2 @@ 'copies': {
 
-    function pathInterfaceFactory(shape,view,propertyGroup){
-        var prop = view.sh;
-        function _propertyGroup(val){
-            if(val == 1){
-                return interfaceFunction;
-            } else {
-                return propertyGroup(--val);
-            }
-        }
-        prop.setGroupProperty(_propertyGroup);
-
-        function interfaceFunction(val){
-            if(val === 'Shape' || val === 'shape' || val === 'Path' || val === 'path' || val === 'ADBE Vector Shape' || val === 2){
-                return interfaceFunction.path;
-            }
-        }
-        Object.defineProperties(interfaceFunction, {
-            'path': {
-                get: function(){
-                    if(prop.k){
-                        prop.getValue();
-                    }
-                    return prop;
-                }
-            },
-            'shape': {
-                get: function(){
-                    if(prop.k){
-                        prop.getValue();
-                    }
-                    return prop;
-                }
-            },
-            '_name': { value: shape.nm },
-            'ix': { value: shape.ix },
-            'propertyIndex': { value: shape.ix },
-            'mn': { value: shape.mn }
-        });
-        return interfaceFunction;
-    }
-
     return function(shapes,view,propertyGroup) {
@@ -579,3 +481,8 @@ var interfaces;
             if(typeof value === 'number'){
-                return interfaces[value-1];
+                value = value === undefined ? 1 : value
+                if (value === 0) {
+                    return propertyGroup
+                } else {
+                    return interfaces[value-1];
+                }
             } else {
@@ -591,7 +498,11 @@ var i = 0, len = interfaces.length;
         }
-        _interfaceFunction.propertyGroup = propertyGroup;
-        interfaces = iterateElements(shapes, view, _interfaceFunction);
+        function parentGroupWrapper() {
+            return propertyGroup
+        }
+        _interfaceFunction.propertyGroup = propertyGroupFactory(_interfaceFunction, parentGroupWrapper);
+        interfaces = iterateElements(shapes, view, _interfaceFunction.propertyGroup);
         _interfaceFunction.numProperties = interfaces.length;
+        _interfaceFunction._name = 'Contents';
         return _interfaceFunction;
     };
 }());

player/js/utils/expressions/TextInterface.js

 var TextExpressionInterface = (function(){
 	return function(elem){
         var _prevValue, _sourceText;
-        function _thisLayerFunction(){
+        function _thisLayerFunction(name){
+            switch(name){
+                case "ADBE Text Document":
+                    return _thisLayerFunction.sourceText;
+            }
         }
@@ -6,0 +10,0 @@ Object.defineProperty(_thisLayerFunction, "sourceText", {

player/js/utils/expressions/TransformInterface.js

@@ -43,3 +43,2 @@ var TransformExpressionInterface = (function (){
         }
-
         Object.defineProperty(_thisFunction, "rotation", {
@@ -66,2 +65,9 @@ get: ExpressionPropertyInterface(transform.r || transform.rz)
             var _transformFactory = ExpressionPropertyInterface(transform.p);
+        } else {
+            var _px = ExpressionPropertyInterface(transform.px);
+            var _py = ExpressionPropertyInterface(transform.py);
+            var _pz;
+            if (transform.pz) {
+                _pz = ExpressionPropertyInterface(transform.pz);
+            }
         }
@@ -73,3 +79,6 @@ Object.defineProperty(_thisFunction, "position", {
                 } else {
-                    return [transform.px.v, transform.py.v, transform.pz ? transform.pz.v : 0];
+                    return [
+                        _px(),
+                        _py(),
+                        _pz ? _pz() : 0];
                 }
@@ -76,0 +85,0 @@ }

player/js/utils/FontManager.js

@@ -15,4 +15,17 @@ var FontManager = (function(){
 
-    function setUpNode(font, family){
-        var appendedParentNode = document.querySelector('[data-lottie-font=' + font +']');
+    function trimFontOptions(font) {
+        var familyArray = font.split(',');
+        var i, len = familyArray.length;
+        var enabledFamilies = [];
+        for (i = 0; i < len; i += 1) {
+            if (familyArray[i] !== 'sans-serif' && familyArray[i] !== 'monospace') {
+                enabledFamilies.push(familyArray[i]);
+            }
+        }
+        return enabledFamilies.join(',');
+    }
+
+    function setUpNode(font, family){        
+        var fontSelector = (font + family).replace(/\s/g, '');
+        var appendedParentNode = document.querySelector('[data-lottie-font=' + fontSelector +']');
         var node, parentNode;
@@ -23,3 +36,3 @@
             parentNode.style.fontFamily    = family;
-            parentNode.setAttribute('data-lottie-font', font);
+            parentNode.setAttribute('data-lottie-font', fontSelector);
             node = createTag('span');
@@ -87,5 +100,5 @@ // Characters that vary significantly among different fonts
         if(loadedCount !== 0 && Date.now() - this.initTime < maxWaitingTime){
-            setTimeout(this.checkLoadedFonts.bind(this),20);
+            setTimeout(this.checkLoadedFontsBinded, 20);
         }else{
-            setTimeout(function(){this.isLoaded = true;}.bind(this),0);
+            setTimeout(this.setIsLoadedBinded, 10);
 
@@ -99,5 +112,7 @@ }
         //tHelper.style.fontFamily = fontData.fFamily;
+
+        var fontProps = getFontProperties(fontData);
         tHelper.setAttribute('font-family', fontData.fFamily);
-        tHelper.setAttribute('font-style', fontData.fStyle);
-        tHelper.setAttribute('font-weight', fontData.fWeight);
+        tHelper.setAttribute('font-style', fontProps.style);
+        tHelper.setAttribute('font-weight', fontProps.weight);
         tHelper.textContent = '1';
@@ -155,3 +170,3 @@ if(fontData.fClass){
                     s.type = "text/css";
-                    s.innerHTML = "@font-face {" + "font-family: "+fontArr[i].fFamily+"; font-style: normal; src: url('"+fontArr[i].fPath+"');}";
+                    s.innerText = "@font-face {" + "font-family: "+fontArr[i].fFamily+"; font-style: normal; src: url('"+fontArr[i].fPath+"');}";
                     defs.appendChild(s);
@@ -244,3 +259,8 @@ }
         }
-        if((typeof char === 'string' && char.charCodeAt(0) !== 13 || !char) && console && console.warn) {
+        if ((typeof char === 'string' && char.charCodeAt(0) !== 13 || !char)
+            && console
+            && console.warn
+            && !this._warned
+           ) {
+            this._warned = true
             console.warn('Missing character from exported characters list: ', char, style, font);
@@ -254,3 +274,5 @@ }
         var index = char.charCodeAt(0);
-        if(!fontData.cache[index + 1]) {
+
+        if (!lottie.__globalFontData[fontName]) lottie.__globalFontData[fontName] = { cache: [] };
+        if(!fontData.cache[index + 1] && !lottie.__globalFontData[fontName].cache[index + 1]) {
             var tHelper = fontData.helper;
@@ -266,9 +288,9 @@ //Canvas version
                 var singleSize = tHelper.getComputedTextLength();
-                fontData.cache[index + 1] = (doubleSize - singleSize)/100;
+                fontData.cache[index + 1] = lottie.__globalFontData[fontName].cache[index + 1] = (doubleSize - singleSize)/100;
             } else {
                 tHelper.textContent = char;
-                fontData.cache[index + 1] = (tHelper.getComputedTextLength())/100;
+                fontData.cache[index + 1] = lottie.__globalFontData[fontName].cache[index + 1] = (tHelper.getComputedTextLength())/100;
             }
         }
-        return fontData.cache[index + 1] * size;
+        return lottie.__globalFontData[fontName].cache[index + 1] * size;
     }
@@ -291,4 +313,4 @@
 
-    function loaded() {
-        return this.isLoaded;
+    function setIsLoaded() {
+        this.isLoaded = true
     }
@@ -301,3 +323,6 @@
         this.isLoaded = false;
+        this._warned = false;
         this.initTime = Date.now();
+        this.setIsLoadedBinded = this.setIsLoaded.bind(this)
+        this.checkLoadedFontsBinded = this.checkLoadedFonts.bind(this)
     };
@@ -307,12 +332,16 @@ //TODO: for now I'm adding these methods to the Class and not the prototype. Think of a better way to implement it.
 
-    Font.prototype.addChars = addChars;
-    Font.prototype.addFonts = addFonts;
-    Font.prototype.getCharData = getCharData;
-    Font.prototype.getFontByName = getFontByName;
-    Font.prototype.measureText = measureText;
-    Font.prototype.checkLoadedFonts = checkLoadedFonts;
-    Font.prototype.loaded = loaded;
+    var fontPrototype = {
+        addChars: addChars,
+        addFonts: addFonts,
+        getCharData: getCharData,
+        getFontByName: getFontByName,
+        measureText: measureText,
+        checkLoadedFonts: checkLoadedFonts,
+        setIsLoaded: setIsLoaded,
+    }
 
+    Font.prototype = fontPrototype;
+
     return Font;
 
-}());
+}());

player/js/utils/imagePreloader.js

@@ -40,7 +40,40 @@ var ImagePreloader = (function(){
 
+    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);
+        this._elementHelper.append(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.bind(this), false);
+        img.addEventListener('load', this._imageLoaded, false);
         img.addEventListener('error', function() {
@@ -96,11 +129,14 @@ ob.img = proxyImage;
 
-    return function ImagePreloader(){
-        this.loadAssets = loadAssets;
-        this.setAssetsPath = setAssetsPath;
-        this.setPath = setPath;
-        this.loaded = loaded;
-        this.destroy = destroy;
-        this.getImage = getImage;
-        this._createImageData = createImageData;
-        this._imageLoaded = imageLoaded;
+    function setCacheType(type, elementHelper) {
+        if (type === 'svg') {
+            this._elementHelper = elementHelper;
+            this._createImageData = this.createImageData.bind(this);
+        } else {
+            this._createImageData = this.createImgData.bind(this);
+        }
+    }
+
+    function ImagePreloader(type){
+        this._imageLoaded = imageLoaded.bind(this);
+        this.testImageLoaded = testImageLoaded.bind(this);
         this.assetsPath = '';
@@ -113,2 +149,17 @@ this.path = '';
     };
+
+    ImagePreloader.prototype = {
+        loadAssets: loadAssets,
+        setAssetsPath: setAssetsPath,
+        setPath: setPath,
+        loaded: loaded,
+        destroy: destroy,
+        getImage: getImage,
+        createImgData: createImgData,
+        createImageData: createImageData,
+        imageLoaded: imageLoaded,
+        setCacheType: setCacheType,
+    }
+
+    return ImagePreloader;
 }());

player/js/utils/PropertyFactory.js

@@ -391,2 +391,3 @@ var PropertyFactory = (function(){
         this.effectsSequence = [getValueAtCurrentTime.bind(this)];
+        this.data = data;
         this.keyframes = data.k;
@@ -393,0 +394,0 @@ this.offsetTime = elem.data.st;

player/js/utils/shapes/TrimModifier.js

@@ -111,2 +111,5 @@ function TrimModifier(){
             this.shapes[i].shape.paths = this.shapes[i].localShapeCollection;
+            if (this._mdf) {
+                this.shapes[i].pathsData.length = 0;
+            }
         }
@@ -113,0 +116,0 @@ } else if (!((e === 1 && s === 0) || (e===0 && s === 1))){

player/js/utils/text/TextProperty.js

@@ -180,34 +180,6 @@ function TextProperty(elem, data){
     var charData, cLength = 0;
-    var styles = fontData.fStyle ? fontData.fStyle.split(' ') : [];
 
-    var fWeight = 'normal', fStyle = 'normal';
-    len = styles.length;
-    var styleName;
-    for(i=0;i<len;i+=1){
-        styleName = styles[i].toLowerCase();
-        switch(styleName) {
-            case 'italic':
-            fStyle = 'italic';
-            break;
-            case 'bold':
-            fWeight = '700';
-            break;
-            case 'black':
-            fWeight = '900';
-            break;
-            case 'medium':
-            fWeight = '500';
-            break;
-            case 'regular':
-            case 'normal':
-            fWeight = '400';
-            break;
-            case 'light':
-            case 'thin':
-            fWeight = '200';
-            break;
-        }
-    }
-    documentData.fWeight = fontData.fWeight || fWeight;
-    documentData.fStyle = fStyle;
+    var fontProps = getFontProperties(fontData);
+    documentData.fWeight = fontProps.weight;
+    documentData.fStyle = fontProps.style;
     documentData.finalSize = documentData.s;
@@ -284,5 +256,3 @@ documentData.finalText = this.buildFinalText(documentData.t);
         charCode = currentChar.charCodeAt(0);
-        if (currentChar === ' '){
-            val = '\u00A0';
-        } else if (charCode === 13 || charCode === 3) {
+        if (charCode === 13 || charCode === 3) {
             uncollapsedSpaces = 0;
@@ -296,3 +266,3 @@ lineWidths.push(lineWidth);
         }else{
-            val = documentData.finalText[i];
+            val = currentChar;
         }
@@ -318,4 +288,4 @@ if(fontManager.chars){
             currentSize += cLength;
-            if(val === '' || val === '\u00A0' || i === len - 1){
-                if(val === '' || val === '\u00A0'){
+            if(val === '' || val === ' ' || i === len - 1){
+                if(val === '' || val === ' '){
                     currentSize -= cLength;
@@ -393,3 +363,3 @@ }
             letterData.anIndexes[j] = ind;
-            if((based == 1 && letterData.val !== '') || (based == 2 && letterData.val !== '' && letterData.val !== '\u00A0') || (based == 3 && (letterData.n || letterData.val == '\u00A0' || i == len - 1)) || (based == 4 && (letterData.n || i == len - 1))){
+            if((based == 1 && letterData.val !== '') || (based == 2 && letterData.val !== '' && letterData.val !== ' ') || (based == 3 && (letterData.n || letterData.val == ' ' || i == len - 1)) || (based == 4 && (letterData.n || i == len - 1))){
                 if(animatorData.s.rn === 1){
@@ -396,0 +366,0 @@ indexes.push(ind);

README.md

@@ -242,3 +242,3 @@ # Lottie for Web, [Android](https://github.com/airbnb/lottie-android), [iOS](https://github.com/airbnb/lottie-ios), [React Native](https://github.com/airbnb/lottie-react-native), and [Windows](https://aka.ms/lottie)
   rendererSettings: {
-    context: canvasContext, // the canvas context
+    context: canvasContext, // the canvas context, only support "2d" context
     preserveAspectRatio: 'xMinYMin slice', // Supports the same options as the svg element's preserveAspectRatio property
@@ -318,1 +318,31 @@ clearCanvas: false,
 - For missing mask in Safari browser, please call lottie.setLocationHref(locationHref) before animation is generated. It usually caused by usage of base tag in html. (see above for description of setLocationHref)
+
+## Contributors
+
+### Code Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="https://github.com/airbnb/lottie-web/graphs/contributors"><img src="https://opencollective.com/lottie-web/contributors.svg?width=890&button=false" /></a>
+
+### Financial Contributors
+
+Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/lottie-web/contribute)]
+
+#### Individuals
+
+<a href="https://opencollective.com/lottie-web"><img src="https://opencollective.com/lottie-web/individuals.svg?width=890"></a>
+
+#### Organizations
+
+Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/lottie-web/contribute)]
+
+<a href="https://opencollective.com/lottie-web/organization/0/website"><img src="https://opencollective.com/lottie-web/organization/0/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/1/website"><img src="https://opencollective.com/lottie-web/organization/1/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/2/website"><img src="https://opencollective.com/lottie-web/organization/2/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/3/website"><img src="https://opencollective.com/lottie-web/organization/3/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/4/website"><img src="https://opencollective.com/lottie-web/organization/4/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/5/website"><img src="https://opencollective.com/lottie-web/organization/5/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/6/website"><img src="https://opencollective.com/lottie-web/organization/6/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/7/website"><img src="https://opencollective.com/lottie-web/organization/7/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/8/website"><img src="https://opencollective.com/lottie-web/organization/8/avatar.svg"></a>
+<a href="https://opencollective.com/lottie-web/organization/9/website"><img src="https://opencollective.com/lottie-web/organization/9/avatar.svg"></a>

tasks/build.js

@@ -6,3 +6,3 @@ const fs = require('fs');
 const rootFolder = 'player/';
-const bm_version = '5.6.1';
+const bm_version = '5.7.5';
 const buildReducedVersion = process.argv[2] === 'reduced'
@@ -77,2 +77,6 @@ const defaultBuilds = ['full','svg_light','svg','canvas','html', 'canvas_light', 'html_light', 'canvas_worker']
 	{
+		src: 'js/utils/getFontProperties.js',
+		builds: defaultBuilds
+	},
+	{
 		src: 'js/utils/FontManager.js',
@@ -114,2 +118,6 @@ builds: defaultBuilds
 	{
+		src: 'js/utils/shapes/PuckerAndBloatModifier.js',
+		builds: defaultBuilds
+	},
+	{
 		src: 'js/utils/shapes/RepeaterModifier.js',
@@ -135,2 +143,6 @@ builds: defaultBuilds
 	{
+		src: 'js/utils/audio/AudioController.js',
+		builds: defaultBuilds
+	},
+	{
 		src: 'js/utils/imagePreloader.js',
@@ -332,2 +344,6 @@ builds: ['full','canvas','canvas_light','html','html_light','svg','svg_light']
 	{
+		src: 'js/elements/AudioElement.js',
+		builds: defaultBuilds
+	},
+	{
 		src: 'js/elements/svgElements/SVGCompElement.js',
@@ -378,5 +394,9 @@ builds: ['full','svg','svg_light','html','html_light']
 		src: 'js/elements/svgElements/SVGEffects.js',
-		builds: ['full','svg','svg_light','html','html_light']
+		builds: ['full','svg','html']
 	},
 	{
+		src: 'js/elements/svgElements/SVGEffectsPlaceholder.js',
+		builds: ['svg_light','html_light']
+	},
+	{
 		src: 'js/elements/canvasElements/CVContextData.js',
@@ -486,2 +506,14 @@ builds: ['full','canvas','canvas_light','canvas_worker']
 	{
+		src: 'js/utils/expressions/shapes/ShapePathInterface.js',
+		builds: ['full','svg','canvas','html','canvas_worker']
+	},
+	{
+		src: 'js/utils/expressions/PropertyGroupFactory.js',
+		builds: ['full','svg','canvas','html','canvas_worker']
+	},
+	{
+		src: 'js/utils/expressions/PropertyInterface.js',
+		builds: ['full','svg','canvas','html','canvas_worker']
+	},
+	{
 		src: 'js/utils/expressions/ShapeInterface.js',
@@ -532,3 +564,3 @@ builds: ['full','svg','canvas','html','canvas_worker']
 		src: 'js/effects/EffectsManagerPlaceholder.js',
-		builds: defaultBuilds
+		builds: ['svg_light','html_light']
 	},
@@ -634,3 +666,12 @@ {
 		try {
-			const result = UglifyJS.minify(code, {output: {ascii_only:true},toplevel:true});
+			const result = UglifyJS.minify(code, {
+				output: 
+					{
+						ascii_only:true
+					},
+					toplevel:true,
+					mangle: {
+						reserved: ['lottie']
+					}
+				});
 			if (result.error) {
@@ -637,0 +678,0 @@ reject(result.error)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

35820937

increased by20.51%

Number of package files

269

increased by4.26%

Lines of code

124561

increased by1.46%

Number of lines in readme file

347

increased by9.46%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes