@liquidcommercedev/rmn-sdk 1.5.0-beta.33 → 1.5.0-beta.34

package/dist/index.esm.js

@@ -17145,7 +17145,7 @@ class DummyHTMLElement {
     }
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     attachShadow(_options) {
-        throw new Error('attachShadow is not supported in non-browser environment');
+        throw new Error('Liquid Commerce Rmn Sdk: attachShadow is not supported in non-browser environment');
     }
     appendChild(node) {
         return node;
@@ -17180,6 +17180,12 @@ class BaseSpotComponent extends BaseElement {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "_container", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
     }
     initializeData(data, config) {
         if (this.dataInitialized) {
@@ -17196,19 +17202,19 @@ class BaseSpotComponent extends BaseElement {
         if (!this.initialized || !this.dataInitialized || !isBrowser) {
             return;
         }
-        const container = this._config.useShadowDom
+        this._container = this._config.useShadowDom
             ? this.shadowRoot || this.attachShadow({ mode: 'open' })
             : this;
-        container.innerHTML = '';
+        this._container.innerHTML = '';
         const style = document.createElement('style');
         style.textContent = this.baseStyles() + this.styles();
-        container.appendChild(style);
+        this._container.appendChild(style);
         const content = this.template();
         if (typeof content === 'string') {
-            container.innerHTML += content;
+            this._container.innerHTML += content;
         }
         else {
-            container.appendChild(content);
+            this._container.appendChild(content);
         }
     }
     baseStyles() {
@@ -17536,7 +17542,7 @@ Object.defineProperty(LocalStorageService, "encryptData", {
 
 class ProximityObserver {
     constructor(elementIds, callback, options = {}) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         Object.defineProperty(this, "intersectionObserver", {
             enumerable: true,
             configurable: true,
@@ -17555,13 +17561,7 @@ class ProximityObserver {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "observedElements", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "processedGroups", {
+        Object.defineProperty(this, "processedIds", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -17573,13 +17573,7 @@ class ProximityObserver {
             writable: true,
             value: void 0
         });
-        Object.defineProperty(this, "verticalThreshold", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: void 0
-        });
-        Object.defineProperty(this, "horizontalThreshold", {
+        Object.defineProperty(this, "proximityThreshold", {
             enumerable: true,
             configurable: true,
             writable: true,
@@ -17595,125 +17589,130 @@ class ProximityObserver {
             enumerable: true,
             configurable: true,
             writable: true,
-            value: void 0
+            value: 20
         });
         this.targetIds = new Set(elementIds);
-        this.observedElements = new Map();
-        this.processedGroups = new Set();
+        this.processedIds = new Set();
         this.callback = callback;
-        this.verticalThreshold = (_a = options.verticalThreshold) !== null && _a !== void 0 ? _a : 200;
-        this.horizontalThreshold = (_b = options.horizontalThreshold) !== null && _b !== void 0 ? _b : 400;
-        this.intersectionMargin = (_c = options.intersectionMargin) !== null && _c !== void 0 ? _c : '1000px';
-        this.maxGroupSize = (_d = options.maxGroupSize) !== null && _d !== void 0 ? _d : 4;
-        this.initializeIntersectionObserver();
-        this.initializeMutationObserver();
-        this.startObservingExistingElements();
-    }
-    initializeIntersectionObserver() {
+        this.proximityThreshold = (_a = options.proximityThreshold) !== null && _a !== void 0 ? _a : 500;
+        this.intersectionMargin = (_b = options.intersectionMargin) !== null && _b !== void 0 ? _b : '2000px';
+        this.initializeObservers();
+        this.observeExistingElements();
+    }
+    initializeObservers() {
+        // Initialize intersection observer to detect when elements are near viewport
         this.intersectionObserver = new IntersectionObserver(this.handleIntersection.bind(this), {
             rootMargin: this.intersectionMargin,
-            threshold: 0,
         });
-    }
-    initializeMutationObserver() {
-        this.mutationObserver = new MutationObserver(this.handleMutation.bind(this));
+        // Initialize mutation observer to detect new elements
+        this.mutationObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'childList') {
+                    mutation.addedNodes.forEach((node) => {
+                        if (node instanceof HTMLElement) {
+                            this.checkElement(node);
+                            node.querySelectorAll('*').forEach((el) => {
+                                if (el instanceof HTMLElement) {
+                                    this.checkElement(el);
+                                }
+                            });
+                        }
+                    });
+                }
+            });
+        });
+        // Start observing DOM changes
         this.mutationObserver.observe(document.body, {
             childList: true,
             subtree: true,
         });
     }
-    isElementInViewportRange(element) {
-        const rect = element.getBoundingClientRect();
-        const viewportWidth = window.innerWidth;
-        const extendedBounds = 200; // Additional buffer space
-        // Check if element is within viewport bounds plus buffer
-        return rect.right >= -extendedBounds && rect.left <= viewportWidth + extendedBounds;
-    }
-    findNearbyElements(element) {
-        const elementRect = element.getBoundingClientRect();
-        const nearbyElements = [];
-        const elementCenterX = elementRect.left + elementRect.width / 2;
-        const elementCenterY = elementRect.top + elementRect.height / 2;
-        // First, collect potential nearby elements
-        this.observedElements.forEach((el) => {
-            if (el.id === element.id || this.isElementProcessed(el.id))
-                return;
-            // Skip elements that are far outside viewport range
-            if (!this.isElementInViewportRange(el))
-                return;
-            const targetRect = el.getBoundingClientRect();
-            const targetCenterX = targetRect.left + targetRect.width / 2;
-            const targetCenterY = targetRect.top + targetRect.height / 2;
-            const horizontalDistance = Math.abs(elementCenterX - targetCenterX);
-            const verticalDistance = Math.abs(elementCenterY - targetCenterY);
-            if (horizontalDistance <= this.horizontalThreshold &&
-                verticalDistance <= this.verticalThreshold) {
-                // Calculate total distance for sorting
-                const totalDistance = Math.sqrt(Math.pow(horizontalDistance, 2) + Math.pow(verticalDistance, 2));
-                nearbyElements.push({ element: el, distance: totalDistance });
+    checkElement(element) {
+        if (element.id && this.targetIds.has(element.id) && !this.processedIds.has(element.id)) {
+            this.intersectionObserver.observe(element);
+        }
+    }
+    findNearbyTargetIds(element) {
+        // Cache element rectangle to avoid multiple calculations
+        const elementCenter = this.getElementCenter(element);
+        const nearbyTargets = [];
+        // Use for...of instead of forEach for better performance and ability to break early
+        for (const targetId of this.targetIds) {
+            // Early exit conditions
+            if (this.processedIds.has(targetId))
+                continue;
+            if (targetId === element.id)
+                continue;
+            const targetElement = document.getElementById(targetId);
+            if (!targetElement)
+                continue;
+            // Calculate distance between element centers
+            const targetCenter = this.getElementCenter(targetElement);
+            const distance = this.calculateDistance(elementCenter, targetCenter);
+            if (distance <= this.proximityThreshold) {
+                nearbyTargets.push({ id: targetId, distance });
+                // Early exit if we've reached maxResults
+                if (nearbyTargets.length >= this.maxGroupSize)
+                    break;
             }
-        });
-        // Sort by distance and limit to maxGroupSize - 1
-        return nearbyElements
-            .sort((a, b) => a.distance - b.distance)
-            .slice(0, this.maxGroupSize - 1)
-            .map((item) => item.element);
+        }
+        // Sort by distance and return only the IDs
+        return nearbyTargets.sort((a, b) => a.distance - b.distance).map((target) => target.id);
     }
     handleIntersection(entries) {
         entries.forEach((entry) => {
             if (!entry.isIntersecting)
                 return;
             const element = entry.target;
-            if (this.isElementProcessed(element.id))
-                return;
-            // Only process if element is in viewport range
-            if (!this.isElementInViewportRange(element))
+            if (!element.id || this.processedIds.has(element.id))
                 return;
-            const nearbyElements = this.findNearbyElements(element);
-            const groupIds = [element.id, ...nearbyElements.map((el) => el.id)];
-            const groupKey = groupIds.sort().join(',');
-            if (!this.processedGroups.has(groupKey)) {
-                this.processedGroups.add(groupKey);
-                this.callback(groupIds);
+            // Find nearby target elements
+            const allGroupIds = [element.id, ...this.findNearbyTargetIds(element)];
+            // Take only up to maxGroupSize elements
+            const groupIdsToProcess = allGroupIds.slice(0, this.maxGroupSize);
+            // Mark all found IDs as processed
+            groupIdsToProcess.forEach((id) => {
+                this.processedIds.add(id);
+                const el = document.getElementById(id);
+                if (el)
+                    this.intersectionObserver.unobserve(el);
+            });
+            // Trigger callback with the group
+            this.callback(groupIdsToProcess);
+            // Cleanup if all elements have been processed
+            if (this.targetIds.size === this.processedIds.size) {
+                this.cleanup();
             }
         });
     }
-    isElementProcessed(elementId) {
-        return Array.from(this.processedGroups).some((group) => group.split(',').includes(elementId));
-    }
-    handleMutation(mutations) {
-        mutations.forEach((mutation) => {
-            if (mutation.type === 'childList') {
-                mutation.addedNodes.forEach((node) => {
-                    if (node.nodeType === Node.ELEMENT_NODE) {
-                        this.checkAndObserveElement(node);
-                        node
-                            .querySelectorAll('*')
-                            .forEach((el) => this.checkAndObserveElement(el));
-                    }
-                });
-            }
-        });
+    /**
+     * Calculates the center point of an HTML element.
+     */
+    getElementCenter(element) {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: rect.left + rect.width / 2,
+            y: rect.top + rect.height / 2,
+        };
     }
-    checkAndObserveElement(element) {
-        if (element.id && this.targetIds.has(element.id) && !this.observedElements.has(element.id)) {
-            this.observedElements.set(element.id, element);
-            this.intersectionObserver.observe(element);
-        }
+    /**
+     * Calculates the Euclidean distance between two points.
+     */
+    calculateDistance(point1, point2) {
+        return Math.hypot(point1.x - point2.x, point1.y - point2.y);
     }
-    startObservingExistingElements() {
+    observeExistingElements() {
         this.targetIds.forEach((id) => {
             const element = document.getElementById(id);
             if (element) {
-                this.checkAndObserveElement(element);
+                this.checkElement(element);
             }
         });
     }
     cleanup() {
         this.intersectionObserver.disconnect();
         this.mutationObserver.disconnect();
-        this.observedElements.clear();
-        this.processedGroups.clear();
+        this.processedIds.clear();
         this.targetIds.clear();
     }
 }
@@ -19453,144 +19452,38 @@ class RbVideoPlayerSE extends BaseSpotComponent {
             writable: true,
             value: () => `.${this._config.prefix}__video-element`
         });
-        Object.defineProperty(this, "timelineSelector", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => `.${this._config.prefix}__timeline`
-        });
-        Object.defineProperty(this, "playButtonSelector", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => `.${this._config.prefix}__play-button`
-        });
         Object.defineProperty(this, "muteButtonSelector", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: () => `.${this._config.prefix}__mute-button`
         });
-        Object.defineProperty(this, "volumeSliderSelector", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: () => `.${this._config.prefix}__volume-slider`
-        });
         Object.defineProperty(this, "video", {
             enumerable: true,
             configurable: true,
             writable: true,
             value: null
         });
-        Object.defineProperty(this, "timeline", {
-            enumerable: true,
-            configurable: true,
-            writable: true,
-            value: null
-        });
         this.bindEventHandlers();
     }
-    get container() {
-        return this._config.useShadowDom && this.shadowRoot ? this.shadowRoot : this;
-    }
     // Initialization Methods
     bindEventHandlers() {
-        this.handlePlayPause = this.handlePlayPause.bind(this);
-        this.handleTimelineClick = this.handleTimelineClick.bind(this);
-        this.handleVolumeChange = this.handleVolumeChange.bind(this);
-        this.updateProgress = this.updateProgress.bind(this);
-        this.hideOverlay = this.hideOverlay.bind(this);
         this.handleMuteToggle = this.handleMuteToggle.bind(this);
     }
     // UI Update Methods
-    updatePlayIcon(isPaused) {
-        const playIcon = this.container.querySelector(`.${this._config.prefix}__play-icon`);
-        if (!playIcon)
-            return;
-        playIcon.innerHTML = isPaused ? this.getPlayIcon() : this.getPauseIcon();
-    }
     updateMuteIcon(isMuted) {
-        const muteIcon = this.container.querySelector(`.${this._config.prefix}__mute-icon`);
+        const muteIcon = this._container.querySelector(`.${this._config.prefix}__mute-icon`);
         if (!muteIcon)
             return;
         muteIcon.innerHTML = isMuted ? this.getMuteIcon() : this.getUnmuteIcon();
     }
-    updateProgress() {
-        if (!this.video)
-            return;
-        const progress = this.container.querySelector(`.${this._config.prefix}__progress`);
-        const currentTime = this.container.querySelector(`.${this._config.prefix}__current-time`);
-        const duration = this.container.querySelector(`.${this._config.prefix}__duration`);
-        if (progress instanceof HTMLElement && this.video.duration) {
-            const percentage = (this.video.currentTime / this.video.duration) * 100;
-            progress.style.width = `${percentage}%`;
-        }
-        if (currentTime instanceof HTMLElement) {
-            currentTime.textContent = this.formatTime(this.video.currentTime);
-        }
-        if (duration instanceof HTMLElement && this.video.duration) {
-            duration.textContent = this.formatTime(this.video.duration);
-        }
-    }
     // Event Handlers
-    handlePlayPause(event) {
-        event.preventDefault();
-        if (!this.video)
-            return;
-        if (this.video.paused) {
-            this.video
-                .play()
-                .then(() => {
-                this.updatePlayIcon(false);
-                this.hideOverlay();
-            })
-                .catch(console.error);
-        }
-        else {
-            this.video.pause();
-            this.updatePlayIcon(true);
-        }
-    }
-    handleTimelineClick(event) {
-        event.preventDefault();
-        if (!this.video || !this.timeline)
-            return;
-        const rect = this.timeline.getBoundingClientRect();
-        const position = (event.clientX - rect.left) / rect.width;
-        this.video.currentTime = position * this.video.duration;
-    }
-    handleVolumeChange(event) {
-        if (!this.video)
-            return;
-        const input = event.target;
-        this.video.volume = parseFloat(input.value);
-    }
     handleMuteToggle(event) {
         event.preventDefault();
         if (!this.video)
             return;
         this.video.muted = !this.video.muted;
         this.updateMuteIcon(this.video.muted);
-        const volumeSlider = this.container.querySelector(this.volumeSliderSelector());
-        if (volumeSlider) {
-            volumeSlider.value = this.video.muted ? '0' : this.video.volume.toString();
-        }
-    }
-    // Utility Methods
-    formatTime(seconds) {
-        const minutes = Math.floor(seconds / 60);
-        const remainingSeconds = Math.floor(seconds % 60);
-        return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
-    }
-    hideOverlay() {
-        const overlay = this.container.querySelector(`.${this._config.prefix}__overlay`);
-        if (!(overlay instanceof HTMLElement))
-            return;
-        overlay.style.opacity = '0';
-        setTimeout(() => {
-            overlay.style.display = 'none';
-        }, 300);
     }
     // Icon Templates
     getMuteIcon() {
@@ -19610,95 +19503,32 @@ class RbVideoPlayerSE extends BaseSpotComponent {
       </svg>
     `;
     }
-    getPlayIcon() {
-        return `
-      <svg height="20px" viewBox="0 0 512 512" width="20px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
-        <path fill="#fff" d="M405.2,232.9L126.8,67.2c-3.4-2-6.9-3.2-10.9-3.2c-10.9,0-19.8,9-19.8,20H96v344h0.1c0,11,8.9,20,19.8,20  c4.1,0,7.5-1.4,11.2-3.4l278.1-165.5c6.6-5.5,10.8-13.8,10.8-23.1C416,246.7,411.8,238.5,405.2,232.9z"/>
-      </svg>
-    `;
-    }
-    getPauseIcon() {
-        return `
-      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-        <path fill="#fff" d="M11 22h-4v-20h4v20zm6-20h-4v20h4v-20z"/>
-      </svg>
-    `;
-    }
     // Lifecycle Methods
     connected() {
         this.initializeElements();
-        this.setupAutoplay();
         this.attachEventListeners();
     }
     disconnected() {
         this.removeEventListeners();
     }
     initializeElements() {
-        this.video = this.container.querySelector(this.videoSelector());
-        this.timeline = this.container.querySelector(this.timelineSelector());
-    }
-    setupAutoplay() {
-        if (this._data.video.autoplay && this.video) {
-            setTimeout(() => {
-                this.hideOverlay();
-            }, 1000);
-        }
+        this.video = this._container.querySelector(this.videoSelector());
     }
     attachEventListeners() {
-        var _a;
         if (!this.video)
             return;
-        this.video.addEventListener('timeupdate', this.updateProgress);
-        this.video.addEventListener('loadedmetadata', this.updateProgress);
-        this.video.addEventListener('play', this.hideOverlay);
-        this.video.addEventListener('volumechange', () => {
-            if (this.video) {
-                this.updateMuteIcon(this.video.muted || this.video.volume === 0);
-            }
-        });
-        const playButton = this.container.querySelector(this.playButtonSelector());
-        const muteButton = this.container.querySelector(this.muteButtonSelector());
-        const volumeSlider = this.container.querySelector(this.volumeSliderSelector());
-        playButton === null || playButton === void 0 ? void 0 : playButton.addEventListener('click', this.handlePlayPause);
+        const muteButton = this._container.querySelector(this.muteButtonSelector());
         muteButton === null || muteButton === void 0 ? void 0 : muteButton.addEventListener('click', this.handleMuteToggle);
-        (_a = this.timeline) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTimelineClick);
-        volumeSlider === null || volumeSlider === void 0 ? void 0 : volumeSlider.addEventListener('input', this.handleVolumeChange);
     }
     removeEventListeners() {
-        var _a;
         if (!this.video)
             return;
-        this.video.removeEventListener('timeupdate', this.updateProgress);
-        this.video.removeEventListener('loadedmetadata', this.updateProgress);
-        this.video.removeEventListener('play', this.hideOverlay);
-        this.video.removeEventListener('volumechange', () => null);
-        const playButton = this.container.querySelector(this.playButtonSelector());
-        const muteButton = this.container.querySelector(this.muteButtonSelector());
-        const volumeSlider = this.container.querySelector(this.volumeSliderSelector());
-        playButton === null || playButton === void 0 ? void 0 : playButton.removeEventListener('click', this.handlePlayPause);
+        const muteButton = this._container.querySelector(this.muteButtonSelector());
         muteButton === null || muteButton === void 0 ? void 0 : muteButton.removeEventListener('click', this.handleMuteToggle);
-        (_a = this.timeline) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.handleTimelineClick);
-        volumeSlider === null || volumeSlider === void 0 ? void 0 : volumeSlider.removeEventListener('input', this.handleVolumeChange);
     }
     template() {
         const prefix = this._config.prefix;
-        const { url, posterTitle, posterDescription, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        autoplay, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        mute, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        loop, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        showControls, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        showPlay, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        showTimeline, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        showVolume, 
-        // eslint-disable-next-line @typescript-eslint/naming-convention
-        showTime, } = this._data.video;
+        const { url, posterTitle, posterDescription } = this._data.video;
         if (!url) {
             return '<p>Please provide a video source</p>';
         }
@@ -19719,72 +19549,31 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         <video
           class="${prefix}__video-element"
           src="${url}"
-          ${autoplay ? 'autoplay' : ''}
-          ${mute ? 'muted' : ''}
-          ${loop ? 'loop' : ''}
+          autoplay
+          muted
+          loop
           preload="metadata"
         >
           Your browser doesn't support HTML5 video playback.
         </video>
       </div>
-    `;
-        const renderPlayButton = () => !showPlay
-            ? ''
-            : `
-      <button type="button" class="${prefix}__play-button">
-        <span class="${prefix}__play-icon">
-          ${autoplay ? this.getPauseIcon() : this.getPlayIcon()}
-        </span>
-      </button>
     `;
         const renderMuteButton = () => `
       <button type="button" class="${prefix}__mute-button">
         <span class="${prefix}__mute-icon">
-          ${mute ? this.getMuteIcon() : this.getUnmuteIcon()}
+          ${this.getMuteIcon()}
         </span>
       </button>
     `;
-        const renderVolumeControl = () => !showVolume
-            ? ''
-            : `
-      <div class="${prefix}__volume-control">
-        <input
-          type="range"
-          min="0"
-          max="1"
-          step="0.1"
-          value="${mute ? '0' : '1'}"
-          class="${prefix}__volume-slider"
-        />
-      </div>
-    `;
-        const renderTimeline = () => !showTimeline
-            ? ''
-            : `
-      <div class="${prefix}__timeline">
-        <div class="${prefix}__progress"></div>
-      </div>
-    `;
-        const renderTime = () => !showTime
-            ? ''
-            : `
-      <div class="${prefix}__time">
-        <span class="${prefix}__current-time">0:00</span> /
-        <span class="${prefix}__duration">0:00</span>
-      </div>
-    `;
-        const renderControls = () => !showControls
-            ? ''
-            : `
+        const renderControls = () => `
       <div class="${prefix}__controls">
-        ${renderPlayButton()}
         ${renderMuteButton()}
-        ${renderVolumeControl()}
-        ${renderTimeline()}
-        ${renderTime()}
       </div>
     `;
         return `
+      ${GFONT_PRECONNECT}
+      ${GFONT_SOURCE_SANS_3}
+      ${GFONT_CORMORANT}
       <div class="${prefix}">
         ${renderOverlay()}
         ${renderVideo()}
@@ -19799,7 +19588,6 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         width: 100%;
         height: 100%;
         background: #000;
-        border-radius: 8px;
         overflow: hidden;
         position: relative;
       }
@@ -19810,33 +19598,39 @@ class RbVideoPlayerSE extends BaseSpotComponent {
         left: 0;
         right: 0;
         z-index: 2;
-        background-image: url('${this._data.video.poster}');
-        background-color: rgba(0, 0, 0, 0.5);
-        transition: opacity 0.3s ease;
         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%);
       }
 
       .${prefix}__overlay-text {
         padding: 3rem;
         display: flex;
         flex-direction: column;
-        gap: 15px;
+        gap: 8px;
       }
 
       .${prefix}__title {
         color: #fff;
+        font-size: 26px;
         margin: 0;
-        font-size: 1.5rem;
+        font-family: "Cormorant", system-ui;
+        font-style: normal;
+        font-weight: 300;
+        line-height: normal;
       }
 
       .${prefix}__description {
         color: #ccc;
         margin: 0;
-        font-size: 1rem;
+        font-size: 13px;
+        font-family: "Source Sans 3", system-ui;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 20px;
       }
 
       .${prefix}__video-container {
@@ -19854,75 +19648,23 @@ class RbVideoPlayerSE extends BaseSpotComponent {
 
       .${prefix}__controls {
         position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: rgba(0, 0, 0, 0.7);
+        bottom: 5px;
+        right: 5px;
+        background: rgba(0, 0, 0, 0.5);
         padding: 8px;
         display: flex;
         align-items: center;
-        gap: 8px;
         opacity: 0;
         transition: opacity 0.3s;
         z-index: 3;
+        width: fit-content;
+        border-radius: 50%;
       }
 
       .${prefix}:hover .${prefix}__controls {
         opacity: 1;
       }
 
-      .${prefix}__play-button {
-        background: none;
-        border: none;
-        color: white;
-        cursor: pointer;
-        width: 32px;
-        height: 32px;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .${prefix}__play-icon svg {
-        width: 20px;
-        height: 20px;
-      }
-
-      .${prefix}__play-button:hover {
-        opacity: 0.8;
-      }
-
-      .${prefix}__timeline {
-        flex-grow: 1;
-        height: 4px;
-        background: rgba(255, 255, 255, 0.3);
-        cursor: pointer;
-        position: relative;
-      }
-
-      .${prefix}__progress {
-        height: 100%;
-        background: #fff;
-        width: 0%;
-      }
-
-      .${prefix}__time {
-        color: white;
-        font-size: 14px;
-        min-width: 100px;
-        text-align: center;
-      }
-
-      .${prefix}__volume-control {
-        width: 100px;
-      }
-
-      .${prefix}__volume-slider {
-        width: 100%;
-        cursor: pointer;
-      }
-
      .${prefix}__mute-button {
         background: none;
         border: none;
@@ -21817,21 +21559,19 @@ class BrowserRmnClient {
             }
             // Validate inject data
             params.inject = validateInjectData(params.inject);
-            new ProximityObserver(params.inject.map((item) => item.placementId), (intersectingPlacementIds) => __awaiter(this, void 0, void 0, function* () {
+            const placementIds = params.inject.map((item) => item.placementId);
+            new ProximityObserver(placementIds, (intersectingPlacementIds) => __awaiter(this, void 0, void 0, function* () {
                 /**
                  * Called when elements are within range
                  *
                  * intersectingPlacementIds includes:
-                 * 1. The element that came within 1000px
-                 * 2. Any unprocessed elements within 200px of that element
+                 * 1. The element that came within 2000px
+                 * 2. Any unprocessed elements within 500px of that element
                  */
                 yield this.processPlacements(params, intersectingPlacementIds);
-                // console.info('intersectingPlacementIds', intersectingPlacementIds);
             }), {
-                intersectionMargin: '1000px',
-                verticalThreshold: 200,
-                horizontalThreshold: 400,
-                maxGroupSize: 5,
+                proximityThreshold: 500,
+                intersectionMargin: '2000px',
             });
         });
     }