codeplay-common 4.6.7 → 4.6.8

package/files/take-screen-image.js

@@ -1,12 +1,15 @@
 //node take-screen-image.js --delete 3
 //node take-screen-image.js --delete 3,4,5
-
+//node take-screen-image.js --profiles vivo-store //only taking screenshot for vivo-store - Not only vivo, we can do this to all of our store images.
+//node take-screen-image.js --vivo-existing       //Used if we already took the screenshot and those vivo screenshots are not there then execute this to resize the screenshot for vivo store.
+//node take-screen-image.js --oppo-existing       //Used if we already took the screenshot and those oppo screenshots are not there then execute this to resize the screenshot for Oppo store.
 
 
 const fs = require('node:fs');
 const path = require('node:path');
 const readline = require('node:readline/promises');
 const { spawn, spawnSync } = require('node:child_process');
+const sharp = require('sharp');
 
 const screenshotDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Screenshot');
 const inFrameDirectory = path.join(__dirname, 'Auto-Screenshot', 'Store-image-Frame');
@@ -53,6 +56,52 @@ const deviceProfiles = [
     orientationSensitive: true,
     mobile: true,
   },
+  {
+    name: 'vivo-store',
+    label: 'Vivo Store portrait screenshot',
+    outputDirectory: 'Vivo-Store',
+    frameType: 'android-phone',
+    width: 360,
+    height: 720,
+    deviceScaleFactor: 3,
+    framedWidth: 1080,
+    framedHeight: 2160,
+    orientationSensitive: false,
+    mobile: true,
+    storeRequirements: {
+      maxFileSizeBytes: 5 * 1024 * 1024,
+      minPixels: 320,
+      maxPixels: 3840,
+      minAspectRatio: 0.5,
+      maxAspectRatio: 2,
+      minImages: 4,
+      maxImages: 8,
+    },
+  },
+  {
+    name: 'oppo-store',
+    label: 'Oppo Store portrait screenshot',
+    outputDirectory: 'Oppo-Store',
+    frameType: 'android-phone',
+    width: 360,
+    height: 640,
+    deviceScaleFactor: 3,
+    framedWidth: 1080,
+    framedHeight: 1920,
+    orientationSensitive: false,
+    mobile: true,
+    outputFormat: 'jpeg',
+    outputExtension: 'jpg',
+    storeRequirements: {
+      maxFileSizeBytes: 3 * 1024 * 1024,
+      minPixels: 320,
+      maxPixels: 1920,
+      minAspectRatio: 0.5,
+      maxAspectRatio: 0.6,
+      minImages: 3,
+      maxImages: 5,
+    },
+  },
   {
     name: 'android-tablet-7-inch',
     aliases: ['android-tablet'],
@@ -353,31 +402,33 @@ function getSelectedOutputDirectories(selectedProfiles) {
 }
 
 function getNextNumberedFileName(selectedProfiles) {
+  const extension = selectedProfiles[0]?.outputExtension || 'png';
   const highestNumber = getSelectedOutputDirectories(selectedProfiles)
     .filter((directory) => fs.existsSync(directory))
     .reduce((highestAcrossDirectories, directory) => {
       const highestInDirectory = fs.readdirSync(directory, { withFileTypes: true })
         .filter((entry) => entry.isFile())
         .reduce((highest, entry) => {
-          const match = entry.name.match(/^(\d+)\.png$/i);
+          const match = entry.name.match(new RegExp(`^(\\d+)\\.${extension}$`, 'i'));
           return match ? Math.max(highest, Number(match[1])) : highest;
         }, 0);
 
       return Math.max(highestAcrossDirectories, highestInDirectory);
     }, 0);
 
-  return `${highestNumber + 1}.png`;
+  return `${highestNumber + 1}.${extension}`;
 }
 
 function getUniqueFileName(prefix, selectedProfiles) {
+  const extension = selectedProfiles[0]?.outputExtension || 'png';
   const outputDirectories = getSelectedOutputDirectories(selectedProfiles);
-  let fileName = `${prefix}.png`;
+  let fileName = `${prefix}.${extension}`;
   let duplicateNumber = 2;
 
   while (outputDirectories.some((directory) => (
     fs.existsSync(path.join(directory, fileName))
   ))) {
-    fileName = `${prefix}-${duplicateNumber}.png`;
+    fileName = `${prefix}-${duplicateNumber}.${extension}`;
     duplicateNumber += 1;
   }
 
@@ -385,7 +436,7 @@ function getUniqueFileName(prefix, selectedProfiles) {
 }
 
 function getScreenshotFileName(fileNameInput, selectedProfiles) {
-  const inputWithoutExtension = fileNameInput.trim().replace(/\.png$/i, '');
+  const inputWithoutExtension = fileNameInput.trim().replace(/\.(png|jpe?g)$/i, '');
 
   if (!inputWithoutExtension) {
     return getNextNumberedFileName(selectedProfiles);
@@ -411,6 +462,8 @@ function parseArguments() {
     samsungAssets: false,
     dryRun: false,
     frameExisting: false,
+    vivoExisting: false,
+    oppoExisting: false,
     help: false,
     list: false,
     deleteRequested: false,
@@ -430,6 +483,10 @@ function parseArguments() {
       options.dryRun = true;
     } else if (argument === '--frame-existing') {
       options.frameExisting = true;
+    } else if (argument === '--vivo-existing') {
+      options.vivoExisting = true;
+    } else if (argument === '--oppo-existing') {
+      options.oppoExisting = true;
     } else if (argument === '--help' || argument === '-h') {
       options.help = true;
     } else if (argument === '--list') {
@@ -460,13 +517,20 @@ function printProfiles() {
     const outputWidth = profile.width * profile.deviceScaleFactor;
     const outputHeight = profile.height * profile.deviceScaleFactor;
     const framedSize = profile.framedWidth
-      ? `, framed PNG ${profile.framedWidth}x${profile.framedHeight}`
+      ? `, framed ${(profile.outputFormat || 'png').toUpperCase()} ${profile.framedWidth}x${profile.framedHeight}`
       : '';
     console.log(
       `${profile.name.padEnd(15)} ${profile.label} `
       + `(folder ${profile.outputDirectory}, viewport ${profile.width}x${profile.height}, `
-      + `PNG ${outputWidth}x${outputHeight}${framedSize})`,
+      + `${(profile.outputFormat || 'png').toUpperCase()} ${outputWidth}x${outputHeight}${framedSize})`,
     );
+    if (profile.storeRequirements) {
+      console.log(
+        `                 Store limits: ${profile.storeRequirements.minImages}-${profile.storeRequirements.maxImages} images, `
+        + `max ${profile.storeRequirements.maxFileSizeBytes / (1024 * 1024)} MB, `
+        + `width/height ${profile.storeRequirements.minAspectRatio}-${profile.storeRequirements.maxAspectRatio}:1`,
+      );
+    }
   }
 }
 
@@ -478,6 +542,8 @@ function printHelp() {
   console.log('  node take-screen-image.js --profiles iphone,ipad');
   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 --vivo-existing');
+  console.log('  node take-screen-image.js --oppo-existing');
   console.log('  node take-screen-image.js --amazon-assets');
   console.log('  node take-screen-image.js --samsung-assets');
   console.log('  node take-screen-image.js --dry-run');
@@ -1154,9 +1220,84 @@ function getFrameAdornment(frameType) {
   return '<div class="xr-status"></div>';
 }
 
-function createDeviceFrameHtml(profile, screenshotBuffer) {
-  const screenshotDataUrl = `data:image/png;base64,${screenshotBuffer.toString('base64')}`;
-  const aspectRatio = `${profile.width} / ${profile.height}`;
+function createStoreDeviceFrameHtml(profile, screenshotBuffer, imageWidth, imageHeight, canvasWidth, canvasHeight, imageFormat) {
+  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';
+
+  return `<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <style>
+    * { box-sizing: border-box; }
+    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
+    body {
+      display: grid;
+      place-items: center;
+      background: radial-gradient(ellipse at 50% 43%, #24344d 0%, #101b2d 47%, #070e1a 100%);
+    }
+    body::before {
+      content: '';
+      position: absolute;
+      width: 82%;
+      height: 62%;
+      border-radius: 50%;
+      background: ${accent};
+      opacity: 0.11;
+      filter: blur(90px);
+    }
+    .device {
+      position: relative;
+      z-index: 1;
+      width: ${screenWidth + 48}px;
+      padding: 34px 18px 20px;
+      border: 6px solid #8d99ac;
+      border-radius: 48px;
+      background: linear-gradient(135deg, #404c60, #111925 35%, #070c15 72%, #59657a);
+      box-shadow: 0 38px 85px rgba(0, 0, 0, 0.58), 0 0 0 2px rgba(255, 255, 255, 0.19) inset;
+    }
+    .screen {
+      width: ${screenWidth}px;
+      background: #fff;
+      box-shadow: 0 0 0 2px #03060c;
+    }
+    .screen img { display: block; width: 100%; height: auto; }
+    .camera {
+      position: absolute;
+      top: 11px;
+      left: 50%;
+      width: 12px;
+      height: 12px;
+      transform: translateX(-50%);
+      border-radius: 50%;
+      background: radial-gradient(circle at 32% 30%, #547496, #070b12 48%, #000 80%);
+      box-shadow: 0 0 0 3px #1b2534;
+    }
+    .side-button {
+      position: absolute;
+      top: 19%;
+      right: -10px;
+      width: 4px;
+      height: 66px;
+      border-radius: 0 3px 3px 0;
+      background: #79869a;
+    }
+  </style>
+</head>
+<body>
+  <main class="device">
+    <div class="camera"></div>
+    <div class="screen"><img src="${screenshotDataUrl}" /></div>
+    <div class="side-button"></div>
+  </main>
+</body>
+</html>`;
+}
+
+function createDeviceFrameHtml(profile, screenshotBuffer, imageWidth = profile.width, imageHeight = profile.height, imageFormat = 'png') {
+  const screenshotDataUrl = `data:image/${imageFormat === 'jpeg' ? 'jpeg' : 'png'};base64,${screenshotBuffer.toString('base64')}`;
+  const aspectRatio = `${imageWidth} / ${imageHeight}`;
 
   return `<!doctype html>
 <html>
@@ -1200,20 +1341,21 @@ function createDeviceFrameHtml(profile, screenshotBuffer) {
     .screen {
       position: relative;
       width: 100%;
-      height: 100%;
+      height: 87%;
       overflow: hidden;
-      background: #05070b;
+      background: #f5f7fc;
       box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.95) inset;
     }
     .screen img {
       display: block;
       width: 100%;
       height: 100%;
-      object-fit: cover;
+      object-fit: contain;
+      background: #f5f7fc;
     }
     .device.android-phone,
     .device.iphone {
-      height: 87%;
+      height: 100%;
       padding: 1.25%;
       border-radius: clamp(24px, 8vw, 70px);
     }
@@ -2040,9 +2182,15 @@ async function captureFramedScreenshot(
     return false;
   }
 
-  const hasCustomFrameSize = Boolean(profile.framedWidth && profile.framedHeight);
-  const frameWidth = profile.framedWidth || profile.width;
-  const frameHeight = profile.framedHeight || profile.height;
+  const originalImageMetadata = profile.storeRequirements
+    ? await sharp(screenshotBuffer).metadata()
+    : null;
+  const frameDimensions = originalImageMetadata?.width && originalImageMetadata?.height
+    ? { width: originalImageMetadata.width, height: originalImageMetadata.height }
+    : null;
+  const hasCustomFrameSize = Boolean(frameDimensions || (profile.framedWidth && profile.framedHeight));
+  const frameWidth = frameDimensions?.width || profile.framedWidth || profile.width;
+  const frameHeight = frameDimensions?.height || profile.framedHeight || profile.height;
   const frameScaleFactor = hasCustomFrameSize ? 1 : profile.deviceScaleFactor;
 
   await client.send('Emulation.setDeviceMetricsOverride', {
@@ -2059,7 +2207,12 @@ async function captureFramedScreenshot(
   const frameTree = await client.send('Page.getFrameTree');
   await client.send('Page.setDocumentContent', {
     frameId: frameTree.frameTree.frame.id,
-    html: createDeviceFrameHtml(profile, screenshotBuffer),
+    html: profile.name === 'vivo-store' || profile.name === 'oppo-store'
+      ? createStoreDeviceFrameHtml(
+        profile, screenshotBuffer, originalImageMetadata.width, originalImageMetadata.height,
+        frameWidth, frameHeight, originalImageMetadata.format,
+      )
+      : createDeviceFrameHtml(profile, screenshotBuffer, frameWidth, frameHeight),
   });
   await client.send('Runtime.evaluate', {
     expression: `new Promise((resolve) => {
@@ -2076,21 +2229,52 @@ async function captureFramedScreenshot(
   });
 
   const framedScreenshot = await client.send('Page.captureScreenshot', {
-    format: 'png',
+    format: profile.outputFormat || 'png',
+    quality: profile.outputFormat === 'jpeg' ? 90 : undefined,
     fromSurface: true,
     captureBeyondViewport: false,
   });
 
+  const framedScreenshotBuffer = Buffer.from(framedScreenshot.data, 'base64');
+  if (!frameDimensions) {
+    validateStoreImage(profile, frameWidth, frameHeight, framedScreenshotBuffer);
+  }
+
   fs.mkdirSync(framedProfileDirectory, { recursive: true });
   fs.writeFileSync(
     framedScreenshotPath,
-    Buffer.from(framedScreenshot.data, 'base64'),
-    { flag: 'wx' },
+    framedScreenshotBuffer,
+    { flag: skipExisting ? 'wx' : 'w' },
   );
   console.log(`Saved framed ${profile.label}: ${framedScreenshotPath}`);
   return true;
 }
 
+function validateStoreImage(profile, width, height, imageBuffer) {
+  if (!profile.storeRequirements) return;
+
+  const {
+    maxFileSizeBytes, minPixels, maxPixels, minAspectRatio, maxAspectRatio,
+  } = profile.storeRequirements;
+  const aspectRatio = width / height;
+
+  if (
+    width < minPixels || height < minPixels
+    || width > maxPixels || height > maxPixels
+    || aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio
+  ) {
+    throw new Error(
+      `${profile.label} must be between ${minPixels}px and ${maxPixels}px with aspect ratio <= ${maxAspectRatio}:1; received ${width}x${height}.`,
+    );
+  }
+
+  if (imageBuffer.length > maxFileSizeBytes) {
+    throw new Error(
+      `${profile.label} exceeds ${maxFileSizeBytes / (1024 * 1024)} MB: ${Math.ceil(imageBuffer.length / (1024 * 1024))} MB.`,
+    );
+  }
+}
+
 async function captureProfile(client, snapshot, profile, screenshotFileName) {
   await client.send('Emulation.setDeviceMetricsOverride', {
     width: profile.width,
@@ -2118,7 +2302,8 @@ async function captureProfile(client, snapshot, profile, screenshotFileName) {
   }
 
   const screenshot = await client.send('Page.captureScreenshot', {
-    format: 'png',
+    format: profile.outputFormat || 'png',
+    quality: profile.outputFormat === 'jpeg' ? 90 : undefined,
     fromSurface: true,
     captureBeyondViewport: false,
   });
@@ -2126,6 +2311,12 @@ async function captureProfile(client, snapshot, profile, screenshotFileName) {
   const profileDirectory = path.join(screenshotDirectory, profile.outputDirectory);
   const screenshotPath = path.join(profileDirectory, screenshotFileName);
   const screenshotBuffer = Buffer.from(screenshot.data, 'base64');
+  validateStoreImage(
+    profile,
+    profile.width * profile.deviceScaleFactor,
+    profile.height * profile.deviceScaleFactor,
+    screenshotBuffer,
+  );
 
   fs.mkdirSync(profileDirectory, { recursive: true });
   fs.writeFileSync(screenshotPath, screenshotBuffer, { flag: 'wx' });
@@ -2145,6 +2336,22 @@ async function captureScreenshotSet(
   selectedProfiles,
   fileNameInput,
 ) {
+  const storeProfile = selectedProfiles.find((profile) => profile.storeRequirements);
+  if (storeProfile) {
+    const profileDirectory = path.join(screenshotDirectory, storeProfile.outputDirectory);
+    const existingImageCount = fs.existsSync(profileDirectory)
+      ? fs.readdirSync(profileDirectory, { withFileTypes: true })
+        .filter((entry) => entry.isFile() && /\.(png|jpe?g|webp)$/i.test(entry.name))
+        .length
+      : 0;
+
+    if (existingImageCount >= storeProfile.storeRequirements.maxImages) {
+      throw new Error(
+        `${storeProfile.label} already contains ${existingImageCount} images; the store allows a maximum of ${storeProfile.storeRequirements.maxImages}.`,
+      );
+    }
+  }
+
   console.log('Capturing the current rendered page and resolved native data...');
   const snapshot = await capturePageSnapshot(deviceClient);
   const screenshotFileName = getScreenshotFileName(fileNameInput, selectedProfiles);
@@ -2213,6 +2420,148 @@ async function frameExistingScreenshots(selectedProfiles) {
   }
 }
 
+async function createVivoAssetsFromExistingScreenshots() {
+  const vivoProfile = deviceProfiles.find((profile) => profile.name === 'vivo-store');
+  const sourceDirectory = path.join(screenshotDirectory, 'Android');
+  const outputDirectory = path.join(screenshotDirectory, vivoProfile.outputDirectory);
+  const sourceFiles = fs.existsSync(sourceDirectory)
+    ? fs.readdirSync(sourceDirectory, { withFileTypes: true })
+      .filter((entry) => entry.isFile() && /\.png$/i.test(entry.name))
+      .map((entry) => entry.name)
+      .sort((first, second) => first.localeCompare(second, undefined, { numeric: true }))
+    : [];
+
+  if (!sourceFiles.length) {
+    throw new Error(`No existing PNG screenshots found in ${sourceDirectory}.`);
+  }
+
+  const { maxImages } = vivoProfile.storeRequirements;
+  const selectedSourceFiles = sourceFiles.slice(0, maxImages);
+  if (sourceFiles.length > maxImages) {
+    console.warn(
+      `Vivo Store allows a maximum of ${maxImages} images; using the first ${maxImages} of ${sourceFiles.length} existing Android screenshots.`,
+    );
+  }
+
+  let replayBrowser;
+  let replayClient;
+  let createdCount = 0;
+
+  try {
+    replayBrowser = await launchReplayBrowser();
+    replayClient = await createReplayPage(replayBrowser);
+    fs.mkdirSync(outputDirectory, { recursive: true });
+
+    for (const screenshotFileName of selectedSourceFiles) {
+      const sourcePath = path.join(sourceDirectory, screenshotFileName);
+      const outputPath = path.join(outputDirectory, screenshotFileName);
+      const sourceBuffer = fs.readFileSync(sourcePath);
+      const vivoBuffer = await sharp(sourceBuffer)
+        .resize(vivoProfile.width * vivoProfile.deviceScaleFactor, vivoProfile.height * vivoProfile.deviceScaleFactor, {
+          fit: 'contain',
+          background: '#f5f7fc',
+        })
+        .png()
+        .toBuffer();
+
+      validateStoreImage(
+        vivoProfile,
+        vivoProfile.width * vivoProfile.deviceScaleFactor,
+        vivoProfile.height * vivoProfile.deviceScaleFactor,
+        vivoBuffer,
+      );
+
+      fs.writeFileSync(outputPath, vivoBuffer);
+      createdCount += 1;
+      console.log(`Saved Vivo frameless screenshot: ${outputPath}`);
+
+      await captureFramedScreenshot(
+        replayClient,
+        sourceBuffer,
+        vivoProfile,
+        screenshotFileName,
+        false,
+      );
+    }
+  } finally {
+    if (replayClient) replayClient.close();
+    if (replayBrowser) await closeReplayBrowser(replayBrowser);
+  }
+
+  console.log(`Vivo assets created from existing screenshots: ${createdCount} frameless image(s).`);
+}
+
+async function createOppoAssetsFromExistingScreenshots() {
+  const oppoProfile = deviceProfiles.find((profile) => profile.name === 'oppo-store');
+  const sourceDirectory = path.join(screenshotDirectory, 'Android');
+  const outputDirectory = path.join(screenshotDirectory, oppoProfile.outputDirectory);
+  const sourceFiles = fs.existsSync(sourceDirectory)
+    ? fs.readdirSync(sourceDirectory, { withFileTypes: true })
+      .filter((entry) => entry.isFile() && /\.png$/i.test(entry.name))
+      .map((entry) => entry.name)
+      .sort((first, second) => first.localeCompare(second, undefined, { numeric: true }))
+    : [];
+
+  if (!sourceFiles.length) {
+    throw new Error(`No existing PNG screenshots found in ${sourceDirectory}.`);
+  }
+
+  const { maxImages } = oppoProfile.storeRequirements;
+  const selectedSourceFiles = sourceFiles.slice(0, maxImages);
+  if (sourceFiles.length > maxImages) {
+    console.warn(
+      `Oppo Store allows a maximum of ${maxImages} images; using the first ${maxImages} of ${sourceFiles.length} existing Android screenshots.`,
+    );
+  }
+
+  let replayBrowser;
+  let replayClient;
+  let createdCount = 0;
+
+  try {
+    replayBrowser = await launchReplayBrowser();
+    replayClient = await createReplayPage(replayBrowser);
+    fs.mkdirSync(outputDirectory, { recursive: true });
+
+    for (const sourceFileName of selectedSourceFiles) {
+      const outputFileName = `${path.basename(sourceFileName, path.extname(sourceFileName))}.jpg`;
+      const sourceBuffer = fs.readFileSync(path.join(sourceDirectory, sourceFileName));
+      const oppoBuffer = await sharp(sourceBuffer)
+        .resize(oppoProfile.width * oppoProfile.deviceScaleFactor, oppoProfile.height * oppoProfile.deviceScaleFactor, {
+          fit: 'contain',
+          background: '#f5f7fc',
+        })
+        .jpeg({ quality: 90 })
+        .toBuffer();
+      const outputPath = path.join(outputDirectory, outputFileName);
+
+      validateStoreImage(
+        oppoProfile,
+        oppoProfile.width * oppoProfile.deviceScaleFactor,
+        oppoProfile.height * oppoProfile.deviceScaleFactor,
+        oppoBuffer,
+      );
+
+      fs.writeFileSync(outputPath, oppoBuffer);
+      createdCount += 1;
+      console.log(`Saved Oppo frameless screenshot: ${outputPath}`);
+
+      await captureFramedScreenshot(
+        replayClient,
+        sourceBuffer,
+        oppoProfile,
+        outputFileName,
+        false,
+      );
+    }
+  } finally {
+    if (replayClient) replayClient.close();
+    if (replayBrowser) await closeReplayBrowser(replayBrowser);
+  }
+
+  console.log(`Oppo assets created from existing screenshots: ${createdCount} frameless image(s).`);
+}
+
 async function runInteractiveCaptureLoop(
   deviceClient,
   replayClient,
@@ -2254,6 +2603,8 @@ async function getInteractiveOptions(options) {
     || options.dryRun
     || options.amazonAssets
     || options.samsungAssets
+    || options.vivoExisting
+    || options.oppoExisting
   ) {
     return options;
   }
@@ -2332,6 +2683,16 @@ async function main() {
     return;
   }
 
+  if (options.vivoExisting) {
+    await createVivoAssetsFromExistingScreenshots();
+    return;
+  }
+
+  if (options.oppoExisting) {
+    await createOppoAssetsFromExistingScreenshots();
+    return;
+  }
+
   if (!options.dryRun) {
     await createMissingStoreAssets();
   }