feat(lottie): generate lottie lib

projects/lottie/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/lottie",
+  "dest": "../../dist/@fivethree/lottie",
   "lib": {
     "entryFile": "src/public_api.ts"
   }

projects/lottie/package.json

@@ -1,8 +1,9 @@
 {
-  "name": "lottie",
+  "name": "@fivethree/lottie",
   "version": "0.0.1",
   "peerDependencies": {
-    "@angular/common": "^7.2.0",
-    "@angular/core": "^7.2.0"
+    "@angular/common": "^7.0.0",
+    "@angular/core": "^7.0.0",
+    "lottie-web": "^5.4.3"
   }
 }

projects/lottie/src/lib/lottie.component.ts

@@ -1,19 +1,58 @@
-import { Component, OnInit } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  Output,
+  EventEmitter,
+  Input
+} from '@angular/core';
+import * as lottie from 'lottie-web';
+import { LottieParams, LottieAnimation } from './symbols';
 
 @Component({
   selector: 'fiv-lottie',
   template: `
-    <p>
-      lottie works!
-    </p>
+    <div #lottieContainer [ngStyle]="{'width': viewWidth, 'height': viewHeight, 'overflow':'hidden', 'margin': '0 auto'}">
+    </div>
   `,
   styles: []
 })
 export class LottieComponent implements OnInit {
 
+  @Input() params: LottieParams;
+  @Input() width: number;
+  @Input() height: number;
+
+  @Output() animationCreated = new EventEmitter<LottieAnimation>();
+
+  @ViewChild('lottieContainer') lottieContainer: ElementRef;
+
+  public viewWidth: string;
+  public viewHeight: string;
+
+  private _params: LottieParams;
+
   constructor() { }
 
   ngOnInit() {
+    this._params = {
+      autoplay: this.params.autoplay,
+      animationData: this.params.animationData,
+      container: this.params.container || this.lottieContainer.nativeElement,
+      loop: this.params.loop,
+      name: this.params.name,
+      path: this.params.path || '',
+      renderer: this.params.renderer || 'svg',
+      rendererSettings: this.params.rendererSettings
+    };
+
+    const animation = lottie.loadAnimation(this._params);
+
+    this.viewWidth = this.width + 'px' || '100%';
+    this.viewHeight = this.height + 'px' || '100%';
+
+    this.animationCreated.emit(animation);
   }
 
 }

projects/lottie/src/lib/lottie.module.ts

@@ -1,10 +1,10 @@
+import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { LottieComponent } from './lottie.component';
 
 @NgModule({
   declarations: [LottieComponent],
-  imports: [
-  ],
+  imports: [CommonModule],
   exports: [LottieComponent]
 })
 export class LottieModule { }

projects/lottie/src/lib/symbols.ts

@@ -0,0 +1,68 @@
+export interface LottieParams {
+    autoplay?: boolean;
+    animationData?: any;
+    container?: any;
+    loop?: boolean | number;
+    name?: string;
+    path: string;
+    renderer?: 'svg' | 'canvas' | 'html';
+    rendererSettings?: LottieRenderSettings;
+}
+
+export interface LottieRenderSettings {
+    context: any;
+    scaleMode: 'noScale' | string;
+    clearCanvas: boolean;
+    progressiveLoad: boolean;
+    hideOnTransparent: boolean;
+    className: string;
+}
+
+export interface LottieAnimation {
+    /**
+     * @param name to target a specific animation
+     */
+    play(name?: string): void;
+    /**
+    * @param name to target a specific animation
+    */
+    pause(name?: string): void;
+    /**
+     * @param name to target a specific animation
+     */
+    stop(name?: string): void;
+    destroy(): void;
+    /**
+     * @param href usually pass as location.href. Its useful when you experience mask issue in safari where your url does not have # symbol.
+     */
+    setLocationHref(href: string);
+    /**
+     * @param speed 1 is normal speed, plays reverse if minus
+     * @param name to target a specific animation
+     */
+    setSpeed(speed: number, name?: string);
+    /**
+     * @param value frame value
+     * @param isFrame defines if first argument is a time based value or a frame based (default false)
+     */
+    goToAndStop(value: number, isFrame?: boolean);
+    /**
+     * @param value frame value
+     * @param isFrame defines if first argument is a time based value or a frame based (default false)
+     */
+    goToAndPlay(value: number, isFrame?: boolean);
+    /**
+     * @param direction 1 is forward, -1 is reverse
+     */
+    setDirection(direction: 1 | -1);
+    /**
+     * @param inFrames If true, returns duration in frames, if false, in seconds
+     */
+    getDuration(inFrames?: boolean): number;
+    /**
+     * @param segments Can contain 2 numeric values that will be used as first and last frame of the animation.
+     * Or can contain a sequence of arrays each with 2 numeric values.
+     * @param forceFlag If set to false, it will wait until the current segment is complete. If true, it will update values immediately.
+     */
+    playSegments(segments: any[], forceFlag?: boolean);
+}

projects/lottie/src/public_api.ts

@@ -2,6 +2,6 @@
  * Public API Surface of lottie
  */
 
-export * from './lib/lottie.service';
 export * from './lib/lottie.component';
 export * from './lib/lottie.module';
+export * from './lib/symbols';

src/app/home/home.module.ts

@@ -1,11 +1,12 @@
+
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 
 import { HomePage } from './home.page';
-import { ComponentsModule } from '../components/components.module';
+import { LottieModule } from '@fivethree/lottie';
 
 @NgModule({
   imports: [
@@ -18,8 +19,8 @@ import { ComponentsModule } from '../components/components.module';
         component: HomePage
       }
     ]),
-    ComponentsModule
+    LottieModule
   ],
   declarations: [HomePage]
 })
-export class HomePageModule {}
+export class HomePageModule { }

src/app/home/home.page.html

@@ -7,5 +7,8 @@
 </ion-header>
 
 <ion-content padding>
-  <app-lottie (animationCreated)=onAnimationCreated($event)></app-lottie>
-</ion-content>
+  <ion-card>
+    <fiv-lottie [params]="lottieParams" [width]="250" [height]="250" (animationCreated)=onAnimationCreated($event)>
+    </fiv-lottie>
+  </ion-card>
+</ion-content>

src/app/home/home.page.ts

@@ -1,6 +1,6 @@
-import { LottieAnimation } from './../components/lottie/lottie.component';
 import { Component } from '@angular/core';
 import { timer } from 'rxjs';
+import { LottieAnimation, LottieParams } from '@fivethree/lottie';
 
 @Component({
   selector: 'app-home',
@@ -9,9 +9,17 @@ import { timer } from 'rxjs';
 })
 export class HomePage {
 
+  lottieParams: LottieParams = {
+    path: 'assets/lottie/empty_box.json',
+    renderer: 'canvas',
+    // autoplay: true,
+    loop: true
+  };
+
   onAnimationCreated(animation: LottieAnimation) {
-    animation.play('h');
+    animation.play();
+    animation.setSpeed(0.8);
 
-    timer(1000).subscribe(() => animation.pause('h'));
+    timer(1000).subscribe(() => animation.pause());
   }
 }

tsconfig.json

@@ -18,11 +18,8 @@
       "dom"
     ],
     "paths": {
-      "lottie": [
-        "dist/lottie"
-      ],
-      "lottie/*": [
-        "dist/lottie/*"
+      "@fivethree/lottie": [
+        "dist/@fivethree/lottie"
       ]
     }
   }