From 70e024f43e6ff0a890efa6288fbdc9c19ca42e72 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 19 Jun 2025 17:16:55 +0000
Subject: [PATCH] [TOOL-4831] SDK: Fix MediaRenderer not showing poster for 3d
 models (#7387)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on fixing the display of the `poster` in the `MediaRenderer` component for 3D models and adding tests to ensure expected behavior.

### Detailed summary
- Updated the `MediaRenderer` component to show a `poster` image for 3D models.
- Added a new test case to verify rendering of the `poster` image when a 3D model is provided.
- Replaced hardcoded image URL with a constant `imageLink` for clarity in tests.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **Bug Fixes**
	- Fixed an issue where the poster image was not displayed when rendering 3D models in the MediaRenderer component. Now, if a poster image is available, it will be shown as a fallback for unsupported 3D models.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .changeset/heavy-ghosts-nail.md               |  5 ++++
 .../ui/MediaRenderer/MediaRenderer.test.tsx   | 29 ++++++++++++++-----
 .../web/ui/MediaRenderer/MediaRenderer.tsx    | 15 ++++++++++
 3 files changed, 41 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/heavy-ghosts-nail.md

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(<MediaRenderer client={TEST_CLIENT} />);
@@ -27,14 +32,9 @@ describe("MediaRenderer", () => {
     }, 1000);
   });
 
-  it("should render a plain image", () => {
-    render(
-      <MediaRenderer
-        client={TEST_CLIENT}
-        src="https://i.seadn.io/gae/r_b9GB0iYA39ichUlKdFLeG4UliK7YXi9SsM0Xdvm6pNDChYbN5E7Fxop1MdJCbmNvSlbER73YiA9WY1JbhEfkuIktoHfN9UlEZy4A?auto=format&dpr=1&w=1000"
-      />,
-    );
-    waitFor(() => {
+  it("should render a plain image", async () => {
+    render(<MediaRenderer client={TEST_CLIENT} src={imageLink} />);
+    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(
+      <MediaRenderer
+        client={TEST_CLIENT}
+        src={three3dModelLink}
+        poster={imageLink}
+      />,
+    );
+    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 (
+            <ImageRenderer
+              style={mergedStyle}
+              src={possiblePosterSrc.url}
+              alt={alt}
+              ref={ref as unknown as React.ForwardedRef<HTMLImageElement>}
+              className={className}
+              height={height}
+              width={width}
+            />
+          );
+        }
       }
 
       //  video