device-shots 0.2.1 → 0.3.0

package/dist/index.js

@@ -490,6 +490,64 @@ async function frameScreenshots(inputDir, outputDir, force = false) {
   const rawFiles = existsSync3(inputDir) ? readdirSync(inputDir).filter((f) => f.endsWith(".png")).length : 0;
   return { framed: framedFiles, skipped: rawFiles - framedFiles };
 }
+async function frameAndroidScreenshot(inputPath, outputPath) {
+  if (!await commandExists("magick")) {
+    throw new Error("ImageMagick is required for Android framing. Install with: brew install imagemagick");
+  }
+  const { stdout: identify } = await run("magick", [
+    "identify",
+    "-format",
+    "%wx%h",
+    inputPath
+  ]);
+  const match = identify.match(/(\d+)x(\d+)/);
+  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;
+  try {
+    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",
+      "(",
+      "+clone",
+      "-alpha",
+      "extract",
+      "-draw",
+      `fill black color 0,0 reset`,
+      "-draw",
+      `fill white roundrectangle 0,0 ${width - 1},${height - 1} ${innerRadius},${innerRadius}`,
+      ")",
+      "-compose",
+      "DstIn",
+      "-composite",
+      ")",
+      // Composite screenshot centered on black background
+      "-gravity",
+      "center",
+      "-compose",
+      "Over",
+      "-composite",
+      outputPath
+    ]);
+    return true;
+  } catch {
+    return false;
+  }
+}
 async function frameAllIosScreenshots(screenshotsDir, force = false) {
   const iosDir = join3(screenshotsDir, "ios");
   if (!existsSync3(iosDir)) return 0;
@@ -508,6 +566,29 @@ async function frameAllIosScreenshots(screenshotsDir, force = false) {
   }
   return totalFramed;
 }
+async function frameAllAndroidScreenshots(screenshotsDir, force = false) {
+  if (!await commandExists("magick")) return 0;
+  const androidDir = join3(screenshotsDir, "android");
+  if (!existsSync3(androidDir)) return 0;
+  let totalFramed = 0;
+  const sizeDirs = readdirSync(androidDir, { withFileTypes: true }).filter(
+    (d) => d.isDirectory()
+  );
+  for (const sizeDir of sizeDirs) {
+    const dirPath = join3(androidDir, sizeDir.name);
+    const rawFiles = readdirSync(dirPath).filter(
+      (f) => f.endsWith(".png") && !f.includes("_framed")
+    );
+    for (const file of rawFiles) {
+      const inputPath = join3(dirPath, file);
+      const outputPath = join3(dirPath, file.replace(".png", "_framed.png"));
+      if (!force && existsSync3(outputPath)) continue;
+      const success = await frameAndroidScreenshot(inputPath, outputPath);
+      if (success) totalFramed++;
+    }
+  }
+  return totalFramed;
+}
 
 // src/commands/capture.ts
 async function captureCommand(options) {
@@ -659,16 +740,33 @@ Detected ${devices.length} device(s) with ${bundleId}:`)
 Captured ${captured.length} screenshot(s) as '${screenshotName}'.`
     )
   );
-  if (shouldFrame && iosDevices.length > 0) {
-    console.log("");
-    const s = ora("Framing iOS screenshots...").start();
-    try {
-      const framed = await frameAllIosScreenshots(outputDir);
-      s.succeed(`Framed ${framed} screenshot(s)`);
-    } catch (error) {
-      s.fail(
-        `Framing failed: ${error instanceof Error ? error.message : error}`
-      );
+  if (shouldFrame) {
+    if (iosDevices.length > 0) {
+      console.log("");
+      const s = ora("Framing iOS screenshots...").start();
+      try {
+        const framed = await frameAllIosScreenshots(outputDir);
+        s.succeed(`Framed ${framed} iOS screenshot(s)`);
+      } catch (error) {
+        s.fail(
+          `iOS framing failed: ${error instanceof Error ? error.message : error}`
+        );
+      }
+    }
+    if (androidDevices.length > 0) {
+      const s = ora("Framing Android screenshots...").start();
+      try {
+        const framed = await frameAllAndroidScreenshots(outputDir);
+        if (framed > 0) {
+          s.succeed(`Framed ${framed} Android screenshot(s)`);
+        } else {
+          s.info("Android framing skipped (ImageMagick not found)");
+        }
+      } catch (error) {
+        s.fail(
+          `Android framing failed: ${error instanceof Error ? error.message : error}`
+        );
+      }
     }
   }
 }
@@ -711,23 +809,32 @@ import pc2 from "picocolors";
 async function frameCommand(dir, options) {
   const config = await loadConfig();
   const screenshotsDir = dir || options.input || config.output;
-  console.log(pc2.bold(`Framing iOS screenshots in ${screenshotsDir}...`));
-  const spinner = ora2("Setting up Python environment...").start();
+  console.log(pc2.bold(`Framing screenshots in ${screenshotsDir}...`));
+  const iosSpinner = ora2("Framing iOS screenshots (device bezels)...").start();
   try {
-    const framed = await frameAllIosScreenshots(
-      screenshotsDir,
-      options.force
+    const framed = await frameAllIosScreenshots(screenshotsDir, options.force);
+    if (framed > 0) {
+      iosSpinner.succeed(`Framed ${framed} iOS screenshot(s)`);
+    } else {
+      iosSpinner.info("No new iOS screenshots to frame");
+    }
+  } catch (error) {
+    iosSpinner.fail(
+      `iOS framing failed: ${error instanceof Error ? error.message : error}`
     );
+  }
+  const androidSpinner = ora2("Framing Android screenshots (black border)...").start();
+  try {
+    const framed = await frameAllAndroidScreenshots(screenshotsDir, options.force);
     if (framed > 0) {
-      spinner.succeed(`Framed ${framed} screenshot(s)`);
+      androidSpinner.succeed(`Framed ${framed} Android screenshot(s)`);
     } else {
-      spinner.info("No new screenshots to frame");
+      androidSpinner.info("No new Android screenshots to frame");
     }
   } catch (error) {
-    spinner.fail(
-      `Framing failed: ${error instanceof Error ? error.message : error}`
+    androidSpinner.fail(
+      `Android framing failed: ${error instanceof Error ? error.message : error}`
     );
-    process.exit(1);
   }
 }
 
@@ -735,7 +842,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.2.1");
+).version("0.3.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 });
 });

package/package.json

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