feat: add LottiePlayer component

apps/builder/app/builder/features/settings-panel/controls/select-asset.tsx

@@ -1,22 +1,41 @@
 import { useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-import { Button, Flex, Text, FloatingPanel } from "@webstudio-is/design-system";
+import { Button, Flex, FloatingPanel } from "@webstudio-is/design-system";
 import type { Prop } from "@webstudio-is/sdk";
 import { acceptToMimeCategories } from "@webstudio-is/sdk";
+import type { AssetType } from "@webstudio-is/asset-uploader";
 import { $assets } from "~/shared/sync/data-stores";
 import { AssetManager } from "~/builder/shared/asset-manager";
 import { type ControlProps } from "../shared";
 import { formatAssetName } from "~/builder/shared/assets/asset-utils";
 import { AssetUpload } from "~/builder/shared/assets";
 
-// tests whether we can use AssetManager for the given "accept" value
-const isImageAccept = (accept?: string) => {
-  const acceptCategories = acceptToMimeCategories(accept || "");
-  return (
-    acceptCategories === "*" ||
-    (acceptCategories.size === 1 && acceptCategories.has("image"))
-  );
+const getUploadType = (accept?: string): AssetType => {
+  const categories = acceptToMimeCategories(accept ?? "");
+  if (categories === "*" || categories.has("image")) {
+    return "image";
+  }
+  if (categories.has("font")) {
+    return "font";
+  }
+  if (categories.has("video")) {
+    return "video";
+  }
+  return "file";
+};
+
+const getPanelTitle = (uploadType: AssetType): string => {
+  if (uploadType === "image") {
+    return "Images";
+  }
+  if (uploadType === "font") {
+    return "Fonts";
+  }
+  if (uploadType === "video") {
+    return "Videos";
+  }
+  return "Files";
 };
 
 type AssetControlProps = ControlProps<unknown>;
@@ -37,16 +56,13 @@ export const SelectAsset = ({ prop, onChange, accept }: Props) => {
   );
 
   const asset = useStore($asset);
-
-  if (isImageAccept(accept) === false) {
-    return <Text color="destructive">Unsupported accept value: {accept}</Text>;
-  }
+  const uploadType = getUploadType(accept);
 
   return (
     <Flex gap={2} css={{ flex: 1 }} align="center">
       <FloatingPanel
-        title="Images"
-        titleSuffix={<AssetUpload type="image" accept={accept} />}
+        title={getPanelTitle(uploadType)}
+        titleSuffix={<AssetUpload type={uploadType} accept={accept} />}
         content={
           <AssetManager
             onChange={(assetId) => onChange({ type: "asset", value: assetId })}

apps/builder/app/builder/shared/asset-manager/asset-thumbnail.tsx

@@ -6,6 +6,7 @@ import { UploadingAnimation } from "./uploading-animation";
 import { AssetInfo, assetInfoCssVars } from "./asset-info";
 import type { AssetContainer } from "~/builder/shared/assets";
 import { Image } from "./image";
+import { LottieThumbnail } from "./lottie-thumbnail";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
 import { theme } from "@webstudio-is/design-system";
 import {
@@ -134,7 +135,7 @@ const Thumbnail = styled(Box, {
   justifyContent: "center",
 });
 
-const GenericFilePreview = ({
+export const GenericFilePreview = ({
   ext,
   format,
 }: {
@@ -233,6 +234,17 @@ export const AssetThumbnail = ({
                 : wsVideoLoader({ src: asset.name })
             }
           />
+        ) : asset.format === "json" ? (
+          // JSON files — render first frame of Lottie animation
+          <LottieThumbnail
+            src={
+              assetContainer.status === "uploading"
+                ? assetContainer.objectURL
+                : `/cgi/asset/${asset.name}?format=raw`
+            }
+            ext={ext}
+            format={asset.format}
+          />
         ) : (
           // Other files - show icon based on category
           <GenericFilePreview ext={ext} format={asset.format} />

apps/builder/app/builder/shared/asset-manager/lottie-thumbnail.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import { Box } from "@webstudio-is/design-system";
+import { GenericFilePreview } from "./asset-thumbnail";
+
+type Props = {
+  src: string;
+  ext: string;
+  format: string;
+};
+
+export const LottieThumbnail = ({ src, ext, format }: Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [hasError, setHasError] = useState(false);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
+    let cancelled = false;
+
+    import("lottie-web").then(({ default: lottie }) => {
+      if (cancelled || !container.isConnected) {
+        return;
+      }
+
+      const anim = lottie.loadAnimation({
+        container,
+        renderer: "svg",
+        loop: false,
+        autoplay: false,
+        path: src,
+      });
+
+      anim.addEventListener("data_ready", () => {
+        if (!cancelled) {
+          anim.goToAndStop(0, true);
+        }
+      });
+
+      anim.addEventListener("data_failed", () => {
+        if (!cancelled) {
+          setHasError(true);
+        }
+      });
+
+      return () => {
+        anim.destroy();
+      };
+    });
+
+    return () => {
+      cancelled = true;
+      container.innerHTML = "";
+    };
+  }, [src]);
+
+  if (hasError) {
+    return <GenericFilePreview ext={ext} format={format} />;
+  }
+
+  return (
+    <Box
+      ref={containerRef}
+      css={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        "& svg": {
+          width: "100% !important",
+          height: "100% !important",
+        },
+      }}
+    />
+  );
+};

apps/builder/package.json

@@ -63,15 +63,13 @@
     "@tus/server": "^2.4.1",
     "@unocss/core": "66.6.8",
     "@vercel/remix": "2.15.3",
-    "@webstudio-is/protocol": "workspace:*",
     "@webstudio-is/asset-uploader": "workspace:*",
     "@webstudio-is/authorization-token": "workspace:*",
     "@webstudio-is/css-data": "workspace:*",
     "@webstudio-is/css-engine": "workspace:*",
     "@webstudio-is/dashboard": "workspace:*",
     "@webstudio-is/design-system": "workspace:*",
     "@webstudio-is/domain": "workspace:*",
-    "@webstudio-is/sync-client": "workspace:*",
     "@webstudio-is/feature-flags": "workspace:*",
     "@webstudio-is/fonts": "workspace:*",
     "@webstudio-is/html-data": "workspace:*",
@@ -83,13 +81,16 @@
     "@webstudio-is/project": "workspace:*",
     "@webstudio-is/project-build": "workspace:*",
     "@webstudio-is/project-migrations": "workspace:*",
+    "@webstudio-is/protocol": "workspace:*",
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
     "@webstudio-is/sdk-components-animation": "workspace:*",
     "@webstudio-is/sdk-components-react": "workspace:*",
     "@webstudio-is/sdk-components-react-radix": "workspace:*",
+    "@webstudio-is/sync-client": "workspace:*",
     "@webstudio-is/template": "workspace:*",
     "@webstudio-is/trpc-interface": "workspace:*",
+    "@webstudio-is/wsauth": "workspace:*",
     "args-tokenizer": "^0.3.0",
     "bcp-47": "^2.1.0",
     "change-case": "^5.4.4",
@@ -105,6 +106,7 @@
     "immerhin": "^0.10.0",
     "isbot": "^5.1.25",
     "lexical": "^0.21.0",
+    "lottie-web": "^5.12.2",
     "match-sorter": "^8.0.0",
     "micromark": "^4.0.2",
     "micromark-extension-gfm": "^3.0.0",
@@ -133,8 +135,7 @@
     "valid-filename": "^4.0.0",
     "warn-once": "^0.1.1",
     "zod": "^3.24.2",
-    "zod-validation-error": "^3.4.0",
-    "@webstudio-is/wsauth": "workspace:*"
+    "zod-validation-error": "^3.4.0"
   },
   "devDependencies": {
     "@remix-run/dev": "^2.16.5",

packages/sdk-components-react/package.json

@@ -58,6 +58,7 @@
     "@webstudio-is/react-sdk": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
     "await-interaction-response": "^0.0.2",
+    "lottie-web": "^5.12.2",
     "colord": "^2.9.3",
     "micromark": "^4.0.2",
     "micromark-extension-gfm-table": "^2.1.1"

packages/sdk-components-react/src/components.ts

@@ -30,6 +30,7 @@ export { RadioButton } from "./radio-button";
 export { Checkbox } from "./checkbox";
 export { Vimeo } from "./vimeo";
 export { YouTube } from "./youtube";
+export { LottiePlayer } from "./lottie-player";
 export { VimeoPreviewImage } from "./vimeo-preview-image";
 export { VimeoPlayButton } from "./vimeo-play-button";
 export { VimeoSpinner } from "./vimeo-spinner";

packages/sdk-components-react/src/lottie-player.template.tsx

@@ -0,0 +1,18 @@
+import { type TemplateMeta, $, css } from "@webstudio-is/template";
+
+export const meta: TemplateMeta = {
+  label: "Lottie Animation",
+  category: "media",
+  order: 3,
+  description:
+    "Add a Lottie JSON animation to your page. Paste a public URL to your .json animation file in the Settings tab.",
+  template: (
+    <$.LottiePlayer
+      ws:label="Lottie Animation"
+      ws:style={css`
+        width: 200px;
+        height: 200px;
+      `}
+    />
+  ),
+};