finalize screenshot update

datadesk · Nov 11, 2024 · 3965e60 · 3965e60
1 parent 062295c
commit 3965e60
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 68 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -17,7 +17,6 @@ import puppeteer from 'puppeteer';
 import { isProductionEnv, getBasePath } from './env.js';
 import {
   clearConsole,
-  getContentHeight,
   onError,
   printInstructions,
   validAudioExtensions,
@@ -54,6 +53,7 @@ const CROSSWALK_ALLOWED_EXTS = {
 };
 
 const FIXED_FALLBACK_SCREENSHOT_WIDTH = 375;
+const EXTRA_CONTENT_HEIGHT = 20;
 
 /**
  * @typedef {Object} BakerOptions
@@ -417,16 +417,13 @@ export class Baker extends EventEmitter {
           console.error('Could not retrieve bounding box for element with body selector.');
           return;
         }
-        const contentHeight = getContentHeight(
-          FIXED_FALLBACK_SCREENSHOT_WIDTH,
-          boundingBox.width,
-          boundingBox.height
-        );
+
+        const currentViewport = page.viewport();
 
         await page.setViewport({
           width: FIXED_FALLBACK_SCREENSHOT_WIDTH,
-          height: contentHeight,
-          deviceScaleFactor: 2,
+          height: currentViewport.height,
+          deviceScaleFactor: 2
         });
 
         await page.waitForNetworkIdle();
@@ -440,7 +437,15 @@ export class Baker extends EventEmitter {
         const screenshotStoragePath = join(screenshotEmbedDir, 'fallback.png');
         console.log(`Storing the fallback image at: ${screenshotStoragePath}.`);
 
-        await page.screenshot({ path: screenshotStoragePath, fullPage: true });
+        await page.screenshot({
+          path: screenshotStoragePath,
+          clip: {
+            x: boundingBox.x,
+            y: boundingBox.y,
+            width: FIXED_FALLBACK_SCREENSHOT_WIDTH,
+            height: boundingBox.height + EXTRA_CONTENT_HEIGHT
+          }
+        });
         await page.close();
       } catch (err) {
         console.error(`Failed to process ${embedName}: ${err.message}`);

diff --git a/lib/utils.js b/lib/utils.js
@@ -170,62 +170,3 @@ 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 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 getContentHeight(
-  fixedWidth,
-  elementWidth,
-  elementHeight,
-  minExtraContentHeight = 20,
-  maxExtraContentHeight = 40
-) {
-  const scaleFactor = fixedWidth / elementWidth;
-  const contentHeight = calculateContentHeight(fixedWidth, elementWidth, elementHeight, scaleFactor);
-  const extraContentHeight = calculateExtraContentHeight(minExtraContentHeight, maxExtraContentHeight, scaleFactor);
-
-  console.log({contentHeight, extraContentHeight, totalHeight: contentHeight + extraContentHeight});
-
-  return contentHeight + extraContentHeight;
-}