update getcontentheight

lib/index.js

@@ -16,8 +16,8 @@ import puppeteer from 'puppeteer';
 // local
 import { isProductionEnv, getBasePath } from './env.js';
 import {
-  calculateContentHeight,
   clearConsole,
+  getContentHeight,
   onError,
   printInstructions,
   validAudioExtensions,
@@ -54,7 +54,6 @@ const CROSSWALK_ALLOWED_EXTS = {
 };
 
 const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375;
-const EXTRA_CONTENT_HEIGHT = 200;
 
 /**
  * @typedef {Object} BakerOptions
@@ -418,11 +417,10 @@ export class Baker extends EventEmitter {
           console.error('Could not retrieve bounding box for element with body selector.');
           return;
         }
-        const contentHeight = calculateContentHeight(
+        const contentHeight = getContentHeight(
           FIXED_FALLBACK_SCREENSHOT_WIDTH,
           boundingBox.width,
-          boundingBox.height,
-          EXTRA_CONTENT_HEIGHT
+          boundingBox.height
         );
 
         await page.setViewport({

lib/utils.js

@@ -171,28 +171,61 @@ export function isObject(value) {
   return value != null && (type === 'object' || type === 'function');
 }
 
+/**
+ *  Obtains content height value
+ *
+ * @param fixedWidth {number}
+ * @param elementWidth {number}
+ * @param elementHeight {number}
+ * @param scaleFactor {number}
+ * @returns {number}
+ */
+function calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor) {
+  let contentHeight;
+  if (elementWidth > fixedWidth) {
+    contentHeight = Math.round(elementHeight * scaleFactor);
+  } else {
+    contentHeight = Math.round(elementHeight);
+  }
+
+  return contentHeight;
+}
+
+/**
+ *  Obtains extra content height value
+ *
+ * @param minExtraContentHeight {number}
+ * @param maxExtraContentHeight {number}
+ * @param scaleFactor {number}
+ * @returns {number}
+ */
+function calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor) {
+  return Math.round(
+    minExtraContentHeight + (1 - scaleFactor) * (maxExtraContentHeight - minExtraContentHeight)
+  );
+}
+
 /**
  * Calculates the content height of an element based on a fixed width and element width.
  * @param fixedWidth {number} The fixed width of the viewport.
  * @param elementWidth {number} The width of the bounding box of the element.
  * @param elementHeight {number} The height of the bounding box of the element.
- * @param extraContentHeight {number} The additional height to add to the calculated content height.
+ * @param minExtraContentHeight {number} The minimum additional height to add to the calculated content height.
+ * @param maxExtraContentHeight {number} The maximum additional height to add to the calculated content height.
  * @returns {number} The calculated content height.
  */
-export function calculateContentHeight(
+export function getContentHeight(
   fixedWidth,
   elementWidth,
   elementHeight,
-  extraContentHeight = 0
+  minExtraContentHeight = 20,
+  maxExtraContentHeight = 40
 ) {
-  // If the element width is greater than the fixed width,
-  // scale the height based on the ratio of the fixed width to the element width and add extra content height.
-  if (elementWidth > fixedWidth) {
-    const scaleFactor = fixedWidth / elementWidth;
-    return Math.round(elementHeight * scaleFactor) + extraContentHeight;
-  }
+  const scaleFactor = fixedWidth / elementWidth;
+  const contentHeight = calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor);
+  const extraContentHeight = calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor);
+
+  console.log({contentHeight, extraContentHeight, totalHeight: contentHeight + extraContentHeight});
 
-  // If the element width is less than the fixed width,
-  // don't scale the height and just return the element height with extra content height.
-  return Math.round(elementHeight) + extraContentHeight;
+  return contentHeight + extraContentHeight;
 }