fix: 🐛 utils/getAnimation handling of inlined assets (#41)

* fix: fix for utils/getAnimation with inlined assets

* refactor: 💡 apply suggested changes

* chore: 🤖 update changeset

* chore: 🤖 update utils-browser test

---------

Co-authored-by: Abdelrahman Ashraf <a.theashraf@gmail.com>

.changeset/ten-jokes-laugh.md

@@ -0,0 +1,5 @@
+---
+"@dotlottie/dotlottie-js": patch
+---
+
+fix: 🐛 utils/getAnimation handling of inlined assets

packages/dotlottie-js/src/common/utils.ts

@@ -579,10 +579,11 @@ export async function getImage(
  * @public
  */
 export async function getImages(dotLottie: Uint8Array, filter?: UnzipFileFilter): Promise<Record<string, string>> {
-  const unzippedImages = await unzipDotLottie(
-    dotLottie,
-    (file) => file.name.startsWith('images/') && (!filter || filter(file)),
-  );
+  const unzippedImages = await unzipDotLottie(dotLottie, (file) => {
+    const name = file.name.replace('images/', '');
+
+    return file.name.startsWith('images/') && (!filter || filter({ ...file, name }));
+  });
 
   const images: Record<string, string> = {};
 
@@ -642,7 +643,7 @@ export async function inlineImageAssets(
   const unzippedImages = await getImages(dotLottie, (file) => imagesMap.has(file.name));
 
   for (const [imageId, animationIdsSet] of imagesMap) {
-    const imageDataURL = unzippedImages[`images/${imageId}`];
+    const imageDataURL = unzippedImages[imageId];
 
     if (imageDataURL) {
       for (const animationId of animationIdsSet) {
@@ -703,7 +704,7 @@ export async function getAnimation(
   }
 
   const animationsMap = {
-    animationId: animationData,
+    [animationId]: animationData,
   };
 
   await inlineImageAssets(dotLottie, animationsMap);
@@ -737,10 +738,11 @@ export async function getAnimations(
   filter?: UnzipFileFilter,
 ): Promise<Record<string, AnimationData>> {
   const animationsMap: Record<string, AnimationData> = {};
-  const unzippedAnimations = await unzipDotLottie(
-    dotLottie,
-    (file) => file.name.startsWith('animations/') && (!filter || filter(file)),
-  );
+  const unzippedAnimations = await unzipDotLottie(dotLottie, (file) => {
+    const filename = file.name.replace('animations/', '').replace('.json', '');
+
+    return file.name.startsWith('animations/') && (!filter || filter({ ...file, name: filename }));
+  });
 
   for (const animationPath in unzippedAnimations) {
     const data = unzippedAnimations[animationPath];
@@ -782,10 +784,11 @@ export async function getAnimations(
 export async function getThemes(dotLottie: Uint8Array, filter?: UnzipFileFilter): Promise<Record<string, string>> {
   const themesMap: Record<string, string> = {};
 
-  const unzippedThemes = await unzipDotLottie(
-    dotLottie,
-    (file) => file.name.startsWith('themes/') && (!filter || filter(file)),
-  );
+  const unzippedThemes = await unzipDotLottie(dotLottie, (file) => {
+    const name = file.name.replace('themes/', '').replace('.lss', '');
+
+    return file.name.startsWith('themes/') && (!filter || filter({ ...file, name }));
+  });
 
   for (const themePath in unzippedThemes) {
     const data = unzippedThemes[themePath];

packages/dotlottie-js/src/tests/utils-browser.spec.ts

@@ -24,10 +24,12 @@ import {
 } from '..';
 
 import dotLottieAnimation from './__fixtures__/simple/animation.lottie';
+import bullJson from './__fixtures__/simple/animation/animations/bull.json';
 import dotLottieLottie1 from './__fixtures__/simple/animation/animations/lottie1.json';
 import dotLottieManifest from './__fixtures__/simple/animation/manifest.json';
 import dotLottieTheme from './__fixtures__/simple/animation/themes/theme1.lss';
 import dotLottieAnimationWithImages from './__fixtures__/simple/big-merged-dotlottie.lottie';
+import bullAnimation from './__fixtures__/simple/bull.lottie';
 
 describe('createError', () => {
   it('returns an instance of Error with the correct message', () => {
@@ -179,6 +181,16 @@ describe('getAnimation', () => {
 
     expect(animation).toEqual(dotLottieLottie1 as AnimationData);
   });
+
+  it('returns inlined images within the animation', async () => {
+    const manifest = await getManifest(bullAnimation);
+
+    const animationId = manifest?.animations[0]?.id || '';
+
+    const animation = await getAnimation(bullAnimation, animationId, { inlineAssets: true });
+
+    expect(JSON.stringify(animation?.assets)).toEqual(JSON.stringify(bullJson.assets));
+  });
 });
 
 describe('getTheme', () => {

packages/dotlottie-js/src/tests/utils-node.spec.ts

@@ -24,10 +24,12 @@ import {
 } from '../node';
 
 import dotLottieAnimation from './__fixtures__/simple/animation.lottie';
+import bullJson from './__fixtures__/simple/animation/animations/bull.json';
 import dotLottieLottie1 from './__fixtures__/simple/animation/animations/lottie1.json';
 import dotLottieManifest from './__fixtures__/simple/animation/manifest.json';
 import dotLottieTheme from './__fixtures__/simple/animation/themes/theme1.lss';
 import dotLottieAnimationWithImages from './__fixtures__/simple/big-merged-dotlottie.lottie';
+import bullAnimation from './__fixtures__/simple/bull.lottie';
 
 describe('createError', () => {
   it('returns an instance of Error with the correct message', () => {
@@ -187,6 +189,16 @@ describe('getAnimation', () => {
 
     expect(animation).toEqual(dotLottieLottie1 as AnimationData);
   });
+
+  it('returns inlined images within the animation', async () => {
+    const manifest = await getManifest(bullAnimation);
+
+    const animationId = manifest?.animations[0]?.id || '';
+
+    const animation = await getAnimation(bullAnimation, animationId, { inlineAssets: true });
+
+    expect(JSON.stringify(animation?.assets)).toEqual(JSON.stringify(bullJson.assets));
+  });
 });
 
 describe('getTheme', () => {