Fix warning on elements with interactionPromptThreshold (#112)

* fix: warning on elements with interactionPromptThreshold defined which is an attribute that should only be passed to 3D model

Co-authored-by: Josh Larson <[email protected]>

packages/dev/src/components/Gallery.client.jsx

@@ -10,7 +10,7 @@ export default function Gallery() {
   const featuredMedia = selectedVariant.image || media[0].image;
   const featuredMediaSrc = featuredMedia.url.split('?')[0];
   const galleryMedia = media.filter((med) => {
-    if (med.mediaContentType === 'MODEL_3D') {
+    if (med.mediaContentType === MODEL_3D_TYPE) {
       return true;
     }
 
@@ -28,6 +28,12 @@ export default function Gallery() {
     >
       <SelectedVariantImage className="w-[80vw] md:w-full h-full object-cover object-center flex-shrink-0 md:flex-shrink-none snap-start md:col-span-2 border border-gray-200 rounded-lg" />
       {galleryMedia.map((med) => {
+        let extraProps = {};
+
+        if (med.mediaContentType === MODEL_3D_TYPE) {
+          extraProps = MODEL_3D_PROPS;
+        }
+
         return (
           <MediaFile
             tabIndex="0"
@@ -38,10 +44,15 @@ export default function Gallery() {
               height: '485',
               crop: 'center',
             }}
-            interactionPromptThreshold="0"
+            {...extraProps}
           />
         );
       })}
     </div>
   );
 }
+
+const MODEL_3D_TYPE = 'MODEL_3D';
+const MODEL_3D_PROPS = {
+  interactionPromptThreshold: '0',
+};

packages/hydrogen/CHANGELOG.md

@@ -13,6 +13,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 - fix: make sure all errors show an error dialog when hydrogen is in dev mode
 - feat: use Image url field instead of deprecated originalSrc field
 - feat: switch to unstable API
+- fix: MediaFile component warning on non-Model3D types
 - fix: remove console logs for caching
 - fix: lowercased SVG tags in RSC
 - fix: make the URL search property available via hooks