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