diy-template-components 5.10.0 → 5.11.0

package/build/index.es.js

@@ -5,7 +5,6 @@ import moment from 'moment';
 import Countdown from 'react-countdown';
 import koreanLocale from 'moment/locale/ko';
 import ReactDOMServer from 'react-dom/server';
-import '@storybook/theming';
 import { createTheming, createUseStyles as createUseStyles$1, useTheme as useTheme$1 } from 'react-jss';
 
 function insertStyle(css) {
@@ -882,7 +881,7 @@ const someMethod1 = (/** @type {import('./types').IconData["svgChildrenConfigs"]
   }
   return obj;
 };
-const useStyles$1 = createUseStyles$1({
+const useStyles$2 = createUseStyles$1({
   '@keyframes slideRight': {
     to: {
       backgroundPosition: '1250% 0, 0 0'
@@ -960,7 +959,7 @@ const Icon = ({
   // this ref is used to cancel the fetch promise success callback in case name prop changed
   const currentName = useRef(name);
   const [svgState, setSvgState] = useState(defaultSvgState);
-  const styles = useStyles$1({
+  const styles = useStyles$2({
     width,
     height,
     color,
@@ -2549,7 +2548,87 @@ function FontSeeder({
   return null;
 }
 
-insertStyle("@charset \"UTF-8\";\n/* Wrapper: no height/min-height – height comes only from section content, not from HOC */\n.sectionBackgroundWrapper {\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n}\n\n/* Section root transparent so background (image/color/gradient/video) shows through */\n.sectionBackgroundWrapper > .sectionBackgroundContent > * {\n  background: transparent !important;\n}\n\n/* Video: absolute so it does not affect wrapper height; height follows section */\n.sectionBackgroundVideo {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  z-index: 0;\n  pointer-events: none;\n}\n\n/* YouTube embed: cover background, no UI interaction, minimal branding via URL params */\n.sectionBackgroundYoutube {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 100vw;\n  min-width: 100%;\n  min-height: 100%;\n  height: 56.25vw; /* 16:9 */\n  min-height: 100vh;\n  transform: translate(-50%, -50%);\n  border: none;\n  z-index: 0;\n  pointer-events: none;\n}\n\n@media (min-aspect-ratio: 16/9) {\n  .sectionBackgroundYoutube {\n    width: 177.78vh;\n    height: 100vh;\n    min-width: 100%;\n    min-height: 100%;\n  }\n}\n/* Blur overlay: frosted glass so content stays readable over video/image/gradient */\n.sectionBackgroundBlur {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  pointer-events: none;\n  /* backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px); */\n  /* background: rgba(255, 255, 255, 0.08); */\n}\n\n/* Content wrapper: above blur so component items are clear */\n.sectionBackgroundContent {\n  position: relative;\n  z-index: 2;\n}\n\n/* Background layer: fills wrapper only (absolute), does not affect wrapper height */\n.sectionBackgroundLayer {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 0;\n  pointer-events: none;\n}\n\n.sectionBackgroundLayer.sectionBackgroundImage {\n  background-size: cover;\n  background-position: center;\n  background-repeat: no-repeat;\n}");
+/**
+ * JSS styles for section background wrapper (replaces styles.css).
+ * Used with react-jss createUseStyles.
+ */
+const sectionBackgroundStyles = () => ({
+  /* Wrapper: no height/min-height – height comes only from section content */
+  sectionBackgroundWrapper: {
+    position: 'relative',
+    width: '100%',
+    overflow: 'hidden',
+    '& > $sectionBackgroundContent > *': {
+      background: 'transparent !important'
+    }
+  },
+  /* Section root transparent so background (image/color/gradient/video) shows through */
+  sectionBackgroundContent: {
+    position: 'relative',
+    zIndex: 2
+  },
+  /* Video: absolute so it does not affect wrapper height; height follows section */
+  sectionBackgroundVideo: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+    zIndex: 0,
+    pointerEvents: 'none'
+  },
+  /* YouTube embed: cover background, no UI interaction */
+  sectionBackgroundYoutube: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    width: '100vw',
+    minWidth: '100%',
+    minHeight: '100vh',
+    height: '56.25vw' /* 16:9 */,
+    transform: 'translate(-50%, -50%)',
+    border: 'none',
+    zIndex: 0,
+    pointerEvents: 'none',
+    '@media (min-aspect-ratio: 16/9)': {
+      width: '177.78vh',
+      height: '100vh',
+      minWidth: '100%',
+      minHeight: '100%'
+    }
+  },
+  /* Blur overlay: frosted glass so content stays readable */
+  sectionBackgroundBlur: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 1,
+    pointerEvents: 'none'
+  },
+  /* Background layer: fills wrapper only (absolute), does not affect wrapper height */
+  sectionBackgroundLayer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    zIndex: 0,
+    pointerEvents: 'none'
+  },
+  sectionBackgroundImage: {
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat'
+  },
+  sectionBackgroundGradient: {
+    /* inherits from sectionBackgroundLayer; gradient value comes from inline style */
+  }
+});
+
+const useStyles$1 = createUseStyles$1(sectionBackgroundStyles);
 
 /**
  * Extracts YouTube video ID from various YouTube URL formats.
@@ -2568,6 +2647,13 @@ function getYoutubeVideoId(url) {
   return null;
 }
 
+/**
+ * Returns YouTube thumbnail URL for a video ID (used when app is in iframe and YouTube iframe won't play).
+ */
+function getYoutubeThumbnailUrl(videoId) {
+  return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
+}
+
 /**
  * Builds YouTube embed URL with params for background video:
  * autoplay, mute, loop (via playlist), no controls, minimal branding, no end-screen suggestions.
@@ -2611,10 +2697,13 @@ function withSectionBackground(WrappedSectionRenderer) {
       sectionIndex,
       ...restProps
     } = props;
+    const {
+      isMobile
+    } = useContext(PageContext);
+    const classes = useStyles$1();
 
     // Use props first, then fall back to sectionData so it works for all sections
     const componentBg = componentBgProp ?? {};
-    console.log('amit1111', componentBg, isSkipV2Section, sectionData);
 
     // version !== 2: skip background — render section only, no wrapper
 
@@ -2668,7 +2757,7 @@ function withSectionBackground(WrappedSectionRenderer) {
           return {};
       }
     };
-    const layerClassName = type === 'image' ? 'sectionBackgroundLayer sectionBackgroundImage' : type === 'gradient' ? 'sectionBackgroundLayer sectionBackgroundGradient' : 'sectionBackgroundLayer';
+    const layerClassName = type === 'image' ? `${classes.sectionBackgroundLayer} ${classes.sectionBackgroundImage}` : type === 'gradient' ? `${classes.sectionBackgroundLayer} ${classes.sectionBackgroundGradient}` : classes.sectionBackgroundLayer;
 
     // Video background: YouTube embed (when isYoutube/isYoutubeVideo) or normal <video> from url
     if (type === 'video') {
@@ -2677,9 +2766,9 @@ function withSectionBackground(WrappedSectionRenderer) {
         if (!videoId) {
           // Fallback to normal video if we can't parse YouTube ID
           return /*#__PURE__*/React.createElement("div", {
-            className: "sectionBackgroundWrapper"
+            className: classes.sectionBackgroundWrapper
           }, /*#__PURE__*/React.createElement("video", {
-            className: "sectionBackgroundVideo",
+            className: classes.sectionBackgroundVideo,
             src: value,
             autoPlay: true,
             muted: true,
@@ -2687,10 +2776,33 @@ function withSectionBackground(WrappedSectionRenderer) {
             playsInline: true,
             "aria-hidden": "true"
           }), /*#__PURE__*/React.createElement("div", {
-            className: "sectionBackgroundBlur",
+            className: classes.sectionBackgroundBlur,
+            "aria-hidden": "true"
+          }), /*#__PURE__*/React.createElement("div", {
+            className: classes.sectionBackgroundContent
+          }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
+            sectionData: sectionData,
+            extraProps: extraProps,
+            sectionIndex: sectionIndex
+          }, restProps))));
+        }
+        // When isMobile is true, app is rendered inside an iframe; YouTube iframe often fails in nested iframes.
+        // Use static YouTube thumbnail as background instead of the YouTube player.
+        if (isMobile) {
+          const thumbUrl = getYoutubeThumbnailUrl(videoId);
+          return /*#__PURE__*/React.createElement("div", {
+            className: classes.sectionBackgroundWrapper
+          }, /*#__PURE__*/React.createElement("div", {
+            className: `${classes.sectionBackgroundLayer} ${classes.sectionBackgroundImage}`,
+            style: {
+              backgroundImage: `url(${thumbUrl})`
+            },
+            "aria-hidden": "true"
+          }), /*#__PURE__*/React.createElement("div", {
+            className: classes.sectionBackgroundBlur,
             "aria-hidden": "true"
           }), /*#__PURE__*/React.createElement("div", {
-            className: "sectionBackgroundContent"
+            className: classes.sectionBackgroundContent
           }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
             sectionData: sectionData,
             extraProps: extraProps,
@@ -2699,19 +2811,20 @@ function withSectionBackground(WrappedSectionRenderer) {
         }
         const embedUrl = getYoutubeEmbedUrl(videoId);
         return /*#__PURE__*/React.createElement("div", {
-          className: "sectionBackgroundWrapper"
+          className: classes.sectionBackgroundWrapper
         }, /*#__PURE__*/React.createElement("iframe", {
-          className: "sectionBackgroundYoutube",
+          className: classes.sectionBackgroundYoutube,
           src: embedUrl,
           title: "Background video",
-          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope",
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
           allowFullScreen: true,
+          referrerPolicy: "strict-origin-when-cross-origin",
           "aria-hidden": "true"
         }), /*#__PURE__*/React.createElement("div", {
-          className: "sectionBackgroundBlur",
+          className: classes.sectionBackgroundBlur,
           "aria-hidden": "true"
         }), /*#__PURE__*/React.createElement("div", {
-          className: "sectionBackgroundContent"
+          className: classes.sectionBackgroundContent
         }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
           sectionData: sectionData,
           extraProps: extraProps,
@@ -2720,9 +2833,9 @@ function withSectionBackground(WrappedSectionRenderer) {
       }
       // Normal video from URL
       return /*#__PURE__*/React.createElement("div", {
-        className: "sectionBackgroundWrapper"
+        className: classes.sectionBackgroundWrapper
       }, /*#__PURE__*/React.createElement("video", {
-        className: "sectionBackgroundVideo",
+        className: classes.sectionBackgroundVideo,
         src: value,
         autoPlay: true,
         muted: true,
@@ -2730,10 +2843,10 @@ function withSectionBackground(WrappedSectionRenderer) {
         playsInline: true,
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement("div", {
-        className: "sectionBackgroundBlur",
+        className: classes.sectionBackgroundBlur,
         "aria-hidden": "true"
       }), /*#__PURE__*/React.createElement("div", {
-        className: "sectionBackgroundContent"
+        className: classes.sectionBackgroundContent
       }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
         sectionData: sectionData,
         extraProps: extraProps,
@@ -2743,16 +2856,17 @@ function withSectionBackground(WrappedSectionRenderer) {
 
     // color | image | gradient: background layer behind content so section can be transparent
     return /*#__PURE__*/React.createElement("div", {
-      className: "sectionBackgroundWrapper"
+      className: classes.sectionBackgroundWrapper,
+      style: isMobile ? getLayerStyle() : {}
     }, /*#__PURE__*/React.createElement("div", {
       className: layerClassName,
       style: getLayerStyle(),
       "aria-hidden": "true"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "sectionBackgroundBlur",
+      className: classes.sectionBackgroundBlur,
       "aria-hidden": "true"
     }), /*#__PURE__*/React.createElement("div", {
-      className: "sectionBackgroundContent"
+      className: classes.sectionBackgroundContent
     }, /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
       sectionData: sectionData,
       extraProps: extraProps,
@@ -5518,8 +5632,9 @@ function VideoPlayer(props) {
     className: classes.iframe + ' ' + classes.hideImg,
     src: imageUrl ? getId(videoUrl) + '?autoplay=1' : getId(videoUrl),
     frameBorder: "0",
-    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+    allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
     allowFullScreen: true,
+    referrerPolicy: "strict-origin-when-cross-origin",
     onLoad: () => {
       setIsLoaded(true);
     }
@@ -12137,7 +12252,8 @@ const getFloatingButtonResponsive = theme => {
       left: 16,
       padding: '10px 16px',
       gap: '8px',
-      fontSize: '12px'
+      fontSize: '12px',
+      background: theme?.colors?.ctaColor || '#FFFFFF'
     },
     tablet: {
       ...base,
@@ -12145,7 +12261,8 @@ const getFloatingButtonResponsive = theme => {
       left: 20,
       padding: '12px 18px',
       gap: '10px',
-      fontSize: '13px'
+      fontSize: '13px',
+      background: theme?.colors?.ctaColor || '#FFFFFF'
     },
     desktop: {
       ...base,
@@ -12153,7 +12270,8 @@ const getFloatingButtonResponsive = theme => {
       left: 24,
       padding: '12px 20px',
       gap: '10px',
-      fontSize: '14px'
+      fontSize: '14px',
+      background: theme?.colors?.ctaColor || '#FFFFFF'
     }
   };
 };