device-shots 0.4.1 → 0.5.0

package/README.md

@@ -7,10 +7,9 @@ A CLI tool that captures screenshots from running iOS simulators and Android emu
 1. **Discovers devices** — Finds all running iOS simulators and Android emulators that have your app installed
 2. **Cleans up status bars** — Sets a uniform status bar (9:41, full battery, full signal) on all devices before capturing
 3. **Captures screenshots** — Takes screenshots from every discovered device in one go
-4. **Transparent Android status bar** — Automatically makes the Android status bar area transparent using ImageMagick
-5. **Frames iOS screenshots** — Wraps iOS screenshots in device bezels (iPhone/iPad frames) using [device-frames-core](https://pypi.org/project/device-frames-core/)
-6. **Frames Android screenshots** — Adds a black border with rounded corners for a clean device-like look (requires ImageMagick)
-7. **Organizes by screen size** — Saves screenshots into store-aligned size buckets (e.g. `6.9`, `6.3`, `phone`) instead of device names
+4. **Frames iOS screenshots** — Wraps iOS screenshots in device bezels (iPhone/iPad frames) using [device-frames-core](https://pypi.org/project/device-frames-core/)
+5. **Frames Android screenshots** — Adds uniform black padding with matching rounded corners on both the screenshot and frame (requires ImageMagick)
+6. **Organizes by screen size** — Saves screenshots into store-aligned size buckets (e.g. `6.9`, `6.3`, `phone`) instead of device names
 
 ## Use cases
 
@@ -29,7 +28,7 @@ A CLI tool that captures screenshots from running iOS simulators and Android emu
 
 ### Optional
 
-- **ImageMagick** — needed for Android status bar transparency and Android framing (black border + rounded corners). Install with `brew install imagemagick`
+- **ImageMagick** — needed for Android screenshot framing (black border + rounded corners). Install with `brew install imagemagick`
 - **Python 3** — needed for iOS screenshot framing with device bezels. The tool auto-creates a virtual environment at `~/.device-shots/.venv` and installs `device-frames-core` and `Pillow` automatically on first use
 
 ## Install
@@ -208,17 +207,16 @@ 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. The screenshot and frame share the same border radius. Dimensions scale proportionally:
 
 | 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) |
+| Border radius | ~4% of image width (same for screenshot and frame) |
 
-For a 1080px wide screenshot, this produces a ~19px border with ~49px rounded corners.
+For a 1080px wide screenshot, this produces ~27px uniform padding with ~43px rounded corners.
 
 ## License
 

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
-import { writeFileSync as writeFileSync2, existsSync as existsSync5 } from "fs";
+import { writeFileSync as writeFileSync2, existsSync as existsSync5, rmSync } from "fs";
 import pc3 from "picocolors";
 import prompts2 from "prompts";
 
@@ -139,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";
@@ -371,49 +374,6 @@ async function captureAndroidScreenshot(serial, outputPath) {
     return false;
   }
 }
-async function makeStatusBarTransparent(serial, imagePath) {
-  if (!await commandExists("magick")) return false;
-  const adb = getAdbPath();
-  const STATUS_BAR_HEIGHT_DP = 24;
-  const { stdout: densityOutput } = await run(adb, [
-    "-s",
-    serial,
-    "shell",
-    "wm",
-    "density"
-  ]);
-  const densityMatch = densityOutput.match(/(\d+)\s*$/m);
-  if (!densityMatch) return false;
-  const density = parseInt(densityMatch[1], 10);
-  const statusBarPx = Math.ceil(STATUS_BAR_HEIGHT_DP * density / 160);
-  const { stdout: identify } = await run("magick", [
-    "identify",
-    "-format",
-    "%w",
-    imagePath
-  ]);
-  const imgWidth = identify.trim();
-  if (!imgWidth) return false;
-  try {
-    await runOrFail("magick", [
-      imagePath,
-      "-region",
-      `${imgWidth}x${statusBarPx}+0+0`,
-      "-alpha",
-      "set",
-      "-channel",
-      "A",
-      "-evaluate",
-      "set",
-      "0",
-      "+channel",
-      imagePath
-    ]);
-    return true;
-  } catch {
-    return false;
-  }
-}
 
 // src/devices/discover.ts
 async function discoverDevices(bundleId, platform = "both") {
@@ -519,21 +479,13 @@ 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 radius = Math.round(width * 0.04);
+  const totalW = width + padding * 2;
+  const totalH = height + padding * 2;
   try {
+    const tmpRounded = inputPath.replace(".png", "_rounded_tmp.png");
     await runOrFail("magick", [
-      // Create black rounded rectangle background
-      "-size",
-      `${totalW}x${totalH}`,
-      "xc:none",
-      "-draw",
-      `fill black roundrectangle 0,0 ${totalW - 1},${totalH - 1} ${outerRadius},${outerRadius}`,
-      // Load screenshot and round its corners
-      "(",
       inputPath,
       "-alpha",
       "set",
@@ -544,13 +496,20 @@ async function frameAndroidScreenshot(inputPath, outputPath) {
       "-draw",
       `fill black color 0,0 reset`,
       "-draw",
-      `fill white roundrectangle 0,0 ${width - 1},${height - 1} ${innerRadius},${innerRadius}`,
+      `fill white roundrectangle 0,0 ${width - 1},${height - 1} ${radius},${radius}`,
       ")",
       "-compose",
       "DstIn",
       "-composite",
-      ")",
-      // Composite screenshot centered on black background
+      tmpRounded
+    ]);
+    await runOrFail("magick", [
+      "-size",
+      `${totalW}x${totalH}`,
+      "xc:none",
+      "-draw",
+      `fill black roundrectangle 0,0 ${totalW - 1},${totalH - 1} ${radius},${radius}`,
+      tmpRounded,
       "-gravity",
       "center",
       "-compose",
@@ -558,6 +517,11 @@ async function frameAndroidScreenshot(inputPath, outputPath) {
       "-composite",
       outputPath
     ]);
+    try {
+      const { unlinkSync: unlinkSync2 } = await import("fs");
+      unlinkSync2(tmpRounded);
+    } catch {
+    }
     return true;
   } catch {
     return false;
@@ -716,15 +680,6 @@ Detected ${devices.length} device(s) with ${bundleIdDisplay}:`)
       success = await captureIosScreenshot(device.captureId, tmpPath);
     } else {
       success = await captureAndroidScreenshot(device.captureId, tmpPath);
-      if (success) {
-        const transparent = await makeStatusBarTransparent(
-          device.captureId,
-          tmpPath
-        );
-        if (transparent) {
-          s.text = `${icon}: Captured from ${device.displayName} (status bar transparent)`;
-        }
-      }
     }
     if (success) {
       captured.push({
@@ -765,12 +720,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("");
@@ -873,7 +829,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.1");
+).version("0.5.0");
 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 });
 });
@@ -907,4 +863,26 @@ program.command("init").description("Create a .device-shotsrc.json config file")
   writeFileSync2(configPath, config + "\n");
   console.log(pc3.green(`Created ${configPath}`));
 });
+program.command("clean").description("Delete all screenshots and metadata").option("-o, --output <dir>", "Screenshots directory to clean").option("-y, --yes", "Skip confirmation").action(async (opts) => {
+  const config = await loadConfig();
+  const outputDir = opts.output || config.output;
+  if (!existsSync5(outputDir)) {
+    console.log(pc3.dim(`Nothing to clean \u2014 ${outputDir} does not exist.`));
+    return;
+  }
+  if (!opts.yes) {
+    const response = await prompts2({
+      type: "confirm",
+      name: "confirm",
+      message: `Delete everything in ${outputDir}?`,
+      initial: false
+    });
+    if (!response.confirm) {
+      console.log("Aborting.");
+      return;
+    }
+  }
+  rmSync(outputDir, { recursive: true, force: true });
+  console.log(pc3.green(`Cleaned ${outputDir}`));
+});
 program.parse();

package/package.json

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