Add Lottie engine

Author: EmmanuelLefevre

.htmlhintrc

@@ -3,6 +3,7 @@
   "attr-lowercase": [
     "*ngTemplateOutlet",
     "#logoImage",
+    "#lottieCanvas",
     "#renderContent",
     "(ngSubmit)",
     "[ariaLabel]",

package.json

@@ -100,7 +100,7 @@
     "@fortawesome/free-brands-svg-icons": "7.1.0",
     "@fortawesome/free-regular-svg-icons": "7.1.0",
     "@fortawesome/free-solid-svg-icons": "7.1.0",
-    "@lottiefiles/dotlottie-wc": "0.9.8",
+    "@lottiefiles/dotlottie-web": "0.67.0",
     "@ngx-translate/core": "17.0.0",
     "@ngx-translate/http-loader": "17.0.0",
     "rxjs": "7.8.2",

pnpm-lock.yaml

@@ -13,6 +13,13 @@
   RewriteRule . /index.html [L]
 </IfModule>
 
+<IfModule mod_mime.c>
+  # Allows Apache to properly serve Lottie animations and its engine
+  AddType application/wasm .wasm
+  AddType application/zip .lottie
+  AddType application/json .json
+</IfModule>
+
 <IfModule mod_headers.c>
   # Tell browser to only communicate via HTTPS
   Header set Strict-Transport-Security "max-age=31536000; includeSubDomains"
@@ -31,5 +38,5 @@
 
   # ONLY allow scripts from your own site, YouTube AND dicebear
   # Note : If you are using Google fonts or external APIs, you will need to add them here.
-  Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://www.youtube.com https://s.ytimg.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://i.ytimg.com https://api.dicebear.com; connect-src 'self' https://api.votre-domaine.com; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; object-src 'none'; base-uri 'self';"
+  Header set Content-Security-Policy "default-src 'self'; script-src 'self' 'wasm-unsafe-eval' https://www.youtube.com https://s.ytimg.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://i.ytimg.com https://api.dicebear.com; connect-src 'self' https://api.votre-domaine.com; frame-src 'self' https://www.youtube.com https://www.youtube-nocookie.com; object-src 'none'; base-uri 'self';"
 </IfModule>

public/.htaccess

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ActivatedRoute, NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { By } from '@angular/platform-browser';

src/app/app.component.spec.ts

@@ -4,6 +4,7 @@ import { provideTranslateService, TranslateLoader, TranslateService } from '@ngx
 import { provideClientHydration } from '@angular/platform-browser';
 import { provideRouter } from '@angular/router';
 import { catchError, firstValueFrom, Observable, of } from 'rxjs';
+import { DotLottie } from '@lottiefiles/dotlottie-web';
 
 import { ROUTES } from '@app/app.routes';
 import { authInterceptor } from '@core/interceptor/auth/auth.interceptor';
@@ -36,6 +37,8 @@ export const APP_CONFIG: ApplicationConfig = {
       withInterceptors(HTTP_INTERCEPTORS)
     ),
     provideAppInitializer(async() => {
+      DotLottie.setWasmUrl('/assets/wasm/dotlottie-player.wasm');
+
       const AUTH_SERVICE = inject(AuthService);
       const TRANSLATE = inject(TranslateService);
 

src/app/app.config.ts

@@ -1,13 +1,12 @@
 <section class="unknown-error">
   <div class="unknown-error__content">
     <div class="unknown-error__animation-wrapper">
-      <dotlottie-wc
-        src="assets/animations/unknown-error-abduction.lottie"
-        autoplay
-        loop
+      <canvas
+        #lottieCanvas
         role="img"
         [attr.aria-label]="'PAGES.ERROR.UNKNOWN.IMG.ALT.ABDUCTION' | translate"
-        class="unknown-error__lottie" />
+        class="unknown-error__lottie">
+      </canvas>
     </div>
 
     <h4 class="unknown-error__title">

src/app/shared/error-handler/error-views/unknown-error/unknown-error.component.html

@@ -9,7 +9,8 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  background-color: var(--bg-color);
+  padding-top: 1rem;
+  background-color: ar(--bg-color);
 
   &__content {
     display: flex;
@@ -22,19 +23,24 @@
 
   &__animation-wrapper {
     width: 100%;
+    aspect-ratio: 1 / 1;
     max-width: 300px;
     margin: 0 auto;
+    border-radius: 16px;
+    border: solid 2px var(--primary-color);
+    background-color: #0c2522;
     animation: float 6s ease-in-out infinite;
+    transform: translateZ(0);
+    overflow: hidden;
   }
 
   &__lottie {
     display: block;
-    aspect-ratio: 1 / 1;
     width: 100%;
-    height: auto;
-    border-radius: 16px;
-    border: solid 2px var(--primary-color);
-    overflow: hidden;
+    height: 100%;
+    border-radius: 0;
+    border: none;
+    transform: scale(1.02);
   }
 
   &__title {

src/app/shared/error-handler/error-views/unknown-error/unknown-error.component.scss

@@ -55,27 +55,17 @@ describe('UnknownErrorComponent', () => {
   });
 
   describe('UI & Media Rendering', () => {
-    it('should render the UFO animation correctly', () => {
+    it('should render the UFO animation canvas correctly', () => {
       // --- ARRANGE ---
       fixture.detectChanges();
 
       // --- ACT ---
       const lottieAnim = fixture.debugElement.query(By.css('.unknown-error__lottie')).nativeElement;
 
       // --- ASSERT ---
-      expect(lottieAnim.getAttribute('src')).toBe('assets/animations/unknown-error-abduction.lottie');
+      expect(lottieAnim.tagName.toLowerCase()).toBe('canvas');
       expect(lottieAnim.getAttribute('aria-label')).toBe('Une soucoupe volante aspirant une chenille');
     });
-
-    it('should render the Lottie animation correctly', () => {
-      fixture.detectChanges();
-
-      const lottiePlayer = fixture.debugElement.query(By.css('dotlottie-wc'));
-
-      if (lottiePlayer) {
-        expect(lottiePlayer.nativeElement.getAttribute('src')).toContain('unknown-error-abduction.lottie');
-      }
-    });
   });
 
   describe('Internationalization (i18n)', () => {

src/app/shared/error-handler/error-views/unknown-error/unknown-error.component.spec.ts

@@ -1,17 +1,37 @@
-import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
 
-import '@lottiefiles/dotlottie-wc';
+import { DotLottie } from '@lottiefiles/dotlottie-web';
+
+const ALIGN_CENTER = 0.5;
 
 @Component({
   selector: 'unknown-error',
-  imports: [
-    TranslateModule,
-  ],
+  imports: [TranslateModule],
   templateUrl: './unknown-error.component.html',
   styleUrl: './unknown-error.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
+export class UnknownErrorComponent implements OnInit, OnDestroy {
+
+  @ViewChild('lottieCanvas', { static: true }) lottieCanvas!: ElementRef<HTMLCanvasElement>;
+
+  private dotLottieInstance?: DotLottie;
+
+  ngOnInit(): void {
+    this.dotLottieInstance = new DotLottie({
+      canvas: this.lottieCanvas.nativeElement,
+      src: 'assets/animations/unknown-error-abduction.lottie',
+      loop: true,
+      autoplay: true,
+      layout: {
+        fit: 'contain',
+        align: [ALIGN_CENTER, ALIGN_CENTER],
+      }
+    });
+  }
 
-export class UnknownErrorComponent {}
+  ngOnDestroy(): void {
+    this.dotLottieInstance?.destroy();
+  }
+}