codeplay-common 4.5.6 → 4.5.8

package/files/generate-ai-promo-video.js

@@ -208,12 +208,15 @@ async function ensureEndCardBanner() {
       + '- Keep all logos and badge text sharp, correctly proportioned, and completely visible.\n'
       + '- Match the background colors and visual style to the actual app icon.\n'
       + '- Create a polished, professional background related to the app’s purpose.\n'
-      + '- Keep the background subtle so it does not compete with the icon or download badges.\n'
+      + '- Keep the background subtle so it does not compete with the icon, title, feature text, or download badges.\n'
       + '- Use a balanced landscape composition:\n'
       + '  - Large actual app icon on the left.\n'
       + '  - App Store badge followed by Google Play badge on the right.\n'
       + '  - Maintain comfortable margins and clear space around every element.\n'
-      + '- Do not add extra marketing text unless it is specifically requested.\n'
+      + '- Add the application title prominently.\n'
+      + '- Add concise promotional text describing the application’s actual features, presenting each feature one by one.\n'
+      + '- Keep the title and feature text sharp, readable, accurate, and visually balanced with the icon and download badges.\n'
+      + '- Do not invent unsupported features or add unrelated marketing text.\n'
       + '- Do not add watermarks, fake UI, generated symbols, or unrelated decorations.\n'
       + '- Rounded corners and a subtle shadow may be applied around the app icon, but its internal artwork must remain unchanged.\n'
       + '- Use image generation only for the background.\n'

package/files/take-screen-image.js

@@ -590,13 +590,6 @@ async function getPageDetails(client) {
 async function capturePageSnapshot(client) {
   const evaluation = await client.send('Runtime.evaluate', {
     expression: `(async () => {
-      const clonedRoot = document.documentElement.cloneNode(true);
-      const originalElements = [
-        document.documentElement,
-        ...document.documentElement.querySelectorAll('*'),
-      ];
-      const clonedElements = [clonedRoot, ...clonedRoot.querySelectorAll('*')];
-
       const blobToDataUrl = (blob) => new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.onload = () => resolve(reader.result);
@@ -617,109 +610,147 @@ async function capturePageSnapshot(client) {
         return canvas.toDataURL('image/png');
       };
 
-      for (let index = 0; index < originalElements.length; index += 1) {
-        const original = originalElements[index];
-        const clone = clonedElements[index];
+      const serializeDocument = async (sourceDocument) => {
+        const clonedRoot = sourceDocument.documentElement.cloneNode(true);
+        const originalElements = [
+          sourceDocument.documentElement,
+          ...sourceDocument.documentElement.querySelectorAll('*'),
+        ];
+        const clonedElements = [clonedRoot, ...clonedRoot.querySelectorAll('*')];
 
-        if (!clone) continue;
+        clonedRoot.setAttribute(
+          'data-responsive-window-scroll-y',
+          String(sourceDocument.defaultView?.scrollY || 0),
+        );
 
-        if (original.scrollTop || original.scrollLeft) {
-          clone.setAttribute('data-responsive-scroll-top', String(original.scrollTop));
-          clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
-        }
+        for (let index = 0; index < originalElements.length; index += 1) {
+          const original = originalElements[index];
+          const clone = clonedElements[index];
 
-        if (original.classList.contains('swiper-initialized')) {
-          clone.setAttribute('data-responsive-swiper-width', String(original.clientWidth));
-          clone.setAttribute('data-responsive-swiper-height', String(original.clientHeight));
-        }
+          if (!clone) continue;
 
-        if (original instanceof HTMLInputElement) {
-          clone.setAttribute('value', original.value);
-          clone.toggleAttribute('checked', original.checked);
-        } else if (original instanceof HTMLTextAreaElement) {
-          clone.textContent = original.value;
-        } else if (original instanceof HTMLSelectElement) {
-          for (let optionIndex = 0; optionIndex < original.options.length; optionIndex += 1) {
-            clone.options[optionIndex].selected = original.options[optionIndex].selected;
-          }
-        } else if (original instanceof HTMLCanvasElement) {
-          try {
-            clone.style.setProperty(
-              'background-image',
-              'url("' + original.toDataURL('image/png') + '")',
-              'important',
-            );
-            clone.style.setProperty('background-position', 'center', 'important');
-            clone.style.setProperty('background-repeat', 'no-repeat', 'important');
-            clone.style.setProperty('background-size', '100% 100%', 'important');
-          } catch {
-            // Keep the canvas element when its pixels cannot be exported.
+          if (original.scrollTop || original.scrollLeft) {
+            clone.setAttribute('data-responsive-scroll-top', String(original.scrollTop));
+            clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
           }
-        } else if (original instanceof HTMLVideoElement && original.readyState >= 2) {
-          try {
-            const replacement = document.createElement('img');
-            replacement.src = imageToDataUrl(original);
-            replacement.alt = original.getAttribute('aria-label') || '';
-            replacement.setAttribute('style', original.getAttribute('style') || '');
-            clone.replaceWith(replacement);
-          } catch {
-            clone.setAttribute('poster', original.poster || '');
+
+          if (original.classList.contains('swiper-initialized')) {
+            clone.setAttribute('data-responsive-swiper-width', String(original.clientWidth));
+            clone.setAttribute('data-responsive-swiper-height', String(original.clientHeight));
           }
-        } else if (original instanceof HTMLImageElement && original.complete) {
-          try {
-            clone.setAttribute('src', imageToDataUrl(original) || original.currentSrc || original.src);
-            clone.removeAttribute('srcset');
-          } catch {
-            clone.setAttribute('src', original.currentSrc || original.src);
+
+          const tagName = original.tagName?.toLowerCase();
+
+          if (tagName === 'input') {
+            clone.setAttribute('value', original.value);
+            clone.toggleAttribute('checked', original.checked);
+          } else if (tagName === 'textarea') {
+            clone.textContent = original.value;
+          } else if (tagName === 'select') {
+            for (let optionIndex = 0; optionIndex < original.options.length; optionIndex += 1) {
+              clone.options[optionIndex].selected = original.options[optionIndex].selected;
+            }
+          } else if (tagName === 'canvas') {
+            try {
+              clone.style.setProperty(
+                'background-image',
+                'url("' + original.toDataURL('image/png') + '")',
+                'important',
+              );
+              clone.style.setProperty('background-position', 'center', 'important');
+              clone.style.setProperty('background-repeat', 'no-repeat', 'important');
+              clone.style.setProperty('background-size', '100% 100%', 'important');
+            } catch {
+              // Keep the canvas element when its pixels cannot be exported.
+            }
+          } else if (tagName === 'video' && original.readyState >= 2) {
+            try {
+              const replacement = sourceDocument.createElement('img');
+              replacement.src = imageToDataUrl(original);
+              replacement.alt = original.getAttribute('aria-label') || '';
+              replacement.setAttribute('style', original.getAttribute('style') || '');
+              clone.replaceWith(replacement);
+            } catch {
+              clone.setAttribute('poster', original.poster || '');
+            }
+          } else if (tagName === 'img' && original.complete) {
+            try {
+              clone.setAttribute('src', imageToDataUrl(original) || original.currentSrc || original.src);
+              clone.removeAttribute('srcset');
+            } catch {
+              clone.setAttribute('src', original.currentSrc || original.src);
+            }
+          } else if (tagName === 'iframe') {
+            try {
+              const frameDocument = original.contentDocument;
+
+              if (frameDocument?.documentElement) {
+                const frameHtml = await serializeDocument(frameDocument);
+                clone.removeAttribute('src');
+                clone.setAttribute('srcdoc', '<!doctype html>' + frameHtml);
+              }
+            } catch {
+              // Cross-origin frames cannot be serialized and keep their original source.
+            }
           }
         }
-      }
 
-      const stylesheetLinks = [...document.querySelectorAll('link[rel="stylesheet"]')];
-      const clonedStylesheetLinks = [...clonedRoot.querySelectorAll('link[rel="stylesheet"]')];
+        const stylesheetLinks = [...sourceDocument.querySelectorAll('link[rel="stylesheet"]')];
+        const clonedStylesheetLinks = [...clonedRoot.querySelectorAll('link[rel="stylesheet"]')];
 
-      await Promise.all(stylesheetLinks.map(async (link, index) => {
-        try {
-          const response = await fetch(link.href);
-          if (!response.ok) return;
-
-          const cssText = (await response.text()).replace(
-            /url\\(\\s*(['"]?)(?!data:|blob:|#)([^'"\\)]+)\\1\\s*\\)/gi,
-            (match, quote, resourceUrl) => {
-              try {
-                return 'url("' + new URL(resourceUrl.trim(), link.href).href + '")';
-              } catch {
-                return match;
-              }
-            },
-          );
-          const style = document.createElement('style');
-          style.textContent = cssText;
-          clonedStylesheetLinks[index].replaceWith(style);
-        } catch {
-          clonedStylesheetLinks[index].href = link.href;
+        await Promise.all(stylesheetLinks.map(async (link, index) => {
+          try {
+            const response = await fetch(link.href);
+            if (!response.ok) return;
+
+            const cssText = (await response.text()).replace(
+              /url\\(\\s*(['"]?)(?!data:|blob:|#)([^'"\\)]+)\\1\\s*\\)/gi,
+              (match, quote, resourceUrl) => {
+                try {
+                  return 'url("' + new URL(resourceUrl.trim(), link.href).href + '")';
+                } catch {
+                  return match;
+                }
+              },
+            );
+            const style = sourceDocument.createElement('style');
+            style.textContent = cssText;
+            clonedStylesheetLinks[index].replaceWith(style);
+          } catch {
+            clonedStylesheetLinks[index].href = link.href;
+          }
+        }));
+
+        clonedRoot.querySelectorAll('script, link[rel="modulepreload"]').forEach(
+          (element) => element.remove(),
+        );
+        clonedRoot.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
+          (element) => element.remove(),
+        );
+
+        const head = clonedRoot.querySelector('head');
+
+        if (head) {
+          const base = sourceDocument.createElement('base');
+          base.href = sourceDocument.location.href;
+          head.prepend(base);
+
+          const replayStyle = sourceDocument.createElement('style');
+          replayStyle.textContent = [
+            '*,*::before,*::after{animation:none!important;transition:none!important;}',
+            '*{scrollbar-width:none!important;}',
+            '*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}',
+          ].join('');
+          head.append(replayStyle);
         }
-      }));
 
-      clonedRoot.querySelectorAll('script, link[rel="modulepreload"]').forEach((element) => element.remove());
-      clonedRoot.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
-        (element) => element.remove(),
-      );
-
-      const base = document.createElement('base');
-      base.href = location.href;
-      clonedRoot.querySelector('head').prepend(base);
+        return clonedRoot.outerHTML;
+      };
 
-      const replayStyle = document.createElement('style');
-      replayStyle.textContent = [
-        '*,*::before,*::after{animation-play-state:paused!important;}',
-        '*{scrollbar-width:none!important;}',
-        '*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;}',
-      ].join('');
-      clonedRoot.querySelector('head').append(replayStyle);
+      const html = await serializeDocument(document);
 
       return {
-        html: '<!doctype html>' + clonedRoot.outerHTML,
+        html: '<!doctype html>' + html,
         scrollY,
       };
     })()`,
@@ -876,7 +907,43 @@ async function closeReplayBrowser(browser) {
 async function waitForReplayLayout(client, snapshot) {
   const evaluation = await client.send('Runtime.evaluate', {
     expression: `(async () => {
-      const assetWait = Promise.all([...document.images].map((image) => {
+      const collectDocuments = (rootDocument) => {
+        const documents = [rootDocument];
+
+        rootDocument.querySelectorAll('iframe').forEach((frame) => {
+          try {
+            if (frame.contentDocument?.documentElement) {
+              documents.push(...collectDocuments(frame.contentDocument));
+            }
+          } catch {
+            // Cross-origin frames cannot participate in replay layout restoration.
+          }
+        });
+
+        return documents;
+      };
+
+      const frameDeadline = Date.now() + 5000;
+
+      while (Date.now() < frameDeadline) {
+        const frames = [...document.querySelectorAll('iframe')];
+        const framesReady = frames.every((frame) => {
+          try {
+            return frame.contentDocument?.readyState === 'complete';
+          } catch {
+            return true;
+          }
+        });
+
+        if (framesReady) break;
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+
+      const replayDocuments = collectDocuments(document);
+      const replayImages = replayDocuments.flatMap((replayDocument) => (
+        [...replayDocument.images]
+      ));
+      const assetWait = Promise.all(replayImages.map((image) => {
         if (image.complete) return Promise.resolve();
         return new Promise((resolve) => {
           image.addEventListener('load', resolve, { once: true });
@@ -885,11 +952,18 @@ async function waitForReplayLayout(client, snapshot) {
       }));
 
       await Promise.race([
-        Promise.all([document.fonts.ready, assetWait]),
+        Promise.all([
+          ...replayDocuments.map((replayDocument) => replayDocument.fonts.ready),
+          assetWait,
+        ]),
         new Promise((resolve) => setTimeout(resolve, 5000)),
       ]);
 
-      document.querySelectorAll('[data-responsive-swiper-width]').forEach((swiper) => {
+      const replayElements = (selector) => replayDocuments.flatMap((replayDocument) => (
+        [...replayDocument.querySelectorAll(selector)]
+      ));
+
+      replayElements('[data-responsive-swiper-width]').forEach((swiper) => {
         const wrapper = [...swiper.children].find((element) => (
           element.classList.contains('swiper-wrapper')
         ));
@@ -947,10 +1021,17 @@ async function waitForReplayLayout(client, snapshot) {
         }
       });
 
-      document.querySelectorAll('[data-responsive-scroll-top]').forEach((element) => {
+      replayElements('[data-responsive-scroll-top]').forEach((element) => {
         element.scrollTop = Number(element.dataset.responsiveScrollTop);
         element.scrollLeft = Number(element.dataset.responsiveScrollLeft);
       });
+
+      replayDocuments.forEach((replayDocument) => {
+        replayDocument.defaultView?.scrollTo(
+          0,
+          Number(replayDocument.documentElement.dataset.responsiveWindowScrollY) || 0,
+        );
+      });
       scrollTo(0, ${Number(snapshot.scrollY) || 0});
 
       await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));

package/package.json

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