Merge pull request #59 from BKWLD/fix-video-only-contentful-visuals

Fix video only contentful visuals
BKWLD · Nov 20, 2024 · 388ea1b · 388ea1b
2 parents b5ec182 + 1cb6a0e
commit 388ea1b
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 0 deletions.
diff --git a/packages/contentful/cypress/component/ContentfulVisual.cy.tsx b/packages/contentful/cypress/component/ContentfulVisual.cy.tsx
@@ -63,6 +63,9 @@ describe('contentful visual entry props', () => {
       portraitVideo: null,
     }} />)
 
+    // There should be no vidoes rendered
+    cy.get("video").should("not.exist");
+
     // Portrait asset
     cy.get('img').hasDimensions(VW, VW)
     cy.get('img').its('[0].currentSrc')
@@ -84,6 +87,9 @@ describe('contentful visual entry props', () => {
       portraitImage: null,
     }} />)
 
+    // There should be no imgs rendered
+    cy.get('img').should('not.exist')
+
     // Portrait asset
     cy.get('video').its('[0].currentSrc')
       .should('contain', portraitVideoAsset.url)

diff --git a/packages/contentful/src/lib/urlBuilding.ts b/packages/contentful/src/lib/urlBuilding.ts
@@ -13,6 +13,9 @@ export const defaultImageLoader: ImageLoader = ({
     src.portraitImage.url :
     src.image?.url || src.url
 
+  // If no URL found, return nothing
+  if (!url) return ''
+
   // Make Contentful resizing instructions
   const query = new URLSearchParams({ w: String(width) })
 

diff --git a/packages/react/src/PictureImage.tsx b/packages/react/src/PictureImage.tsx
@@ -47,6 +47,7 @@ export default function PictureImage(props: PictureImageProps): ReactNode {
 
   // Make the img src url
   const srcUrl = makeSrcUrl(src, imageLoader)
+  if (!srcUrl) return null
 
   // Make array or props that will be used to make <source>s.  A `null` type is
   // always added to create fallback sources for native mime-type of the