feat: keyPathColors property (setColor as a property)

Author: farfromrefug

src/lottie.android.ts

@@ -9,6 +9,7 @@ import { Color, File, Utils } from '@nativescript/core';
 import {
     LottieViewBase,
     autoPlayProperty,
+    keyPathColorsProperty,
     loopProperty,
     progressProperty,
     renderModeProperty,
@@ -108,12 +109,14 @@ export class LottieView extends LottieViewBase {
         if (!this.loadedListener) {
             this.loadedListener = new com.airbnb.lottie.LottieOnCompositionLoadedListener({
                 onCompositionLoaded: (composition) => {
-                    this.notify({ eventName: 'compositionLoaded', composition });
+                    // delay just a bit so that it get received in sync load
+                    setTimeout(() => {
+                        this.notify({ eventName: 'compositionLoaded', composition });
+                    }, 0);
                 }
             });
         }
         this.nativeViewProtected.addLottieOnCompositionLoadedListener(this.loadedListener);
-
     }
 
     public disposeNativeView(): void {
@@ -186,11 +189,12 @@ export class LottieView extends LottieViewBase {
                     // view.setComposition(null);
                 } else {
                     view.setComposition(result.getValue());
+
                     //in sync loading we need to fire it ourselves
                     // if we dont differ it from now it wont be received
-                    setTimeout(() => {
-                        this.notify({ eventName: 'compositionLoaded', composition: result.getValue() });
-                    }, 0);
+                    // setTimeout(() => {
+                    //     this.notify({ eventName: 'compositionLoaded', composition: result.getValue() });
+                    // }, 0);
                 }
             }
             if (this.autoPlay) {
@@ -207,6 +211,9 @@ export class LottieView extends LottieViewBase {
     [renderModeProperty.setNative](renderMode) {
         this.nativeViewProtected.setRenderMode(renderMode);
     }
+    [keyPathColorsProperty.setNative](value) {
+        Object.keys(value).forEach((k) => this.setColor(value[k], k.split('|')));
+    }
 
     [autoPlayProperty.setNative](autoPlay: boolean) {
         if (autoPlay) {
@@ -224,7 +231,7 @@ export class LottieView extends LottieViewBase {
         }
     }
 
-    public setColor(value: Color, keyPath: string[]): void {
+    public setColor(value: Color | string, keyPath: string[]): void {
         const nativeView = this.nativeViewProtected;
         if (nativeView && value && keyPath && keyPath.length) {
             if (keyPath[keyPath.length - 1].toLowerCase() === 'color') {
@@ -249,8 +256,9 @@ export class LottieView extends LottieViewBase {
                 LottieKeyPath = com.airbnb.lottie.model.KeyPath;
             }
             // by using color filter we change all colors (STROKE_COLOR and COLOR)
+            const color = value instanceof Color ? value : new Color(value);
             // const colorFilter = new android.graphics.PorterDuffColorFilter(value.android, 	android.graphics.PorterDuff.Mode.SRC_ATOP) ;
-            const colorFilter = new com.airbnb.lottie.SimpleColorFilter(value.android);
+            const colorFilter = new com.airbnb.lottie.SimpleColorFilter(color.android);
             nativeView.addValueCallback(
                 new LottieKeyPath(nativeKeyPath as any),
                 LottieProperty.COLOR_FILTER,

src/lottie.common.ts

@@ -5,7 +5,11 @@
  * Version 1.0.0                                           [email protected]
  **********************************************************************************/
 
-import { CoreTypes, Property, View, booleanConverter } from '@nativescript/core';
+import { Color, CoreTypes, Property, View, booleanConverter } from '@nativescript/core';
+
+export interface KeyPathColors {
+    [k: string]: Color | string;
+}
 
 export class LottieViewBase extends View {
     public stretch: CoreTypes.ImageStretchType;
@@ -14,7 +18,13 @@ export class LottieViewBase extends View {
     public loop: boolean;
     public autoPlay: boolean;
     public progress: number;
+    public keyPathColors: KeyPathColors;
     public completionBlock: (animationFinished: boolean) => void;
+    // public abstract setColor(value: Color, keyPath: string[]): void;
+
+    // [keyPathColorsProperty.setNative](value) {
+    //     Object.keys(value).forEach((k) => this.setColor(value[k], k.split('|')));
+    // }
 }
 
 export const srcProperty = new Property<LottieViewBase, string>({
@@ -58,3 +68,8 @@ export const stretchProperty = new Property<LottieViewBase, CoreTypes.ImageStret
     affectsLayout: global.isIOS
 });
 stretchProperty.register(LottieViewBase);
+
+export const keyPathColorsProperty = new Property<LottieViewBase, KeyPathColors>({
+    name: 'keyPathColors'
+});
+keyPathColorsProperty.register(LottieViewBase);

src/lottie.ios.ts

@@ -6,7 +6,15 @@
  **********************************************************************************/
 
 import { Color, Utils, View, knownFolders, path } from '@nativescript/core';
-import { LottieViewBase, autoPlayProperty, loopProperty, progressProperty, srcProperty, stretchProperty } from './lottie.common';
+import {
+    LottieViewBase,
+    autoPlayProperty,
+    keyPathColorsProperty,
+    loopProperty,
+    progressProperty,
+    srcProperty,
+    stretchProperty
+} from './lottie.common';
 import { clamp } from './utils';
 
 const appPath = knownFolders.currentApp().path;
@@ -98,8 +106,9 @@ export class LottieView extends LottieViewBase {
                 keyPath.push('Color'); // ios expects the property as the last item in the keyPath
             }
 
+            const color = value instanceof Color ? value : new Color(value);
             this.nativeViewProtected.setColorValueForKeypath(
-                value.ios,
+                color.ios,
                 CompatibleAnimationKeypath.alloc().initWithKeypath(keyPath.join('.'))
             );
         }
@@ -306,4 +315,8 @@ export class LottieView extends LottieViewBase {
                 break;
         }
     }
+
+    [keyPathColorsProperty.setNative](value) {
+        Object.keys(value).forEach((k) => this.setColor(value[k], k.split('|')));
+    }
 }