Incorrect Images with Duplicate IdRef across Multiple Animations

[theashraf]

When using dotlottie-js in toolkit-js dotLottie plugin, images with the same IdRef are not imported correctly if they appear in multiple animations within a single dotLottie file. This issue breaks the export process, even though the import process seems to work as expected.

The problem appears to be related to the image extraction logic, which fails in cases involving the same image IDs across multiple animations.

Here is a failing test to help reproduce

import { DotLottie, getAnimations, getImages } from '@dotlottie/dotlottie-js';

test('create a dotLottie JS with many images from an existing .lottie file', async () => {
  const dotLottieBuffer = readDotLottieFile('src/fixtures/image-assets.lottie');
  const animations = await getAnimations(new Uint8Array(dotLottieBuffer), { inlineAssets: true });
  const images = await getImages(new Uint8Array(dotLottieBuffer));

  const expectedDotLottie = new DotLottie();

  for (const animation in animations) {
    const animationData = animations[animation];

    expectedDotLottie.addAnimation({
      id: animation,
      data: animationData,
    });
  }

  await expectedDotLottie.build();

  expectedDotLottie.animations.forEach((expectedAnimation) => {
    const actualAnimation = animations[expectedAnimation.id];

    expect(actualAnimation).toBeDefined();
    expect(actualAnimation).toStrictEqual(expectedAnimation.data);
  });

  const notIdenticalImages = [];

  expectedDotLottie.getImages().forEach((expectedImage) => {
    const imageUri = images[expectedImage.fileName];

    expect(imageUri).toBeDefined();
    expect(imageUri?.length).toBeGreaterThan(0);

    if (imageUri !== expectedImage.data) {
      notIdenticalImages.push(expectedImage.fileName);
    }
  });

  expect(notIdenticalImages.length).toBe(0);
});

image-assets.zip

[theashraf]

It appears there's an issue in the creation process of the image-assets.lottie. The file was created using dotLottie-js on the dotLottie playground.

Here's a screenshot for the bull.json animation inside the .lottie file attached, showing that the first and second images are duplicates, although they are not in the original animation.

bull.json

[samuelOsborne]

hm i just uploaded bull.json to playground and this is inside the exported .lottie

assets": [
        {
            "id": "image_0",
            "w": 113,
            "h": 111,
            "u": "/images/",
            "p": "image_0.png",
            "e": 0
        },
        {
            "id": "image_1",
            "w": 112,
            "h": 151,
            "u": "/images/",
            "p": "image_1.png",
            "e": 0
        },
        {
            "id": "image_2",
            "w": 112,
            "h": 151,
            "u": "/images/",
            "p": "image_2.png",
            "e": 0
        },
        {
            "id": "image_3",
            "w": 222,
            "h": 176,
            "u": "/images/",
            "p": "image_3.png",
            "e": 0
        },
        {
            "id": "image_4",
            "w": 194,
            "h": 126,
            "u": "/images/",
            "p": "image_4.png",
            "e": 0
        }
    ]

looks fine? maybe i did it wrong somehow

[theashraf]

@samuelOsborne the .lottie attached has another animation as well which has image assets sharing the same asset id as the bull.json

shrek.json