mobile-snap 1.0.7 → 1.0.9

package/bin/cli.js

@@ -399,7 +399,7 @@ async function analyzeRoutes(browser, baseUrl, initialPaths, email, password, lo
   };
 }
 
-async function applyMockupBorder(browser, imageBuffer, deviceName, size, platform, isDarkTheme = false) {
+async function applyMockupBorder(browser, imageBuffer, deviceName, size, platform, isDarkTheme = false, shadow = true) {
   const base64Image = imageBuffer.toString('base64');
   
   const now = new Date();
@@ -413,7 +413,10 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   const batteryLevelBg = isDarkTheme ? '#ffffff' : '#000000';
   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 tabletIndicatorBg = isDarkTheme ? 'rgba(255, 255, 255, 0.4)' : 'rgba(0, 0, 0, 0.3)';
+  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';
 
   let frameClass = 'ios';
   let topElementHTML = '<div class="dynamic-island"></div>';
@@ -502,21 +505,20 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
     overflow: hidden;
   }
   body {
-    background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);
+    background: transparent;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    min-height: 100vh;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   }
   .device-wrapper {
     position: relative;
+    width: ${size.logical.width}px;
+    height: ${size.logical.height}px;
     display: flex;
     justify-content: center;
     align-items: center;
-    transform: scale(0.85);
-    transform-origin: center;
     background: transparent;
   }
   .device-frame {
@@ -525,8 +527,11 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
     box-shadow: 
       0 0 0 12px #1f1f21,
       0 0 0 13px #2f2f31,
-      0 20px 50px rgba(0,0,0,0.6);
+      ${dropShadow};
     overflow: hidden;
+    transform: scale(${frameScale});
+    transform-origin: center;
+    flex-shrink: 0;
   }
   .device-frame.ios {
     border-radius: 54px;
@@ -539,7 +544,7 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
     box-shadow: 
       0 0 0 14px #1f1f21,
       0 0 0 15px #2f2f31,
-      0 20px 50px rgba(0,0,0,0.6);
+      ${dropShadow};
   }
   .device-frame.ios-tablet .screenshot-img {
     border-radius: 20px;
@@ -549,7 +554,7 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
     box-shadow: 
       0 0 0 10px #2a2a2c,
       0 0 0 11px #3a3a3c,
-      0 20px 50px rgba(0,0,0,0.6);
+      ${androidDropShadow};
   }
   .device-frame.android-phone .screenshot-img {
     border-radius: 30px;
@@ -558,7 +563,7 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
     border-radius: 24px;
     box-shadow: 
       0 0 0 14px #2a2a2c,
-      0 20px 50px rgba(0,0,0,0.6);
+      ${tabletDropShadow};
   }
   .device-frame.android-tablet .screenshot-img {
     border-radius: 12px;
@@ -672,8 +677,13 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
 </html>
   `;
 
+  const extraWidth = 150;
+  const extraHeight = 150;
   const context = await browser.newContext({
-    viewport: size.logical,
+    viewport: { 
+      width: size.logical.width + extraWidth, 
+      height: size.logical.height + extraHeight 
+    },
     deviceScaleFactor: size.scale
   });
   
@@ -681,15 +691,15 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   await page.setContent(htmlContent);
   await page.waitForLoadState('networkidle');
   
-  const buffer = await page.screenshot({
-    omitBackground: false
+  const buffer = await page.locator('.device-wrapper').screenshot({
+    omitBackground: true
   });
   
   await context.close();
   return buffer;
 }
 
-async function captureScreenshots(url, paths, outputDir, platform, crawl, detectPages, email, password, loginPath, addHtml, mockup) {
+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;
   }
@@ -816,7 +826,7 @@ async function captureScreenshots(url, paths, outputDir, platform, crawl, detect
           });
 
           const raw = await page.screenshot({ fullPage: false });
-          const framed = await applyMockupBorder(browser, raw, deviceName, size, plat, isDarkTheme);
+          const framed = await applyMockupBorder(browser, raw, deviceName, size, plat, isDarkTheme, shadow);
           fs.writeFileSync(outputPath, framed);
         } else {
           await page.screenshot({ path: outputPath, fullPage: false });
@@ -1004,6 +1014,7 @@ program
   .option('--login-path <path>', 'Path to the login page', '/login.html')
   .option('--html', 'Auto append .html extension to detected routes', false)
   .option('-m, --mockup', 'Wrap screenshots in a beautiful iPhone/Android device mockup frame', false)
+  .option('--no-shadow', 'Disable mockup device shadow and stretch border to edges')
   .action((options) => {
     let pathList = [];
     if (options.paths) {
@@ -1027,7 +1038,8 @@ program
       options.password,
       options.loginPath,
       options.html,
-      options.mockup
+      options.mockup,
+      options.shadow
     ).catch(err => {
       console.error(pc.red(`An unexpected error occurred: ${err.message}`));
       process.exit(1);

package/package.json

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