codeplay-common 4.4.0 → 4.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/files/generate-ai-promo-video.js +1650 -1525
  2. package/files/take-screen-image.js +80 -4
  3. package/files/take-screen-video.js +644 -642
  4. package/package.json +1 -1
package/files/take-screen-image.js CHANGED
@@ -611,6 +611,11 @@ async function capturePageSnapshot(client) {
611
611
  clone.setAttribute('data-responsive-scroll-left', String(original.scrollLeft));
612
612
  }
613
613
 
614
+ if (original.classList.contains('swiper-initialized')) {
615
+ clone.setAttribute('data-responsive-swiper-width', String(original.clientWidth));
616
+ clone.setAttribute('data-responsive-swiper-height', String(original.clientHeight));
617
+ }
618
+
614
619
  if (original instanceof HTMLInputElement) {
615
620
  clone.setAttribute('value', original.value);
616
621
  clone.toggleAttribute('checked', original.checked);
@@ -698,7 +703,6 @@ async function capturePageSnapshot(client) {
698
703
 
699
704
  return {
700
705
  html: '<!doctype html>' + clonedRoot.outerHTML,
701
- scrollX,
702
706
  scrollY,
703
707
  };
704
708
  })()`,
@@ -853,7 +857,7 @@ async function closeReplayBrowser(browser) {
853
857
  }
854
858
 
855
859
  async function waitForReplayLayout(client, snapshot) {
856
- await client.send('Runtime.evaluate', {
860
+ const evaluation = await client.send('Runtime.evaluate', {
857
861
  expression: `(async () => {
858
862
  const assetWait = Promise.all([...document.images].map((image) => {
859
863
  if (image.complete) return Promise.resolve();
@@ -868,17 +872,82 @@ async function waitForReplayLayout(client, snapshot) {
868
872
  new Promise((resolve) => setTimeout(resolve, 5000)),
869
873
  ]);
870
874
 
875
+ document.querySelectorAll('[data-responsive-swiper-width]').forEach((swiper) => {
876
+ const wrapper = [...swiper.children].find((element) => (
877
+ element.classList.contains('swiper-wrapper')
878
+ ));
879
+
880
+ if (!wrapper) return;
881
+
882
+ const slides = [...wrapper.children].filter((element) => (
883
+ element.classList.contains('swiper-slide')
884
+ ));
885
+ const sourceWidth = Number(swiper.dataset.responsiveSwiperWidth);
886
+ const sourceHeight = Number(swiper.dataset.responsiveSwiperHeight);
887
+ const widthScale = sourceWidth > 0 ? swiper.clientWidth / sourceWidth : 1;
888
+ const heightScale = sourceHeight > 0 ? swiper.clientHeight / sourceHeight : 1;
889
+ const isVertical = swiper.classList.contains('swiper-vertical');
890
+
891
+ slides.forEach((slide) => {
892
+ if (!slide.dataset.responsiveSwiperWidth && slide.style.width) {
893
+ slide.dataset.responsiveSwiperWidth = String(parseFloat(slide.style.width));
894
+ }
895
+
896
+ if (!slide.dataset.responsiveSwiperHeight && slide.style.height) {
897
+ slide.dataset.responsiveSwiperHeight = String(parseFloat(slide.style.height));
898
+ }
899
+
900
+ const slideWidth = Number(slide.dataset.responsiveSwiperWidth);
901
+ const slideHeight = Number(slide.dataset.responsiveSwiperHeight);
902
+
903
+ if (Number.isFinite(slideWidth) && slideWidth > 0) {
904
+ slide.style.width = (slideWidth * widthScale) + 'px';
905
+ }
906
+
907
+ if (isVertical && Number.isFinite(slideHeight) && slideHeight > 0) {
908
+ slide.style.height = (slideHeight * heightScale) + 'px';
909
+ }
910
+ });
911
+
912
+ const activeSlide = slides.find((slide) => (
913
+ slide.classList.contains('swiper-slide-active')
914
+ )) || slides[0];
915
+
916
+ if (!activeSlide) return;
917
+
918
+ const offset = isVertical ? activeSlide.offsetTop : activeSlide.offsetLeft;
919
+ const direction = getComputedStyle(swiper).direction;
920
+ const horizontalOffset = direction === 'rtl' ? offset : -offset;
921
+ const verticalOffset = isVertical ? -offset : 0;
922
+
923
+ wrapper.style.transitionDuration = '0ms';
924
+ wrapper.style.transform = 'translate3d('
925
+ + (isVertical ? 0 : horizontalOffset) + 'px, '
926
+ + verticalOffset + 'px, 0px)';
927
+
928
+ if (swiper.classList.contains('swiper-autoheight')) {
929
+ wrapper.style.height = activeSlide.scrollHeight + 'px';
930
+ }
931
+ });
932
+
871
933
  document.querySelectorAll('[data-responsive-scroll-top]').forEach((element) => {
872
934
  element.scrollTop = Number(element.dataset.responsiveScrollTop);
873
935
  element.scrollLeft = Number(element.dataset.responsiveScrollLeft);
874
936
  });
875
- scrollTo(${Number(snapshot.scrollX) || 0}, ${Number(snapshot.scrollY) || 0});
937
+ scrollTo(0, ${Number(snapshot.scrollY) || 0});
876
938
 
877
939
  await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
940
+
941
+ return {
942
+ documentWidth: Math.max(document.documentElement.scrollWidth, document.body.scrollWidth),
943
+ viewportWidth: innerWidth,
944
+ };
878
945
  })()`,
879
946
  awaitPromise: true,
880
947
  returnByValue: true,
881
948
  });
949
+
950
+ return evaluation.result.value;
882
951
  }
883
952
 
884
953
  function getFrameAdornment(frameType) {
@@ -1750,7 +1819,14 @@ async function captureProfile(client, snapshot, profile, screenshotFileName) {
1750
1819
  frameId: frameTree.frameTree.frame.id,
1751
1820
  html: snapshot.html,
1752
1821
  });
1753
- await waitForReplayLayout(client, snapshot);
1822
+ const replayLayout = await waitForReplayLayout(client, snapshot);
1823
+
1824
+ if (replayLayout.documentWidth > replayLayout.viewportWidth + 1) {
1825
+ console.warn(
1826
+ `Warning: ${profile.label} replay is ${replayLayout.documentWidth}px wide `
1827
+ + `inside a ${replayLayout.viewportWidth}px viewport.`,
1828
+ );
1829
+ }
1754
1830
 
1755
1831
  const screenshot = await client.send('Page.captureScreenshot', {
1756
1832
  format: 'png',