Ensure getDimensionProps does not return nullable width/height

app/src/payload/blocks/MediaBlock/Component/MediaBlockVideo/index.tsx

@@ -29,6 +29,8 @@ export const MediaBlockVideo = ({ mediaDark, mediaLight, widthOverride, heightOv
     return <ThemedVideo dark={darkVideo} light={lightVideo} />;
   } else {
     // Dark is our default style
-    return <video src={mediaDarkData.url!} aria-label={mediaDarkData.alt} controls></video>;
+    return (
+      <video src={mediaDarkData.url!} aria-label={mediaDarkData.alt} controls style={darkDimensions.style}></video>
+    );
   }
 };

app/src/payload/blocks/MediaBlock/Component/utils.ts

@@ -1,4 +1,5 @@
 import { Media } from '@/payload-types';
+import { GetDimensionPropsResponse } from './utils.types';
 
 /**
  * Compute the final dimensions and style.
@@ -11,32 +12,34 @@ export const getDimensionProps = (
   media: Media,
   widthOverride: number | null | undefined,
   heightOverride: number | null | undefined,
-) => {
+): GetDimensionPropsResponse => {
   // Get the original dimensions of the media
-  const originalWidth = media.width!;
-  const originalHeight = media.height!;
+  const originalWidth = media.width;
+  const originalHeight = media.height;
 
   let width = widthOverride || originalWidth;
   let height = heightOverride || originalHeight;
 
-  // If only the width override is provided, calculate the height based on the original aspect ratio
-  if (widthOverride && !heightOverride) {
-    height = (widthOverride / originalWidth) * originalHeight; // Preserve aspect ratio
-  }
-  // If only the height override is provided, calculate the width based on the original aspect ratio
-  else if (heightOverride && !widthOverride) {
-    width = (heightOverride / originalHeight) * originalWidth; // Preserve aspect ratio
+  if (originalWidth && originalHeight) {
+    // If only the width override is provided, calculate the height based on the original aspect ratio
+    if (widthOverride && !heightOverride) {
+      height = (widthOverride / originalWidth) * originalHeight; // Preserve aspect ratio
+    }
+    // If only the height override is provided, calculate the width based on the original aspect ratio
+    else if (heightOverride && !widthOverride) {
+      width = (heightOverride / originalHeight) * originalWidth; // Preserve aspect ratio
+    }
   }
 
   // Create a style object that preserves space for lazy-loaded images
   const style = {
-    width: `${width}px`, // Always set the width to avoid layout shifts for lazy-loaded images
-    height: heightOverride ? `${height}px` : 'auto', // Set height to auto if not overridden to maintain aspect ratio
+    ...(width && { width: `${width}px` }), // Always set the width to avoid layout shifts for lazy-loaded images
+    ...(height && { height: heightOverride ? `${height}px` : 'auto' }), // Set height to auto if not overridden to maintain aspect ratio
   };
 
   return {
-    width,
-    height,
+    width: width ?? undefined,
+    height: height ?? undefined,
     style,
   };
 };

app/src/payload/blocks/MediaBlock/Component/utils.types.ts

@@ -0,0 +1,5 @@
+export type GetDimensionPropsResponse = {
+  width: number | undefined;
+  height: number | undefined;
+  style: React.CSSProperties;
+};