How do I use the SolidJS player?

[stanlrt]

Hello,
I am trying to display a dotLottie file like in the README but the player says it's invalid. Here is the code:

import { DotLottie, DotLottieSolid } from "@lottiefiles/dotlottie-solid";
import { createEffect, createSignal } from "solid-js";

/**
 * The visual component that indicates volume and speaker changes.
 */
export function VoiceIndicator(props: { volumeLevel: number }) {
	const [lottieRef, setLottieRef] = createSignal<DotLottie>();

	ccreateEffect(() => {
		const lottie = lottieRef();
		if (lottie) {
			lottie.setFrame(Math.round(props.volumeLevel * lottie.totalFrames));
		}
	});

	return (
		<DotLottieSolid
			src={"./VUI-anim.lottie"}
			dotLottieRefCallback={setLottieRef}
			style={{ width: "100px", height: "100px" }}
		/>
	);
}

Here the error:
Invalid Lottie JSON string: The provided string does not conform to the Lottie JSON format.

[stanlrt]

For anyone having the same issue, basically do not follow the docs:

import { DotLottie, DotLottieSolid } from "@lottiefiles/dotlottie-solid";
import { createEffect, createSignal } from "solid-js";

import VUIAnim from "./VUI-anim.json";

/**
 * The visual component that indicates volume and speaker changes.
 */
export function VoiceIndicator(props: { volumeLevel: number }) {
	const [lottieRef, setLottieRef] = createSignal<DotLottie>();

	createEffect(() => {
		const lottie = lottieRef();
		if (lottie) {
			lottie.setFrame(Math.round(props.volumeLevel * lottie.totalFrames));
		}
	});

	return (
	        <DotLottieSolid
		        data={VUIAnim}
		        dotLottieRefCallback={setLottieRef}
		        style={{ width: "100px", height: "100px" }}
	        />
	);
}

[theashraf]

Thanks, @stanlrt, for catching this! I'll update the docs accordingly.

also if you want to start at a specific frame, you'll need to wait for the "load" event to be triggered first, as the totalFrames value is zero before the load event occurs.

const lottie = lottieRef();
if (lottie) {
    lottie.addEventListener("load", () => {
        lottie.setFrame(Math.round(props.volumeLevel * lottie.totalFrames));
    });
}

[stanlrt]

Thanks for the tip! @theashraf

I still did not manage to make the code work with a .lottie file (despite having the proper Vite+TS setup, at least I think so). Do you know any doc/guide on how to do that? The JSON file is quite large in comparison sadly

[stanlrt]

Another thing to note is that the example in the README does not pass a type to createSignal, which breaks type safety when accessing props and functions on the ref. The correct type is DotLottie.

[stabldev]

hi @stanlrt, lib is working perfect (just checked with real example), maybe it is your .lottie file is corrupted as the error shows.
could be helpful if you can provide a reproduction example.
also you can check dotlottie-solid-example for ts.

live example

[stanlrt]

Hi @moonlitgrace, it indeed works very well when given a URL. However if I give it a relative path, not so much.

Currently, our prod stores the Lottie on S3 so that's fine, but on dev we store it locally and proxy S3, so it's a bit more annoying. Not critical tho.

[stabldev]

hey @stanlrt, i tried this on all available players, there were this error.
couple of ways to handle this.
(your answer)

import VUIAnim from "./VUI-anim.json";

function App() {
  return (
    <DotLottieSolid data={VUIAnim} loop autoplay />
  );
}

this works as it will be converted into a module object on runtime.

another workaround is to serve from static files dir. like public/, static/...

. <root>
│
public/
├── lotties
│   └── dotLottieJson.json
└── vite.svg

function App() {
  return (
    <DotLottieSolid src="/lotties/dotLottieJson.json" loop autoplay />
  );
}

this will also work, since it is accessed via a URL on runtime.
cheers!

EDIT: I think, the docs are referred to the second method (the way of providing path/to/file).