react-riyils 1.0.1 → 2.0.0

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef, useEffect, createContext, useLayoutEffect, createElement as createElement$1 } from 'react';
+import React, { forwardRef, useState, useRef, useEffect, createContext, useLayoutEffect, createElement as createElement$1, useMemo, useCallback } from 'react';
 
 /**
  * SSR Window 5.0.1
@@ -428,9 +428,6 @@ function elementOuterSize(el, size, includeMargins) {
     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) {
@@ -5030,6 +5027,366 @@ const SwiperSlide = /*#__PURE__*/forwardRef(({
 });
 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,
@@ -5532,228 +5889,6 @@ function Mousewheel({
   });
 }
 
-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,
@@ -6045,8 +6180,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-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
@@ -6056,7 +6194,49 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$4);
  */
 
 
-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",
     {
@@ -6065,7 +6245,7 @@ const __iconNode$3 = [
     }
   ]
 ];
-const Play = createLucideIcon("play", __iconNode$3);
+const Play = createLucideIcon("play", __iconNode$4);
 
 /**
  * @license lucide-react v0.562.0 - ISC
@@ -6075,7 +6255,7 @@ const Play = createLucideIcon("play", __iconNode$3);
  */
 
 
-const __iconNode$2 = [
+const __iconNode$3 = [
   [
     "path",
     {
@@ -6086,7 +6266,7 @@ const __iconNode$2 = [
   ["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
@@ -6096,7 +6276,7 @@ const Volume2 = createLucideIcon("volume-2", __iconNode$2);
  */
 
 
-const __iconNode$1 = [
+const __iconNode$2 = [
   [
     "path",
     {
@@ -6107,7 +6287,7 @@ const __iconNode$1 = [
   ["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
@@ -6117,601 +6297,404 @@ const VolumeX = createLucideIcon("volume-x", __iconNode$1);
  */
 
 
-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() {
+    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 = useMemo(() => (Object.assign(Object.assign({}, defaultRiyilsTranslations), translations)), [translations]);
     const [currentIndex, setCurrentIndex] = useState(initialIndex);
-    const [isPaused, setIsPaused] = useState(false);
     const [isMuted, setIsMuted] = useState(true);
-    const [videoProgress, setVideoProgress] = useState(0);
-    const [isLoading, setIsLoading] = useState({});
+    const [progress, setProgress] = useState(0);
     const [isSpeedUp, setIsSpeedUp] = useState(false);
-    const [showSwipeTip, setShowSwipeTip] = useState(true);
+    const [isPlaying, setIsPlaying] = useState(true);
+    const [seekFeedback, setSeekFeedback] = useState(null);
+    const [showPlayPauseIcon, setShowPlayPauseIcon] = useState(false);
+    const [showScrollHint, setShowScrollHint] = useState(false);
     const swiperRef = useRef(null);
-    const videoRefs = useRef([]);
-    const lastTapRef = useRef(0);
-    const holdTimeoutRef = useRef(null);
+    const activeVideoRef = useRef(null);
+    const containerRef = useRef(null);
+    const longPressTimer = useRef(null);
+    const doubleTapTimer = useRef(null);
+    const lastTapTime = useRef(0);
+    const longPressTriggered = useRef(false);
     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]);
+    }, []);
     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]);
     useEffect(() => {
-        setShowSwipeTip(true);
+        const video = activeVideoRef.current;
+        if (video) {
+            video.muted = isMuted;
+            video.playbackRate = isSpeedUp ? 2 : 1;
+        }
+    }, [isMuted, isSpeedUp, currentIndex]);
+    useEffect(() => {
+        setShowScrollHint(true);
         const timer = setTimeout(() => {
-            setShowSwipeTip(false);
-        }, 3000);
+            setShowScrollHint(false);
+        }, SCROLL_HINT_DURATION);
         return () => clearTimeout(timer);
     }, [currentIndex]);
     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 = useCallback((e) => {
+        const vid = e.currentTarget;
+        if (vid.duration) {
+            setProgress((vid.currentTime / vid.duration) * 100);
+        }
+    }, []);
+    const handleTouchStart = useCallback(() => {
+        longPressTriggered.current = false;
+        longPressTimer.current = setTimeout(() => {
+            setIsSpeedUp(true);
+            longPressTriggered.current = true;
+        }, LONG_PRESS_DELAY);
+    }, []);
+    const handleTouchEnd = useCallback(() => {
+        if (longPressTimer.current) {
+            clearTimeout(longPressTimer.current);
+        }
+        setIsSpeedUp(false);
+    }, []);
+    const handleSeek = 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 = useCallback(() => {
+        setIsPlaying(prev => {
+            const newState = !prev;
+            setShowPlayPauseIcon(true);
+            setTimeout(() => setShowPlayPauseIcon(false), ANIMATION_DURATION);
+            return newState;
         });
-    }, [currentIndex, isPaused, isSpeedUp]);
+    }, []);
+    const handleZoneClick = 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 = useCallback((e) => {
+        e.stopPropagation();
+        setIsMuted(prev => !prev);
+    }, []);
     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 = 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 = 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 = useRef(null);
-    const videoRefs = useRef([]);
-    const containerRef = useRef(null);
-    const [activeIndex, setActiveIndex] = useState(currentIndex);
-    const [isLoading, setIsLoading] = useState({});
-    const [hasInteracted, setHasInteracted] = useState(false);
-    const wheelTimeoutRef = useRef(null);
-    const isWheelScrollingRef = 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);
-                }
-            }
-        }
-    };
-    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 = useRef(null);
     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);
-        };
-    }, []);
-    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 = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(currentIndex);
+    const t = useMemo(() => (Object.assign(Object.assign({}, defaultReactRiyilsTranslations), translations)), [translations]);
+    const containerStyle = useMemo(() => ({
+        '--container-height-mobile': containerHeightMobile ? `${containerHeightMobile}px` : undefined,
+        '--container-height-desktop': containerHeightDesktop ? `${containerHeightDesktop}px` : undefined,
+    }), [containerHeightMobile, containerHeightDesktop]);
     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]);
+    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 = 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) {
-    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] = useState(false);
-    const [progress, setProgress] = useState(0);
-    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 = useRef(null);
-    const [currentIndex, setCurrentIndex] = 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,
-    };
-}
 
-export { CONTAINER_HEIGHT_DESKTOP, CONTAINER_HEIGHT_MOBILE, PRELOAD_DISTANCE, PREVIEW_DURATION, ReactRiyils, RiyilsViewer, VIDEO_DURATION_LIMIT, defaultReactRiyilsTranslations, getPreloadStrategy, handleVideoPlayWithFallback, safePlayVideo, useSwiperControl, useVideoControls, useVideoPreload };
+export { ReactRiyils, RiyilsViewer, defaultReactRiyilsTranslations, defaultRiyilsTranslations };
 //# sourceMappingURL=index.esm.js.map