device-shots 0.4.0 → 0.4.2

package/README.md

@@ -208,17 +208,17 @@ Both platforms get framed automatically after capture (disable with `--no-frame`
 
 Uses [device-frames-core](https://pypi.org/project/device-frames-core/) to wrap screenshots in realistic Apple device frames (iPhone, iPad). The device model is auto-detected from the screenshot resolution. Requires Python 3 (venv is managed automatically).
 
-### Android — Black border with rounded corners
+### Android — Black frame with rounded corners
 
-Uses ImageMagick to add a black bezel-like border with rounded corners. Dimensions scale proportionally to the screenshot:
+Uses ImageMagick to clip the screenshot to rounded corners (overflow hidden) and place it on a black rounded rectangle with uniform padding on all sides. Dimensions scale proportionally to the screenshot:
 
 | Property | Value |
 |----------|-------|
-| Border width | ~1.8% of image width |
-| Inner corner radius | ~4.5% of image width |
-| Outer corner radius | inner radius + border width |
+| Padding | ~2.5% of image width (equal on all sides) |
+| Inner corner radius | ~4% of image width |
+| Outer corner radius | inner radius + padding |
 
-For a 1080px wide screenshot, this produces a ~19px border with ~49px rounded corners.
+For a 1080px wide screenshot, this produces ~27px padding with ~43px inner rounded corners.
 
 ## License
 

package/dist/index.js

@@ -11,7 +11,8 @@ import {
   existsSync as existsSync4,
   mkdirSync,
   readdirSync as readdirSync2,
-  renameSync,
+  copyFileSync,
+  unlinkSync,
   readFileSync,
   writeFileSync
 } from "fs";
@@ -138,6 +139,9 @@ function getIosScreenSize(width, height) {
 }
 function getAndroidScreenSize(width, height) {
   const shorter = Math.min(width, height);
+  const longer = Math.max(width, height);
+  const ratio = longer / shorter;
+  if (ratio >= 1.7) return "phone";
   if (shorter >= 1800) return "tablet-10";
   if (shorter >= 1200) return "tablet-7";
   return "phone";
@@ -518,20 +522,20 @@ async function frameAndroidScreenshot(inputPath, outputPath) {
   if (!match) return false;
   const width = parseInt(match[1], 10);
   const height = parseInt(match[2], 10);
-  const borderWidth = Math.round(width * 0.018);
-  const innerRadius = Math.round(width * 0.045);
-  const outerRadius = innerRadius + borderWidth;
-  const totalW = width + borderWidth * 2;
-  const totalH = height + borderWidth * 2;
+  const padding = Math.round(width * 0.025);
+  const innerRadius = Math.round(width * 0.04);
+  const outerRadius = innerRadius + padding;
+  const totalW = width + padding * 2;
+  const totalH = height + padding * 2;
   try {
     await runOrFail("magick", [
-      // Create black rounded rectangle background
+      // 1. Create black rounded rectangle background (outer frame)
       "-size",
       `${totalW}x${totalH}`,
       "xc:none",
       "-draw",
       `fill black roundrectangle 0,0 ${totalW - 1},${totalH - 1} ${outerRadius},${outerRadius}`,
-      // Load screenshot and round its corners
+      // 2. Load screenshot and clip to rounded corners (overflow hidden)
       "(",
       inputPath,
       "-alpha",
@@ -549,7 +553,7 @@ async function frameAndroidScreenshot(inputPath, outputPath) {
       "DstIn",
       "-composite",
       ")",
-      // Composite screenshot centered on black background
+      // 3. Place rounded screenshot centered on the black frame
       "-gravity",
       "center",
       "-compose",
@@ -705,7 +709,7 @@ Detected ${devices.length} device(s) with ${bundleIdDisplay}:`)
   const captured = [];
   for (const device of devices) {
     const filename = `${screenshotName}.png`;
-    const tmpPath = join4(tmpDir, `${device.platform}_${device.screenSize}_${filename}`);
+    const tmpPath = join4(tmpDir, `${device.platform}_${device.screenSize}_${device.safeName}_${filename}`);
     const icon = device.platform === "ios" ? "iOS" : "Android";
     const s = ora(
       `${icon}: Capturing from ${device.displayName}...`
@@ -737,10 +741,25 @@ Detected ${devices.length} device(s) with ${bundleIdDisplay}:`)
       s.fail(`${icon}: Failed to capture from ${device.displayName}`);
     }
   }
+  const movedBuckets = /* @__PURE__ */ new Set();
   for (const file of captured) {
+    const bucketKey = `${file.platform}/${file.screenSize}`;
+    if (movedBuckets.has(bucketKey)) {
+      try {
+        unlinkSync(file.tmpPath);
+      } catch {
+      }
+      continue;
+    }
+    movedBuckets.add(bucketKey);
     const destDir = join4(outputDir, file.platform, file.screenSize);
     mkdirSync(destDir, { recursive: true });
-    renameSync(file.tmpPath, join4(destDir, file.filename));
+    const destPath = join4(destDir, file.filename);
+    copyFileSync(file.tmpPath, destPath);
+    try {
+      unlinkSync(file.tmpPath);
+    } catch {
+    }
   }
   updateMetadata(outputDir, devices);
   if (iosDevices.length > 0) {
@@ -749,12 +768,13 @@ Detected ${devices.length} device(s) with ${bundleIdDisplay}:`)
   for (const device of androidDevices) {
     await clearAndroidDemoMode(device.captureId);
   }
-  console.log(
-    pc.green(
-      `
-Captured ${captured.length} screenshot(s) as '${screenshotName}'.`
-    )
-  );
+  const skippedDupes = captured.length - movedBuckets.size;
+  let msg = `
+Captured ${movedBuckets.size} screenshot(s) as '${screenshotName}'.`;
+  if (skippedDupes > 0) {
+    msg += ` (${skippedDupes} duplicate bucket(s) skipped)`;
+  }
+  console.log(pc.green(msg));
   if (shouldFrame) {
     if (iosDevices.length > 0) {
       console.log("");
@@ -857,7 +877,7 @@ async function frameCommand(dir, options) {
 var program = new Command();
 program.name("device-shots").description(
   "Capture and frame mobile app screenshots from iOS simulators and Android emulators"
-).version("0.4.0");
+).version("0.4.2");
 program.command("capture").description("Capture screenshots from running devices").argument("[name]", "Screenshot name").option("-b, --bundle-id <id>", "App bundle ID").option("-o, --output <dir>", "Output directory").option("-p, --platform <platform>", "ios, android, or both").option("--no-frame", "Skip framing after capture").option("--time <time>", "Status bar time", "9:41").action(async (name, opts) => {
   await captureCommand({ name, ...opts });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "device-shots",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Capture and frame mobile app screenshots from iOS simulators and Android emulators",
   "type": "module",
   "bin": {