Multi-animation dotLottie with assets

DarioLinke commented 10 months ago

Hi, I'm a new developer and this is my first ever GitHub post so I'm not quite sure if I'm doing this right haha.

I'm currently running into a problem when trying to merge multiple .json files into a single dotlottie. Whenever I use a .json with embedded images, I get this error from the console:

Uncaught (in promise) DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at getMimeTypeFromBase64 (https://cdn.skypack.dev/-/@dotlottie/dotlottie-js@v0.6.0-rDITtTvCMEIO6jPFcyv2/dist=es2019,mode=imports/optimized/@dotlottie/dotlottie-js.js:501:12)
    at getExtensionTypeFromBase64 (https://cdn.skypack.dev/-/@dotlottie/dotlottie-js@v0.6.0-rDITtTvCMEIO6jPFcyv2/dist=es2019,mode=imports/optimized/@dotlottie/dotlottie-js.js:518:20)
    at LottieAnimation._extractImageAssets (https://cdn.skypack.dev/-/@dotlottie/dotlottie-js@v0.6.0-rDITtTvCMEIO6jPFcyv2/dist=es2019,mode=imports/optimized/@dotlottie/dotlottie-js.js:2588:26)
    at LottieAnimation.toJSON (https://cdn.skypack.dev/-/@dotlottie/dotlottie-js@v0.6.0-rDITtTvCMEIO6jPFcyv2/dist=es2019,mode=imports/optimized/@dotlottie/dotlottie-js.js:1645:18)
    at DotLottie.build (https://cdn.skypack.dev/-/@dotlottie/dotlottie-js@v0.6.0-rDITtTvCMEIO6jPFcyv2/dist=es2019,mode=imports/optimized/@dotlottie/dotlottie-js.js:1305:23)
    at mergeAnimations (http://0.0.0.0:8001/:32:10)
    at http://0.0.0.0:8001/:38:1

This doesn't happen when using .json files without images. This is my code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Merge Lottie Files</title>
</head>
<body>

<script type="module">
import { DotLottie } from 'https://cdn.skypack.dev/@dotlottie/dotlottie-js';
import like_animation from './hero-1_v1.json' assert { type: 'json' };

const dotLottie = new DotLottie();

async function mergeAnimations() {
  await dotLottie 
        .setAuthor('LottieFiles')
        .setVersion('1.0')
        .addAnimation({
          id: 'like_animation',
          data: like_animation,
          loop: true,
          autoplay: true
        })
        .addAnimation({
          id: 'cat_animation',
          url: 'https://lottie.host/81727aa3-b088-49b6-a95e-b270c46e8dff/9s5rwzEXgV.json',
          loop: true,
          autoplay: false
        })
        .build()
        .then((value) => {
          value.download('my_animation.lottie');
        });
}

mergeAnimations();
</script>

</body>
</html>

Thanks a lot for your help!

theashraf commented 10 months ago

Hi @DarioLinke

I'm looking into the issue you've described with merging .json files containing embedded images into a single .dotlottie file and the associated decoding error you're encountering.

It seems like there might be an issue with how the base64 strings are being handled or generated. I'll review the stack trace you've provided and see if I can reproduce the problem on my end.

In the meantime, if you could provide any additional details that might be relevant, like the specific .json files that are causing trouble (if they're not sensitive or proprietary), it would be very helpful for debugging.

Thank you

DarioLinke commented 10 months ago

Hi @theashraf

Thanks for looking into the problem. The Animation is part of a project that hasn't been published yet. Due to our agency guidelines, I unfortunately can't publicly post it on GitHub. I've sent you the .json file in private via the email in your profile.

Thanks a lot

DarioLinke commented 9 months ago

@theashraf any updates on this topic?

dotlottie / dotlottie-js

Multi-animation dotLottie with assets #57