Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Multi-animation dotLottie with assets #57

Open
DarioLinke opened this issue Nov 1, 2023 · 3 comments
Open

Multi-animation dotLottie with assets #57

DarioLinke opened this issue Nov 1, 2023 · 3 comments
Assignees
@theashraf

Comments

@DarioLinke
Copy link

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
Copy link
Member

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

@theashraf theashraf self-assigned this Nov 7, 2023
@DarioLinke
Copy link
Author

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
Copy link
Author

@theashraf any updates on this topic?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@theashraf theashraf

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@theashraf @DarioLinke