Fix inline image collapse when file is not ready

Use the file's width to determine whether actual dimensions are
available instead of just checking file presence. An unprocessed
image file exists but has no dimensions yet, causing the aspect
ratio fallback to be skipped and the image to collapse to zero
height.

Author: tf

entry_types/scrolled/package/spec/contentElements/inlineImage/InlineImage-spec.js

@@ -337,5 +337,23 @@ describe('InlineImage', () => {
       const contentElement = getContentElement();
       expect(contentElement.getFitViewportAspectRatio()).toEqual('0.75');
     });
+
+    it('uses default aspect ratio when file is not ready', () => {
+      const {getContentElement} = renderContentElement({
+        typeName: 'inlineImage',
+        configuration: {
+          id: 100
+        },
+        imageFiles: [{
+          permaId: 100,
+          isReady: false,
+          width: null,
+          height: null
+        }]
+      });
+
+      const contentElement = getContentElement();
+      expect(contentElement.getFitViewportAspectRatio()).toEqual('0.75');
+    });
   });
 });

entry_types/scrolled/package/spec/frontend/FitViewport-spec.js

@@ -92,6 +92,38 @@ describe('FitViewport', () => {
     expect(container.querySelector(`.${fullscreenStyles.root}`)).not.toBeNull();
   });
 
+  it('uses fallback aspect ratio when file is present but not ready', () => {
+    const file = {isReady: false};
+    const {container} = render(
+      <FitViewport file={file} fallbackAspectRatio={0.75}>
+        <FitViewport.Content />
+      </FitViewport>
+    );
+
+    expect(getOuter(container)).toHaveStyle('--fit-viewport-aspect-ratio: 0.75');
+  });
+
+  it('uses file aspect ratio when file is ready even if fallback is given', () => {
+    const file = {width: 200, height: 100};
+    const {container} = render(
+      <FitViewport file={file} fallbackAspectRatio={0.75}>
+        <FitViewport.Content />
+      </FitViewport>
+    );
+
+    expect(getOuter(container)).toHaveStyle('--fit-viewport-aspect-ratio: 0.5');
+  });
+
+  it('uses fallback aspect ratio when no file is present', () => {
+    const {container} = render(
+      <FitViewport fallbackAspectRatio={0.75}>
+        <FitViewport.Content />
+      </FitViewport>
+    );
+
+    expect(getOuter(container)).toHaveStyle('--fit-viewport-aspect-ratio: 0.75');
+  });
+
   function getOuter(container) {
     return container.querySelector(`.${styles.container}`);
   }

entry_types/scrolled/package/src/contentElements/hotspots/Hotspots.js

@@ -235,7 +235,7 @@ export function HotspotsImage({
            activeIndex={activeIndex}
            activateArea={activateArea}>
       <FitViewport file={imageFile}
-                   aspectRatio={imageFile ? undefined : 0.75}
+                   fallbackAspectRatio={0.75}
                    fill={configuration.position === 'backdrop'}
                    opaque={!imageFile}>
         <Composite activeIndex={activeIndex + 1}

entry_types/scrolled/package/src/contentElements/imageGallery/ImageGallery.js

@@ -250,7 +250,7 @@ function ItemImageWithCaption({item, imageFile, configuration, current, onClick,
 
   return (
     <FitViewport file={imageFile}
-                 aspectRatio={imageFile ? undefined : 0.75}
+                 fallbackAspectRatio={0.75}
                  scale={0.8}
                  opaque={!imageFile}>
       <ContentElementBox>

entry_types/scrolled/package/src/contentElements/inlineImage/InlineImage.js

@@ -90,7 +90,8 @@ function ImageWithCaption({
 
   return (
     <FitViewport file={imageFile}
-                 aspectRatio={aspectRatio || (imageFile ? undefined : 0.75)}
+                 aspectRatio={aspectRatio}
+                 fallbackAspectRatio={0.75}
                  opaque={!imageFile}>
       <ContentElementBox borderRadius={isCircleCrop ? 'none' : rounded}>
         <ContentElementFigure configuration={configuration}>

entry_types/scrolled/package/src/contentElements/inlineVideo/InlineVideo.js

@@ -123,8 +123,7 @@ function OrientationUnawareInlineVideo({
   return (
     <MediaInteractionTracking playerState={playerState} playerActions={playerActions}>
       <FitViewport file={videoFile}
-                   aspectRatio={videoFile ?
-                                undefined : fallbackAspectRatio}
+                   fallbackAspectRatio={fallbackAspectRatio}
                    fill={configuration.position === 'backdrop'}
                    opaque={!videoFile}>
         <ContentElementBox>

entry_types/scrolled/package/src/frontend/FitViewport.js

@@ -32,14 +32,16 @@ const AspectRatioContext = React.createContext();
  * @param {Object} [props.opaque] - Render black background behind content.
  * @param {string} [props.fill] - Ignore aspect ration and fill viewport vertically.
  */
-export function FitViewport({file, aspectRatio, opaque, children, fill, scale}) {
-  if (!file && !aspectRatio) return children;
+export function FitViewport({file, aspectRatio, fallbackAspectRatio, opaque, children, fill, scale}) {
+  if (!file && !aspectRatio && !fallbackAspectRatio) return children;
 
   if (typeof aspectRatio === 'string') {
     aspectRatio = `var(--theme-aspect-ratio-${aspectRatio})`;
   }
 
-  aspectRatio = fill ? 'fill' : aspectRatio || (file.height / file.width);
+  aspectRatio = fill ? 'fill' :
+                aspectRatio ||
+                (file?.width ? file.height / file.width : fallbackAspectRatio);
 
   return (
     <div className={classNames(styles.container, {[styles.opaque]: opaque})}