BREAKING: Removes 3D model support on MediaRenderer (#6443)

Author: gregfromstl

.changeset/slow-mails-ring.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+BREAKING: Removes 3D model support in MediaRenderer

packages/thirdweb/package.json

@@ -132,63 +132,25 @@
   },
   "typesVersions": {
     "*": {
-      "adapters/*": [
-        "./dist/types/exports/adapters/*.d.ts"
-      ],
-      "auth": [
-        "./dist/types/exports/auth.d.ts"
-      ],
-      "chains": [
-        "./dist/types/exports/chains.d.ts"
-      ],
-      "contract": [
-        "./dist/types/exports/contract.d.ts"
-      ],
-      "deploys": [
-        "./dist/types/exports/deploys.d.ts"
-      ],
-      "event": [
-        "./dist/types/exports/event.d.ts"
-      ],
-      "extensions/*": [
-        "./dist/types/exports/extensions/*.d.ts"
-      ],
-      "pay": [
-        "./dist/types/exports/pay.d.ts"
-      ],
-      "react": [
-        "./dist/types/exports/react.d.ts"
-      ],
-      "react-native": [
-        "./dist/types/exports/react-native.d.ts"
-      ],
-      "rpc": [
-        "./dist/types/exports/rpc.d.ts"
-      ],
-      "storage": [
-        "./dist/types/exports/storage.d.ts"
-      ],
-      "transaction": [
-        "./dist/types/exports/transaction.d.ts"
-      ],
-      "utils": [
-        "./dist/types/exports/utils.d.ts"
-      ],
-      "wallets": [
-        "./dist/types/exports/wallets.d.ts"
-      ],
-      "wallets/*": [
-        "./dist/types/exports/wallets/*.d.ts"
-      ],
-      "modules": [
-        "./dist/types/exports/modules.d.ts"
-      ],
-      "social": [
-        "./dist/types/exports/social.d.ts"
-      ],
-      "ai": [
-        "./dist/types/exports/ai.d.ts"
-      ]
+      "adapters/*": ["./dist/types/exports/adapters/*.d.ts"],
+      "auth": ["./dist/types/exports/auth.d.ts"],
+      "chains": ["./dist/types/exports/chains.d.ts"],
+      "contract": ["./dist/types/exports/contract.d.ts"],
+      "deploys": ["./dist/types/exports/deploys.d.ts"],
+      "event": ["./dist/types/exports/event.d.ts"],
+      "extensions/*": ["./dist/types/exports/extensions/*.d.ts"],
+      "pay": ["./dist/types/exports/pay.d.ts"],
+      "react": ["./dist/types/exports/react.d.ts"],
+      "react-native": ["./dist/types/exports/react-native.d.ts"],
+      "rpc": ["./dist/types/exports/rpc.d.ts"],
+      "storage": ["./dist/types/exports/storage.d.ts"],
+      "transaction": ["./dist/types/exports/transaction.d.ts"],
+      "utils": ["./dist/types/exports/utils.d.ts"],
+      "wallets": ["./dist/types/exports/wallets.d.ts"],
+      "wallets/*": ["./dist/types/exports/wallets/*.d.ts"],
+      "modules": ["./dist/types/exports/modules.d.ts"],
+      "social": ["./dist/types/exports/social.d.ts"],
+      "ai": ["./dist/types/exports/ai.d.ts"]
     }
   },
   "browser": {
@@ -210,7 +172,6 @@
     "@coinbase/wallet-sdk": "4.3.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.0",
-    "@google/model-viewer": "2.1.1",
     "@noble/curves": "1.8.1",
     "@noble/hashes": "1.7.1",
     "@passwordless-id/webauthn": "^2.1.2",

packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState, useRef, useEffect, Suspense, lazy } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import {
   CarbonDocumentAudio,
   CarbonDocumentUnknown,
@@ -23,7 +23,6 @@ import { useResolvedMediaType } from "./useResolvedMediaType.js";
  * - Images
  * - Videos
  * - Audio files
- * - 3D Models
  * - SVGs (for [on-chain NFTs](https://blog.thirdweb.com/guides/how-to-create-on-chain-nfts-with-thirdweb/))
  * - `iframe` and `HTML`
  * - If none of these are appropriate, the fallback is a link to the asset
@@ -32,6 +31,8 @@ import { useResolvedMediaType } from "./useResolvedMediaType.js";
  *
  * You can use thirdweb CLI to upload any file to IPFS and get the IPFS URI
  *
+ * Note: This component no longer supports 3D models as of v5.92.0!
+ *
  * `npx thirdweb upload <path/to/file>`
  * @example
  * ```tsx
@@ -107,28 +108,8 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
 
         // 3d model
         if (mediaInfo.mimeType.startsWith("model")) {
-          return (
-            <Suspense
-              fallback={
-                poster ? (
-                  <img
-                    style={mergedStyle}
-                    src={poster}
-                    alt={alt}
-                    ref={ref as unknown as React.LegacyRef<HTMLImageElement>}
-                    className={className}
-                  />
-                ) : null
-              }
-            >
-              <ModelViewer
-                style={mergedStyle}
-                src={mediaInfo.url || ""}
-                poster={poster}
-                alt={alt}
-                className={className}
-              />
-            </Suspense>
+          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.",
           );
         }
 
@@ -197,8 +178,6 @@ export const MediaRenderer = /* @__PURE__ */ (() =>
     },
   ))();
 
-const ModelViewer = /* @__PURE__ */ lazy(() => import("./ModelViewer.js"));
-
 interface PlayButtonProps {
   onClick: () => void;
   isPlaying: boolean;
@@ -326,14 +305,14 @@ const VideoPlayer = /* @__PURE__ */ (() =>
           try {
             videoRef.current.play();
           } catch (err) {
-            console.error("error playing video", err);
+            console.error("Error playing video", err);
           }
         } else {
           try {
             videoRef.current.pause();
             videoRef.current.currentTime = 0;
           } catch (err) {
-            console.error("error pausing video", err);
+            console.error("Error pausing video", err);
           }
         }
       }