GLB liverender regression fix (#1688)

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';

apps/web/src/components/NftPreview/NftPreview.tsx

@@ -170,7 +170,7 @@ function NftPreview({
       return <NftDetailGif onLoad={handleNftLoaded} tokenRef={token} />;
     }
     if (shouldLiverender && token.media?.__typename === 'GltfMedia') {
-      return <NftDetailModel onLoad={handleNftLoaded} mediaRef={token.media} />;
+      return <NftDetailModel onLoad={handleNftLoaded} mediaRef={token.media} fullHeight={false} />;
     }
     if (isIFrameLiveDisplay) {
       return <NftDetailAnimation onLoad={handleNftLoaded} mediaRef={token} />;

apps/web/src/scenes/NftDetailPage/NftDetailAnimation.tsx

@@ -54,7 +54,7 @@ function NftDetailAnimation({ mediaRef, onLoad }: Props) {
   }, [token.media]);
 
   if (contentRenderURL.endsWith('.glb')) {
-    return <RawNftDetailModel onLoad={onLoad} url={contentRenderURL} />;
+    return <RawNftDetailModel onLoad={onLoad} url={contentRenderURL} fullHeight />;
   }
 
   return (

apps/web/src/scenes/NftDetailPage/NftDetailAsset.tsx

@@ -165,7 +165,7 @@ function NftDetailAssetComponentWithouFallback({
         />
       );
     case 'GltfMedia':
-      return <NftDetailModel onLoad={onLoad} mediaRef={token.media} />;
+      return <NftDetailModel onLoad={onLoad} mediaRef={token.media} fullHeight />;
     default:
       return <NftDetailAnimation onLoad={onLoad} mediaRef={token} />;
   }

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,
+        }}
       />
     </StyledNftDetailModel>
   );
 }
 
 // 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 (
     <StyledNftDetailModel>
-      <model-viewer class="model-viewer" auto-rotate camera-controls src={url} />
+      <model-viewer
+        class="model-viewer"
+        auto-rotate
+        camera-controls
+        src={url}
+        style={{
+          width: '100%',
+          height: fullHeight ? '100%' : undefined,
+        }}
+      />
     </StyledNftDetailModel>
   );
 }