Skottie cannot draw animations that have embedded images

[mattleibow]

Description

If the Lottie json file contains embedded resources, such as an image as a data URI data:image/png;base64, then it just skips over it.

The reason for this is that Skottie uses a concept of a ResourceProvider to decode images/fonts/audio. By default, it does not set up and providers. There are a few providers implemented, so we just have to expose those.

dotnet_bot.zip

[ibebbs]

Hey @mattleibow, any idea if/when support for embedded images might be implemented?

Last I saw @jeromelaban had suggested he might have a further changeset pending for support of ResourceProvider / AnimationBuilder but there doesn't seem to have been any movement here.

I've taken a quick look at what it might take to implement this functionality but it seems even getting the toolchain setup to complete this work would take a while so kinda hoping someone else is halfway there already...

[jeromelaban]

We haven't gone through the work of adding the APIs for that yet.

[ibebbs]

Thanks for the reply @jeromelaban. Apologies I thought I saw you say there was another commit incoming but can't for the life of me find it now.

If I look to implement this, is there anything I should be particularly aware of? Currently I'm mostly concerned about getting the toolchain to build the c++ library set up.

[jeromelaban]

That's correct, I mentioned there would be an additional commit in the future to support these APIs, but that's pretty much it :)

For the C++ part, I'm generally working in WSL or in a docker container in GitPod/CodeSpaces. It's generally pretty easy to work with there, but I know others are working directly from Windows.

[MarMarIV]

Any progress on this feature?

[jerry2007]

@mattleibow Will you implememnt this feature?

[MarMarIV]

@mattleibow Any progress? Or something?

[jerry2007]

@mattleibow please, we really need for our app...

[mattleibow]

Just adding some more info in case someone wants to start the work on this.

This is probably the API we need: https://github.com/google/skia/blob/chrome/m115/modules/skottie/include/Skottie.h#L121

For URI resources we will need this: https://github.com/google/skia/blob/chrome/m115/modules/skresources/include/SkResources.h#L250
For file folder images: https://github.com/google/skia/blob/chrome/m115/modules/skresources/include/SkResources.h#L201

Not sure we will need any complicated implementations. All the code is in the module and we just need to expose.

I see this is a new module and as I am not yet sure exactly how interconnected or if I can split this, the skresources module will also be a new nuget like we did with scenegraph and skottie.

[RasmusOster]

Is this still being worked on?

[MarkIngramUK]

There are 2 open pull requests, I'm not sure what is being waited on - are they just waiting for review?
mono/skia#114
#2630

[Jasbirbhinder]

@mattleibow, i recently noticed skia package got a update. did JSON embedded image issue fixed in it?

[Jasbirbhinder]

@mattleibow : thank you for the update. could you please let us know how to make it work for Skia to load embedded image. Im very new to Skia. Highly Appricated for all your help!!

[DonaldConsoleII]

@mattleibow Is this bug fixed in any of the builds? If not, would you happen to have an ETA? Any update would be greatly appreciated!

[anton-yashin]

@mattleibow Is this bug fixed in any of the builds? If not, would you happen to have an ETA? Any update would be greatly appreciated!

https://github.com/mono/SkiaSharp/releases/tag/v3.0.0-preview.2.1 seems fine.

[Glomby]

I’ve been running into this issue this week too while converting an App from Xamarin to MAUI.
I download all the newest previews for SkiaSharp, the Extended.UI.MAUI etc. but my .jsons with embedded images don’t show anything. It seems like a fix is not live yet or is something else needed to make it work?

[MarMarIV]

@mattleibow Thanks for this! 👍 It works

@Glomby My tip: Check MergedDictionaries in your app. SkiaSharp.Extended.UI.MAUI append style resources in that. I have same problem. In our application we clear merged dictionaties 'at startup' and that was a issue, missing resources

[Jasbirbhinder]

@MarMarIV , could you please share screenshots to understand more about MergedDictionaires. i search in all folders and in project for MergedDictionaries but not found anything. thank you

[mattleibow]

@Glomby just want to check, is anything rendering? Are the embedded images missing or is there just a blank space and nothing is drawn at all.

The embedded images fix is for SkiaSharp v3 and the lottie view is for v2. I forgot to think of this... Sorry.

I might need to backport this for now since v3 is not yet ready to go stable.

For an interim, I will try make this work and you can just manually update skia to v3 and it will just light up.

[ibebbs]

@mattleibow - hadn't seen that the embedded images support was only in v3. If you do have time to back port it to v2 that would be super appreciated!

[Glomby]

@mattleibow I was testing with a json that only has an image sequence so everything is blank but I just checked with a different one and only the images are missing in this one. The rest is displaying as expected.

Getting this working would be super helpfull. Im porting a Xamarin App over to maui and we have lots of lotties with lots of images in them.

[Jasbirbhinder]

@mattleibow , attached are screenshots and JSON file in this comment that i am using in my Maui project. embedded image still not loading!!

this is Maui code.
xmlns:skia="clr-namespace:SkiaSharp.Extended.UI.Controls;assembly=SkiaSharp.Extended.UI"

<skia:SKLottieView
BackgroundColor="Red"
HeightRequest="100"
RepeatCount="-1"
Source="https://lottie.host/e6ca851f-5408-44f3-8874-637caebbf0d5/SlgPlLNWlZ.json"
WidthRequest="100" />

...These are the nuget installed.

...these is how it looks like in Maui app. missing image.

..this is the json with embedded image. it should load like this.

..this is the JSON file
blizzard.json

[Alexeiguch]

@Jasbirbhinder same happens to me. All but the images are shown in the lottie animation.

[naimheshmati]

I have same issue , is there any update for this bug ? the json file shows on web , but it's not working on MAUI project
fillup animation.json