mobile-snap 1.0.8 → 1.1.0

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,19 @@ 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 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>';
@@ -521,12 +533,9 @@ 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,
-      0 20px 50px rgba(0,0,0,0.6);
+    box-shadow: ${iosShadow};
     overflow: hidden;
-    transform: scale(0.88);
+    transform: scale(${frameScale});
     transform-origin: center;
     flex-shrink: 0;
   }
@@ -538,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,
-      0 20px 50px rgba(0,0,0,0.6);
+    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,
-      0 20px 50px rgba(0,0,0,0.6);
+    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,
-      0 20px 50px rgba(0,0,0,0.6);
+    box-shadow: ${androidTabletShadow};
   }
   .device-frame.android-tablet .screenshot-img {
     border-radius: 12px;
@@ -696,7 +697,7 @@ async function applyMockupBorder(browser, imageBuffer, deviceName, size, platfor
   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;
   }
@@ -823,7 +824,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 });
@@ -1011,6 +1012,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) {
@@ -1034,7 +1036,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.8",
+  "version": "1.1.0",
   "description": "Automate pixel-precise App Store & Google Play screenshots from a local web server",
   "type": "module",
   "main": "bin/cli.js",