codeplay-common 4.7.2 → 4.7.3

package/files/scripts/frame-samples.js

@@ -0,0 +1,117 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const sharp = require('sharp');
+
+const frameStyles = {
+  android: {
+    graphite: { label: 'A · Graphite Android', detail: 'Slim dark bezel', outer: '#151a24', edge: '#626d7f', inner: '#080b12', radius: 47 },
+    cobalt: { label: 'B · Cobalt Android', detail: 'Blue accent bezel', outer: '#1945bc', edge: '#8aa9ff', inner: '#07102f', radius: 43 },
+  },
+  ios: {
+    titanium: { label: 'C · Titanium iPhone', detail: 'Light metal edge', outer: '#c7ced6', edge: '#eef2f6', inner: '#222936', radius: 53 },
+    midnight: { label: 'D · Midnight iPhone', detail: 'Dark rounded edge', outer: '#202333', edge: '#586076', inner: '#080b12', radius: 53 },
+  },
+};
+
+function getStatusBarSvg(platform, time) {
+  if (platform === 'ios') {
+    return `<rect x="12" y="22" width="316" height="40" fill="#f5f7fc"/>
+      <text x="29" y="47" font-family="Arial,sans-serif" font-size="14" font-weight="700" fill="#050505">${time}</text>
+      <circle cx="246" cy="40" r="2" fill="#c5c7cb"/><circle cx="254" cy="40" r="2" fill="#c5c7cb"/>
+      <circle cx="262" cy="40" r="2" fill="#c5c7cb"/><circle cx="270" cy="40" r="2" fill="#c5c7cb"/>
+      <path d="M275 35 Q284 27 293 35 M278 39 Q284 34 290 39 M282 43 Q284 41 286 43" fill="none" stroke="#050505" stroke-width="2.5" stroke-linecap="round"/>
+      <rect x="295" y="33" width="17" height="13" rx="3" fill="none" stroke="#a7aaae" stroke-width="1.5"/>
+      <rect x="297" y="35" width="13" height="9" rx="2" fill="#050505"/>
+      <rect x="313" y="37" width="2" height="5" rx="1" fill="#a7aaae"/>`;
+  }
+
+  return `<rect x="12" y="22" width="316" height="40" fill="#9075ed"/>
+    <text x="29" y="47" font-family="Arial,sans-serif" font-size="14" fill="#ffffff">${time}</text>
+    <circle cx="86" cy="41" r="5" fill="none" stroke="#ffffff" stroke-width="1.2"/>
+    <circle cx="84" cy="40" r="0.8" fill="#ffffff"/><circle cx="88" cy="40" r="0.8" fill="#ffffff"/>
+    <g transform="translate(-15,0)">
+      <text x="200" y="36" font-family="Arial,sans-serif" font-size="7" font-weight="700" fill="#ffffff">0.26</text>
+      <text x="200" y="44" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#ffffff">KB/s</text>
+      <path d="M222 43 L235 33 L235 43 Z M242 43 L254 33 L254 43 Z" fill="#ffffff"/>
+      <text x="257" y="39" font-family="Arial,sans-serif" font-size="7" font-weight="700" fill="#ffffff">Vo</text>
+      <text x="257" y="46" font-family="Arial,sans-serif" font-size="6" font-weight="700" fill="#ffffff">WiFi</text>
+      <path d="M274 35 Q283 27 292 35 M277 39 Q283 34 289 39 M281 43 Q283 41 285 43" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"/>
+      <rect x="296" y="34" width="19" height="11" rx="2" fill="none" stroke="#ffffff" stroke-width="1.4"/>
+      <path d="M305 33 L301 40 L306 40 L304 46 L312 38 L307 38 L310 33 Z" fill="#ffffff"/>
+      <text x="317" y="43" font-family="Arial,sans-serif" font-size="7" fill="#ffffff">87%</text>
+    </g>`;
+}
+
+function createFallbackScreenshot(platform) {
+  const width = platform === 'ios' ? 1320 : 1080;
+  const height = platform === 'ios' ? 2868 : 2400;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
+    <rect width="100%" height="100%" fill="#f5f7fc"/>
+    <rect x="8%" y="26%" width="84%" height="20%" rx="60" fill="#d7ddff"/>
+    <text x="50%" y="37%" text-anchor="middle" font-family="Arial,sans-serif" font-size="62" font-weight="700" fill="#4446c6">Image Compressor</text>
+    <rect x="8%" y="62%" width="84%" height="8%" rx="55" fill="#5145e7"/>
+    <text x="50%" y="67%" text-anchor="middle" font-family="Arial,sans-serif" font-size="42" font-weight="700" fill="#ffffff">Select images</text>
+  </svg>`;
+  return sharp(Buffer.from(svg)).png().toBuffer();
+}
+
+async function getSampleScreenshot(autoScreenshotDirectory, platform) {
+  const directory = path.join(autoScreenshotDirectory, 'Store-image-Screenshot', platform === 'ios' ? 'iPhone' : 'Android');
+  if (fs.existsSync(directory)) {
+    const screenshot = fs.readdirSync(directory).filter((name) => /\.png$/i.test(name)).sort()[0];
+    if (screenshot) return fs.readFileSync(path.join(directory, screenshot));
+  }
+  return createFallbackScreenshot(platform);
+}
+
+function createSampleCard(style, platform, screenshotUrl, index) {
+  const screenRadius = platform === 'ios' ? 40 : 34;
+  const sampleTime = platform === 'ios' ? (index ? '12:21' : '12:20') : (index ? '10:56' : '10:55');
+  const camera = platform === 'ios'
+    ? '<rect x="130" y="27" width="80" height="24" rx="12" fill="#05070b"/>'
+    : '';
+  const navigation = platform === 'android'
+    ? '<rect x="12" y="717" width="316" height="16" fill="#f4f7f8"/><rect x="107" y="725" width="126" height="3" rx="1.5" fill="#7a7b7c"/>'
+    : '';
+
+  return `<g transform="translate(${index * 510},0)">
+    <rect x="12" y="12" width="486" height="926" rx="25" fill="#ffffff" stroke="#dce2ee"/>
+    <text x="35" y="52" fill="#172137" font-family="Arial,sans-serif" font-size="24" font-weight="700">${style.label}</text>
+    <text x="35" y="80" fill="#6c7890" font-family="Arial,sans-serif" font-size="14">${style.detail} · ${platform === 'ios' ? 'iOS' : 'Android'} status bar</text>
+    <g transform="translate(85,115)">
+      <rect x="1" y="7" width="338" height="753" rx="47" fill="#0a1225" opacity="0.2"/>
+      <rect x="1" y="1" width="338" height="753" rx="${style.radius}" fill="${style.outer}" stroke="${style.edge}" stroke-width="2"/>
+      <rect x="7" y="7" width="326" height="741" rx="${style.radius - 5}" fill="${style.inner}"/>
+      <clipPath id="screen-${index}"><rect x="12" y="22" width="316" height="711" rx="${screenRadius}"/></clipPath>
+      <g clip-path="url(#screen-${index})">
+        <rect x="12" y="22" width="316" height="711" fill="#f5f7fc"/>
+        <image href="${screenshotUrl}" x="12" y="62" width="316" height="671" preserveAspectRatio="xMidYMin slice"/>
+        ${getStatusBarSvg(platform, sampleTime)}
+        ${navigation}
+      </g>
+      ${camera}
+      <rect x="338" y="177" width="4" height="66" rx="2" fill="${style.edge}"/>
+    </g>
+  </g>`;
+}
+
+async function createFrameSamples(autoScreenshotDirectory) {
+  fs.mkdirSync(autoScreenshotDirectory, { recursive: true });
+  const paths = [];
+
+  for (const platform of ['android', 'ios']) {
+    const screenshot = await getSampleScreenshot(autoScreenshotDirectory, platform);
+    const screenshotUrl = `data:image/png;base64,${screenshot.toString('base64')}`;
+    const cards = Object.values(frameStyles[platform])
+      .map((style, index) => createSampleCard(style, platform, screenshotUrl, index))
+      .join('');
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1020" height="950" viewBox="0 0 1020 950"><rect width="1020" height="950" fill="#eef2f9"/>${cards}</svg>`;
+    const output = path.join(autoScreenshotDirectory, `${platform}-frame-options.png`);
+    await sharp(Buffer.from(svg)).png().toFile(output);
+    paths.push(output);
+  }
+
+  return paths;
+}
+
+module.exports = { frameStyles, createFrameSamples };

package/files/take-screen-image.js

@@ -10,6 +10,7 @@ const path = require('node:path');
 const readline = require('node:readline/promises');
 const { spawn, spawnSync } = require('node:child_process');
 const sharp = require('sharp');
+const { frameStyles, createFrameSamples } = require('./scripts/frame-samples.js');
 
 const screenshotDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Screenshot');
 const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Frame');
@@ -21,6 +22,9 @@ const playstoreAssetsDirectory = path.join(aiAssetsDirectory, 'Playstore-Assets'
 const capacitorConfigPath = path.join(__dirname, 'capacitor.config.json');
 const amazonIconPath = path.join(__dirname, 'resources', 'icon-only.png');
 const temporaryDirectory = path.join(__dirname, 'agent-temp');
+let selectedFrameStyles = { android: 'cobalt', ios: 'midnight' };
+let frameCaptureSequence = 0;
+const frameTimeBase = Date.now();
 const amazonAssetDefinitions = [
   { fileName: 'icon-1280x720.png', type: 'icon', width: 1280, height: 720 },
   { fileName: 'background-image-1920x1080.png', type: 'background-image', width: 1920, height: 1080 },
@@ -462,6 +466,7 @@ function parseArguments() {
     samsungAssets: false,
     dryRun: false,
     frameExisting: false,
+    reframeExisting: false,
     vivoExisting: false,
     oppoExisting: false,
     help: false,
@@ -470,6 +475,8 @@ function parseArguments() {
     deleteNames: '',
     prefix: '',
     profiles: '',
+    androidFrame: '',
+    iosFrame: '',
   };
 
   for (let index = 0; index < args.length; index += 1) {
@@ -483,6 +490,8 @@ function parseArguments() {
       options.dryRun = true;
     } else if (argument === '--frame-existing') {
       options.frameExisting = true;
+    } else if (argument === '--reframe-existing') {
+      options.reframeExisting = true;
     } else if (argument === '--vivo-existing') {
       options.vivoExisting = true;
     } else if (argument === '--oppo-existing') {
@@ -501,6 +510,12 @@ function parseArguments() {
     } else if (argument === '--profiles') {
       options.profiles = args[index + 1] || '';
       index += 1;
+    } else if (argument === '--android-frame') {
+      options.androidFrame = args[index + 1] || '';
+      index += 1;
+    } else if (argument === '--ios-frame') {
+      options.iosFrame = args[index + 1] || '';
+      index += 1;
     } else {
       throw new Error(`Unknown argument: ${argument}`);
     }
@@ -540,8 +555,10 @@ function printHelp() {
   console.log('Usage:');
   console.log('  node take-screen-image.js');
   console.log('  node take-screen-image.js --profiles iphone,ipad');
+  console.log('  node take-screen-image.js --android-frame graphite --ios-frame titanium');
   console.log('  node take-screen-image.js --prefix home --profiles android-phone,ipad');
   console.log('  node take-screen-image.js --frame-existing');
+  console.log('  node take-screen-image.js --reframe-existing --profiles android-phone,iphone');
   console.log('  node take-screen-image.js --vivo-existing');
   console.log('  node take-screen-image.js --oppo-existing');
   console.log('  node take-screen-image.js --amazon-assets');
@@ -551,6 +568,52 @@ function printHelp() {
   console.log('  node take-screen-image.js --delete 3,4,5');
   console.log('');
   console.log('A normal capture automatically creates any missing Amazon, Samsung, and Play Store assets.');
+  console.log('Frame defaults: Android cobalt (B), iPhone midnight (D).');
+}
+
+async function chooseFrameStyles(options) {
+  const choices = { android: options.androidFrame, ios: options.iosFrame };
+  const defaults = { android: 'cobalt', ios: 'midnight' };
+  const aliases = {
+    android: { a: 'graphite', b: 'cobalt', 1: 'graphite', 2: 'cobalt' },
+    ios: { c: 'titanium', d: 'midnight', 1: 'titanium', 2: 'midnight' },
+  };
+  const canPrompt = process.stdin.isTTY && !options.prefix;
+  const terminal = canPrompt ? readline.createInterface({ input: process.stdin, output: process.stdout }) : null;
+
+  try {
+    for (const platform of ['android', 'ios']) {
+      if (!choices[platform] && terminal) {
+        const names = Object.values(frameStyles[platform]).map((style) => style.label);
+        choices[platform] = await terminal.question(
+          `${platform === 'ios' ? 'iPhone' : 'Android'} frame (${names.join(' / ')}), Enter for ${defaults[platform]}: `,
+        );
+      }
+      choices[platform] = (choices[platform] || defaults[platform]).trim().toLowerCase();
+      choices[platform] = aliases[platform][choices[platform]] || choices[platform];
+      if (!frameStyles[platform][choices[platform]]) {
+        throw new Error(`Unknown ${platform} frame: ${choices[platform]}. Choose ${Object.keys(frameStyles[platform]).join(' or ')}.`);
+      }
+    }
+  } finally {
+    if (terminal) terminal.close();
+  }
+
+  console.log(`Frame selection: Android ${choices.android}, iPhone ${choices.ios}.`);
+  return choices;
+}
+
+async function prepareFrameSelection(options) {
+  const samplePaths = await createFrameSamples(autoScreenshotDirectory);
+  for (const samplePath of samplePaths) console.log(`Frame choices: ${samplePath}`);
+  selectedFrameStyles = await chooseFrameStyles(options);
+}
+
+function getFrameDisplayTime(platform) {
+  const time = new Date(frameTimeBase + frameCaptureSequence * 60000);
+  frameCaptureSequence += 1;
+  const hour = platform === 'ios' ? (time.getHours() % 12 || 12) : time.getHours();
+  return `${String(hour).padStart(2, '0')}:${String(time.getMinutes()).padStart(2, '0')}`;
 }
 
 function deleteMatchingImages(input) {
@@ -1190,11 +1253,11 @@ async function waitForReplayLayout(client, snapshot) {
 
 function getFrameAdornment(frameType) {
   if (frameType === 'iphone') {
-    return '<div class="dynamic-island"></div>';
+    return '';
   }
 
   if (frameType === 'android-phone') {
-    return '<div class="camera-dot"></div>';
+    return '';
   }
 
   if (frameType === 'tablet') {
@@ -1220,10 +1283,11 @@ function getFrameAdornment(frameType) {
   return '<div class="xr-status"></div>';
 }
 
-function createStoreDeviceFrameHtml(profile, screenshotBuffer, imageWidth, imageHeight, canvasWidth, canvasHeight, imageFormat) {
+function createStoreDeviceFrameHtml(profile, screenshotBuffer, imageWidth, imageHeight, canvasWidth, canvasHeight, imageFormat, displayTime) {
   const screenshotDataUrl = `data:image/${imageFormat === 'jpeg' ? 'jpeg' : 'png'};base64,${screenshotBuffer.toString('base64')}`;
   const screenWidth = Math.floor(Math.min(canvasWidth - 160, (canvasHeight - 180) * imageWidth / imageHeight));
   const accent = profile.name === 'oppo-store' ? '#76e4c2' : '#9daaff';
+  const frameStyle = frameStyles.android[selectedFrameStyles.android];
 
   return `<!doctype html>
 <html>
@@ -1252,17 +1316,27 @@ function createStoreDeviceFrameHtml(profile, screenshotBuffer, imageWidth, image
       z-index: 1;
       width: ${screenWidth + 48}px;
       padding: 34px 18px 20px;
-      border: 6px solid #8d99ac;
+      border: 6px solid ${frameStyle.edge};
       border-radius: 48px;
-      background: linear-gradient(135deg, #404c60, #111925 35%, #070c15 72%, #59657a);
+      background: ${frameStyle.outer};
       box-shadow: 0 38px 85px rgba(0, 0, 0, 0.58), 0 0 0 2px rgba(255, 255, 255, 0.19) inset;
     }
     .screen {
+      display: flex;
+      flex-direction: column;
       width: ${screenWidth}px;
+      aspect-ratio: ${imageWidth} / ${imageHeight};
+      overflow: hidden;
       background: #fff;
       box-shadow: 0 0 0 2px #03060c;
     }
-    .screen img { display: block; width: 100%; height: auto; }
+    .screen img { display: block; width: 100%; height: 0; min-height: 0; flex: 1 1 0; object-fit: fill; }
+    .phone-statusbar { position: relative; flex: none; height: 5%; display: flex; align-items: center; background: #9075ed; color: #fff; font-family: Arial, sans-serif; }
+    .status-time { margin-left: 5%; font-size: ${Math.max(11, Math.round(screenWidth * 0.03))}px; white-space: nowrap; }
+    .android-notification { width: 5%; height: 45%; margin-left: 2%; }
+    .android-status-icons { width: 42%; height: 72%; margin-left: auto; margin-right: 2%; }
+    .android-navigation { flex: none; height: 2.2%; display: grid; place-items: center; background: #f4f7f8; }
+    .gesture-pill { width: 40%; height: 14%; border-radius: 999px; background: #7a7b7c; }
     .camera {
       position: absolute;
       top: 11px;
@@ -1288,16 +1362,58 @@ function createStoreDeviceFrameHtml(profile, screenshotBuffer, imageWidth, image
 <body>
   <main class="device">
     <div class="camera"></div>
-    <div class="screen"><img src="${screenshotDataUrl}" /></div>
+    <div class="screen">${getPhoneStatusBar('android', displayTime)}<img src="${screenshotDataUrl}" /><div class="android-navigation"><div class="gesture-pill"></div></div></div>
     <div class="side-button"></div>
   </main>
 </body>
 </html>`;
 }
 
-function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.width, imageHeight = profile.height, imageFormat = 'png') {
+function getPhoneStatusBar(platform, time) {
+  if (platform === 'ios') {
+    return `<div class="phone-statusbar ios-statusbar">
+      <span class="status-time">${time}</span>
+      <div class="dynamic-island"></div>
+      <svg viewBox="0 0 90 28" aria-hidden="true">
+        <circle cx="5" cy="14" r="2" fill="#c5c7cb"></circle><circle cx="13" cy="14" r="2" fill="#c5c7cb"></circle>
+        <circle cx="21" cy="14" r="2" fill="#c5c7cb"></circle><circle cx="29" cy="14" r="2" fill="#c5c7cb"></circle>
+        <path d="M36 10 Q46 2 56 10 M39 14 Q46 8 53 14 M44 18 Q46 16 48 18" fill="none" stroke="#050505" stroke-width="2.5" stroke-linecap="round"></path>
+        <rect x="61" y="7" width="22" height="15" rx="4" fill="none" stroke="#a7aaae" stroke-width="1.5"></rect>
+        <rect x="64" y="10" width="16" height="9" rx="2" fill="#050505"></rect>
+        <rect x="85" y="12" width="2" height="5" rx="1" fill="#a7aaae"></rect>
+      </svg>
+    </div>`;
+  }
+
+  return `<div class="phone-statusbar android-statusbar">
+    <span class="status-time">${time}</span>
+    <svg class="android-notification" viewBox="0 0 18 18" aria-hidden="true">
+      <circle cx="9" cy="9" r="6" fill="none" stroke="#ffffff" stroke-width="1.5"></circle>
+      <circle cx="7" cy="8" r="1" fill="#ffffff"></circle><circle cx="11" cy="8" r="1" fill="#ffffff"></circle>
+    </svg>
+    <svg class="android-status-icons" viewBox="0 0 132 28" aria-hidden="true">
+      <text x="1" y="11" font-size="8" font-weight="700" fill="#ffffff">0.26</text>
+      <text x="1" y="19" font-size="7" font-weight="700" fill="#ffffff">KB/s</text>
+      <path d="M24 20 L37 9 L37 20 Z M42 20 L54 9 L54 20 Z" fill="#ffffff"></path>
+      <text x="57" y="12" font-size="8" font-weight="700" fill="#ffffff">Vo</text>
+      <text x="57" y="20" font-size="7" font-weight="700" fill="#ffffff">WiFi</text>
+      <path d="M76 11 Q85 3 94 11 M79 15 Q85 9 91 15 M83 19 Q85 17 87 19" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round"></path>
+      <rect x="97" y="8" width="18" height="13" rx="2" fill="none" stroke="#ffffff" stroke-width="1.4"></rect>
+      <path d="M106 7 L102 14 L107 14 L105 22 L113 13 L108 13 L111 7 Z" fill="#ffffff"></path>
+      <text x="117" y="18" font-size="8" fill="#ffffff">87%</text>
+    </svg>
+  </div>`;
+}
+
+function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.width, imageHeight = profile.height, imageFormat = 'png', displayTime = '') {
   const screenshotDataUrl = `data:image/${imageFormat === 'jpeg' ? 'jpeg' : 'png'};base64,${screenshotBuffer.toString('base64')}`;
   const aspectRatio = `${imageWidth} / ${imageHeight}`;
+  const phonePlatform = profile.frameType === 'iphone' ? 'ios' : profile.frameType === 'android-phone' ? 'android' : null;
+  const phoneStyle = phonePlatform && frameStyles[phonePlatform][selectedFrameStyles[phonePlatform]];
+  const phoneStatusBar = phonePlatform ? getPhoneStatusBar(phonePlatform, displayTime) : '';
+  const phoneNavigation = phonePlatform === 'android'
+    ? '<div class="android-navigation"><div class="gesture-pill"></div></div>'
+    : '';
 
   return `<!doctype html>
 <html>
@@ -1316,6 +1432,8 @@ function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.w
         linear-gradient(145deg, #111827 0%, #070b12 52%, #020409 100%);
       font-family: Arial, sans-serif;
     }
+    body.phone-frame { background: #eef2f9; }
+    body.phone-frame::before { display: none; }
     body::before {
       content: '';
       position: absolute;
@@ -1341,7 +1459,7 @@ function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.w
     .screen {
       position: relative;
       width: 100%;
-      height: 87%;
+      height: 100%;
       overflow: hidden;
       background: #f5f7fc;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95) inset;
@@ -1355,14 +1473,65 @@ function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.w
     }
     .device.android-phone,
     .device.iphone {
-      height: 100%;
-      padding: 1.25%;
+      height: 84%;
+      padding: 2.5%;
       border-radius: clamp(24px, 8vw, 70px);
     }
-    .device.android-phone .screen,
-    .device.iphone .screen {
-      border-radius: clamp(19px, 6.7vw, 60px);
+    ${phoneStyle ? `
+    .device.${profile.frameType} {
+      background: ${phoneStyle.outer};
+      border-color: ${phoneStyle.edge};
+      border-radius: calc(84vh * ${imageWidth / imageHeight * phoneStyle.radius / 340});
+      box-shadow: 0 4vh 9vh rgba(0, 0, 0, 0.48), 0 0 0 0.55vw ${phoneStyle.inner} inset;
+    }
+    .device.${profile.frameType} .screen {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      border-radius: calc(84vh * ${imageWidth / imageHeight * phoneStyle.radius / 340} - 2.5vw - clamp(2px, 0.45vw, 9px));
+    }
+    .device.${profile.frameType} .screen img {
+      flex: 1 1 0;
+      min-height: 0;
+      object-fit: fill;
+    }` : ''}
+    .phone-statusbar {
+      position: relative;
+      z-index: 2;
+      flex: none;
+      height: 5%;
+      display: flex;
+      align-items: center;
+      font-family: Arial, sans-serif;
+    }
+    .status-time {
+      margin-left: 5%;
+      font-size: clamp(11px, 3vw, 40px);
+      white-space: nowrap;
+    }
+    .ios-statusbar { background: #f5f7fc; color: #050505; font-weight: 700; }
+    .ios-statusbar svg { width: 27%; height: 62%; margin-left: auto; margin-right: 3%; }
+    .ios-statusbar .dynamic-island {
+      position: absolute;
+      top: 22%;
+      left: 50%;
+      width: 25%;
+      height: 56%;
+      transform: translateX(-50%);
+      border-radius: 999px;
+      background: #000;
+    }
+    .android-statusbar { background: #9075ed; color: #fff; }
+    .android-notification { width: 5%; height: 45%; margin-left: 2%; }
+    .android-status-icons { width: 42%; height: 72%; margin-left: auto; margin-right: 2%; }
+    .android-navigation {
+      flex: none;
+      height: 2.2%;
+      display: grid;
+      place-items: center;
+      background: #f4f7f8;
     }
+    .gesture-pill { width: 40%; height: 14%; border-radius: 999px; background: #7a7b7c; }
     .camera-dot {
       position: absolute;
       z-index: 3;
@@ -1528,9 +1697,9 @@ function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.w
     }
   </style>
 </head>
-<body>
+<body class="${phonePlatform ? 'phone-frame' : ''}">
   <main class="device ${profile.frameType}">
-    <div class="screen"><img src="${screenshotDataUrl}" /></div>
+    <div class="screen">${phoneStatusBar}<img src="${screenshotDataUrl}" />${phoneNavigation}</div>
     ${getFrameAdornment(profile.frameType)}
   </main>
 </body>
@@ -2189,6 +2358,8 @@ async function captureFramedScreenshot(
   const frameWidth = profile.framedWidth || profile.width;
   const frameHeight = profile.framedHeight || profile.height;
   const frameScaleFactor = hasCustomFrameSize ? 1 : profile.deviceScaleFactor;
+  const phonePlatform = profile.frameType === 'iphone' ? 'ios' : profile.frameType === 'android-phone' ? 'android' : null;
+  const displayTime = phonePlatform ? getFrameDisplayTime(phonePlatform) : '';
 
   await client.send('Emulation.setDeviceMetricsOverride', {
     width: frameWidth,
@@ -2207,9 +2378,9 @@ async function captureFramedScreenshot(
     html: profile.name === 'vivo-store' || profile.name === 'oppo-store'
       ? createStoreDeviceFrameHtml(
         profile, screenshotBuffer, originalImageMetadata.width, originalImageMetadata.height,
-        frameWidth, frameHeight, originalImageMetadata.format,
+        frameWidth, frameHeight, originalImageMetadata.format, displayTime,
       )
-      : createDeviceFrameHtml(profile, screenshotBuffer, frameWidth, frameHeight),
+      : createDeviceFrameHtml(profile, screenshotBuffer, frameWidth, frameHeight, 'png', displayTime),
   });
   await client.send('Runtime.evaluate', {
     expression: `new Promise((resolve) => {
@@ -2358,7 +2529,7 @@ async function captureScreenshotSet(
   console.log(`Responsive screenshot set completed: ${screenshotFileName}`);
 }
 
-async function frameExistingScreenshots(selectedProfiles) {
+async function frameExistingScreenshots(selectedProfiles, overwriteExisting = false) {
   let replayBrowser;
   let replayClient;
   let framedCount = 0;
@@ -2389,7 +2560,7 @@ async function frameExistingScreenshots(selectedProfiles) {
             fs.readFileSync(screenshotPath),
             profile,
             screenshotFileName,
-            true,
+            !overwriteExisting,
           );
           if (wasCreated) framedCount += 1;
         } catch (error) {
@@ -2678,6 +2849,10 @@ async function main() {
     return;
   }
 
+  if (options.vivoExisting || options.oppoExisting) {
+    await prepareFrameSelection(options);
+  }
+
   if (options.vivoExisting) {
     await createVivoAssetsFromExistingScreenshots();
     return;
@@ -2688,17 +2863,21 @@ async function main() {
     return;
   }
 
+  const selectedProfiles = selectProfiles(options.profiles);
+
   if (!options.dryRun) {
-    await createMissingStoreAssets();
+    await prepareFrameSelection(options);
   }
 
-  const selectedProfiles = selectProfiles(options.profiles);
-
-  if (options.frameExisting) {
-    await frameExistingScreenshots(selectedProfiles);
+  if (options.frameExisting || options.reframeExisting) {
+    await frameExistingScreenshots(selectedProfiles, options.reframeExisting);
     return;
   }
 
+  if (!options.dryRun) {
+    await createMissingStoreAssets();
+  }
+
   const interactiveMode = process.stdin.isTTY && !options.prefix && !options.dryRun;
   const deviceId = getConnectedDevice();
   const appId = getAppId();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codeplay-common",
-  "version": "4.7.2",
+  "version": "4.7.3",
   "description": "Common build scripts and files",
   "scripts": {
 	"postinstall": "node scripts/sync-files.js",