mobile-snap 1.0.9 → 1.1.1

package/bin/cli.js

@@ -414,9 +414,18 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   const indicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.8)';
   const androidIndicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.5)';
   const frameScale = shadow ? '0.88' : '0.94';
-  const dropShadow = shadow ? '0 20px 50px rgba(0,0,0,0.6)' : 'none';
-  const androidDropShadow = shadow ? '0 20px 50px rgba(0,0,0,0.6)' : 'none';
-  const tabletDropShadow = shadow ? '0 20px 50px rgba(0,0,0,0.6)' : 'none';
+  const iosShadow = shadow ? 
+    '0 0 0 12px #1f1f21, 0 0 0 13px #2f2f31, 0 20px 50px rgba(0,0,0,0.6)' : 
+    '0 0 0 12px #1f1f21, 0 0 0 13px #2f2f31';
+  const iosTabletShadow = shadow ? 
+    '0 0 0 14px #1f1f21, 0 0 0 15px #2f2f31, 0 20px 50px rgba(0,0,0,0.6)' : 
+    '0 0 0 14px #1f1f21, 0 0 0 15px #2f2f31';
+  const androidPhoneShadow = shadow ? 
+    '0 0 0 10px #2a2a2c, 0 0 0 11px #3a3a3c, 0 20px 50px rgba(0,0,0,0.6)' : 
+    '0 0 0 10px #2a2a2c, 0 0 0 11px #3a3a3c';
+  const androidTabletShadow = shadow ? 
+    '0 0 0 14px #2a2a2c, 0 20px 50px rgba(0,0,0,0.6)' : 
+    '0 0 0 14px #2a2a2c';
 
   let frameClass = 'ios';
   let topElementHTML = '<div class="dynamic-island"></div>';
@@ -524,10 +533,7 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   .device-frame {
     position: relative;
     background: #000;
-    box-shadow: 
-      0 0 0 12px #1f1f21,
-      0 0 0 13px #2f2f31,
-      ${dropShadow};
+    box-shadow: ${iosShadow};
     overflow: hidden;
     transform: scale(${frameScale});
     transform-origin: center;
@@ -541,29 +547,21 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   }
   .device-frame.ios-tablet {
     border-radius: 32px;
-    box-shadow: 
-      0 0 0 14px #1f1f21,
-      0 0 0 15px #2f2f31,
-      ${dropShadow};
+    box-shadow: ${iosTabletShadow};
   }
   .device-frame.ios-tablet .screenshot-img {
     border-radius: 20px;
   }
   .device-frame.android-phone {
     border-radius: 40px;
-    box-shadow: 
-      0 0 0 10px #2a2a2c,
-      0 0 0 11px #3a3a3c,
-      ${androidDropShadow};
+    box-shadow: ${androidPhoneShadow};
   }
   .device-frame.android-phone .screenshot-img {
     border-radius: 30px;
   }
   .device-frame.android-tablet {
     border-radius: 24px;
-    box-shadow: 
-      0 0 0 14px #2a2a2c,
-      ${tabletDropShadow};
+    box-shadow: ${androidTabletShadow};
   }
   .device-frame.android-tablet .screenshot-img {
     border-radius: 12px;
@@ -699,6 +697,34 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   return buffer;
 }
 
+async function injectSafeAreas(page, platform) {
+  try {
+    if (platform === 'ios') {
+      await page.addStyleTag({
+        content: `
+          :root {
+            --safe-top: 47px !important;
+          }
+          .nav-container {
+            padding-bottom: 34px !important;
+          }
+        `
+      });
+    } else if (platform === 'android') {
+      await page.addStyleTag({
+        content: `
+          :root {
+            --safe-top: 24px !important;
+          }
+          .nav-container {
+            padding-bottom: 16px !important;
+          }
+        `
+      });
+    }
+  } catch (e) {}
+}
+
 async function captureScreenshots(url, paths, outputDir, platform, crawl, detectPages, email, password, loginPath, addHtml, mockup, shadow = true) {
   if (!url.startsWith('http://') && !url.startsWith('https://')) {
     url = 'http://' + url;
@@ -861,6 +887,7 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
           const pageSpinner = ora(`      Navigating to ${route}...`).start();
           try {
             await page.goto(targetUrl, { timeout: 30000 });
+            await injectSafeAreas(page, plat);
             pageSpinner.text = `      Waiting for network idle on ${route}...`;
             await page.waitForLoadState('networkidle', { timeout: 15000 });
             await new Promise(resolve => setTimeout(resolve, 800));
@@ -930,6 +957,7 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
               const pageSpinner = ora(`      Navigating to ${route}...`).start();
               try {
                 await page.goto(targetUrl, { timeout: 30000 });
+                await injectSafeAreas(page, plat);
                 pageSpinner.text = `      Waiting for network idle on ${route}...`;
                 await page.waitForLoadState('networkidle', { timeout: 15000 });
                 await new Promise(resolve => setTimeout(resolve, 800));
@@ -954,6 +982,7 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
               const pageSpinner = ora(`      Navigating to ${route}...`).start();
               try {
                 await page.goto(targetUrl, { timeout: 30000 });
+                await injectSafeAreas(page, plat);
                 pageSpinner.text = `      Waiting for network idle on ${route}...`;
                 await page.waitForLoadState('networkidle', { timeout: 15000 });
                 await new Promise(resolve => setTimeout(resolve, 800));
@@ -977,6 +1006,7 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
             const pageSpinner = ora(`      Navigating to ${route}...`).start();
             try {
               await page.goto(targetUrl, { timeout: 30000 });
+              await injectSafeAreas(page, plat);
               pageSpinner.text = `      Waiting for network idle on ${route}...`;
               await page.waitForLoadState('networkidle', { timeout: 15000 });
               await new Promise(resolve => setTimeout(resolve, 800));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mobile-snap",
-  "version": "1.0.9",
+  "version": "1.1.1",
   "description": "Automate pixel-precise App Store & Google Play screenshots from a local web server",
   "type": "module",
   "main": "bin/cli.js",