chore(lottie): use @fivethree/lottie lib

Author: marcjulian

package-lock.json

@@ -26,6 +26,7 @@
     "@angular/router": "7.2.6",
     "@angular/service-worker": "7.2.6",
     "@fivethree/core": "0.5.10",
+    "@fivethree/lottie": "0.1.0",
     "@ionic-native/core": "5.2.0",
     "@ionic-native/splash-screen": "5.2.0",
     "@ionic-native/status-bar": "5.2.0",
@@ -34,7 +35,7 @@
     "@ngx-translate/http-loader": "4.0.0",
     "core-js": "2.6.5",
     "hammerjs": "2.0.8",
-    "ng-lottie": "0.3.2",
+    "lottie-web": "5.5.1",
     "ngx-markdown": "7.1.3",
     "rxjs": "6.3.3",
     "zone.js": "0.8.29"

package.json

@@ -14,7 +14,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { ServiceWorkerModule } from '@angular/service-worker';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FivethreeCoreModule } from '@fivethree/core';
-import { LottieAnimationViewModule } from 'ng-lottie';
+import { LottieModule } from '@fivethree/lottie';
 import { environment } from '../environments/environment';
 
 export function HttpLoaderFactory(http: HttpClient) {
@@ -39,7 +39,7 @@ export function HttpLoaderFactory(http: HttpClient) {
       }
     }),
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
-    LottieAnimationViewModule.forRoot(),
+    LottieModule,
   ],
   providers: [
     StatusBar,

src/app/app.module.ts

@@ -1,3 +1,4 @@
+import { LottieModule } from '@fivethree/lottie';
 import { ComponentsModule } from '@components/components.module';
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -8,7 +9,6 @@ import { IonicModule } from '@ionic/angular';
 
 import { PageNotFoundPage } from './page-not-found.page';
 import { TranslateModule } from '@ngx-translate/core';
-import { LottieAnimationViewModule } from 'ng-lottie';
 
 const routes: Routes = [
   {
@@ -25,7 +25,7 @@ const routes: Routes = [
     RouterModule.forChild(routes),
     ComponentsModule,
     TranslateModule.forChild(),
-    LottieAnimationViewModule
+    LottieModule
   ],
   declarations: [PageNotFoundPage]
 })

src/app/pages/page-not-found/page-not-found.module.ts

@@ -2,9 +2,8 @@
   <app-header></app-header>
   <div id="page-not-found-container">
     <div [fivCenter]>
-        <lottie-animation-view [options]="lottieConfig"
-        [width]="200" [height]="200" (animCreated)="handleAnimation($event)">
-      </lottie-animation-view>
+      <fiv-lottie [params]="lottieConfig" [width]="200" [height]="200" (animationCreated)="handleAnimation($event)">
+      </fiv-lottie>
       <h3 text-center translate>404.text</h3>
       <!-- <a text-center href="/">Go back to homepage</a> -->
     </div>

src/app/pages/page-not-found/page-not-found.page.html

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { LottieAnimation } from '@fivethree/lottie';
 
 @Component({
   selector: 'app-page-not-found',
@@ -8,7 +9,7 @@ import { Component, OnInit } from '@angular/core';
 export class PageNotFoundPage implements OnInit {
 
   lottieConfig: Object;
-  animation: any;
+  animation: LottieAnimation;
 
   constructor() {
     this.lottieConfig = {
@@ -22,7 +23,7 @@ export class PageNotFoundPage implements OnInit {
   ngOnInit() {
   }
 
-  handleAnimation(animation) {
+  handleAnimation(animation: LottieAnimation) {
     this.animation = animation;
     this.animation.setSpeed(0.8);
     this.animation.play();