diff --git a/.changeset/heavy-ghosts-nail.md b/.changeset/heavy-ghosts-nail.md new file mode 100644 index 00000000000..8e89cd708d2 --- /dev/null +++ b/.changeset/heavy-ghosts-nail.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Fix `poster` not shown in `MediaRenderer` component for 3D models diff --git a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.test.tsx b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.test.tsx index a4d14a00b5f..bd22e175e6e 100644 --- a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.test.tsx +++ b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.test.tsx @@ -14,6 +14,11 @@ import { mergeRefs, } from "./MediaRenderer.js"; +const three3dModelLink = + "https://i2.seadn.io/matic/0x2953399124f0cbb46d2cbacd8a89cf0599974963/bd1801876c5cf1302484e225c72959/49bd1801876c5cf1302484e225c72959.glb"; +const imageLink = + "https://i.seadn.io/gae/r_b9GB0iYA39ichUlKdFLeG4UliK7YXi9SsM0Xdvm6pNDChYbN5E7Fxop1MdJCbmNvSlbER73YiA9WY1JbhEfkuIktoHfN9UlEZy4A?auto=format&dpr=1&w=1000"; + describe("MediaRenderer", () => { it("should render nothing if no src provided", () => { render(); @@ -27,14 +32,9 @@ describe("MediaRenderer", () => { }, 1000); }); - it("should render a plain image", () => { - render( - , - ); - waitFor(() => { + it("should render a plain image", async () => { + render(); + await waitFor(() => { expect(screen.getByRole("img")).toBeInTheDocument(); }); }); @@ -222,4 +222,17 @@ describe("MediaRenderer", () => { expect(iframe).toHaveAttribute("src", "https://example.com/video"); }); }); + + it("should render poster image for 3d models", async () => { + render( + , + ); + await waitFor(() => { + expect(screen.getByRole("img")).toBeInTheDocument(); + }); + }); }); diff --git a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx index 2e6e4aaec95..13fce13972d 100644 --- a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx +++ b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx @@ -111,6 +111,21 @@ export const MediaRenderer = /* @__PURE__ */ (() => console.error( "Encountered an unsupported media type. 3D model support was removed in v5.92.0. To add a 3D model to your app, use @google/model-viewer and use the ModelViewer component.", ); + + // show poster + if (possiblePosterSrc.mimeType?.startsWith("image/")) { + return ( + } + className={className} + height={height} + width={width} + /> + ); + } } // video