@liquidcommercedev/rmn-sdk 1.5.0-beta.42 → 1.5.0-beta.44

package/dist/index.cjs

@@ -18413,11 +18413,11 @@ class RbHomepageHeroThreeTileSE extends BaseSpotComponent {
       }
 
       @container (max-width: 767px) {
-        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.LEFT} .${prefix}__main {
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
           flex-direction: row;
         }
 
-        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.RIGHT} .${prefix}__main {
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.LEFT} .${prefix}__main {
           flex-direction: row-reverse;
         }
       }
@@ -19787,6 +19787,7 @@ class RbSmallDiscoverToutSE extends BaseSpotComponent {
 class RbVideoPlayerSE extends BaseSpotComponent {
     constructor() {
         super();
+        this.reRenderOnDeviceChange = true;
         this.videoSelector = () => `.${this._config.prefix}__video-element`;
         this.muteButtonSelector = () => `.${this._config.prefix}__mute-button`;
         this.video = null;
@@ -19852,54 +19853,98 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         const muteButton = this._container.querySelector(this.muteButtonSelector());
         muteButton === null || muteButton === undefined ? undefined : muteButton.removeEventListener('click', this.handleMuteToggle);
     }
+    getGradientDirection(position) {
+        switch (position) {
+            case exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT:
+            case exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT:
+                return 'to bottom';
+            case exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT:
+                return 'to right';
+            case exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT:
+                return 'to left';
+            case exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT:
+            case exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT:
+                return 'to top';
+            default:
+                return 'to top';
+        }
+    }
+    get hasContent() {
+        const { header, mobileHeader, description, mobileDescription, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        const content = this._isMobileDevice && enableMobileTexts
+            ? {
+                header: mobileHeader,
+                description: mobileDescription,
+            }
+            : { header, description };
+        return Object.values(content).some(Boolean);
+    }
     template() {
         const prefix = this._config.prefix;
-        const { url, posterTitle, posterDescription } = this._data.video;
+        const { header, mobileHeader, description, mobileDescription, textBlockPosition = exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, mobileTextBlockPosition = textBlockPosition, 
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        enableMobileTexts = false, } = this._data;
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        const { url, mobileUrl = url, mute = true, showMute = true } = this._data.video;
         if (!url) {
             return '<p>Please provide a video source</p>';
         }
         const renderOverlay = () => {
-            if (!posterTitle && !posterDescription)
+            if (!this.hasContent)
                 return '';
+            const content = this._isMobileDevice && enableMobileTexts
+                ? {
+                    header: mobileHeader,
+                    description: mobileDescription,
+                }
+                : { header, description };
+            const elements = [
+                renderElement('h2', `${prefix}__header`, content.header),
+                renderElement('p', `${prefix}__description`, content.description),
+            ];
             return `
-        <div class="${prefix}__overlay">
-          <div class="${prefix}__overlay-text">
-            ${posterTitle ? `<h2 class="${prefix}__title">${posterTitle}</h2>` : ''}
-            ${posterDescription ? `<p class="${prefix}__description">${posterDescription}</p>` : ''}
-          </div>
+        <div class="${prefix}__text ${prefix}__text-block--${textBlockPosition} ${prefix}__text-block-mobile--${mobileTextBlockPosition}">
+          ${elements.join('')}
         </div>
       `;
         };
         const renderVideo = () => `
-      <div class="${prefix}__video-container">
-        <video
-          class="${prefix}__video-element"
-          src="${url}"
-          autoplay
-          muted
-          loop
-          preload="metadata"
-        >
-          Your browser doesn't support HTML5 video playback.
-        </video>
-      </div>
-    `;
-        const renderMuteButton = () => `
-      <button type="button" class="${prefix}__mute-button">
-        <span class="${prefix}__mute-icon">
-          ${this.getMuteIcon()}
-        </span>
-      </button>
-    `;
-        const renderControls = () => `
-      <div class="${prefix}__controls">
-        ${renderMuteButton()}
+      <div class="${prefix}__video-wrapper">
+        <div class="${prefix}__video-container">
+          <video
+            class="${prefix}__video-element"
+            src="${this._isMobileDevice ? mobileUrl : url}"
+            autoplay
+            ${mute ? 'muted' : ''}
+            loop
+            preload="metadata"
+            playsinline
+          >
+            Your browser doesn't support HTML5 video playback.
+          </video>
+        </div>
       </div>
     `;
+        const renderMuteButton = () => showMute
+            ? `
+            <button type="button" class="${prefix}__mute-button">
+              <span class="${prefix}__mute-icon">
+                ${this.getMuteIcon()}
+              </span>
+            </button>
+          `
+            : '';
+        const renderControls = () => showMute
+            ? `
+            <div class="${prefix}__controls">
+              ${renderMuteButton()}
+            </div>
+          `
+            : '';
         return `
-      ${GFONT_PRECONNECT}
-      ${GFONT_SOURCE_SANS_3}
-      ${GFONT_CORMORANT}
+      ${importFonts()}
       <div class="${prefix}">
         ${renderOverlay()}
         ${renderVideo()}
@@ -19909,67 +19954,217 @@ class RbVideoPlayerSE extends BaseSpotComponent {
     }
     styles() {
         const prefix = this._config.prefix;
+        const { width, height, textBlockPosition = exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT, mobileTextBlockPosition = textBlockPosition, textColor = '#ffffff', } = this._data;
+        const { aspectRatio = '16:9' } = this._data.video;
+        const desktopGradientDirection = this.getGradientDirection(textBlockPosition);
+        const mobileGradientDirection = this.getGradientDirection(mobileTextBlockPosition);
+        const linearGradient = generateGradientColor(this._config.overlay, 'rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%');
+        const hostSelector = this._config.useShadowDom ? ':host' : this.tagName.toLowerCase();
         return `
+      ${hostSelector} {
+        width: 100%;
+        height: 100%;
+        max-width: ${width}px;
+        max-height: ${height}px};
+      }
+
       .${prefix} {
         width: 100%;
         height: 100%;
-        background: #000;
+        background: #fff;
         overflow: hidden;
         position: relative;
       }
 
-      .${prefix}__overlay {
+      .${prefix}::before {
+        content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
-        z-index: 2;
+        bottom: 0;
+        z-index: 1;
+        pointer-events: none;
+      }
+
+      .${prefix}__video-wrapper {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .${prefix}__video-container {
+        position: relative;
         width: 100%;
         height: 100%;
         display: flex;
-        flex-direction: column;
-        justify-content: flex-end;
-        background-image: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 40%);
+        justify-content: center;
+        align-items: center;
+        aspect-ratio: ${aspectRatio.replace(':', '/')};
       }
 
-      .${prefix}__overlay-text {
-        padding: 3rem;
+      .${prefix}__video-element {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+
+      @media (max-aspect-ratio: 16/9) {
+        .${prefix}__video-element {
+          width: 100%;
+          height: auto;
+        }
+      }
+
+      @media (min-aspect-ratio: 16/9) {
+        .${prefix}__video-element {
+          width: auto;
+          height: 100%;
+        }
+      }
+
+      .${prefix}__text {
         display: flex;
         flex-direction: column;
+        justify-content: flex-start;
+        align-items: flex-start;
+        width: 100%;
+        height: fit-content;
         gap: 8px;
+        position: absolute;
+        color: ${textColor};
+        z-index: 10;
       }
 
-      .${prefix}__title {
-        color: #fff;
-        font-size: 26px;
-        margin: 0;
-        font-family: "Cormorant", system-ui;
-        font-style: normal;
-        font-weight: 300;
-        line-height: normal;
+      @container (max-width: 639px) {
+        .${prefix}::before {
+            ${this.hasContent
+            ? `background: linear-gradient(${mobileGradientDirection}, ${linearGradient});`
+            : ``}
+        }
+
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+            top: 3%;
+            left: 3%;
+            align-items: flex-start;
+            text-align: left;
+        }
+
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+            top: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+            top: 50%;
+            left: 3%;
+            transform: translateY(-50%);
+            align-items: flex-start;
+            text-align: left;
+        }
+
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+            top: 50%;
+            right: 3%;
+            transform: translateY(-50%);
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+            bottom: 3%;
+            left: 3%;
+            align-items: flex-start;
+            text-align: left;
+        }
+
+        .${prefix}__text-block-mobile--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+            bottom: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
+        }
       }
 
-      .${prefix}__description {
-        color: #ccc;
-        margin: 0;
-        font-size: 13px;
-        font-family: "Source Sans 3", system-ui;
-        font-style: normal;
-        font-weight: 400;
-        line-height: 20px;
+      @container (min-width: 640px) {
+        .${prefix}::before {
+          ${this.hasContent
+            ? `background: linear-gradient(${desktopGradientDirection}, ${linearGradient});`
+            : ``}
+        }
+
+        .${prefix}__text {
+            width: 70%;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_LEFT} {
+            top: 3%;
+            left: 3%;
+            align-items: flex-start;
+            text-align: left;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.TOP_RIGHT} {
+            top: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_LEFT} {
+            top: 50%;
+            left: 3%;
+            transform: translateY(-50%);
+            align-items: flex-start;
+            text-align: left;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.MIDDLE_RIGHT} {
+            top: 50%;
+            right: 3%;
+            transform: translateY(-50%);
+            align-items: flex-end;
+            text-align: right;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_LEFT} {
+            bottom: 3%;
+            left: 3%;
+            align-items: flex-start;
+            text-align: left;
+        }
+
+        .${prefix}__text-block--${exports.ENUM_TEXT_BLOCK_POSITION.BOTTOM_RIGHT} {
+            bottom: 3%;
+            right: 3%;
+            align-items: flex-end;
+            text-align: right;
+        }
       }
 
-      .${prefix}__video-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
+      .${prefix}__header {
+          font-size: 24px;
+          margin: 0;
+          font-family: "Cormorant", system-ui;
+          font-style: normal;
+          font-weight: 300;
+          line-height: normal;
       }
 
-      .${prefix}__video-element {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        display: block;
+      .${prefix}__description {
+          font-size: 10px;
+          font-family: "Source Sans 3", system-ui;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 20px;
+          margin: 0;
       }
 
       .${prefix}__controls {
@@ -19982,7 +20177,7 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         align-items: center;
         opacity: 0;
         transition: opacity 0.3s;
-        z-index: 3;
+        z-index: 100;
         width: fit-content;
         border-radius: 50%;
       }
@@ -19991,7 +20186,7 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         opacity: 1;
       }
 
-     .${prefix}__mute-button {
+      .${prefix}__mute-button {
         background: none;
         border: none;
         color: white;
@@ -20012,6 +20207,38 @@ class RbVideoPlayerSE extends BaseSpotComponent {
       .${prefix}__mute-button:hover {
         opacity: 0.8;
       }
+
+      @container (min-width: 640px) {
+          .${prefix}__text {
+              width: 70%;
+          }
+      }
+
+      @container (min-width: 768px) {
+          .${prefix}__description {
+              font-size: 12px;
+          }
+      }
+
+      @container (min-width: 1024px) {
+          .${prefix}__header {
+              font-size: 26px;
+          }
+
+          .${prefix}__description {
+              font-size: 13px;
+          }
+      }
+
+      @container (min-width: 1280px) {
+          .${prefix}__header {
+              font-size: 28px;
+          }
+
+          .${prefix}__description {
+              font-size: 14px;
+          }
+      }
     `;
     }
 }