lottie-player icon indicating copy to clipboard operation
lottie-player copied to clipboard

JSON string is interpreted as URL

Open iwo-strzebonski opened this issue 1 year ago • 3 comments

Hello, I'm currently working with Frontify Brand SDK and Typescript React and I wanted to use the LottiePlayer with a JSON string loaded from the file input, however I receive an error suggesting that the player tries to use that string as URL instead of a JSON.

I tried passing a parsed JSON, without success.

iwo-strzebonski avatar Feb 27 '23 17:02 iwo-strzebonski

hi @iwo-strzebonski Could you share how you tried passing a parsed json?

Also, are you aware of https://github.com/LottieFiles/lottie-react ? This could be helpful, cheers!

samuelOsborne avatar Feb 27 '23 18:02 samuelOsborne

@samuelOsborne the JSON is shown correctly in the console Also I see now that I receive an error "lottiePlayer.load() is not a function", though the element itself exists

const lottiePlayer = document.querySelector('lottie-player') as any

if (!lottiePlayer) {
   return
}

console.debug(JSON.parse(src))
lottiePlayer.load(JSON.parse(src))

iwo-strzebonski avatar Feb 27 '23 19:02 iwo-strzebonski

Hi @iwo-strzebonski What framework are you using? I've tried to reproduce here but seems to be working as intended, let me know if theres a difference with your code

https://codepen.io/Osbro/pen/ExeEeav

samuelOsborne avatar Mar 23 '23 09:03 samuelOsborne