diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx
index 45eb7e6de8..1fc2175de0 100644
--- a/apps/web/pages/_app.tsx
+++ b/apps/web/pages/_app.tsx
@@ -1,6 +1,5 @@
import 'src/scenes/WelcomeAnimation/intro.css';
import 'src/index.css';
-import 'src/scenes/NftDetailPage/model-viewer.css';
import 'react-loading-skeleton/dist/skeleton.css';
import { Analytics } from '@vercel/analytics/react';
diff --git a/apps/web/src/components/NftPreview/NftPreview.tsx b/apps/web/src/components/NftPreview/NftPreview.tsx
index f65d8e8f19..9b223dc08e 100644
--- a/apps/web/src/components/NftPreview/NftPreview.tsx
+++ b/apps/web/src/components/NftPreview/NftPreview.tsx
@@ -170,7 +170,7 @@ function NftPreview({
return ;
}
if (shouldLiverender && token.media?.__typename === 'GltfMedia') {
- return ;
+ return ;
}
if (isIFrameLiveDisplay) {
return ;
diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailAnimation.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailAnimation.tsx
index bacf6dee39..cd569942c4 100644
--- a/apps/web/src/scenes/NftDetailPage/NftDetailAnimation.tsx
+++ b/apps/web/src/scenes/NftDetailPage/NftDetailAnimation.tsx
@@ -54,7 +54,7 @@ function NftDetailAnimation({ mediaRef, onLoad }: Props) {
}, [token.media]);
if (contentRenderURL.endsWith('.glb')) {
- return ;
+ return ;
}
return (
diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailAsset.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailAsset.tsx
index 7698a01e42..70d645fa93 100644
--- a/apps/web/src/scenes/NftDetailPage/NftDetailAsset.tsx
+++ b/apps/web/src/scenes/NftDetailPage/NftDetailAsset.tsx
@@ -165,7 +165,7 @@ function NftDetailAssetComponentWithouFallback({
/>
);
case 'GltfMedia':
- return ;
+ return ;
default:
return ;
}
diff --git a/apps/web/src/scenes/NftDetailPage/NftDetailModel.tsx b/apps/web/src/scenes/NftDetailPage/NftDetailModel.tsx
index 74e63d6c1f..a408eb5a82 100644
--- a/apps/web/src/scenes/NftDetailPage/NftDetailModel.tsx
+++ b/apps/web/src/scenes/NftDetailPage/NftDetailModel.tsx
@@ -6,14 +6,15 @@ import { ContentIsLoadedEvent } from '~/contexts/shimmer/ShimmerContext';
import { NftDetailModelFragment$key } from '~/generated/NftDetailModelFragment.graphql';
import { useThrowOnMediaFailure } from '~/hooks/useNftRetry';
-type Props = {
- mediaRef: NftDetailModelFragment$key;
- onLoad: () => void;
-};
-
// TODO: Clean this up once fixed
// https://github.com/google/model-viewer/issues/1502
+interface ModelViewerJSX {
+ src: string;
+ poster?: string;
+ class: string;
+}
+
declare global {
namespace JSX {
interface IntrinsicElements {
@@ -23,13 +24,14 @@ declare global {
}
}
-interface ModelViewerJSX {
- src: string;
- poster?: string;
- class: string;
-}
+type Props = {
+ mediaRef: NftDetailModelFragment$key;
+ onLoad: () => void;
+ // Prop that helps model fit to its parent container
+ fullHeight: boolean;
+};
-function NftDetailModel({ mediaRef, onLoad }: Props) {
+function NftDetailModel({ mediaRef, onLoad, fullHeight }: Props) {
const { contentRenderURL } = useFragment(
graphql`
fragment NftDetailModelFragment on GltfMedia {
@@ -52,20 +54,41 @@ function NftDetailModel({ mediaRef, onLoad }: Props) {
auto-rotate
camera-controls
src={contentRenderURL}
+ style={{
+ width: '100%',
+ height: fullHeight ? '100%' : undefined,
+ }}
/>
);
}
// stop-gap as the backend doesn't always categorize GltfMedia
-export function RawNftDetailModel({ url, onLoad }: { url: string; onLoad: ContentIsLoadedEvent }) {
+export function RawNftDetailModel({
+ url,
+ onLoad,
+ fullHeight,
+}: {
+ url: string;
+ onLoad: ContentIsLoadedEvent;
+ fullHeight: boolean;
+}) {
useEffect(() => {
onLoad();
}, [onLoad]);
return (
-
+
);
}
diff --git a/apps/web/src/scenes/NftDetailPage/model-viewer.css b/apps/web/src/scenes/NftDetailPage/model-viewer.css
deleted file mode 100644
index 50c83b5392..0000000000
--- a/apps/web/src/scenes/NftDetailPage/model-viewer.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* TODO: make model viewer a styled component once this issue is resolved
-https://github.com/google/model-viewer/issues/1502 */
-
-.model-viewer {
- width: 100%;
- height: 100%;
-}