codeplay-common 4.7.4 → 4.7.6

package/files/take-screen-image.js

@@ -1211,12 +1211,33 @@ async function capturePageSnapshot(client) {
       };
 
       const serializeDocument = async (sourceDocument) => {
-        const clonedRoot = sourceDocument.documentElement.cloneNode(true);
-        const originalElements = [
-          sourceDocument.documentElement,
-          ...sourceDocument.documentElement.querySelectorAll('*'),
-        ];
-        const clonedElements = [clonedRoot, ...clonedRoot.querySelectorAll('*')];
+        const originalElements = [];
+        const clonedElements = [];
+        const cloneWithShadowRoots = (original) => {
+          const clone = original.cloneNode(false);
+          if (original.nodeType === Node.ELEMENT_NODE) {
+            originalElements.push(original);
+            clonedElements.push(clone);
+          }
+          for (const child of original.childNodes) {
+            clone.appendChild(cloneWithShadowRoots(child));
+          }
+          if (original.shadowRoot) {
+            const template = sourceDocument.createElement('template');
+            template.setAttribute('shadowrootmode', 'open');
+            for (const stylesheet of original.shadowRoot.adoptedStyleSheets || []) {
+              const style = sourceDocument.createElement('style');
+              style.textContent = [...stylesheet.cssRules].map((rule) => rule.cssText).join('\\n');
+              template.content.appendChild(style);
+            }
+            for (const child of original.shadowRoot.childNodes) {
+              template.content.appendChild(cloneWithShadowRoots(child));
+            }
+            clone.prepend(template);
+          }
+          return clone;
+        };
+        const clonedRoot = cloneWithShadowRoots(sourceDocument.documentElement);
 
         clonedRoot.setAttribute(
           'data-responsive-window-scroll-y',
@@ -1234,9 +1255,13 @@ async function capturePageSnapshot(client) {
             clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
           }
 
-          if (original.classList.contains('swiper-initialized')) {
+          if (original.classList.contains('swiper-initialized') || original.swiper) {
             clone.setAttribute('data-responsive-swiper-width', String(original.clientWidth));
             clone.setAttribute('data-responsive-swiper-height', String(original.clientHeight));
+            if (original.swiper) {
+              clone.setAttribute('data-responsive-swiper-active-index', String(original.swiper.activeIndex));
+              clone.setAttribute('data-responsive-swiper-direction', original.swiper.params.direction);
+            }
           }
 
           const tagName = original.tagName?.toLowerCase();
@@ -1321,7 +1346,7 @@ async function capturePageSnapshot(client) {
           }
         }));
 
-        clonedRoot.querySelectorAll('script, link[rel="modulepreload"]').forEach(
+        clonedElements.filter((element) => element.matches('script, link[rel="modulepreload"]')).forEach(
           (element) => element.remove(),
         );
         clonedRoot.querySelectorAll('meta[http-equiv="Content-Security-Policy"]').forEach(
@@ -1560,25 +1585,34 @@ async function waitForReplayLayout(client, snapshot) {
         new Promise((resolve) => setTimeout(resolve, 5000)),
       ]);
 
-      const replayElements = (selector) => replayDocuments.flatMap((replayDocument) => (
-        [...replayDocument.querySelectorAll(selector)]
+      const replayRoots = [];
+      const collectRoots = (root) => {
+        replayRoots.push(root);
+        root.querySelectorAll('*').forEach((element) => {
+          if (element.shadowRoot) collectRoots(element.shadowRoot);
+        });
+      };
+      replayDocuments.forEach(collectRoots);
+      const replayElements = (selector) => replayRoots.flatMap((root) => (
+        [...root.querySelectorAll(selector)]
       ));
 
       replayElements('[data-responsive-swiper-width]').forEach((swiper) => {
-        const wrapper = [...swiper.children].find((element) => (
+        const wrapper = swiper.shadowRoot?.querySelector('.swiper-wrapper') || [...swiper.children].find((element) => (
           element.classList.contains('swiper-wrapper')
         ));
 
         if (!wrapper) return;
 
-        const slides = [...wrapper.children].filter((element) => (
-          element.classList.contains('swiper-slide')
+        const slides = [...(swiper.shadowRoot ? swiper.children : wrapper.children)].filter((element) => (
+          element.matches('.swiper-slide, swiper-slide')
         ));
         const sourceWidth = Number(swiper.dataset.responsiveSwiperWidth);
         const sourceHeight = Number(swiper.dataset.responsiveSwiperHeight);
         const widthScale = sourceWidth > 0 ? swiper.clientWidth / sourceWidth : 1;
         const heightScale = sourceHeight > 0 ? swiper.clientHeight / sourceHeight : 1;
-        const isVertical = swiper.classList.contains('swiper-vertical');
+        const isVertical = swiper.dataset.responsiveSwiperDirection === 'vertical'
+          || swiper.classList.contains('swiper-vertical');
 
         slides.forEach((slide) => {
           if (!slide.dataset.responsiveSwiperWidth && slide.style.width) {
@@ -1601,7 +1635,7 @@ async function waitForReplayLayout(client, snapshot) {
           }
         });
 
-        const activeSlide = slides.find((slide) => (
+        const activeSlide = slides[Number(swiper.dataset.responsiveSwiperActiveIndex)] || slides.find((slide) => (
           slide.classList.contains('swiper-slide-active')
         )) || slides[0];
 
@@ -1773,19 +1807,26 @@ function rgbToHsl(red, green, blue) {
 async function getPromotionalPalette(screenshotBuffer, screenshotFileName) {
   const { data, info } = await sharp(screenshotBuffer)
     .resize(36, 36, { fit: 'fill' })
+    .toColourspace('srgb')
     .removeAlpha()
     .raw()
     .toBuffer({ resolveWithObject: true });
   const colorBuckets = new Map();
+  const neutralBuckets = new Map();
 
   for (let index = 0; index < data.length; index += info.channels) {
     const red = data[index];
     const green = data[index + 1];
     const blue = data[index + 2];
     const hsl = rgbToHsl(red, green, blue);
-    if (hsl.lightness < 0.1 || hsl.lightness > 0.94 || hsl.saturation < 0.12) continue;
-    const key = `${Math.round(red / 24)},${Math.round(green / 24)},${Math.round(blue / 24)}`;
-    const bucket = colorBuckets.get(key) || {
+    const isColorful = hsl.lightness >= 0.1 && hsl.lightness <= 0.94
+      && hsl.saturation >= 0.12 && Math.max(red, green, blue) - Math.min(red, green, blue) >= 12;
+    const buckets = isColorful ? colorBuckets : neutralBuckets;
+    // Combine shades of the same hue so large tinted surfaces and their controls count together.
+    const key = isColorful
+      ? Math.round(hsl.hue / 15) % 24
+      : `${Math.round(red / 24)},${Math.round(green / 24)},${Math.round(blue / 24)}`;
+    const bucket = buckets.get(key) || {
       count: 0, red: 0, green: 0, blue: 0, saturation: 0, lightness: 0,
     };
     bucket.count += 1;
@@ -1794,16 +1835,18 @@ async function getPromotionalPalette(screenshotBuffer, screenshotFileName) {
     bucket.blue += blue;
     bucket.saturation += hsl.saturation;
     bucket.lightness += hsl.lightness;
-    colorBuckets.set(key, bucket);
+    buckets.set(key, bucket);
   }
 
-  let selectedColor = { red: 85, green: 70, blue: 232 };
+  let selectedColor;
   let selectedScore = -1;
-  for (const bucket of colorBuckets.values()) {
+  for (const bucket of (colorBuckets.size ? colorBuckets : neutralBuckets).values()) {
     const saturation = bucket.saturation / bucket.count;
     const lightness = bucket.lightness / bucket.count;
-    const score = bucket.count * (0.55 + saturation * 1.8)
-      * (1 - Math.abs(lightness - 0.55) * 0.7);
+    const score = colorBuckets.size
+      ? bucket.count * (0.55 + saturation * 1.8)
+        * (1 - Math.abs(lightness - 0.55) * 0.7)
+      : bucket.count;
     if (score <= selectedScore) continue;
     selectedScore = score;
     selectedColor = {
@@ -1815,21 +1858,24 @@ async function getPromotionalPalette(screenshotBuffer, screenshotFileName) {
 
   const seed = getDecorationSeed(path.parse(screenshotFileName).name);
   const sourceHsl = rgbToHsl(selectedColor.red, selectedColor.green, selectedColor.blue);
-  const hue = Math.round((sourceHsl.hue + (seed % 25) - 12 + 360) % 360);
-  const secondaryHue = (hue + [38, 56, 142, 205][seed % 4]) % 360;
-  const saturation = Math.max(58, Math.min(82, Math.round(sourceHsl.saturation * 100)));
+  const hue = Math.round(sourceHsl.hue) % 360;
+  const secondaryHue = (hue + 18) % 360;
+  const saturation = colorBuckets.size
+    ? Math.min(75, Math.round(sourceHsl.saturation * 100))
+    : 0;
+  const backgroundSaturation = Math.round(saturation * 0.75);
 
   return {
     seed,
     accent: `hsl(${hue} ${saturation}% 46%)`,
     accentSoft: `hsla(${hue} ${saturation}% 55% / 0.2)`,
-    secondary: `hsl(${secondaryHue} 70% 54%)`,
-    secondarySoft: `hsla(${secondaryHue} 72% 58% / 0.18)`,
-    backgroundStart: `hsl(${hue} 68% 97%)`,
-    backgroundMiddle: `hsl(${(hue + 14) % 360} 58% 93%)`,
-    backgroundEnd: `hsl(${secondaryHue} 62% 88%)`,
-    text: `hsl(${hue} 35% 17%)`,
-    mutedText: `hsl(${hue} 18% 38%)`,
+    secondary: `hsl(${secondaryHue} ${saturation}% 54%)`,
+    secondarySoft: `hsla(${secondaryHue} ${saturation}% 58% / 0.18)`,
+    backgroundStart: `hsl(${hue} ${backgroundSaturation}% 97%)`,
+    backgroundMiddle: `hsl(${hue} ${backgroundSaturation}% 93%)`,
+    backgroundEnd: `hsl(${secondaryHue} ${backgroundSaturation}% 88%)`,
+    text: `hsl(${hue} ${Math.min(35, saturation)}% 17%)`,
+    mutedText: `hsl(${hue} ${Math.min(18, saturation)}% 38%)`,
   };
 }
 

package/package.json

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