codeplay-common 4.8.3 → 4.8.5

package/files/take-screen-image.js

@@ -174,7 +174,7 @@ const deviceProfiles = [
   },
   {
     name: 'iphone-duo',
-    label: 'iPhone Duo inner-display App Store viewport (generic frame)',
+    label: 'iPhone Duo inner-display App Store viewport',
     outputDirectory: 'iPhone-Duo',
     frameType: 'iphone',
     showDynamicIsland: false,
@@ -927,21 +927,21 @@ async function getWebViewTarget(localPort) {
     && target.url !== 'about:blank'
   ));
 
-  const visibleTarget = pageTargets.find((target) => {
+  for (const target of pageTargets) {
+    const client = new CdpClient(target.webSocketDebuggerUrl);
     try {
-      return JSON.parse(target.description || '{}').visible !== false;
+      await client.connect();
+      const details = await getPageDetails(client);
+      if (details.width > 0 && details.height > 0 && details.hasAppPage) {
+        return target;
+      }
     } catch {
-      return true;
+      // A target may close while discovering the active app WebView.
+    } finally {
+      client.close();
     }
-  });
-
-  const target = visibleTarget || pageTargets[0];
-
-  if (!target) {
-    throw new Error('No rendered page was found in the app WebView.');
   }
-
-  return target;
+  throw new Error('No visible Framework7 app page was found. Open the app page and retry; ad WebViews cannot be captured.');
 }
 
 async function getPageDetails(client) {
@@ -952,6 +952,14 @@ async function getPageDetails(client) {
       width: innerWidth,
       height: innerHeight,
       devicePixelRatio: devicePixelRatio,
+      hasAppPage: [...document.querySelectorAll('.view .page')].some((page) => {
+        const bounds = page.getBoundingClientRect();
+        const style = getComputedStyle(page);
+        return style.display !== 'none' && style.visibility !== 'hidden'
+          && bounds.width > 0 && bounds.height > 0
+          && bounds.bottom > 0 && bounds.right > 0
+          && bounds.top < innerHeight && bounds.left < innerWidth;
+      }),
       readyState: document.readyState
     })`,
     returnByValue: true,
@@ -1041,7 +1049,7 @@ async function capturePageSnapshot(client) {
           ? element.closest('label, .item-content, .input')
           : element;
         const preferredLabel = labelRoot?.querySelector(
-          '.item-title, .button-label, strong, .dialog-button-text',
+          '.item-title, .button-label, strong, .dialog-button-text, .homeboxtitle',
         );
         const textRoot = preferredLabel || labelRoot || element;
         const clone = textRoot.cloneNode(true);
@@ -1065,7 +1073,7 @@ async function capturePageSnapshot(client) {
         if (!root) return [];
         const records = [];
         const seen = new Set();
-        const selector = 'button, a.button, [role="button"], .list-button, .dialog-button';
+        const selector = 'button, .button, [role="button"], .list-button, .dialog-button';
         for (const element of root.querySelectorAll(selector)) {
           if (!isVisible(element)) continue;
           const label = getElementLabel(element);
@@ -1137,6 +1145,9 @@ async function capturePageSnapshot(client) {
       const activePage = visiblePages.find((page) => page.classList.contains('page-current'))
         || visiblePages[visiblePages.length - 1]
         || null;
+      if (!activePage) {
+        throw new Error('No visible app page was found; screenshot information was not captured.');
+      }
       const overlaySelector = [
         '.dialog.modal-in',
         '.popup.modal-in',
@@ -1161,12 +1172,12 @@ async function capturePageSnapshot(client) {
       ].join(',');
       const pageHeadings = collectUiText(
         activePage,
-        'h1, h2, h3, .navbar .title, .t-section-heading, .headTitle',
+        'h1, h2, h3, .navbar .title, .t-section-heading, .headTitle, .home-hero-title, .home-section-title',
         10,
       );
       const pageControls = collectUiText(
         activePage,
-        'button, [role="button"], label, .item-title, .item-subtitle, .list-button, option:checked',
+        'button, [role="button"], label, .item-title, .item-subtitle, .list-button, option:checked, .homeboxtitle',
         30,
       );
       const overlayText = collectUiText(activeOverlay, textSelector, 35);
@@ -1184,6 +1195,8 @@ async function capturePageSnapshot(client) {
         params: Object.keys(f7Route.params || {}),
         query: Object.keys(f7Route.query || {}),
       } : null;
+      const themeAttribute = document.documentElement.getAttribute('data-theme')
+        || document.body.getAttribute('data-theme');
       const screenInfo = {
         documentTitle: normalizeUiText(document.title),
         route: {
@@ -1195,16 +1208,16 @@ async function capturePageSnapshot(client) {
           dataName: activePage.getAttribute('data-name') || '',
           id: activePage.id || '',
           classes: getStableClasses(activePage),
-          navbarTitle: collectUiText(activePage, '.navbar .title', 1)[0] || '',
+          navbarTitle: collectUiText(activePage, '.navbar .title, .navbar .home-brand-text', 1)[0] || '',
           headings: pageHeadings,
           sections: collectUiText(
             activePage,
-            'h1, h2, h3, legend, .t-section-heading, .t-output-choice-heading, .headTitle',
+            'h1, h2, h3, legend, .t-section-heading, .t-output-choice-heading, .headTitle, .home-hero-title, .home-section-title',
             20,
           ),
           descriptions: collectUiText(
             activePage,
-            'p, small, .item-subtitle, .item-after, .t-settings-footnote',
+            'p, small, .item-subtitle, .item-after, .t-settings-footnote, .home-hero-kicker, .home-hero-subtitle, .home-stat, .homebox-meta',
             30,
           ),
           controls: pageControls,
@@ -1232,10 +1245,12 @@ async function capturePageSnapshot(client) {
           )),
           inputs: overlayInputs,
         } : null,
-        theme: document.documentElement.classList.contains('theme-dark')
-          || document.body.classList.contains('theme-dark')
-          ? 'dark'
-          : 'light',
+        theme: themeAttribute === 'dark' || themeAttribute === 'light'
+          ? themeAttribute
+          : document.documentElement.classList.contains('theme-dark')
+            || document.body.classList.contains('theme-dark')
+            ? 'dark'
+            : 'light',
         viewport: {
           width: innerWidth,
           height: innerHeight,
@@ -2250,6 +2265,40 @@ function createDeviceFrameHtml(
       border-radius: 999px;
       background: #000;
     }
+    ${profile.name === 'iphone-duo' ? `
+    .device.iphone-duo {
+      --duo-radius: clamp(24px, 4vw, 100px);
+      --duo-bezel: clamp(5px, 0.65vw, 14px);
+      --duo-edge: clamp(2px, 0.2vw, 5px);
+      container-type: inline-size;
+      padding: var(--duo-bezel);
+      border-width: var(--duo-edge);
+      border-radius: 8px var(--duo-radius) var(--duo-radius) 8px;
+    }
+    .device.iphone-duo .screen {
+      border-radius: 2px calc(var(--duo-radius) - var(--duo-bezel) - var(--duo-edge)) calc(var(--duo-radius) - var(--duo-bezel) - var(--duo-edge)) 2px;
+    }
+    .iphone-duo .ios-statusbar { height: 4.5%; }
+    .iphone-duo .status-time { margin-left: 4%; font-size: 2.4cqw; line-height: 1; }
+    .iphone-duo .ios-statusbar svg { width: 17%; height: 54%; margin-right: 8%; }
+    .duo-camera {
+      position: absolute;
+      z-index: 3;
+      top: 2.25%;
+      right: 3%;
+      width: 1.8%;
+      aspect-ratio: 1;
+      transform: translateY(-50%);
+      border-radius: 50%;
+      background: #000;
+    }
+    @media (orientation: landscape) {
+      .device.iphone-duo { border-radius: var(--duo-radius); }
+      .device.iphone-duo .screen { border-radius: calc(var(--duo-radius) - var(--duo-bezel) - var(--duo-edge)); }
+      .iphone-duo .status-time { margin-left: max(4%, calc(var(--duo-radius) * 0.6)); font-size: 1.8cqw; }
+      .iphone-duo .ios-statusbar svg { width: 13%; margin-right: max(4%, calc(var(--duo-radius) * 0.6)); }
+      .duo-camera { display: none; }
+    }` : ''}
     .android-statusbar { height: 4%; background: ${statusBarStyle?.background || 'transparent'}; color: ${statusBarStyle?.foreground || '#050505'}; font-family: Roboto, Arial, sans-serif; }
     .android-notification { width: 3.4%; height: 46%; margin-left: 2%; }
     .android-status-icons { width: 32%; height: 58%; margin-left: auto; margin-right: 4%; }
@@ -2567,8 +2616,8 @@ function createDeviceFrameHtml(
 <body class="${phonePlatform ? 'phone-frame' : ''} ${screenshotCopy ? 'has-copy' : ''}">
   ${createPromotionalDecorations(palette)}
   ${createScreenshotCopyMarkup(screenshotCopy)}
-  <main class="device ${profile.frameType}">
-    <div class="screen">${phoneStatusBar}<img src="${screenshotDataUrl}" />${phoneNavigation}</div>
+  <main class="device ${profile.frameType}${profile.name === 'iphone-duo' ? ' iphone-duo' : ''}">
+    <div class="screen">${phoneStatusBar}<img src="${screenshotDataUrl}" />${phoneNavigation}${profile.name === 'iphone-duo' ? '<div class="duo-camera" aria-hidden="true"></div>' : ''}</div>
     ${getFrameAdornment(profile.frameType)}
   </main>
 </body>
@@ -3365,7 +3414,25 @@ async function captureFramedScreenshot(
   await client.send('Runtime.evaluate', {
     expression: `new Promise((resolve) => {
       const image = document.querySelector('img');
-      const ready = () => requestAnimationFrame(() => requestAnimationFrame(resolve));
+      const ready = () => requestAnimationFrame(() => {
+        const copy = document.querySelector('.promo-copy');
+        const device = document.querySelector('.device');
+        if (copy && device && window.innerHeight > window.innerWidth) {
+          const gap = Math.max(16, Math.min(40, window.innerHeight * 0.02));
+          const deviceTop = copy.getBoundingClientRect().bottom + gap;
+          const deviceBounds = device.getBoundingClientRect();
+          const availableHeight = window.innerHeight * 0.97 - deviceTop;
+          const availableWidth = window.innerWidth * 0.9;
+          const scale = Math.min(1, availableHeight / deviceBounds.height, availableWidth / deviceBounds.width);
+          if (scale > 0) {
+            device.style.top = deviceTop + 'px';
+            device.style.bottom = 'auto';
+            device.style.transformOrigin = 'top center';
+            device.style.transform = 'translateX(-50%) scale(' + scale + ')';
+          }
+        }
+        requestAnimationFrame(resolve);
+      });
       if (image.complete) ready();
       else {
         image.addEventListener('load', ready, { once: true });
@@ -3438,6 +3505,21 @@ async function captureProfile(client, snapshot, profile, screenshotFileName) {
     frameId: frameTree.frameTree.frame.id,
     html: snapshot.html,
   });
+  if (profile.name === 'iphone-duo') {
+    // The Duo frame supplies its own system bars; do not capture Android insets again.
+    await client.send('Runtime.evaluate', {
+      expression: `(() => {
+        const style = document.createElement('style');
+        style.dataset.duoCaptureInsets = '';
+        style.textContent = 'html, body, .safe-areas, .popup, .sheet-modal, .panel-left, .panel-right {'
+          + '--android-system-bar-top: 0px !important; --android-system-bar-bottom: 0px !important;'
+          + '--android-system-bar-left: 0px !important; --android-system-bar-right: 0px !important;'
+          + '--f7-safe-area-top: 0px !important; --f7-safe-area-bottom: 0px !important;'
+          + '--f7-safe-area-left: 0px !important; --f7-safe-area-right: 0px !important; }';
+        document.head.append(style);
+      })()`,
+    });
+  }
   const replayLayout = await waitForReplayLayout(client, snapshot);
 
   if (replayLayout.documentWidth > replayLayout.viewportWidth + 1) {

package/package.json

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