react-riyils 1.0.0 → 2.0.0

package/dist/index.umd.js

@@ -432,9 +432,6 @@
       return el[size === 'width' ? 'offsetWidth' : 'offsetHeight'] + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-right' : 'margin-top')) + parseFloat(window.getComputedStyle(el, null).getPropertyValue(size === 'width' ? 'margin-left' : 'margin-bottom'));
     }
   }
-  function makeElementsArray(el) {
-    return (Array.isArray(el) ? el : [el]).filter(e => !!e);
-  }
   function getRotateFix(swiper) {
     return v => {
       if (Math.abs(v) > 0 && swiper.browser && swiper.browser.need3dFix && Math.abs(v) % 90 === 0) {
@@ -5034,6 +5031,366 @@
   });
   SwiperSlide.displayName = 'SwiperSlide';
 
+  function Virtual({
+    swiper,
+    extendParams,
+    on,
+    emit
+  }) {
+    extendParams({
+      virtual: {
+        enabled: false,
+        slides: [],
+        cache: true,
+        slidesPerViewAutoSlideSize: 320,
+        renderSlide: null,
+        renderExternal: null,
+        renderExternalUpdate: true,
+        addSlidesBefore: 0,
+        addSlidesAfter: 0
+      }
+    });
+    let cssModeTimeout;
+    const document = getDocument();
+    swiper.virtual = {
+      cache: {},
+      from: undefined,
+      to: undefined,
+      slides: [],
+      offset: 0,
+      slidesGrid: []
+    };
+    const tempDOM = document.createElement('div');
+    function renderSlide(slide, index) {
+      const params = swiper.params.virtual;
+      if (params.cache && swiper.virtual.cache[index]) {
+        return swiper.virtual.cache[index];
+      }
+      // eslint-disable-next-line
+      let slideEl;
+      if (params.renderSlide) {
+        slideEl = params.renderSlide.call(swiper, slide, index);
+        if (typeof slideEl === 'string') {
+          setInnerHTML(tempDOM, slideEl);
+          slideEl = tempDOM.children[0];
+        }
+      } else if (swiper.isElement) {
+        slideEl = createElement('swiper-slide');
+      } else {
+        slideEl = createElement('div', swiper.params.slideClass);
+      }
+      slideEl.setAttribute('data-swiper-slide-index', index);
+      if (!params.renderSlide) {
+        setInnerHTML(slideEl, slide);
+      }
+      if (params.cache) {
+        swiper.virtual.cache[index] = slideEl;
+      }
+      return slideEl;
+    }
+    function update(force, beforeInit, forceActiveIndex) {
+      const {
+        slidesPerGroup,
+        centeredSlides,
+        slidesPerView,
+        loop: isLoop,
+        initialSlide
+      } = swiper.params;
+      if (beforeInit && !isLoop && initialSlide > 0) {
+        return;
+      }
+      const {
+        addSlidesBefore,
+        addSlidesAfter,
+        slidesPerViewAutoSlideSize
+      } = swiper.params.virtual;
+      const {
+        from: previousFrom,
+        to: previousTo,
+        slides,
+        slidesGrid: previousSlidesGrid,
+        offset: previousOffset
+      } = swiper.virtual;
+      if (!swiper.params.cssMode) {
+        swiper.updateActiveIndex();
+      }
+      const activeIndex = typeof forceActiveIndex === 'undefined' ? swiper.activeIndex || 0 : forceActiveIndex;
+      let offsetProp;
+      if (swiper.rtlTranslate) offsetProp = 'right';else offsetProp = swiper.isHorizontal() ? 'left' : 'top';
+      let slidesPerViewNumeric;
+      if (slidesPerView === 'auto') {
+        if (slidesPerViewAutoSlideSize) {
+          let swiperSize = swiper.size;
+          if (!swiperSize) {
+            swiperSize = swiper.isHorizontal() ? swiper.el.getBoundingClientRect().width : swiper.el.getBoundingClientRect().height;
+          }
+          slidesPerViewNumeric = Math.max(1, Math.ceil(swiperSize / slidesPerViewAutoSlideSize));
+        } else {
+          slidesPerViewNumeric = 1;
+        }
+      } else {
+        slidesPerViewNumeric = slidesPerView;
+      }
+      let slidesAfter;
+      let slidesBefore;
+      if (centeredSlides) {
+        slidesAfter = Math.floor(slidesPerViewNumeric / 2) + slidesPerGroup + addSlidesAfter;
+        slidesBefore = Math.floor(slidesPerViewNumeric / 2) + slidesPerGroup + addSlidesBefore;
+      } else {
+        slidesAfter = slidesPerViewNumeric + (slidesPerGroup - 1) + addSlidesAfter;
+        slidesBefore = (isLoop ? slidesPerViewNumeric : slidesPerGroup) + addSlidesBefore;
+      }
+      let from = activeIndex - slidesBefore;
+      let to = activeIndex + slidesAfter;
+      if (!isLoop) {
+        from = Math.max(from, 0);
+        to = Math.min(to, slides.length - 1);
+      }
+      let offset = (swiper.slidesGrid[from] || 0) - (swiper.slidesGrid[0] || 0);
+      if (isLoop && activeIndex >= slidesBefore) {
+        from -= slidesBefore;
+        if (!centeredSlides) offset += swiper.slidesGrid[0];
+      } else if (isLoop && activeIndex < slidesBefore) {
+        from = -slidesBefore;
+        if (centeredSlides) offset += swiper.slidesGrid[0];
+      }
+      Object.assign(swiper.virtual, {
+        from,
+        to,
+        offset,
+        slidesGrid: swiper.slidesGrid,
+        slidesBefore,
+        slidesAfter
+      });
+      function onRendered() {
+        swiper.updateSlides();
+        swiper.updateProgress();
+        swiper.updateSlidesClasses();
+        emit('virtualUpdate');
+      }
+      if (previousFrom === from && previousTo === to && !force) {
+        if (swiper.slidesGrid !== previousSlidesGrid && offset !== previousOffset) {
+          swiper.slides.forEach(slideEl => {
+            slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
+          });
+        }
+        swiper.updateProgress();
+        emit('virtualUpdate');
+        return;
+      }
+      if (swiper.params.virtual.renderExternal) {
+        swiper.params.virtual.renderExternal.call(swiper, {
+          offset,
+          from,
+          to,
+          slides: function getSlides() {
+            const slidesToRender = [];
+            for (let i = from; i <= to; i += 1) {
+              slidesToRender.push(slides[i]);
+            }
+            return slidesToRender;
+          }()
+        });
+        if (swiper.params.virtual.renderExternalUpdate) {
+          onRendered();
+        } else {
+          emit('virtualUpdate');
+        }
+        return;
+      }
+      const prependIndexes = [];
+      const appendIndexes = [];
+      const getSlideIndex = index => {
+        let slideIndex = index;
+        if (index < 0) {
+          slideIndex = slides.length + index;
+        } else if (slideIndex >= slides.length) {
+          // eslint-disable-next-line
+          slideIndex = slideIndex - slides.length;
+        }
+        return slideIndex;
+      };
+      if (force) {
+        swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`)).forEach(slideEl => {
+          slideEl.remove();
+        });
+      } else {
+        for (let i = previousFrom; i <= previousTo; i += 1) {
+          if (i < from || i > to) {
+            const slideIndex = getSlideIndex(i);
+            swiper.slides.filter(el => el.matches(`.${swiper.params.slideClass}[data-swiper-slide-index="${slideIndex}"], swiper-slide[data-swiper-slide-index="${slideIndex}"]`)).forEach(slideEl => {
+              slideEl.remove();
+            });
+          }
+        }
+      }
+      const loopFrom = isLoop ? -slides.length : 0;
+      const loopTo = isLoop ? slides.length * 2 : slides.length;
+      for (let i = loopFrom; i < loopTo; i += 1) {
+        if (i >= from && i <= to) {
+          const slideIndex = getSlideIndex(i);
+          if (typeof previousTo === 'undefined' || force) {
+            appendIndexes.push(slideIndex);
+          } else {
+            if (i > previousTo) appendIndexes.push(slideIndex);
+            if (i < previousFrom) prependIndexes.push(slideIndex);
+          }
+        }
+      }
+      appendIndexes.forEach(index => {
+        swiper.slidesEl.append(renderSlide(slides[index], index));
+      });
+      if (isLoop) {
+        for (let i = prependIndexes.length - 1; i >= 0; i -= 1) {
+          const index = prependIndexes[i];
+          swiper.slidesEl.prepend(renderSlide(slides[index], index));
+        }
+      } else {
+        prependIndexes.sort((a, b) => b - a);
+        prependIndexes.forEach(index => {
+          swiper.slidesEl.prepend(renderSlide(slides[index], index));
+        });
+      }
+      elementChildren(swiper.slidesEl, '.swiper-slide, swiper-slide').forEach(slideEl => {
+        slideEl.style[offsetProp] = `${offset - Math.abs(swiper.cssOverflowAdjustment())}px`;
+      });
+      onRendered();
+    }
+    function appendSlide(slides) {
+      if (typeof slides === 'object' && 'length' in slides) {
+        for (let i = 0; i < slides.length; i += 1) {
+          if (slides[i]) swiper.virtual.slides.push(slides[i]);
+        }
+      } else {
+        swiper.virtual.slides.push(slides);
+      }
+      update(true);
+    }
+    function prependSlide(slides) {
+      const activeIndex = swiper.activeIndex;
+      let newActiveIndex = activeIndex + 1;
+      let numberOfNewSlides = 1;
+      if (Array.isArray(slides)) {
+        for (let i = 0; i < slides.length; i += 1) {
+          if (slides[i]) swiper.virtual.slides.unshift(slides[i]);
+        }
+        newActiveIndex = activeIndex + slides.length;
+        numberOfNewSlides = slides.length;
+      } else {
+        swiper.virtual.slides.unshift(slides);
+      }
+      if (swiper.params.virtual.cache) {
+        const cache = swiper.virtual.cache;
+        const newCache = {};
+        Object.keys(cache).forEach(cachedIndex => {
+          const cachedEl = cache[cachedIndex];
+          const cachedElIndex = cachedEl.getAttribute('data-swiper-slide-index');
+          if (cachedElIndex) {
+            cachedEl.setAttribute('data-swiper-slide-index', parseInt(cachedElIndex, 10) + numberOfNewSlides);
+          }
+          newCache[parseInt(cachedIndex, 10) + numberOfNewSlides] = cachedEl;
+        });
+        swiper.virtual.cache = newCache;
+      }
+      update(true);
+      swiper.slideTo(newActiveIndex, 0);
+    }
+    function removeSlide(slidesIndexes) {
+      if (typeof slidesIndexes === 'undefined' || slidesIndexes === null) return;
+      let activeIndex = swiper.activeIndex;
+      if (Array.isArray(slidesIndexes)) {
+        for (let i = slidesIndexes.length - 1; i >= 0; i -= 1) {
+          if (swiper.params.virtual.cache) {
+            delete swiper.virtual.cache[slidesIndexes[i]];
+            // shift cache indexes
+            Object.keys(swiper.virtual.cache).forEach(key => {
+              if (key > slidesIndexes) {
+                swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];
+                swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);
+                delete swiper.virtual.cache[key];
+              }
+            });
+          }
+          swiper.virtual.slides.splice(slidesIndexes[i], 1);
+          if (slidesIndexes[i] < activeIndex) activeIndex -= 1;
+          activeIndex = Math.max(activeIndex, 0);
+        }
+      } else {
+        if (swiper.params.virtual.cache) {
+          delete swiper.virtual.cache[slidesIndexes];
+          // shift cache indexes
+          Object.keys(swiper.virtual.cache).forEach(key => {
+            if (key > slidesIndexes) {
+              swiper.virtual.cache[key - 1] = swiper.virtual.cache[key];
+              swiper.virtual.cache[key - 1].setAttribute('data-swiper-slide-index', key - 1);
+              delete swiper.virtual.cache[key];
+            }
+          });
+        }
+        swiper.virtual.slides.splice(slidesIndexes, 1);
+        if (slidesIndexes < activeIndex) activeIndex -= 1;
+        activeIndex = Math.max(activeIndex, 0);
+      }
+      update(true);
+      swiper.slideTo(activeIndex, 0);
+    }
+    function removeAllSlides() {
+      swiper.virtual.slides = [];
+      if (swiper.params.virtual.cache) {
+        swiper.virtual.cache = {};
+      }
+      update(true);
+      swiper.slideTo(0, 0);
+    }
+    on('beforeInit', () => {
+      if (!swiper.params.virtual.enabled) return;
+      let domSlidesAssigned;
+      if (typeof swiper.passedParams.virtual.slides === 'undefined') {
+        const slides = [...swiper.slidesEl.children].filter(el => el.matches(`.${swiper.params.slideClass}, swiper-slide`));
+        if (slides && slides.length) {
+          swiper.virtual.slides = [...slides];
+          domSlidesAssigned = true;
+          slides.forEach((slideEl, slideIndex) => {
+            slideEl.setAttribute('data-swiper-slide-index', slideIndex);
+            swiper.virtual.cache[slideIndex] = slideEl;
+            slideEl.remove();
+          });
+        }
+      }
+      if (!domSlidesAssigned) {
+        swiper.virtual.slides = swiper.params.virtual.slides;
+      }
+      swiper.classNames.push(`${swiper.params.containerModifierClass}virtual`);
+      swiper.params.watchSlidesProgress = true;
+      swiper.originalParams.watchSlidesProgress = true;
+      update(false, true);
+    });
+    on('setTranslate', () => {
+      if (!swiper.params.virtual.enabled) return;
+      if (swiper.params.cssMode && !swiper._immediateVirtual) {
+        clearTimeout(cssModeTimeout);
+        cssModeTimeout = setTimeout(() => {
+          update();
+        }, 100);
+      } else {
+        update();
+      }
+    });
+    on('init update resize', () => {
+      if (!swiper.params.virtual.enabled) return;
+      if (swiper.params.cssMode) {
+        setCSSProperty(swiper.wrapperEl, '--swiper-virtual-size', `${swiper.virtualSize}px`);
+      }
+    });
+    Object.assign(swiper.virtual, {
+      appendSlide,
+      prependSlide,
+      removeSlide,
+      removeAllSlides,
+      update
+    });
+  }
+
   /* eslint-disable consistent-return */
   function Keyboard({
     swiper,
@@ -5536,228 +5893,6 @@
     });
   }
 
-  function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
-    if (swiper.params.createElements) {
-      Object.keys(checkProps).forEach(key => {
-        if (!params[key] && params.auto === true) {
-          let element = elementChildren(swiper.el, `.${checkProps[key]}`)[0];
-          if (!element) {
-            element = createElement('div', checkProps[key]);
-            element.className = checkProps[key];
-            swiper.el.append(element);
-          }
-          params[key] = element;
-          originalParams[key] = element;
-        }
-      });
-    }
-    return params;
-  }
-
-  const arrowSvg = `<svg class="swiper-navigation-icon" width="11" height="20" viewBox="0 0 11 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.38296 20.0762C0.111788 19.805 0.111788 19.3654 0.38296 19.0942L9.19758 10.2796L0.38296 1.46497C0.111788 1.19379 0.111788 0.754138 0.38296 0.482966C0.654131 0.211794 1.09379 0.211794 1.36496 0.482966L10.4341 9.55214C10.8359 9.9539 10.8359 10.6053 10.4341 11.007L1.36496 20.0762C1.09379 20.3474 0.654131 20.3474 0.38296 20.0762Z" fill="currentColor"/></svg>`;
-  function Navigation({
-    swiper,
-    extendParams,
-    on,
-    emit
-  }) {
-    extendParams({
-      navigation: {
-        nextEl: null,
-        prevEl: null,
-        addIcons: true,
-        hideOnClick: false,
-        disabledClass: 'swiper-button-disabled',
-        hiddenClass: 'swiper-button-hidden',
-        lockClass: 'swiper-button-lock',
-        navigationDisabledClass: 'swiper-navigation-disabled'
-      }
-    });
-    swiper.navigation = {
-      nextEl: null,
-      prevEl: null,
-      arrowSvg
-    };
-    function getEl(el) {
-      let res;
-      if (el && typeof el === 'string' && swiper.isElement) {
-        res = swiper.el.querySelector(el) || swiper.hostEl.querySelector(el);
-        if (res) return res;
-      }
-      if (el) {
-        if (typeof el === 'string') res = [...document.querySelectorAll(el)];
-        if (swiper.params.uniqueNavElements && typeof el === 'string' && res && res.length > 1 && swiper.el.querySelectorAll(el).length === 1) {
-          res = swiper.el.querySelector(el);
-        } else if (res && res.length === 1) {
-          res = res[0];
-        }
-      }
-      if (el && !res) return el;
-      // if (Array.isArray(res) && res.length === 1) res = res[0];
-      return res;
-    }
-    function toggleEl(el, disabled) {
-      const params = swiper.params.navigation;
-      el = makeElementsArray(el);
-      el.forEach(subEl => {
-        if (subEl) {
-          subEl.classList[disabled ? 'add' : 'remove'](...params.disabledClass.split(' '));
-          if (subEl.tagName === 'BUTTON') subEl.disabled = disabled;
-          if (swiper.params.watchOverflow && swiper.enabled) {
-            subEl.classList[swiper.isLocked ? 'add' : 'remove'](params.lockClass);
-          }
-        }
-      });
-    }
-    function update() {
-      // Update Navigation Buttons
-      const {
-        nextEl,
-        prevEl
-      } = swiper.navigation;
-      if (swiper.params.loop) {
-        toggleEl(prevEl, false);
-        toggleEl(nextEl, false);
-        return;
-      }
-      toggleEl(prevEl, swiper.isBeginning && !swiper.params.rewind);
-      toggleEl(nextEl, swiper.isEnd && !swiper.params.rewind);
-    }
-    function onPrevClick(e) {
-      e.preventDefault();
-      if (swiper.isBeginning && !swiper.params.loop && !swiper.params.rewind) return;
-      swiper.slidePrev();
-      emit('navigationPrev');
-    }
-    function onNextClick(e) {
-      e.preventDefault();
-      if (swiper.isEnd && !swiper.params.loop && !swiper.params.rewind) return;
-      swiper.slideNext();
-      emit('navigationNext');
-    }
-    function init() {
-      const params = swiper.params.navigation;
-      swiper.params.navigation = createElementIfNotDefined(swiper, swiper.originalParams.navigation, swiper.params.navigation, {
-        nextEl: 'swiper-button-next',
-        prevEl: 'swiper-button-prev'
-      });
-      if (!(params.nextEl || params.prevEl)) return;
-      let nextEl = getEl(params.nextEl);
-      let prevEl = getEl(params.prevEl);
-      Object.assign(swiper.navigation, {
-        nextEl,
-        prevEl
-      });
-      nextEl = makeElementsArray(nextEl);
-      prevEl = makeElementsArray(prevEl);
-      const initButton = (el, dir) => {
-        if (el) {
-          if (params.addIcons && el.matches('.swiper-button-next,.swiper-button-prev') && !el.querySelector('svg')) {
-            const tempEl = document.createElement('div');
-            setInnerHTML(tempEl, arrowSvg);
-            el.appendChild(tempEl.querySelector('svg'));
-            tempEl.remove();
-          }
-          el.addEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
-        }
-        if (!swiper.enabled && el) {
-          el.classList.add(...params.lockClass.split(' '));
-        }
-      };
-      nextEl.forEach(el => initButton(el, 'next'));
-      prevEl.forEach(el => initButton(el, 'prev'));
-    }
-    function destroy() {
-      let {
-        nextEl,
-        prevEl
-      } = swiper.navigation;
-      nextEl = makeElementsArray(nextEl);
-      prevEl = makeElementsArray(prevEl);
-      const destroyButton = (el, dir) => {
-        el.removeEventListener('click', dir === 'next' ? onNextClick : onPrevClick);
-        el.classList.remove(...swiper.params.navigation.disabledClass.split(' '));
-      };
-      nextEl.forEach(el => destroyButton(el, 'next'));
-      prevEl.forEach(el => destroyButton(el, 'prev'));
-    }
-    on('init', () => {
-      if (swiper.params.navigation.enabled === false) {
-        // eslint-disable-next-line
-        disable();
-      } else {
-        init();
-        update();
-      }
-    });
-    on('toEdge fromEdge lock unlock', () => {
-      update();
-    });
-    on('destroy', () => {
-      destroy();
-    });
-    on('enable disable', () => {
-      let {
-        nextEl,
-        prevEl
-      } = swiper.navigation;
-      nextEl = makeElementsArray(nextEl);
-      prevEl = makeElementsArray(prevEl);
-      if (swiper.enabled) {
-        update();
-        return;
-      }
-      [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.add(swiper.params.navigation.lockClass));
-    });
-    on('click', (_s, e) => {
-      let {
-        nextEl,
-        prevEl
-      } = swiper.navigation;
-      nextEl = makeElementsArray(nextEl);
-      prevEl = makeElementsArray(prevEl);
-      const targetEl = e.target;
-      let targetIsButton = prevEl.includes(targetEl) || nextEl.includes(targetEl);
-      if (swiper.isElement && !targetIsButton) {
-        const path = e.path || e.composedPath && e.composedPath();
-        if (path) {
-          targetIsButton = path.find(pathEl => nextEl.includes(pathEl) || prevEl.includes(pathEl));
-        }
-      }
-      if (swiper.params.navigation.hideOnClick && !targetIsButton) {
-        if (swiper.pagination && swiper.params.pagination && swiper.params.pagination.clickable && (swiper.pagination.el === targetEl || swiper.pagination.el.contains(targetEl))) return;
-        let isHidden;
-        if (nextEl.length) {
-          isHidden = nextEl[0].classList.contains(swiper.params.navigation.hiddenClass);
-        } else if (prevEl.length) {
-          isHidden = prevEl[0].classList.contains(swiper.params.navigation.hiddenClass);
-        }
-        if (isHidden === true) {
-          emit('navigationShow');
-        } else {
-          emit('navigationHide');
-        }
-        [...nextEl, ...prevEl].filter(el => !!el).forEach(el => el.classList.toggle(swiper.params.navigation.hiddenClass));
-      }
-    });
-    const enable = () => {
-      swiper.el.classList.remove(...swiper.params.navigation.navigationDisabledClass.split(' '));
-      init();
-      update();
-    };
-    const disable = () => {
-      swiper.el.classList.add(...swiper.params.navigation.navigationDisabledClass.split(' '));
-      destroy();
-    };
-    Object.assign(swiper.navigation, {
-      enable,
-      disable,
-      update,
-      init,
-      destroy
-    });
-  }
-
   function effectInit(params) {
     const {
       effect,
@@ -6049,8 +6184,11 @@
    */
 
 
-  const __iconNode$4 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-  const ChevronDown = createLucideIcon("chevron-down", __iconNode$4);
+  const __iconNode$8 = [
+    ["path", { d: "m11 17-5-5 5-5", key: "13zhaf" }],
+    ["path", { d: "m18 17-5-5 5-5", key: "h8a8et" }]
+  ];
+  const ChevronsLeft = createLucideIcon("chevrons-left", __iconNode$8);
 
   /**
    * @license lucide-react v0.562.0 - ISC
@@ -6060,7 +6198,49 @@
    */
 
 
-  const __iconNode$3 = [
+  const __iconNode$7 = [
+    ["path", { d: "m6 17 5-5-5-5", key: "xnjwq" }],
+    ["path", { d: "m13 17 5-5-5-5", key: "17xmmf" }]
+  ];
+  const ChevronsRight = createLucideIcon("chevrons-right", __iconNode$7);
+
+  /**
+   * @license lucide-react v0.562.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const __iconNode$6 = [
+    ["path", { d: "m17 11-5-5-5 5", key: "e8nh98" }],
+    ["path", { d: "m17 18-5-5-5 5", key: "2avn1x" }]
+  ];
+  const ChevronsUp = createLucideIcon("chevrons-up", __iconNode$6);
+
+  /**
+   * @license lucide-react v0.562.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const __iconNode$5 = [
+    ["rect", { x: "14", y: "3", width: "5", height: "18", rx: "1", key: "kaeet6" }],
+    ["rect", { x: "5", y: "3", width: "5", height: "18", rx: "1", key: "1wsw3u" }]
+  ];
+  const Pause = createLucideIcon("pause", __iconNode$5);
+
+  /**
+   * @license lucide-react v0.562.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const __iconNode$4 = [
     [
       "path",
       {
@@ -6069,7 +6249,7 @@
       }
     ]
   ];
-  const Play = createLucideIcon("play", __iconNode$3);
+  const Play = createLucideIcon("play", __iconNode$4);
 
   /**
    * @license lucide-react v0.562.0 - ISC
@@ -6079,7 +6259,7 @@
    */
 
 
-  const __iconNode$2 = [
+  const __iconNode$3 = [
     [
       "path",
       {
@@ -6090,7 +6270,7 @@
     ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
     ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
   ];
-  const Volume2 = createLucideIcon("volume-2", __iconNode$2);
+  const Volume2 = createLucideIcon("volume-2", __iconNode$3);
 
   /**
    * @license lucide-react v0.562.0 - ISC
@@ -6100,7 +6280,7 @@
    */
 
 
-  const __iconNode$1 = [
+  const __iconNode$2 = [
     [
       "path",
       {
@@ -6111,7 +6291,7 @@
     ["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
     ["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
   ];
-  const VolumeX = createLucideIcon("volume-x", __iconNode$1);
+  const VolumeX = createLucideIcon("volume-x", __iconNode$2);
 
   /**
    * @license lucide-react v0.562.0 - ISC
@@ -6121,616 +6301,409 @@
    */
 
 
-  const __iconNode = [
+  const __iconNode$1 = [
     ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
     ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
   ];
-  const X = createLucideIcon("x", __iconNode);
+  const X = createLucideIcon("x", __iconNode$1);
+
+  /**
+   * @license lucide-react v0.562.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   */
+
+
+  const __iconNode = [
+    [
+      "path",
+      {
+        d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
+        key: "1xq2db"
+      }
+    ]
+  ];
+  const Zap = createLucideIcon("zap", __iconNode);
 
-  const defaultTranslations = {
-      swipe: 'Swipe',
+  const defaultRiyilsTranslations = {
       close: 'Close',
-      mute: 'Mute',
-      unmute: 'Unmute',
-      speedIndicator: '2x',
-      videoViewer: 'Video viewer',
-      videoInteractionArea: 'Video interaction area',
+      speedIndicator: '2x Speed',
+      forward: '10s Forward',
+      rewind: '10s Rewind',
   };
-  function RiyilsViewer({ videos, initialIndex = 0, onClose, onVideoChange, translations = defaultTranslations, progressBarColor = '#FF0000', }) {
+  const DOUBLE_TAP_DELAY = 300;
+  const LONG_PRESS_DELAY = 500;
+  const SEEK_TIME = 10;
+  const ANIMATION_DURATION = 600;
+  const SCROLL_HINT_DURATION = 1000;
+  function useLockBodyScroll() {
+      React.useEffect(() => {
+          const body = globalThis.document.body;
+          const originalStyle = globalThis.getComputedStyle(body).overflow;
+          const originalOverscroll = body.style.overscrollBehavior;
+          body.style.overflow = 'hidden';
+          body.style.overscrollBehavior = 'none';
+          return () => {
+              body.style.overflow = originalStyle;
+              body.style.overscrollBehavior = originalOverscroll;
+          };
+      }, []);
+  }
+  function RiyilsViewer({ videos, initialIndex = 0, onClose, onVideoChange, translations = {}, progressBarColor = '#fff', }) {
+      useLockBodyScroll();
+      const t = React.useMemo(() => (Object.assign(Object.assign({}, defaultRiyilsTranslations), translations)), [translations]);
       const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
-      const [isPaused, setIsPaused] = React.useState(false);
       const [isMuted, setIsMuted] = React.useState(true);
-      const [videoProgress, setVideoProgress] = React.useState(0);
-      const [isLoading, setIsLoading] = React.useState({});
+      const [progress, setProgress] = React.useState(0);
       const [isSpeedUp, setIsSpeedUp] = React.useState(false);
-      const [showSwipeTip, setShowSwipeTip] = React.useState(true);
+      const [isPlaying, setIsPlaying] = React.useState(true);
+      const [seekFeedback, setSeekFeedback] = React.useState(null);
+      const [showPlayPauseIcon, setShowPlayPauseIcon] = React.useState(false);
+      const [showScrollHint, setShowScrollHint] = React.useState(false);
       const swiperRef = React.useRef(null);
-      const videoRefs = React.useRef([]);
-      const lastTapRef = React.useRef(0);
-      const holdTimeoutRef = React.useRef(null);
+      const activeVideoRef = React.useRef(null);
+      const containerRef = React.useRef(null);
+      const longPressTimer = React.useRef(null);
+      const doubleTapTimer = React.useRef(null);
+      const lastTapTime = React.useRef(0);
+      const longPressTriggered = React.useRef(false);
       React.useEffect(() => {
-          const currentVideoElement = videoRefs.current[currentIndex];
-          if (!currentVideoElement)
+          const container = containerRef.current;
+          if (!container)
               return;
-          const updateProgress = () => {
-              const progress = (currentVideoElement.currentTime / currentVideoElement.duration) * 100;
-              setVideoProgress(progress || 0);
+          const handleContextMenu = (e) => {
+              e.preventDefault();
+              e.stopPropagation();
           };
-          currentVideoElement.addEventListener('timeupdate', updateProgress, { passive: true });
+          container.addEventListener('contextmenu', handleContextMenu);
           return () => {
-              currentVideoElement.removeEventListener('timeupdate', updateProgress);
+              container.removeEventListener('contextmenu', handleContextMenu);
           };
-      }, [currentIndex]);
+      }, []);
       React.useEffect(() => {
-          onVideoChange === null || onVideoChange === void 0 ? void 0 : onVideoChange(currentIndex);
-      }, [currentIndex, onVideoChange]);
+          const video = activeVideoRef.current;
+          if (!video)
+              return;
+          if (isPlaying) {
+              const playPromise = video.play();
+              if (playPromise !== undefined) {
+                  playPromise.catch(() => {
+                      setIsPlaying(false);
+                  });
+              }
+          }
+          else {
+              video.pause();
+          }
+      }, [currentIndex, isPlaying]);
       React.useEffect(() => {
-          setShowSwipeTip(true);
+          const video = activeVideoRef.current;
+          if (video) {
+              video.muted = isMuted;
+              video.playbackRate = isSpeedUp ? 2 : 1;
+          }
+      }, [isMuted, isSpeedUp, currentIndex]);
+      React.useEffect(() => {
+          setShowScrollHint(true);
           const timer = setTimeout(() => {
-              setShowSwipeTip(false);
-          }, 3000);
+              setShowScrollHint(false);
+          }, SCROLL_HINT_DURATION);
           return () => clearTimeout(timer);
       }, [currentIndex]);
       React.useEffect(() => {
-          videoRefs.current.forEach((video, index) => {
-              if (video) {
-                  if (index === currentIndex && !isPaused) {
-                      video.playbackRate = isSpeedUp ? 2 : 1;
-                      video.play().catch(() => { });
-                  }
-                  else {
-                      video.pause();
-                  }
+          if (swiperRef.current) {
+              swiperRef.current.virtual.update(true);
+              swiperRef.current.update();
+              if (swiperRef.current.keyboard) {
+                  swiperRef.current.keyboard.enable();
               }
+          }
+      }, [videos.length]);
+      const handleTimeUpdate = React.useCallback((e) => {
+          const vid = e.currentTarget;
+          if (vid.duration) {
+              setProgress((vid.currentTime / vid.duration) * 100);
+          }
+      }, []);
+      const handleTouchStart = React.useCallback(() => {
+          longPressTriggered.current = false;
+          longPressTimer.current = setTimeout(() => {
+              setIsSpeedUp(true);
+              longPressTriggered.current = true;
+          }, LONG_PRESS_DELAY);
+      }, []);
+      const handleTouchEnd = React.useCallback(() => {
+          if (longPressTimer.current) {
+              clearTimeout(longPressTimer.current);
+          }
+          setIsSpeedUp(false);
+      }, []);
+      const handleSeek = React.useCallback((seconds) => {
+          const video = activeVideoRef.current;
+          if (!video)
+              return;
+          video.currentTime = Math.min(Math.max(video.currentTime + seconds, 0), video.duration);
+          setSeekFeedback(seconds > 0 ? 'forward' : 'rewind');
+          setTimeout(() => setSeekFeedback(null), ANIMATION_DURATION);
+      }, []);
+      const togglePlay = React.useCallback(() => {
+          setIsPlaying(prev => {
+              const newState = !prev;
+              setShowPlayPauseIcon(true);
+              setTimeout(() => setShowPlayPauseIcon(false), ANIMATION_DURATION);
+              return newState;
           });
-      }, [currentIndex, isPaused, isSpeedUp]);
+      }, []);
+      const handleZoneClick = React.useCallback((zone, e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (longPressTriggered.current) {
+              longPressTriggered.current = false;
+              return;
+          }
+          const now = Date.now();
+          const timeDiff = now - lastTapTime.current;
+          if (timeDiff < DOUBLE_TAP_DELAY && timeDiff > 0) {
+              if (doubleTapTimer.current) {
+                  clearTimeout(doubleTapTimer.current);
+              }
+              if (zone === 'right') {
+                  handleSeek(SEEK_TIME);
+              }
+              else if (zone === 'left') {
+                  handleSeek(-SEEK_TIME);
+              }
+              else {
+                  togglePlay();
+              }
+              lastTapTime.current = 0;
+          }
+          else {
+              lastTapTime.current = now;
+              doubleTapTimer.current = setTimeout(() => {
+                  togglePlay();
+                  lastTapTime.current = 0;
+              }, DOUBLE_TAP_DELAY);
+          }
+      }, [handleSeek, togglePlay]);
+      const handleMuteToggle = React.useCallback((e) => {
+          e.stopPropagation();
+          setIsMuted(prev => !prev);
+      }, []);
       React.useEffect(() => {
           const handleKeyDown = (e) => {
-              switch (e.key) {
+              if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+                  return;
+              }
+              switch (e.code) {
                   case 'Escape':
                       e.preventDefault();
-                      onClose === null || onClose === void 0 ? void 0 : onClose();
+                      onClose();
                       break;
-                  case ' ':
+                  case 'Space':
                       e.preventDefault();
-                      setIsPaused((prev) => !prev);
+                      togglePlay();
                       break;
-                  case 'm':
-                  case 'M':
+                  case 'KeyM':
                       e.preventDefault();
                       setIsMuted((prev) => !prev);
                       break;
               }
           };
           globalThis.addEventListener('keydown', handleKeyDown);
-          return () => globalThis.removeEventListener('keydown', handleKeyDown);
-      }, [onClose]);
-      const handleSlideChange = (swiper) => {
-          setCurrentIndex(swiper.activeIndex);
-          setVideoProgress(0);
-      };
-      const handleVideoClick = () => {
-          const now = Date.now();
-          const timeSinceLastTap = now - lastTapRef.current;
-          if (timeSinceLastTap < 300 && timeSinceLastTap > 0) {
-              setIsPaused((prev) => !prev);
-              lastTapRef.current = 0;
-          }
-          else {
-              lastTapRef.current = now;
-          }
-      };
-      const handleTouchStart = (e, index) => {
-          const touch = e.touches[0];
-          const target = e.currentTarget;
-          const rect = target.getBoundingClientRect();
-          const x = touch.clientX - rect.left;
-          const width = rect.width;
-          if (x > width * 0.6 && index === currentIndex) {
-              holdTimeoutRef.current = setTimeout(() => {
-                  setIsSpeedUp(true);
-              }, 100);
-          }
-      };
-      const clearSpeedUp = () => {
-          if (holdTimeoutRef.current) {
-              clearTimeout(holdTimeoutRef.current);
-              holdTimeoutRef.current = null;
-          }
-          setIsSpeedUp(false);
-      };
-      const handleTouchEnd = clearSpeedUp;
-      const handleMouseDown = (e, index) => {
-          const target = e.currentTarget;
-          const rect = target.getBoundingClientRect();
-          const x = e.clientX - rect.left;
-          const width = rect.width;
-          if (x > width * 0.6 && index === currentIndex) {
-              holdTimeoutRef.current = setTimeout(() => {
-                  setIsSpeedUp(true);
-              }, 100);
-          }
-      };
-      const handleMouseUp = clearSpeedUp;
-      const goToNextVideo = () => {
-          var _a;
-          if (currentIndex < videos.length - 1) {
-              (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideNext();
-          }
-          else {
-              onClose === null || onClose === void 0 ? void 0 : onClose();
+          return () => {
+              globalThis.removeEventListener('keydown', handleKeyDown);
+          };
+      }, [onClose, togglePlay]);
+      const handleSlideChange = React.useCallback((s) => {
+          setCurrentIndex(s.activeIndex);
+          setProgress(0);
+          setIsPlaying(true);
+          setSeekFeedback(null);
+          if (onVideoChange) {
+              onVideoChange(s.activeIndex);
           }
-      };
-      return (React.createElement("dialog", { open: true, className: "react-riyils-viewer", onContextMenu: (e) => e.preventDefault(), "aria-label": translations.videoViewer, style: {
-              touchAction: 'pan-y',
-              WebkitTapHighlightColor: 'transparent',
-              userSelect: 'none',
-              WebkitUserSelect: 'none',
-              overscrollBehavior: 'none',
-          } },
-          React.createElement(Swiper, { modules: [Keyboard, Mousewheel], direction: "vertical", slidesPerView: 1, speed: 500, threshold: 5, touchRatio: 1, touchAngle: 45, followFinger: true, shortSwipes: true, longSwipes: true, longSwipesRatio: 0.5, longSwipesMs: 300, preventInteractionOnTransition: false, keyboard: { enabled: true }, mousewheel: { forceToAxis: true, sensitivity: 1 }, initialSlide: initialIndex, onSwiper: (swiper) => {
-                  swiperRef.current = swiper;
-              }, onSlideChange: handleSlideChange, onReachEnd: () => {
-                  setTimeout(() => {
-                      onClose === null || onClose === void 0 ? void 0 : onClose();
-                  }, 300);
-              }, style: { width: '100%', height: '100%' } }, videos.map((video, index) => {
-              const isActive = index === currentIndex;
-              return (React.createElement(SwiperSlide, { key: video.id },
-                  React.createElement("section", { className: "react-riyils-viewer__section", "aria-label": `Video ${index + 1} of ${videos.length}` },
-                      React.createElement("button", { type: "button", className: "react-riyils-viewer__interaction-area", onTouchStart: (e) => handleTouchStart(e, index), onTouchEnd: handleTouchEnd, onMouseDown: (e) => handleMouseDown(e, index), onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onContextMenu: (e) => e.preventDefault(), "aria-label": translations.videoInteractionArea }),
-                      React.createElement("video", { ref: (el) => {
-                              videoRefs.current[index] = el;
-                          }, src: video.videoUrl, "aria-label": `Video ${index + 1}`, onClick: handleVideoClick, onContextMenu: (e) => e.preventDefault(), className: "react-riyils-viewer__video", playsInline: true, muted: isMuted, preload: Math.abs(index - currentIndex) <= 1 ? 'auto' : 'metadata', onLoadStart: () => {
-                              setIsLoading(prev => (Object.assign(Object.assign({}, prev), { [index]: true })));
-                          }, onLoadedData: () => {
-                              setIsLoading(prev => (Object.assign(Object.assign({}, prev), { [index]: false })));
-                          }, onWaiting: () => {
-                              setIsLoading(prev => (Object.assign(Object.assign({}, prev), { [index]: true })));
-                          }, onCanPlay: () => {
-                              setIsLoading(prev => (Object.assign(Object.assign({}, prev), { [index]: false })));
-                          }, onEnded: (e) => {
-                              if (isActive) {
-                                  const target = e.target;
-                                  if (target.currentTime >= target.duration - 0.1) {
-                                      goToNextVideo();
-                                  }
-                              }
-                          }, onTimeUpdate: (e) => {
-                              if (isActive) {
-                                  const target = e.target;
-                                  setVideoProgress((target.currentTime / target.duration) * 100);
-                              }
-                          } },
-                          React.createElement("track", { kind: "captions" })),
-                      isLoading[index] && isActive && (React.createElement("div", { className: "react-riyils-viewer__loading" },
-                          React.createElement("div", { className: "react-riyils-viewer__loading-spinner" }))),
-                      isPaused && isActive && (React.createElement("div", { className: "react-riyils-viewer__pause-indicator" },
-                          React.createElement("div", { className: "react-riyils-viewer__pause-icon" },
-                              React.createElement("div", { className: "react-riyils-viewer__pause-bars", style: { borderLeftColor: 'rgba(255, 255, 255, 0.9)', borderRightColor: 'rgba(255, 255, 255, 0.9)' } })))),
-                      isSpeedUp && isActive && (React.createElement("div", { className: "react-riyils-viewer__speed-indicator" },
-                          React.createElement("div", { className: "react-riyils-viewer__speed-badge" },
-                              React.createElement("span", { className: "react-riyils-viewer__speed-text" }, translations.speedIndicator)))))));
-          })),
-          React.createElement("div", { className: "react-riyils-viewer__overlay" },
-              React.createElement("div", { className: "react-riyils-viewer__header" },
-                  React.createElement("div", { className: "react-riyils-viewer__header-content" },
-                      React.createElement("div", { className: "react-riyils-viewer__progress-wrapper" },
-                          React.createElement("div", { className: "react-riyils-viewer__progress-track", style: { backgroundColor: `${progressBarColor}30` } },
-                              React.createElement("div", { className: "react-riyils-viewer__progress-bar", style: { width: `${videoProgress}%`, backgroundColor: progressBarColor } }))),
-                      React.createElement("button", { onClick: onClose, className: "react-riyils-viewer__close-button", "aria-label": translations.close },
-                          React.createElement(X, { className: "react-riyils-viewer__close-icon" })))),
-              currentIndex === 0 && showSwipeTip && (React.createElement("div", { className: "react-riyils-viewer__swipe-tip" },
-                  React.createElement("div", { className: "react-riyils-viewer__swipe-tip-content" },
-                      React.createElement("p", { className: "react-riyils-viewer__swipe-tip-text" }, translations.swipe),
-                      React.createElement("div", { className: "react-riyils-viewer__swipe-tip-icon-wrapper" },
-                          React.createElement(ChevronDown, { className: "react-riyils-viewer__swipe-tip-icon react-riyils-viewer__swipe-tip-icon--1" }),
-                          React.createElement(ChevronDown, { className: "react-riyils-viewer__swipe-tip-icon react-riyils-viewer__swipe-tip-icon--2" }),
-                          React.createElement(ChevronDown, { className: "react-riyils-viewer__swipe-tip-icon react-riyils-viewer__swipe-tip-icon--3" }))))),
-              showSwipeTip && currentIndex > 0 && (React.createElement("div", { className: "react-riyils-viewer__swipe-tip" },
-                  React.createElement("div", { className: "react-riyils-viewer__swipe-tip-content" },
-                      React.createElement("p", { className: "react-riyils-viewer__swipe-tip-text" }, translations.swipe),
-                      React.createElement("div", { className: "react-riyils-viewer__swipe-tip-icon-wrapper" },
-                          React.createElement(ChevronDown, { className: "react-riyils-viewer__swipe-tip-icon react-riyils-viewer__swipe-tip-icon--1" }),
-                          React.createElement(ChevronDown, { className: "react-riyils-viewer__swipe-tip-icon react-riyils-viewer__swipe-tip-icon--2" }),
-                          React.createElement(ChevronDown, { className: "react-riyils-viewer__swipe-tip-icon react-riyils-viewer__swipe-tip-icon--3" }))))),
-              React.createElement("div", { className: "react-riyils-viewer__mute-button-wrapper" },
-                  React.createElement("button", { onClick: () => setIsMuted(!isMuted), className: "react-riyils-viewer__mute-button", "aria-label": isMuted ? translations.unmute : translations.mute }, isMuted ? (React.createElement(VolumeX, { className: "react-riyils-viewer__mute-icon" })) : (React.createElement(Volume2, { className: "react-riyils-viewer__mute-icon" })))))));
+      }, [onVideoChange]);
+      const preventDefaultMenu = React.useCallback((e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          return false;
+      }, []);
+      return (React.createElement("div", { ref: containerRef, className: "react-riyils-viewer", style: { WebkitTouchCallout: 'none' } },
+          React.createElement("div", { className: "react-riyils-viewer__gradient-top" }),
+          React.createElement("div", { className: "react-riyils-viewer__close-container" },
+              React.createElement("button", { type: "button", onClick: onClose, className: "react-riyils-viewer__btn react-riyils-viewer__btn-close", "aria-label": t.close },
+                  React.createElement(X, { size: 24, strokeWidth: 2.5 }))),
+          React.createElement(Swiper, { modules: [Keyboard, Mousewheel, Virtual], direction: "vertical", initialSlide: initialIndex, onSwiper: (s) => (swiperRef.current = s), onSlideChange: handleSlideChange, className: "h-full w-full", style: { height: '100%', width: '100%' }, threshold: 10, speed: 400, keyboard: { enabled: true }, mousewheel: { enabled: true, thresholdDelta: 50 }, virtual: { enabled: true, addSlidesBefore: 1, addSlidesAfter: 2 } }, videos.map((video, index) => (React.createElement(SwiperSlide, { key: video.id, virtualIndex: index, className: "react-riyils-viewer__slide" }, index === currentIndex ? (React.createElement(React.Fragment, null,
+              React.createElement("fieldset", { className: "react-riyils-viewer__gesture-grid", onContextMenu: preventDefaultMenu, tabIndex: -1, style: { border: 0, margin: 0, padding: 0 } },
+                  React.createElement("button", { type: "button", className: "react-riyils-viewer__gesture-zone", onClick: (e) => handleZoneClick('left', e), "aria-label": t.rewind }),
+                  React.createElement("button", { type: "button", className: "react-riyils-viewer__gesture-zone", onClick: (e) => handleZoneClick('center', e), "aria-label": isPlaying ? 'Pause' : 'Play' }),
+                  React.createElement("button", { type: "button", className: "react-riyils-viewer__gesture-zone", onClick: (e) => handleZoneClick('right', e), onTouchStart: handleTouchStart, onTouchEnd: handleTouchEnd, onMouseDown: handleTouchStart, onMouseUp: handleTouchEnd, "aria-label": t.forward })),
+              React.createElement("div", { className: `react-riyils-viewer__feedback-speed ${isSpeedUp ? 'visible' : ''}` },
+                  React.createElement(Zap, { size: 16, fill: "currentColor", className: "text-yellow-400" }),
+                  React.createElement("span", null, t.speedIndicator)),
+              !isPlaying && (React.createElement("div", { className: "react-riyils-viewer__feedback-center" },
+                  React.createElement("div", { className: "react-riyils-viewer__feedback-icon animate-in" },
+                      React.createElement(Play, { size: 32, fill: "white" })))),
+              isPlaying && showPlayPauseIcon && (React.createElement("div", { className: "react-riyils-viewer__feedback-center" },
+                  React.createElement("div", { className: "react-riyils-viewer__feedback-icon animate-out" },
+                      React.createElement(Pause, { size: 32, fill: "white" })))),
+              seekFeedback && (React.createElement("div", { className: `react-riyils-viewer__feedback-seek ${seekFeedback === 'forward' ? 'right' : 'left'}` },
+                  React.createElement("div", { className: "react-riyils-viewer__seek-circle" },
+                      seekFeedback === 'forward' ? React.createElement(ChevronsRight, { size: 32 }) : React.createElement(ChevronsLeft, { size: 32 }),
+                      React.createElement("span", { className: "react-riyils-viewer__seek-text" }, "10s")))),
+              React.createElement("video", { ref: activeVideoRef, src: video.videoUrl, className: "react-riyils-viewer__video", playsInline: true, loop: true, muted: isMuted, autoPlay: true, poster: video.thumbnailUrl, onTimeUpdate: handleTimeUpdate, onContextMenu: preventDefaultMenu, disablePictureInPicture: true, disableRemotePlayback: true, "aria-label": `Video ${video.id}` },
+                  React.createElement("track", { kind: "captions", src: video.captionUrl || '', label: "English" })))) : (React.createElement("div", { className: "react-riyils-viewer__slide" },
+              React.createElement("div", { className: "react-riyils-viewer__loader" }))))))),
+          React.createElement("div", { className: "react-riyils-viewer__scroll-hint", style: {
+                  position: 'absolute',
+                  bottom: '80px',
+                  left: '50%',
+                  transform: 'translateX(-50%)',
+                  zIndex: 45,
+                  pointerEvents: 'none',
+                  opacity: showScrollHint ? 1 : 0,
+                  transition: 'opacity 0.5s ease-in-out',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                  animation: showScrollHint ? 'rr-bounce 1s infinite' : 'none',
+              } },
+              React.createElement(ChevronsUp, { size: 32, color: "rgba(255, 255, 255, 0.7)" })),
+          React.createElement("div", { className: "react-riyils-viewer__gradient-bottom" },
+              React.createElement("div", { className: "react-riyils-viewer__controls-row" },
+                  React.createElement("button", { type: "button", onClick: handleMuteToggle, className: "react-riyils-viewer__btn react-riyils-viewer__btn-mute" }, isMuted ? React.createElement(VolumeX, { size: 24 }) : React.createElement(Volume2, { size: 24 }))),
+              React.createElement("div", { className: "react-riyils-viewer__progress-container" },
+                  React.createElement("div", { className: "react-riyils-viewer__progress-fill", style: { width: `${progress}%`, background: progressBarColor } }))),
+          React.createElement("style", null, `
+        @keyframes rr-bounce {
+          0%, 100% { transform: translateX(-50%) translateY(0); }
+          50% { transform: translateX(-50%) translateY(-10px); }
+        }
+      `)));
   }
 
   const defaultReactRiyilsTranslations = {
-      watchFullVideo: 'Watch Full Video',
-      videoProgress: 'Video progress',
-  };
-  const VIDEO_DURATION_LIMIT = 10;
-  const PRELOAD_DISTANCE = 1;
-  const CONTAINER_HEIGHT_MOBILE = 380;
-  const CONTAINER_HEIGHT_DESKTOP = 500;
-  const PREVIEW_DURATION = 2;
-  const getPreloadStrategy = (index, activeIndex, preloadDist) => {
-      if (index <= 3)
-          return 'auto';
-      const distance = Math.abs(index - activeIndex);
-      if (distance <= preloadDist)
-          return 'auto';
-      if (distance <= 2)
-          return 'metadata';
-      return 'none';
-  };
-  const handleVideoPlayWithFallback = (video, hasInteracted, setHasInteracted) => {
-      video.play().catch((error) => {
-          console.warn('Video play failed:', error);
-          if (!hasInteracted) {
-              const playOnInteraction = () => {
-                  video.play().catch(() => { });
-                  setHasInteracted(true);
-                  document.removeEventListener('touchstart', playOnInteraction);
-                  document.removeEventListener('click', playOnInteraction);
-              };
-              document.addEventListener('touchstart', playOnInteraction, { once: true });
-              document.addEventListener('click', playOnInteraction, { once: true });
-          }
-      });
+      ctaButton: 'Watch Full Video',
+      carouselAriaLabel: 'Video stories',
+      slideActiveAriaLabel: 'Watch full video',
+      slideInactiveAriaLabel: 'Go to slide',
   };
-  const safePlayVideo = (video) => {
-      video.play().catch((error) => console.warn('Video preload failed:', error));
-  };
-  function ReactRiyils({ videos, currentIndex, onVideoClick, onVideoChange, translations = defaultReactRiyilsTranslations, containerHeightMobile = CONTAINER_HEIGHT_MOBILE, containerHeightDesktop = CONTAINER_HEIGHT_DESKTOP, progressBarColor = '#3B82F6', videoDurationLimit = VIDEO_DURATION_LIMIT, preloadDistance = PRELOAD_DISTANCE, previewDuration = PREVIEW_DURATION, autoPlay = true, }) {
-      const swiperRef = React.useRef(null);
-      const videoRefs = React.useRef([]);
-      const containerRef = React.useRef(null);
-      const [activeIndex, setActiveIndex] = React.useState(currentIndex);
-      const [isLoading, setIsLoading] = React.useState({});
-      const [hasInteracted, setHasInteracted] = React.useState(false);
-      const wheelTimeoutRef = React.useRef(null);
-      const isWheelScrollingRef = React.useRef(false);
-      const dynamicStretch = Math.round(containerHeightDesktop / 9);
-      const setVideoLoading = (index, loading) => {
-          setIsLoading(prev => (Object.assign(Object.assign({}, prev), { [index]: loading })));
-      };
-      const handleVideoLoadedData = (e, index) => {
-          setVideoLoading(index, false);
-          const videoEl = e.target;
-          const distance = Math.abs(index - activeIndex);
-          if (videoEl.readyState >= 2) {
-              if (index === activeIndex) {
-                  videoEl.style.opacity = '1';
-                  videoEl.loop = true;
-                  videoEl.currentTime = 0;
-                  if (autoPlay) {
-                      handleVideoPlayWithFallback(videoEl, hasInteracted, setHasInteracted);
-                  }
-              }
-              else if (distance <= preloadDistance) {
-                  videoEl.style.opacity = '0.95';
-                  videoEl.loop = false;
-                  videoEl.currentTime = 0;
-                  if (autoPlay) {
-                      safePlayVideo(videoEl);
-                  }
-              }
-          }
-      };
-      React.useEffect(() => {
-          if (swiperRef.current && currentIndex !== activeIndex) {
-              swiperRef.current.slideTo(currentIndex, 400);
-          }
-      }, [currentIndex, activeIndex]);
+  const SlideItem = React.memo(({ video, isVisualActive, index, onVideoClick, t, shouldLoad }) => {
+      const videoRef = React.useRef(null);
       React.useEffect(() => {
-          const handleResize = () => {
-              if (swiperRef.current) {
-                  swiperRef.current.update();
-                  swiperRef.current.slideTo(activeIndex, 0);
+          const el = videoRef.current;
+          if (!el)
+              return;
+          const handleTimeUpdate = () => {
+              if (!isVisualActive) {
+                  if (el.currentTime >= 2) {
+                      el.currentTime = 0;
+                      el.play().catch(() => { });
+                  }
               }
           };
-          window.addEventListener('resize', handleResize);
-          const timer = setTimeout(() => {
-              if (swiperRef.current) {
-                  swiperRef.current.update();
-                  swiperRef.current.slideTo(currentIndex, 0);
-              }
-          }, 100);
-          if (containerRef.current) {
-              const style = containerRef.current.style;
-              style.touchAction = 'pan-y pan-x';
-              style.webkitTapHighlightColor = 'transparent';
-              style.userSelect = 'none';
-              style.webkitUserSelect = 'none';
-              const handleWheel = (e) => {
-                  var _a, _b;
-                  if (isWheelScrollingRef.current) {
-                      e.preventDefault();
-                      e.stopPropagation();
-                      return;
-                  }
-                  if (Math.abs(e.deltaX) < 30)
-                      return;
-                  e.preventDefault();
-                  e.stopPropagation();
-                  isWheelScrollingRef.current = true;
-                  if (e.deltaX > 0) {
-                      (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideNext();
-                  }
-                  else if (e.deltaX < 0) {
-                      (_b = swiperRef.current) === null || _b === void 0 ? void 0 : _b.slidePrev();
-                  }
-                  if (wheelTimeoutRef.current) {
-                      clearTimeout(wheelTimeoutRef.current);
-                  }
-                  wheelTimeoutRef.current = setTimeout(() => {
-                      isWheelScrollingRef.current = false;
-                  }, 1000);
-              };
-              containerRef.current.addEventListener('wheel', handleWheel, { passive: false });
-              return () => {
-                  var _a;
-                  window.removeEventListener('resize', handleResize);
-                  clearTimeout(timer);
-                  if (wheelTimeoutRef.current)
-                      clearTimeout(wheelTimeoutRef.current);
-                  (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('wheel', handleWheel);
-              };
+          el.addEventListener('timeupdate', handleTimeUpdate);
+          if (isVisualActive) {
+              el.currentTime = 0;
+              el.play().catch(() => { });
+          }
+          else if (shouldLoad) {
+              el.muted = true;
+              el.currentTime = 0;
           }
           return () => {
-              window.removeEventListener('resize', handleResize);
-              clearTimeout(timer);
-          };
-      }, []);
-      React.useEffect(() => {
-          const videos = videoRefs.current;
-          return () => {
-              videos.forEach(video => {
-                  if (video) {
-                      video.pause();
-                      video.removeAttribute('src');
-                      video.load();
-                  }
-              });
+              el.removeEventListener('timeupdate', handleTimeUpdate);
           };
-      }, []);
+      }, [isVisualActive, shouldLoad]);
+      return (React.createElement("button", { type: "button", className: "react-riyils__slide-button", onClick: () => onVideoClick(index), "aria-label": isVisualActive ? t.slideActiveAriaLabel : t.slideInactiveAriaLabel },
+          React.createElement("div", { className: `react-riyils__card ${isVisualActive ? 'active' : ''}` },
+              React.createElement("video", { ref: videoRef, src: shouldLoad ? video.videoUrl : undefined, muted: true, playsInline: true, loop: isVisualActive, className: "react-riyils__video", preload: shouldLoad ? "auto" : "metadata" }),
+              isVisualActive && (React.createElement("div", { className: "react-riyils__cta-container" },
+                  React.createElement("span", { className: "react-riyils__cta-button" },
+                      React.createElement(Play, { size: 14, fill: "currentColor" }),
+                      t.ctaButton))))));
+  });
+  SlideItem.displayName = 'SlideItem';
+  function ReactRiyils({ videos, currentIndex = 0, onVideoClick, onVideoChange, translations = {}, containerHeightMobile, containerHeightDesktop, autoPlay = true, }) {
+      const swiperRef = React.useRef(null);
+      const [activeIndex, setActiveIndex] = React.useState(currentIndex);
+      const t = React.useMemo(() => (Object.assign(Object.assign({}, defaultReactRiyilsTranslations), translations)), [translations]);
+      const containerStyle = React.useMemo(() => ({
+          '--container-height-mobile': containerHeightMobile ? `${containerHeightMobile}px` : undefined,
+          '--container-height-desktop': containerHeightDesktop ? `${containerHeightDesktop}px` : undefined,
+      }), [containerHeightMobile, containerHeightDesktop]);
       React.useEffect(() => {
-          const timer = setTimeout(() => {
-              videoRefs.current.forEach((video, index) => {
-                  if (!video)
-                      return;
-                  const distance = Math.abs(index - activeIndex);
-                  if (index === activeIndex) {
-                      video.style.opacity = '1';
-                      video.loop = true;
-                      if (video.readyState >= 2) {
-                          video.currentTime = 0;
-                          if (autoPlay) {
-                              handleVideoPlayWithFallback(video, hasInteracted, setHasInteracted);
-                          }
+          const swiper = swiperRef.current;
+          if (swiper && !swiper.destroyed) {
+              if (swiper.activeIndex !== currentIndex) {
+                  swiper.slideTo(currentIndex, 0);
+              }
+              swiper.update();
+              const timer = setTimeout(() => {
+                  if (!swiper.destroyed) {
+                      swiper.updateSize();
+                      swiper.updateSlides();
+                      swiper.updateProgress();
+                      if (swiper.virtual) {
+                          swiper.virtual.update(true);
                       }
-                  }
-                  else if (distance <= preloadDistance) {
-                      video.style.opacity = '0.95';
-                      video.loop = false;
-                      if (video.readyState >= 2) {
-                          video.currentTime = 0;
-                          if (autoPlay) {
-                              safePlayVideo(video);
-                          }
+                      if (swiper.activeIndex !== currentIndex) {
+                          swiper.slideTo(currentIndex, 0);
                       }
                   }
-              });
-          }, 100);
-          return () => clearTimeout(timer);
-      }, [activeIndex, hasInteracted]);
-      const handleSlideChange = (swiper) => {
-          const activeIdx = swiper.activeIndex;
-          setActiveIndex(activeIdx);
-          onVideoChange(activeIdx);
-          videoRefs.current.forEach((video, index) => {
-              if (!video)
-                  return;
-              const distance = Math.abs(index - activeIdx);
-              if (index === activeIdx) {
-                  video.style.opacity = '1';
-                  video.loop = true;
-                  if (video.readyState >= 2) {
-                      video.currentTime = 0;
-                      video.play().catch((error) => console.warn('Video play failed:', error));
-                  }
-              }
-              else if (distance <= PRELOAD_DISTANCE) {
-                  video.style.opacity = '0.95';
-                  video.loop = false;
-                  if (video.readyState >= 2) {
-                      video.currentTime = 0;
-                      video.play().catch((error) => console.warn('Video preload failed:', error));
-                  }
-              }
-              else {
-                  video.pause();
-                  video.currentTime = 0;
-                  video.loop = false;
-              }
-          });
-      };
-      const handleTimeUpdate = (e, index) => {
-          var _a, _b;
-          const target = e.currentTarget;
-          const isActive = ((_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.activeIndex) === index;
-          const distance = Math.abs(index - activeIndex);
-          if (isActive) {
-              if (target.currentTime >= videoDurationLimit) {
-                  target.currentTime = 0;
-                  target.pause();
-                  (_b = swiperRef.current) === null || _b === void 0 ? void 0 : _b.slideNext();
-              }
+              }, 100);
+              return () => clearTimeout(timer);
           }
-          else if (distance <= preloadDistance && target.currentTime >= previewDuration) {
-              target.currentTime = 0;
-              target.play().catch((error) => console.warn('Preview video replay failed:', error));
+      }, [currentIndex]);
+      React.useEffect(() => {
+          if (!swiperRef.current || swiperRef.current.destroyed)
+              return;
+          swiperRef.current.update();
+          if (swiperRef.current.virtual) {
+              swiperRef.current.virtual.update(true);
           }
-      };
-      return (React.createElement("section", { ref: containerRef, className: "react-riyils__container", "data-height-mobile": true, "data-height-desktop": true, "aria-label": "Video carousel", style: {
-              '--container-height-mobile': `${containerHeightMobile}px`,
-              '--container-height-desktop': `${containerHeightDesktop}px`,
-          } },
-          React.createElement(Swiper, { modules: [Navigation, Keyboard, EffectCoverflow, Mousewheel], onSwiper: (swiper) => {
-                  swiperRef.current = swiper;
-              }, onSlideChange: handleSlideChange, className: "react-riyils", slidesPerView: "auto", slidesPerGroup: 1, centeredSlides: true, centerInsufficientSlides: true, spaceBetween: 0, loop: false, initialSlide: currentIndex, speed: 800, threshold: 10, touchRatio: 1, touchAngle: 45, followFinger: true, shortSwipes: true, longSwipes: true, longSwipesRatio: 0.3, longSwipesMs: 300, preventInteractionOnTransition: true, touchStartPreventDefault: false, cssMode: false, keyboard: { enabled: true }, navigation: false, mousewheel: false, effect: "coverflow", resistance: true, resistanceRatio: 0, coverflowEffect: {
+      }, [videos.length]);
+      const handleSlideChange = React.useCallback((swiper) => {
+          requestAnimationFrame(() => {
+              if (swiper.activeIndex !== currentIndex) {
+                  setActiveIndex(swiper.activeIndex);
+                  onVideoChange(swiper.activeIndex);
+              }
+          });
+      }, [onVideoChange, currentIndex]);
+      return (React.createElement("section", { className: "react-riyils__container", style: containerStyle, "aria-label": t.carouselAriaLabel },
+          React.createElement(Swiper, { modules: [Keyboard, Mousewheel, EffectCoverflow, Virtual], observer: true, observeParents: true, watchSlidesProgress: true, initialSlide: currentIndex, virtual: {
+                  addSlidesBefore: 4,
+                  addSlidesAfter: 5,
+                  enabled: true,
+                  cache: false
+              }, effect: "coverflow", coverflowEffect: {
                   rotate: 0,
-                  stretch: dynamicStretch,
+                  stretch: -15,
                   depth: 100,
-                  modifier: 1,
-                  slideShadows: false,
-              }, breakpoints: {
-                  640: {
-                      spaceBetween: 0,
-                  },
-                  768: {
-                      spaceBetween: 0,
-                  },
-              }, style: {
-                  height: '100%',
-                  padding: '0',
-              } }, videos.map((video, index) => {
-              return (React.createElement(SwiperSlide, { key: video.id }, ({ isActive: slideActive }) => {
-                  return (React.createElement("button", { type: "button", className: `react-riyils__slide-button ${slideActive ? '' : 'react-riyils__slide-button--inactive'}`, onClick: () => {
-                          var _a;
-                          if (slideActive) {
-                              onVideoClick(index);
-                          }
-                          else {
-                              (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(index);
-                          }
-                      }, onKeyDown: (e) => {
-                          var _a;
-                          if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-                              if (slideActive) {
-                                  onVideoClick(index);
-                              }
-                              else {
-                                  (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(index);
-                              }
+                  modifier: 2.5,
+                  slideShadows: true,
+              }, onSwiper: (s) => {
+                  swiperRef.current = s;
+              }, onSlideChange: handleSlideChange, slidesPerView: "auto", centeredSlides: true, grabCursor: true, keyboard: { enabled: true }, mousewheel: { forceToAxis: true }, className: "react-riyils" }, videos.map((video, index) => {
+              const isSelected = index === activeIndex;
+              const distance = Math.abs(index - activeIndex);
+              const shouldLoad = distance < 4;
+              return (React.createElement(SwiperSlide, { key: video.id, virtualIndex: index },
+                  React.createElement(SlideItem, { video: video, index: index, isVisualActive: isSelected, onVideoClick: isSelected ? onVideoClick : () => {
+                          if (swiperRef.current && !swiperRef.current.destroyed) {
+                              swiperRef.current.slideTo(index);
                           }
-                      }, onContextMenu: (e) => e.preventDefault(), "aria-label": `Video ${index + 1}` },
-                      React.createElement("div", { className: `react-riyils__video-container ${slideActive
-                            ? 'react-riyils__video-container--active'
-                            : 'react-riyils__video-container--inactive'}` },
-                          React.createElement("video", { ref: (el) => {
-                                  videoRefs.current[index] = el;
-                              }, src: video.videoUrl, className: "react-riyils__video", muted: true, playsInline: true, onContextMenu: (e) => e.preventDefault(), preload: getPreloadStrategy(index, activeIndex, preloadDistance), "aria-label": `Video ${index + 1}`, onLoadStart: () => setVideoLoading(index, true), onLoadedData: (e) => handleVideoLoadedData(e, index), onWaiting: () => setVideoLoading(index, true), onCanPlay: () => setVideoLoading(index, false), onTimeUpdate: (e) => handleTimeUpdate(e, index) }),
-                          isLoading[index] && slideActive && (React.createElement("div", { className: "react-riyils__loading" },
-                              React.createElement("div", { className: "react-riyils__spinner" }))),
-                          !slideActive && (React.createElement(React.Fragment, null,
-                              React.createElement("div", { className: "react-riyils__overlay-gradient" }),
-                              React.createElement("div", { className: "react-riyils__overlay-blur" }))),
-                          slideActive && (React.createElement("div", { className: "react-riyils__cta-container" },
-                              React.createElement("button", { onClick: (e) => {
-                                      e.stopPropagation();
-                                      onVideoClick(index);
-                                  }, "aria-label": translations.watchFullVideo, className: "react-riyils__cta-button" },
-                                  React.createElement("div", { className: "react-riyils__cta-badge" },
-                                      React.createElement(Play, { className: "react-riyils__cta-icon", fill: "currentColor", strokeWidth: 0 }),
-                                      React.createElement("span", { className: "react-riyils__cta-text" }, translations.watchFullVideo))))))));
-              }));
+                      }, t: t, shouldLoad: isSelected || shouldLoad })));
           }))));
   }
-  // Custom Hooks
-  function useVideoPreload(videoRefs, activeIndex, preloadDistance = PRELOAD_DISTANCE) {
-      React.useEffect(() => {
-          videoRefs.current.forEach((video, index) => {
-              if (!video)
-                  return;
-              const distance = Math.abs(index - activeIndex);
-              if (distance <= preloadDistance) {
-                  video.preload = 'auto';
-              }
-              else if (distance <= 2) {
-                  video.preload = 'metadata';
-              }
-              else {
-                  video.preload = 'none';
-              }
-          });
-      }, [activeIndex, preloadDistance, videoRefs]);
-  }
-  function useVideoControls(videoElement, isActive, autoPlay = true) {
-      const [isPlaying, setIsPlaying] = React.useState(false);
-      const [progress, setProgress] = React.useState(0);
-      React.useEffect(() => {
-          if (!videoElement)
-              return;
-          const handlePlay = () => setIsPlaying(true);
-          const handlePause = () => setIsPlaying(false);
-          const handleTimeUpdate = () => {
-              const prog = (videoElement.currentTime / videoElement.duration) * 100;
-              setProgress(prog || 0);
-          };
-          videoElement.addEventListener('play', handlePlay);
-          videoElement.addEventListener('pause', handlePause);
-          videoElement.addEventListener('timeupdate', handleTimeUpdate);
-          if (isActive && autoPlay && videoElement.paused) {
-              videoElement.play().catch(() => { });
-          }
-          else if (!isActive && !videoElement.paused) {
-              videoElement.pause();
-          }
-          return () => {
-              videoElement.removeEventListener('play', handlePlay);
-              videoElement.removeEventListener('pause', handlePause);
-              videoElement.removeEventListener('timeupdate', handleTimeUpdate);
-          };
-      }, [videoElement, isActive, autoPlay]);
-      const play = () => videoElement === null || videoElement === void 0 ? void 0 : videoElement.play().catch(() => { });
-      const pause = () => videoElement === null || videoElement === void 0 ? void 0 : videoElement.pause();
-      const togglePlay = () => (isPlaying ? pause() : play());
-      const seek = (time) => {
-          if (videoElement)
-              videoElement.currentTime = time;
-      };
-      return { isPlaying, progress, play, pause, togglePlay, seek };
-  }
-  function useSwiperControl(initialIndex = 0) {
-      const swiperRef = React.useRef(null);
-      const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
-      const goToSlide = (index, speed) => {
-          var _a;
-          (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideTo(index, speed);
-      };
-      const nextSlide = () => {
-          var _a;
-          (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slideNext();
-      };
-      const prevSlide = () => {
-          var _a;
-          (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.slidePrev();
-      };
-      const updateSlider = () => {
-          var _a;
-          (_a = swiperRef.current) === null || _a === void 0 ? void 0 : _a.update();
-      };
-      return {
-          swiperRef,
-          currentIndex,
-          setCurrentIndex,
-          goToSlide,
-          nextSlide,
-          prevSlide,
-          updateSlider,
-      };
-  }
 
-  exports.CONTAINER_HEIGHT_DESKTOP = CONTAINER_HEIGHT_DESKTOP;
-  exports.CONTAINER_HEIGHT_MOBILE = CONTAINER_HEIGHT_MOBILE;
-  exports.PRELOAD_DISTANCE = PRELOAD_DISTANCE;
-  exports.PREVIEW_DURATION = PREVIEW_DURATION;
   exports.ReactRiyils = ReactRiyils;
   exports.RiyilsViewer = RiyilsViewer;
-  exports.VIDEO_DURATION_LIMIT = VIDEO_DURATION_LIMIT;
   exports.defaultReactRiyilsTranslations = defaultReactRiyilsTranslations;
-  exports.getPreloadStrategy = getPreloadStrategy;
-  exports.handleVideoPlayWithFallback = handleVideoPlayWithFallback;
-  exports.safePlayVideo = safePlayVideo;
-  exports.useSwiperControl = useSwiperControl;
-  exports.useVideoControls = useVideoControls;
-  exports.useVideoPreload = useVideoPreload;
+  exports.defaultRiyilsTranslations = defaultRiyilsTranslations;
 
 }));
 //# sourceMappingURL=index.umd.js.map