diy-template-components 5.16.0 → 5.18.0

package/build/index.js

@@ -691,7 +691,7 @@ var phoneIcon = "data:image/svg+xml,%3Csvg%20width%3D%2218%22%20height%3D%2218%2
 
 var facebook2 = "data:image/svg+xml,%3Csvg%20width%3D%229%22%20height%3D%2214%22%20viewBox%3D%220%200%209%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.45882%204.66715H0.125488V7.00049H2.45882V14.0005H5.95882V7.00049H8.08216L8.29216%204.66715H5.95882V3.69532C5.95882%203.13765%206.07082%202.91715%206.60982%202.91715H8.29216V0.000488281H5.48749C3.38982%200.000488281%202.45882%200.924488%202.45882%202.69315V4.66715Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E";
 
-var twitter = "data:image/svg+xml,%3Csvg%20width%3D%2215%22%20height%3D%2213%22%20viewBox%3D%220%200%2015%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M14.5005%202.0975C13.986%202.32617%2013.4318%202.48017%2012.8508%202.55017C13.4447%202.19433%2013.8985%201.632%2014.1143%200.961167C13.559%201.29017%2012.9442%201.52933%2012.2897%201.65767C11.767%201.09883%2011.0192%200.75%2010.1943%200.75C8.33932%200.75%206.97665%202.48017%207.39549%204.27683C5.00965%204.15667%202.89215%203.01333%201.47582%201.27617C0.723322%202.5665%201.08615%204.25583%202.36482%205.111C1.89465%205.09583%201.45249%204.96633%201.06515%204.75167C1.03365%206.08167%201.98799%207.3265%203.36932%207.60417C2.96565%207.71383%202.52232%207.7395%202.07199%207.65317C2.43715%208.79417%203.49999%209.62367%204.75532%209.647C3.54549%2010.5943%202.02532%2011.0178%200.500488%2010.8382C1.77215%2011.6537%203.28065%2012.1285%204.90232%2012.1285C10.2363%2012.1285%2013.2487%207.624%2013.0667%203.58383C13.629%203.18017%2014.1155%202.67383%2014.5005%202.0975Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E";
+var twitter = "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22%23ffffff%22%3E%20%20%3Cpath%20d%3D%22M18.901%201.153h3.68l-8.04%209.19%209.46%2012.504h-7.406l-5.8-7.584-6.64%207.584H.475l8.6-9.83L0%201.153h7.594l5.243%206.932L18.9%201.153zm-1.29%2019.39h2.04L6.482%203.358H4.29l13.32%2017.185z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E";
 
 var menu = "data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3%2018H21V16H3V18ZM3%2013H21V11H3V13ZM3%206V8H21V6H3Z%22%20fill%3D%22%231676F3%22%2F%3E%3C%2Fsvg%3E";
 
@@ -3226,22 +3226,30 @@ const sectionBackgroundStyles = () => ({
     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',
+    /* Desktop/wide: fill by width, video may extend above/below (centered) */
+    width: '100vw',
+    minWidth: '100%',
+    height: '56.25vw' /* 16:9 */,
+    minHeight: '100%',
     '@media (min-aspect-ratio: 16/9)': {
       width: '177.78vh',
       height: '100vh',
       minWidth: '100%',
       minHeight: '100%'
+    },
+    /* Mobile/tall viewport: fill by height so no black bars top/bottom; crop sides */
+    '@media (max-aspect-ratio: 16/9)': {
+      width: '177.78vh',
+      minWidth: '100%',
+      height: '100vh',
+      minHeight: '100%'
     }
   },
-  /* Blur overlay: frosted glass so content stays readable */
+  /* Blur overlay: frosted glass so content stays readable; stronger blur on mobile */
   sectionBackgroundBlur: {
     position: 'absolute',
     top: 0,
@@ -3249,7 +3257,12 @@ const sectionBackgroundStyles = () => ({
     width: '100%',
     height: '100%',
     zIndex: 1,
-    pointerEvents: 'none'
+    pointerEvents: 'none',
+    '@media (max-width: 768px)': {
+      backdropFilter: 'blur(8px)',
+      WebkitBackdropFilter: 'blur(8px)',
+      backgroundColor: 'rgba(0, 0, 0, 0.15)'
+    }
   },
   /* Background layer: fills wrapper only (absolute), does not affect wrapper height */
   sectionBackgroundLayer: {
@@ -3341,7 +3354,8 @@ function withSectionBackground(WrappedSectionRenderer) {
       ...restProps
     } = props;
     const {
-      isMobile
+      isMobile,
+      isThumbnailEnable
     } = React.useContext(PageContext);
     const classes = useStyles$1();
 
@@ -3374,7 +3388,6 @@ function withSectionBackground(WrappedSectionRenderer) {
     } = componentBg;
     const value = metadata?.value;
     const isYoutubeBg = Boolean(isYoutube ?? isYoutubeVideo);
-    console.log('amit22222', type, value);
     if (!value) {
       return /*#__PURE__*/React__default["default"].createElement(WrappedSectionRenderer, _extends({
         sectionData: sectionData,
@@ -3429,9 +3442,8 @@ function withSectionBackground(WrappedSectionRenderer) {
             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) {
+        // When isThumbnailEnable and isMobile, show YouTube thumbnail only (no video) for type "video".
+        if (isThumbnailEnable && isMobile) {
           const thumbUrl = getYoutubeThumbnailUrl(videoId);
           return /*#__PURE__*/React__default["default"].createElement("div", {
             className: classes.sectionBackgroundWrapper
@@ -3452,6 +3464,7 @@ function withSectionBackground(WrappedSectionRenderer) {
             sectionIndex: sectionIndex
           }, restProps))));
         }
+        // Use YouTube iframe for desktop, or mobile when isThumbnailEnable is not true.
         const embedUrl = getYoutubeEmbedUrl(videoId);
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: classes.sectionBackgroundWrapper
@@ -3809,6 +3822,7 @@ function PageRenderer$1({
     isLandingPage = false
   },
   isMobile = false,
+  isThumbnailEnable = false,
   isLandingPages = false,
   baseURLs = {},
   hashToken,
@@ -3829,6 +3843,7 @@ function PageRenderer$1({
   const navList = header?.navs;
   const context = React.useMemo(() => ({
     isMobile,
+    isThumbnailEnable,
     isLandingPages,
     layout,
     baseURLs,
@@ -3847,7 +3862,7 @@ function PageRenderer$1({
     _id,
     countryCode,
     currencySymbol
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
+  }), [isMobile, isThumbnailEnable, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
   const theme = React.useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {
@@ -13942,6 +13957,7 @@ function PageRenderer({
     isCustomWebsite = false
   },
   isMobile = false,
+  isThumbnailEnable = false,
   isLandingPages = false,
   baseURLs = {},
   hashToken,
@@ -13961,6 +13977,7 @@ function PageRenderer({
   const navList = header?.navs;
   const context = React.useMemo(() => ({
     isMobile,
+    isThumbnailEnable,
     isLandingPages,
     layout,
     baseURLs,
@@ -13979,7 +13996,7 @@ function PageRenderer({
     _id,
     countryCode,
     currencySymbol
-  }), [isMobile, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
+  }), [isMobile, isThumbnailEnable, isLandingPages, layout, baseURLs, hashToken, isPreview, isEdit, templateId, navList, isMasterTemplate, basePath, validations, isTutorWebsite, extraProps, hideLogin, _id, countryCode, currencySymbol]);
   const theme = React.useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || React.Fragment;
   return /*#__PURE__*/React__default["default"].createElement(ThemeProvider, {