bzuccaro/ditto.site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Lottie replay for Next builds and fallback sources

Browse Source
This commit is contained in:
Samraaj Bath
2026-07-03 14:03:42 -07:00
parent 7e192863b4
commit 13ce4b89a1
3 changed files with 53 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
compiler/src/capture/lottie.ts
+13 -4
View File
@@ -89,6 +89,13 @@ export async function captureLotties(
if (!u || typeof u !== "string") return null;
try { return new URL(u, document.baseURI).href; } catch { return null; }
};
const registrySrc = (path: string, fileName: string): string | null => {
if (!path) return null;
if (/\.json(?:[?#]|$)/i.test(path)) return abs(path);
if (!fileName) return null;
const base = path.endsWith("/") ? path : path + "/";
return abs(base + (fileName.includes(".") ? fileName : fileName + ".json"));
};
// climb to the nearest ancestor (or self) carrying a data-cid-cap
const capOf = (node: Element | null): string | null => {
let el: Element | null = node;
@@ -144,10 +151,12 @@ export async function captureLotties(
// fall back to the in-memory animationData document.
const path = (a.path as string) || "";
const fileName = (a.fileName as string) || "";
let src: string | null = null;
if (path) src = abs(path.endsWith("/") || !fileName ? path + (fileName.endsWith(".json") ? fileName : "data.json") : path + (fileName ? (fileName.includes(".") ? fileName : fileName + ".json") : ""));
let inlineKey: string | null = null;
if (!src && a.animationData) inlineKey = stashInline(a.animationData);
const src = registrySrc(path, fileName);
// Keep in-memory data as a fallback even when the registry reports a URL:
// some sites expose only a directory-ish path, and guessed `data.json`
// URLs 404. Generation prefers a downloaded local path, then falls back
// to this JSON if the URL is absent or unreachable.
const inlineKey = a.animationData ? stashInline(a.animationData) : null;
const rendererType = ((a.renderer as { rendererType?: string })?.rendererType)
|| (a.renderer && a.renderer.constructor && a.renderer.constructor.name === "CanvasRenderer" ? "canvas" : undefined);
push({ container, via: "registry", src, inlineKey, renderer: rendererType, loop: a.loop, autoplay: a.autoplay });
compiler/src/generate/lottie.ts
+26 -22
View File
@@ -108,7 +108,6 @@ export function lottieWireJsx(spec: LottieSpec, indent: number): string {
export const DITTO_LOTTIE_TSX = `"use client";
import { useEffect } from "react";
import lottie from "lottie-web";
type RTLottie = {
cid: string;
@@ -127,28 +126,33 @@ const byCid = (cid: string): HTMLElement | null => document.querySelector('[data
export default function DittoLottie({ spec }: { spec: LottieSpec }) {
useEffect(() => {
const stopped = (window as any).__dittoMotionStopped === true;
const anims: Array<ReturnType<typeof lottie.loadAnimation>> = [];
for (const it of spec.items) {
const el = byCid(it.cid);
if (!el) continue;
// clear the captured placeholder frame so it never stacks with the live render
el.innerHTML = "";
try {
const anim = lottie.loadAnimation({
container: el,
renderer: it.renderer === "canvas" ? "canvas" : "svg",
loop: it.loop,
autoplay: it.autoplay && !stopped,
...(it.path ? { path: it.path } : { animationData: it.animationData as object }),
rendererSettings: { preserveAspectRatio: "xMidYMid meet" },
});
if (stopped) { try { anim.goToAndStop(0, true); } catch {} }
anims.push(anim);
} catch {
/* a single bad animation must not break the page */
const anims: Array<{ destroy: () => void; goToAndStop: (value: number, isFrame?: boolean) => void }> = [];
let cancelled = false;
void (async () => {
const lottie = (await import("lottie-web")).default;
if (cancelled) return;
for (const it of spec.items) {
const el = byCid(it.cid);
if (!el) continue;
// clear the captured placeholder frame so it never stacks with the live render
el.innerHTML = "";
try {
const anim = lottie.loadAnimation({
container: el,
renderer: it.renderer === "canvas" ? "canvas" : "svg",
loop: it.loop,
autoplay: it.autoplay && !stopped,
...(it.path ? { path: it.path } : { animationData: it.animationData as object }),
rendererSettings: { preserveAspectRatio: "xMidYMid meet" },
});
if (stopped) { try { anim.goToAndStop(0, true); } catch {} }
anims.push(anim);
} catch {
/* a single bad animation must not break the page */
}
}
}
return () => { for (const a of anims) { try { a.destroy(); } catch {} } };
})().catch(() => {});
return () => { cancelled = true; for (const a of anims) { try { a.destroy(); } catch {} } };
}, [spec]);
return null;
}