feat: adjust dynamic properties - color

Author: hamdiwanis

src/LottieHelper.d.ts

@@ -0,0 +1,7 @@
+export declare class LottieHelper {
+  public static keyPath(keys: string[]);
+  public static getIntCallback(value);
+  public static getFloatCallback(value);
+  public static getPointFCallback(x: number, y: number); // float
+  public static getSizeCallback(h: number, w: number); // float
+}

src/nativescript-lottie.android.ts

@@ -6,16 +6,20 @@
  **********************************************************************************/
 /// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
 
-import { View } from 'tns-core-modules/ui/core/view';
-import { Property } from 'tns-core-modules/ui/core/properties';
+import { Color, View } from 'tns-core-modules/ui/core/view';
 import {
   LottieViewBase,
   srcProperty,
   loopProperty,
   autoPlayProperty,
-  cacheStrategyProperty
+  cacheStrategyProperty,
+  Theme,
+  themeProperty
 } from './nativescript-lottie.common';
 
+const LottieProperty = com.airbnb.lottie.LottieProperty;
+const LottieHelper = com.nativescript_lottie.LottieHelper;
+
 declare var com: any;
 
 export class LottieView extends LottieViewBase {
@@ -94,6 +98,25 @@ export class LottieView extends LottieViewBase {
     }
   }
 
+  // todo: add more dynamic properties
+  public [themeProperty.setNative](value: Theme[]) {
+    this.setTheme(value);
+  }
+
+  public setTheme(value: Theme[]) {
+    if (!this.nativeView) {
+      return;
+    }
+
+    if (value && value.length) {
+      value.forEach(dynamicValue => {
+        const callBack = LottieHelper.getIntCallback(new Color(dynamicValue.value).android);
+        const keyPath = LottieHelper.keyPath(dynamicValue.keyPath);
+        this.nativeView.addValueCallback(keyPath, LottieProperty.COLOR, callBack);
+      });
+    }
+  }
+
   public playAnimation(): void {
     if (this.nativeView) {
       this.nativeView.playAnimation();

src/nativescript-lottie.common.ts

@@ -43,3 +43,14 @@ export const cacheStrategyProperty = new Property<LottieViewBase, CacheStrategy>
 });
 
 cacheStrategyProperty.register(LottieViewBase);
+
+export interface Theme {
+  keyPath: string[];
+  value: string;
+}
+
+export const themeProperty = new Property<LottieViewBase, Theme[]>({
+  name: 'theme'
+});
+
+themeProperty.register(LottieViewBase);

src/nativescript-lottie.ios.ts

@@ -6,10 +6,20 @@
  **********************************************************************************/
 /// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
 
-import { layout } from 'tns-core-modules/ui/core/view';
-import { LottieViewBase, srcProperty, loopProperty, autoPlayProperty } from './nativescript-lottie.common';
+import { Color, layout } from 'tns-core-modules/ui/core/view';
+import {
+  LottieViewBase,
+  srcProperty,
+  loopProperty,
+  autoPlayProperty,
+  themeProperty,
+  Theme
+} from './nativescript-lottie.common';
 import { screen } from 'tns-core-modules/platform';
+
 declare var LOTAnimationView: any;
+declare var LOTKeypath: any;
+declare var LOTColorValueCallback: any;
 
 export class LottieView extends LottieViewBase {
   private _contentMode: any;
@@ -88,6 +98,27 @@ export class LottieView extends LottieViewBase {
     }
   }
 
+  // todo: add more dynamic properties
+  public [themeProperty.setNative](value: Theme[]) {
+    this.setTheme(value);
+  }
+
+  public setTheme(value: Theme[]) {
+    if (!this._animationView) {
+      setTimeout(() => this.setTheme(value), 50);
+      return;
+    }
+
+    if (value && value.length) {
+      value.forEach(dynamicValue => {
+        const callBack = LOTColorValueCallback.withCGColor(new Color(dynamicValue.value).ios.CGColor);
+        dynamicValue.keyPath.push('Color');
+        const keyPath = LOTKeypath.keypathWithString(dynamicValue.keyPath.join('.'));
+        this._animationView.setValueDelegateForKeypath(callBack, keyPath);
+      });
+    }
+  }
+
   public onLoaded() {
     super.onLoaded(); // ensure 'loaded' event fires
   }

src/platforms/android/include.gradle

@@ -1,7 +1,7 @@
 dependencies {
    def supportLibrariesVersion = '27.1.1'
    compile "com.android.support:support-v4:${supportLibrariesVersion}"
-   compile "com.android.support:appcompat-v7:{supportLibrariesVersion}"
-   debugCompile "com.android.support:design:{supportLibrariesVersion}"
+   compile "com.android.support:appcompat-v7:${supportLibrariesVersion}"
+   debugCompile "com.android.support:design:${supportLibrariesVersion}"
    compile 'com.airbnb.android:lottie:2.5.5'
 }