diy-template-components 5.15.0 → 5.17.0

package/build/index.es.js

@@ -349,7 +349,7 @@ const useSectionStyles$b = createUseStyles(theme => ({
       bottom: 0,
       left: 0,
       width: '100%',
-      zIndex: '10000'
+      zIndex: '100'
     }
   },
   mobileAppNameClass: {
@@ -3212,22 +3212,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,
@@ -3235,7 +3243,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: {
@@ -3327,7 +3340,8 @@ function withSectionBackground(WrappedSectionRenderer) {
       ...restProps
     } = props;
     const {
-      isMobile
+      isMobile,
+      isThumbnailEnable
     } = useContext(PageContext);
     const classes = useStyles$1();
 
@@ -3360,7 +3374,6 @@ function withSectionBackground(WrappedSectionRenderer) {
     } = componentBg;
     const value = metadata?.value;
     const isYoutubeBg = Boolean(isYoutube ?? isYoutubeVideo);
-    console.log('amit22222', type, value);
     if (!value) {
       return /*#__PURE__*/React.createElement(WrappedSectionRenderer, _extends({
         sectionData: sectionData,
@@ -3415,9 +3428,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.createElement("div", {
             className: classes.sectionBackgroundWrapper
@@ -3438,6 +3450,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.createElement("div", {
           className: classes.sectionBackgroundWrapper
@@ -3795,6 +3808,7 @@ function PageRenderer$1({
     isLandingPage = false
   },
   isMobile = false,
+  isThumbnailEnable = false,
   isLandingPages = false,
   baseURLs = {},
   hashToken,
@@ -3815,6 +3829,7 @@ function PageRenderer$1({
   const navList = header?.navs;
   const context = useMemo(() => ({
     isMobile,
+    isThumbnailEnable,
     isLandingPages,
     layout,
     baseURLs,
@@ -3833,7 +3848,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 = useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -10914,7 +10929,7 @@ const SingleVideoSlide$1 = props => {
     currencySymbol
   } = props;
   const showCourseInstallmentData = data?.courseOverviewData;
-  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments?.[0]?.installmentPrice;
+  const InstalmentData = isEdit ? data?.courseOverviewData?.installments?.formData?.installments[0].installmentAmount : data?.courseOverviewData?.installments?.formData?.installmentInfo?.installments[0].installmentPrice;
   const checkIfOfferIsValid = () => moment().diff(moment(props?.data?.endDate || 0)) < 0;
   const checkForShowDiscount = () => {
     if (props.data.endDate === null || checkIfOfferIsValid()) {
@@ -13928,6 +13943,7 @@ function PageRenderer({
     isCustomWebsite = false
   },
   isMobile = false,
+  isThumbnailEnable = false,
   isLandingPages = false,
   baseURLs = {},
   hashToken,
@@ -13947,6 +13963,7 @@ function PageRenderer({
   const navList = header?.navs;
   const context = useMemo(() => ({
     isMobile,
+    isThumbnailEnable,
     isLandingPages,
     layout,
     baseURLs,
@@ -13965,7 +13982,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 = useMemo(() => generateTheme(color, font, context.isMobile, roundness), [color, font, context.isMobile, roundness]);
   const Wrapper = SectionWrapper || Fragment;
   return /*#__PURE__*/React.createElement(ThemeProvider, {