indicator-ui 0.1.42 → 0.1.44

package/dist/index.js

@@ -54374,11 +54374,10 @@ function useBackdropModal() {
             _context.next = 2;
             return setIsShow.asyncDom(true);
           case 2:
-            console.log(ref);
             reinit();
             resizeObserverService.reinit();
             appearanceAnim();
-          case 6:
+          case 5:
           case "end":
             return _context.stop();
         }
@@ -55643,6 +55642,19 @@ function CAROUSEL_ANIM() {
     });
     return timeline;
   };
+  var instantJumpTo = function instantJumpTo() {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    var track = args[0],
+      timeline = args[1],
+      params = args[2];
+    var x = params.x;
+    timeline.clear().time(0).set(track, {
+      x: x
+    });
+    return timeline;
+  };
   var getObjInitStyle = function getObjInitStyle() {
     return {
       overflow: "hidden"
@@ -55662,6 +55674,7 @@ function CAROUSEL_ANIM() {
   };
   return {
     jumpTo: jumpTo,
+    instantJumpTo: instantJumpTo,
     getElInitStyle: getElInitStyle,
     getTrackInitStyle: getTrackInitStyle,
     getObjInitStyle: getObjInitStyle
@@ -56568,17 +56581,26 @@ function useCarousel() {
   for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
     args[_key] = arguments[_key];
   }
-  var _ = args[0],
+  var ref = args[0],
     trackRef = args[1];
-  var _usePosition = usePosition.apply(void 0, args),
+  var _usePosition = usePosition.apply(void 0, args.concat([{
+      onResize: onResize
+    }])),
     viewElement = _usePosition.viewElement,
-    viewElementInstance = _usePosition.viewElementInstance;
+    viewElementInstant = _usePosition.viewElementInstant;
   var _useSimpleRefElementW = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(trackRef),
     _useSimpleRefElementW2 = _slicedToArray(_useSimpleRefElementW, 1),
     getTrack = _useSimpleRefElementW2[0];
+  var _useSimpleRefElementW3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
+    _useSimpleRefElementW4 = _slicedToArray(_useSimpleRefElementW3, 1),
+    getObj = _useSimpleRefElementW4[0];
   var _CAROUSEL_ANIM = (0,_assets__WEBPACK_IMPORTED_MODULE_2__.CAROUSEL_ANIM)(),
     jumpTo = _CAROUSEL_ANIM.jumpTo,
     styles = _objectWithoutProperties(_CAROUSEL_ANIM, _excluded);
+  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(tryGetObjWidth()),
+    _useState2 = _slicedToArray(_useState, 2),
+    objWidth = _useState2[0],
+    setObjWidth = _useState2[1];
   var getTrackChildren = function getTrackChildren() {
     var track = getTrack();
     if (!track) return [];
@@ -56602,24 +56624,41 @@ function useCarousel() {
     if (!isElementInObj) return;
     viewElement(el);
   };
-  var showElInstance = function showElInstance(target) {
+  var showElInstant = function showElInstant(target) {
     var el = typeof target === 'number' ? getElByIndex(target) : target;
     // Проверяем наличие элемента в объекте
     var isElementInObj = el && checkElementExistence(el);
     if (!isElementInObj) return;
-    viewElementInstance(el);
+    viewElementInstant(el);
+  };
+  var getElStyle = function getElStyle() {
+    return _objectSpread({
+      width: objWidth
+    }, styles.getElInitStyle());
   };
   return _objectSpread({
     showEl: showEl,
-    showElInstance: showElInstance
+    showElInstant: showElInstant,
+    getElStyle: getElStyle
   }, styles);
+  function tryGetObjWidth() {
+    var obj = getObj();
+    if (!obj) return undefined;
+    return obj.offsetWidth;
+  }
+  function onResize() {
+    setObjWidth(tryGetObjWidth());
+  }
 }
 function usePosition() {
   for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
     args[_key2] = arguments[_key2];
   }
   var ref = args[0],
-    trackRef = args[1];
+    trackRef = args[1],
+    _args$ = args[2],
+    callbacks = _args$ === void 0 ? {} : _args$;
+  var onResize = callbacks.onResize;
   var viewedElementRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(undefined);
   var setViewedElement = function setViewedElement(value) {
     return viewedElementRef.current = value;
@@ -56629,23 +56668,23 @@ function usePosition() {
   };
   var _useTimeline = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useTimeline)(),
     getTimeline = _useTimeline.getTimeline;
-  var _useSimpleRefElementW3 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
-    _useSimpleRefElementW4 = _slicedToArray(_useSimpleRefElementW3, 1),
-    getObj = _useSimpleRefElementW4[0];
-  var _useSimpleRefElementW5 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(trackRef),
+  var _useSimpleRefElementW5 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(ref),
     _useSimpleRefElementW6 = _slicedToArray(_useSimpleRefElementW5, 1),
-    getTrack = _useSimpleRefElementW6[0];
+    getObj = _useSimpleRefElementW6[0];
+  var _useSimpleRefElementW7 = (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useSimpleRefElementWork)(trackRef),
+    _useSimpleRefElementW8 = _slicedToArray(_useSimpleRefElementW7, 1),
+    getTrack = _useSimpleRefElementW8[0];
   var getPredictPosition = function getPredictPosition(el) {
     var trackRect = getTrackRect();
     var objRect = getObjRect();
     var elRect = getElRect(el);
-    var stepX = elRect.x - trackRect.x - objRect.width / 2 + elRect.elWidth / 2;
+    var stepX = objRect.width * elRect.index;
     return {
       x: stepX,
       y: trackRect.y
     };
   };
-  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeWindowObserver)(function () {
+  var resizeObjects = function resizeObjects() {
     var timeline = getTimeline();
     var viewedElement = getViewedElement();
     if (viewedElement) {
@@ -56653,14 +56692,25 @@ function usePosition() {
       if (isAnimationActive) {
         viewElement(viewedElement);
       } else {
-        viewElementInstance(viewedElement);
+        viewElementInstant(viewedElement);
       }
     }
-  });
+    onResize === null || onResize === void 0 || onResize();
+  };
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeObserver)([ref, trackRef], resizeObjects);
+  (0,_hooks__WEBPACK_IMPORTED_MODULE_1__.useResizeWindowObserver)(resizeObjects);
   var changePositionInstance = function changePositionInstance(x) {
+    // const track = getTrack()
+    //
+    // if (track) {
+    //     track.style.transform = `translateX(${x}px, 0)`
+    // }
+    var timeline = getTimeline();
     var track = getTrack();
     if (track) {
-      track.style.transform = "translateX(".concat(x, "px)");
+      (0,_assets__WEBPACK_IMPORTED_MODULE_2__.CAROUSEL_ANIM)().instantJumpTo(track, timeline, {
+        x: x
+      }).play();
     }
   };
   var changePosition = function changePosition(x) {
@@ -56678,7 +56728,7 @@ function usePosition() {
     setViewedElement(el);
     changePosition(resPos);
   };
-  var viewElementInstance = function viewElementInstance(el) {
+  var viewElementInstant = function viewElementInstant(el) {
     var predict = getPredictPosition(el);
     var resPos = -predict.x;
     setViewedElement(el);
@@ -56686,19 +56736,26 @@ function usePosition() {
   };
   return {
     viewElement: viewElement,
-    viewElementInstance: viewElementInstance
+    viewElementInstant: viewElementInstant
   };
+  function getChildIndex(el) {
+    if (!el.parentElement) return -1;
+    var parentChildren = Array.from(el.parentElement.children);
+    return parentChildren.indexOf(el);
+  }
   function getElRect(el) {
     var _el$getBoundingClient = el.getBoundingClientRect(),
       x = _el$getBoundingClient.x,
       y = _el$getBoundingClient.y;
-    var elWidth = el.offsetWidth;
-    var elHeight = el.offsetHeight;
+    var width = el.offsetWidth;
+    var height = el.offsetHeight;
+    var index = getChildIndex(el);
     return {
       x: x,
       y: y,
-      elWidth: elWidth,
-      elHeight: elHeight
+      width: width,
+      height: height,
+      index: index
     };
   }
   function getObjRect() {
@@ -69245,7 +69302,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 /* harmony export */ });
 // extracted by mini-css-extract-plugin
-/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"VideoViewer":"VideoViewer-module__VideoViewer___DnYgG","loader":"VideoViewer-module__loader___xINv6","hide":"VideoViewer-module__hide___uGbYO","timer":"VideoViewer-module__timer___w1Piv","progressBar":"VideoViewer-module__progressBar___SbaNv","content":"VideoViewer-module__content___jnFwK","playButton":"VideoViewer-module__playButton___Sb91y","show":"VideoViewer-module__show___GsvfN","appearance":"VideoViewer-module__appearance___GGxuv"});
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({"VideoViewer":"VideoViewer-module__VideoViewer___DnYgG","loader":"VideoViewer-module__loader___xINv6","hide":"VideoViewer-module__hide___uGbYO","timer":"VideoViewer-module__timer___w1Piv","progressBar":"VideoViewer-module__progressBar___SbaNv","actions":"VideoViewer-module__actions___TZ3Mm","content":"VideoViewer-module__content___jnFwK","playButton":"VideoViewer-module__playButton___Sb91y","show":"VideoViewer-module__show___GsvfN","appearance":"VideoViewer-module__appearance___GGxuv"});
 
 /***/ }),
 
@@ -69306,30 +69363,6 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 
 
-/***/ }),
-
-/***/ "./src/ui/MediaViewer/types/components/ControlBarTypes.ts":
-/*!****************************************************************!*\
-  !*** ./src/ui/MediaViewer/types/components/ControlBarTypes.ts ***!
-  \****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-
-
-/***/ }),
-
-/***/ "./src/ui/MediaViewer/types/components/ImageViewerTypes.ts":
-/*!*****************************************************************!*\
-  !*** ./src/ui/MediaViewer/types/components/ImageViewerTypes.ts ***!
-  \*****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-
-
 /***/ }),
 
 /***/ "./src/ui/MediaViewer/types/components/ProgressBarTypes.ts":
@@ -69342,18 +69375,6 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.r(__webpack_exports__);
 
 
-/***/ }),
-
-/***/ "./src/ui/MediaViewer/types/components/VideoViewerTypes.ts":
-/*!*****************************************************************!*\
-  !*** ./src/ui/MediaViewer/types/components/VideoViewerTypes.ts ***!
-  \*****************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-
-
 /***/ }),
 
 /***/ "./src/ui/MediaViewer/types/components/index.ts":
@@ -69364,13 +69385,7 @@ __webpack_require__.r(__webpack_exports__);
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _VideoViewerTypes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./VideoViewerTypes */ "./src/ui/MediaViewer/types/components/VideoViewerTypes.ts");
-/* harmony import */ var _ImageViewerTypes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ImageViewerTypes */ "./src/ui/MediaViewer/types/components/ImageViewerTypes.ts");
-/* harmony import */ var _ControlBarTypes__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ControlBarTypes */ "./src/ui/MediaViewer/types/components/ControlBarTypes.ts");
-/* harmony import */ var _ProgressBarTypes__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ProgressBarTypes */ "./src/ui/MediaViewer/types/components/ProgressBarTypes.ts");
-
-
-
+/* harmony import */ var _ProgressBarTypes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ProgressBarTypes */ "./src/ui/MediaViewer/types/components/ProgressBarTypes.ts");
 
 
 /***/ }),
@@ -69408,12 +69423,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
 /* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../styles */ "./src/ui/MediaViewer/styles/index.ts");
 /* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./components */ "./src/ui/MediaViewer/ui/components/index.ts");
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
@@ -69426,27 +69436,28 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
-  var _media$curElementInde, _media$curElementInde2;
   var _props$media = props.media,
     media = _props$media === void 0 ? [] : _props$media,
     mediaIndex = props.mediaIndex,
-    _props$nearestElement = props.nearestElementsOnly,
-    nearestElementsOnly = _props$nearestElement === void 0 ? true : _props$nearestElement,
     onClose = props.onClose,
     style = props.style;
-  var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    muted = _useState2[0],
-    setMuted = _useState2[1];
-  var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    play = _useState4[0],
-    setPlay = _useState4[1];
   var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  var mediaListRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)([]);
+  var addMediaRef = function addMediaRef(type, ref, idx) {
+    mediaListRef.current[idx] = {
+      type: type,
+      ref: ref
+    };
+  };
+  var getMediaRef = function getMediaRef(idx) {
+    return mediaListRef.current[idx];
+  };
   var changeCurMedia = (0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(function (idx) {
-    var instance = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-    if (instance) {
-      showElInstance(idx);
+    var instant = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    setCurElementIndex(idx);
+    pauseVideos();
+    if (instant) {
+      showElInstant(idx);
     } else {
       showEl(idx);
     }
@@ -69468,10 +69479,10 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     getCurElementIndex = _useSyncedStateRef2[2];
   var _useCarousel = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useCarousel)(objRef, trackRef),
     showEl = _useCarousel.showEl,
-    showElInstance = _useCarousel.showElInstance,
+    showElInstant = _useCarousel.showElInstant,
     getTrackInitStyle = _useCarousel.getTrackInitStyle,
     getObjInitStyle = _useCarousel.getObjInitStyle,
-    getElInitStyle = _useCarousel.getElInitStyle;
+    getElStyle = _useCarousel.getElStyle;
   var hasPrevIndex = function hasPrevIndex(curIndex) {
     return curIndex > 0;
   };
@@ -69479,56 +69490,49 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     return curIndex < media.length - 1;
   };
   (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    showElInstance(mediaIndex || 0);
+    showElInstant(mediaIndex || 0);
   }, []);
-  var resetVideo = function resetVideo() {
-    setMuted(false);
-    setPlay(false);
+  var pauseVideos = function pauseVideos() {
+    var _iterator = _createForOfIteratorHelper(mediaListRef.current),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var item = _step.value;
+        if ((item === null || item === void 0 ? void 0 : item.type) === 'video') {
+          item.ref.pause();
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
   };
   var next = function next() {
     var prevState = getCurElementIndex();
     var newState = prevState < media.length - 1 ? prevState + 1 : media.length - 1;
-    setCurElementIndex(newState);
-    showEl(newState);
-    resetVideo();
+    changeCurMedia(newState);
   };
   var prev = function prev() {
     var prevState = getCurElementIndex();
     var newState = prevState > 0 ? prevState - 1 : 0;
-    setCurElementIndex(newState);
-    showEl(newState);
-    resetVideo();
-  };
-  var mute = function mute() {
-    setMuted(function (prevState) {
-      return !prevState;
-    });
-  };
-  var _play = function _play() {
-    setPlay(function (prevState) {
-      return !prevState;
-    });
-  };
-  var isNearestElement = function isNearestElement(curEl, el) {
-    var nextEl = curEl + 1 < media.length ? curEl + 1 : media.length - 1;
-    var prevEl = curEl - 1 >= 0 ? curEl - 1 : 0;
-    return nextEl === el || prevEl === el || el === curEl;
+    changeCurMedia(newState);
   };
   var getContent = function getContent(item, idx) {
-    if (item == null || nearestElementsOnly && !isNearestElement(curElementIndex, idx)) return undefined;
     switch (item.type) {
       case 'video':
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.VideoViewer, {
           src: item.src,
-          muted: curElementIndex === idx ? muted : undefined,
-          play: curElementIndex === idx ? play : undefined,
-          onChangePlay: curElementIndex === idx ? function (play) {
-            return setPlay(play);
-          } : undefined
+          ref: function ref(instance) {
+            return addMediaRef('video', instance, idx);
+          }
         }, idx);
       case 'image':
         return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.ImageViewer, {
-          src: item.src
+          src: item.src,
+          ref: function ref(instance) {
+            return addMediaRef('image', instance, idx);
+          }
         }, idx);
       default:
         return undefined;
@@ -69549,7 +69553,7 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
         children: media.map(function (item, idx) {
           return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
             className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.el,
-            style: _objectSpread({}, getElInitStyle()),
+            style: getElStyle(),
             children: getContent(item, idx)
           }, idx);
         })
@@ -69557,10 +69561,6 @@ var MediaViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
       className: _styles__WEBPACK_IMPORTED_MODULE_3__.MediaViewerStyle.control,
       children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.ControlBar, {
-        muted: muted,
-        play: play,
-        onPlay: ((_media$curElementInde = media[curElementIndex]) === null || _media$curElementInde === void 0 ? void 0 : _media$curElementInde.type) === 'video' ? _play : undefined,
-        onMute: ((_media$curElementInde2 = media[curElementIndex]) === null || _media$curElementInde2 === void 0 ? void 0 : _media$curElementInde2.type) === 'video' ? mute : undefined,
         onNext: hasNextIndex(curElementIndex) ? next : undefined,
         onPrev: hasPrevIndex(curElementIndex) ? prev : undefined,
         onClose: onClose
@@ -69591,23 +69591,13 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function ControlBar(_ref) {
-  var play = _ref.play,
-    muted = _ref.muted,
-    onMute = _ref.onMute,
-    onPlay = _ref.onPlay,
-    onClose = _ref.onClose,
-    onPrev = _ref.onPrev,
-    onNext = _ref.onNext;
+function ControlBar(props) {
+  var onClose = props.onClose,
+    onPrev = props.onPrev,
+    onNext = props.onNext;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
     className: _styles__WEBPACK_IMPORTED_MODULE_3__.ControlBarStyle.controlBar,
-    children: [onMute != null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, {
-      iconLeft: muted ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.VolumeXSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.VolumeMaxSVG, {}),
-      size: 'small',
-      hierarchy: 'secondary-gray',
-      width: 'hug',
-      onClick: onMute
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, {
+    children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, {
       iconLeft: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.ChevronLeftSVG, {}),
       size: 'large',
       hierarchy: 'secondary-gray',
@@ -69628,12 +69618,6 @@ function ControlBar(_ref) {
       width: 'hug',
       disabled: onNext == null,
       onClick: onNext
-    }), onPlay != null && (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_1__.Button, {
-      iconLeft: play ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.PauseCircleSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_2__.PlaySVG, {}),
-      size: 'small',
-      hierarchy: 'secondary-gray',
-      width: 'hug',
-      onClick: onPlay
     })]
   });
 }
@@ -69653,17 +69637,33 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../styles */ "./src/ui/MediaViewer/styles/index.ts");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/hooks */ "./src/hooks/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../styles */ "./src/ui/MediaViewer/styles/index.ts");
 
 
-function ImageViewer(_ref) {
-  var src = _ref.src;
+
+
+var ImageViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var src = props.src,
+    style = props.style;
+  var imgRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, function () {
+    return imgRef.current;
+  });
+  var _useShimmer = (0,_hooks__WEBPACK_IMPORTED_MODULE_2__.useShimmer)(imgRef, {
+      initIsActive: true
+    }),
+    stopLoading = _useShimmer.stopLoading;
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("img", {
     src: src,
+    style: style,
     alt: "",
-    className: _styles__WEBPACK_IMPORTED_MODULE_1__.ImageViewerStyle.ImageViewer
+    onLoad: stopLoading,
+    className: _styles__WEBPACK_IMPORTED_MODULE_3__.ImageViewerStyle.ImageViewer
   });
-}
+});
 
 /***/ }),
 
@@ -69766,11 +69766,11 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
-/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../styles */ "./src/ui/MediaViewer/styles/index.ts");
-/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../components */ "./src/ui/MediaViewer/ui/components/index.ts");
-/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
-/* harmony import */ var _ui_PlayButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @/ui/PlayButton */ "./src/ui/PlayButton/index.ts");
+/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! clsx */ "./node_modules/clsx/dist/clsx.mjs");
+/* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @/ui */ "./src/ui/index.ts");
+/* harmony import */ var _assets__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @/assets */ "./src/assets/index.ts");
+/* harmony import */ var _styles__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../styles */ "./src/ui/MediaViewer/styles/index.ts");
+/* harmony import */ var _components__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../components */ "./src/ui/MediaViewer/ui/components/index.ts");
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
@@ -69788,44 +69788,101 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 
 
 
-function VideoViewer(_ref) {
-  var play = _ref.play,
-    muted = _ref.muted,
-    src = _ref.src,
-    onChangePlay = _ref.onChangePlay;
+var VideoViewer = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var src = props.src,
+    style = props.style;
+  var containerRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
     _useState2 = _slicedToArray(_useState, 2),
-    curTime = _useState2[0],
-    setCurTime = _useState2[1];
+    progress = _useState2[0],
+    setProgress = _useState2[1];
   var _useState3 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    progress = _useState4[0],
-    setProgress = _useState4[1];
+    duration = _useState4[0],
+    setDuration = _useState4[1];
   var _useState5 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(0),
     _useState6 = _slicedToArray(_useState5, 2),
-    duration = _useState6[0],
-    setDuration = _useState6[1];
+    time = _useState6[0],
+    setTime = _useState6[1];
   var _useState7 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    isSeeking = _useState8[0],
-    setIsSeeking = _useState8[1];
+    isPlaying = _useState8[0],
+    setIsPlaying = _useState8[1];
+  var isSeekingRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
+  var getIsSeeking = function getIsSeeking() {
+    return isSeekingRef.current;
+  };
+  var startSeeking = function startSeeking() {
+    return isSeekingRef.current = true;
+  };
+  var stopSeeking = function stopSeeking() {
+    return isSeekingRef.current = false;
+  };
   var _useState9 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(true),
     _useState10 = _slicedToArray(_useState9, 2),
     isLoading = _useState10[0],
     setIsLoading = _useState10[1];
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
-    if (duration && !isSeeking) {
-      var percent = curTime / duration * 100;
+  var startLoading = function startLoading() {
+    return setIsLoading(true);
+  };
+  var stopLoading = function stopLoading() {
+    return setIsLoading(false);
+  };
+  var _useState11 = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    muted = _useState12[0],
+    setMuted = _useState12[1];
+  var mute = function mute() {
+    return setMuted(true);
+  };
+  var unmute = function unmute() {
+    return setMuted(false);
+  };
+  var videoPlayerBaseRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, function () {
+    return {
+      get obj() {
+        return containerRef.current;
+      },
+      mute: mute,
+      unmute: unmute,
+      pause: function pause() {
+        var _videoPlayerBaseRef$c, _videoPlayerBaseRef$c2;
+        return (_videoPlayerBaseRef$c = videoPlayerBaseRef.current) === null || _videoPlayerBaseRef$c === void 0 || (_videoPlayerBaseRef$c2 = _videoPlayerBaseRef$c.pause) === null || _videoPlayerBaseRef$c2 === void 0 ? void 0 : _videoPlayerBaseRef$c2.call(_videoPlayerBaseRef$c);
+      },
+      play: function play() {
+        var _videoPlayerBaseRef$c3, _videoPlayerBaseRef$c4;
+        return (_videoPlayerBaseRef$c3 = videoPlayerBaseRef.current) === null || _videoPlayerBaseRef$c3 === void 0 || (_videoPlayerBaseRef$c4 = _videoPlayerBaseRef$c3.play) === null || _videoPlayerBaseRef$c4 === void 0 ? void 0 : _videoPlayerBaseRef$c4.call(_videoPlayerBaseRef$c3);
+      }
+    };
+  });
+  var onMute = function onMute() {
+    setMuted(function (prevState) {
+      return !prevState;
+    });
+  };
+  var onPlay = function onPlay() {
+    var _videoPlayerBaseRef$c5;
+    (_videoPlayerBaseRef$c5 = videoPlayerBaseRef.current) === null || _videoPlayerBaseRef$c5 === void 0 || _videoPlayerBaseRef$c5.switchPlay();
+  };
+  var updateProgressBar = function updateProgressBar(time) {
+    if (duration && !getIsSeeking()) {
+      var percent = time / duration * 100;
       setProgress(percent);
     }
-  }, [curTime]);
+  };
+  var onChangeTime = function onChangeTime(time) {
+    updateProgressBar(time);
+    setTime(time);
+  };
   var onStartSeeking = function onStartSeeking() {
-    setIsSeeking(true);
+    startSeeking();
   };
   var onEndSeeking = function onEndSeeking() {
+    var _videoPlayerBaseRef$c6;
     var newTime = progress / 100 * duration;
-    setCurTime(newTime);
-    setIsSeeking(false);
+    (_videoPlayerBaseRef$c6 = videoPlayerBaseRef.current) === null || _videoPlayerBaseRef$c6 === void 0 || _videoPlayerBaseRef$c6.setTime(newTime);
+    stopSeeking();
   };
   var onSeek = function onSeek(newPercent) {
     setProgress(newPercent);
@@ -69843,54 +69900,78 @@ function VideoViewer(_ref) {
       return "".concat(formattedMinutes, ":").concat(formattedSeconds);
     }
   };
+  var onClickVideo = function onClickVideo() {
+    var _videoPlayerBaseRef$c7;
+    (_videoPlayerBaseRef$c7 = videoPlayerBaseRef.current) === null || _videoPlayerBaseRef$c7 === void 0 || _videoPlayerBaseRef$c7.switchPlay();
+  };
+  var onKeyDown = function onKeyDown(event) {
+    event.preventDefault();
+    if (event.key === 'Space') {
+      var _videoPlayerBaseRef$c8;
+      (_videoPlayerBaseRef$c8 = videoPlayerBaseRef.current) === null || _videoPlayerBaseRef$c8 === void 0 || _videoPlayerBaseRef$c8.switchPlay();
+    }
+  };
   return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
-    className: _styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.VideoViewer,
+    className: _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.VideoViewer,
+    style: style,
+    tabIndex: 0,
+    ref: containerRef,
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-      className: (0,clsx__WEBPACK_IMPORTED_MODULE_5__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.playButton, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.show, !play)),
-      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui_PlayButton__WEBPACK_IMPORTED_MODULE_6__.PlayButton, {
+      className: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.playButton, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.show, !isPlaying)),
+      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.PlayButton, {
         size: 'large',
         type: 'play',
         color: 'dark',
-        onClick: function onClick() {
-          return onChangePlay === null || onChangePlay === void 0 ? void 0 : onChangePlay(true);
-        }
+        onClick: onPlay
       })
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-      className: _styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.timer,
-      children: curTime != null ? formatTime(curTime) : undefined
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.LoadingIndicator, {
+      className: _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.timer,
+      children: formatTime(time)
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.LoadingIndicator, {
       style: 'line-simple',
       size: 'large',
       width: 'fill',
       height: 'fill',
-      additionStyles: (0,clsx__WEBPACK_IMPORTED_MODULE_5__["default"])(_styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.loader, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.hide, !isLoading))
-    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_2__.VideoPlayerBase, {
+      additionStyles: (0,clsx__WEBPACK_IMPORTED_MODULE_2__["default"])(_styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.loader, _defineProperty({}, _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.hide, !isLoading))
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.VideoPlayerBase, {
       src: src,
-      play: play,
-      muted: muted,
-      onChangePlay: onChangePlay,
-      time: curTime,
-      onChangeTime: setCurTime,
+      onChangePlay: setIsPlaying,
+      onChangeTime: onChangeTime,
       onChangeDuration: setDuration,
-      onCanPlay: function onCanPlay() {
-        return setIsLoading(false);
-      },
-      onWaiting: function onWaiting() {
-        return setIsLoading(true);
-      },
-      lazyLoad: false,
-      className: _styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.content
+      onCanPlay: stopLoading,
+      onWaiting: startLoading,
+      onKeyDown: onKeyDown,
+      lazyLoad: true,
+      muted: muted,
+      className: _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.content,
+      onClick: onClickVideo,
+      ref: videoPlayerBaseRef
     }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div", {
-      className: _styles__WEBPACK_IMPORTED_MODULE_3__.VideoViewerStyle.progressBar,
-      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_4__.VideoProgressBar, {
+      className: _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.progressBar,
+      children: (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components__WEBPACK_IMPORTED_MODULE_6__.VideoProgressBar, {
         onChangeProgress: onSeek,
         progress: progress,
         onStartDrag: onStartSeeking,
         onEndDrag: onEndSeeking
       })
+    }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div", {
+      className: _styles__WEBPACK_IMPORTED_MODULE_5__.VideoViewerStyle.actions,
+      children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Button, {
+        iconLeft: muted ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.VolumeXSVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.VolumeMaxSVG, {}),
+        size: 'small',
+        hierarchy: 'secondary-gray',
+        width: 'hug',
+        onClick: onMute
+      }), (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.Button, {
+        iconLeft: isPlaying ? (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.PlaySVG, {}) : (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_assets__WEBPACK_IMPORTED_MODULE_4__.PauseCircleSVG, {}),
+        size: 'small',
+        hierarchy: 'secondary-gray',
+        width: 'hug',
+        onClick: onPlay
+      })]
     })]
   });
-}
+});
 
 /***/ }),
 
@@ -71977,7 +72058,9 @@ function Toggle(props) {
     textBeforeElement = props.textBeforeElement,
     textAfterElement = props.textAfterElement,
     _props$theme = props.theme,
-    theme = _props$theme === void 0 ? "light" : _props$theme;
+    theme = _props$theme === void 0 ? "light" : _props$theme,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size;
   var _useState = (0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHover = _useState2[0],
@@ -72003,7 +72086,7 @@ function Toggle(props) {
     children: [(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_ui__WEBPACK_IMPORTED_MODULE_3__.ToggleBase, {
       active: active,
       hover: isHover,
-      size: 'medium',
+      size: size,
       isButton: false,
       disabled: disabled,
       theme: theme
@@ -72683,33 +72766,6 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */   VideoPlayerBase: () => (/* reexport safe */ _ui__WEBPACK_IMPORTED_MODULE_0__.VideoPlayerBase)
 /* harmony export */ });
 /* harmony import */ var _ui__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ui */ "./src/ui/VideoPlayerBase/ui/index.ts");
-/* harmony import */ var _types__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./types */ "./src/ui/VideoPlayerBase/types/index.ts");
-
-
-
-/***/ }),
-
-/***/ "./src/ui/VideoPlayerBase/types/VideoPlayerBaseTypes.ts":
-/*!**************************************************************!*\
-  !*** ./src/ui/VideoPlayerBase/types/VideoPlayerBaseTypes.ts ***!
-  \**************************************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-
-
-/***/ }),
-
-/***/ "./src/ui/VideoPlayerBase/types/index.ts":
-/*!***********************************************!*\
-  !*** ./src/ui/VideoPlayerBase/types/index.ts ***!
-  \***********************************************/
-/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _VideoPlayerBaseTypes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./VideoPlayerBaseTypes */ "./src/ui/VideoPlayerBase/types/VideoPlayerBaseTypes.ts");
 
 
 /***/ }),
@@ -72729,71 +72785,89 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["src", "browserControl", "muted", "onChangeDuration", "onChangeTime", "onChangeVolume", "onChangePlay", "onCanPlay", "onWaiting", "loop", "autoPlay", "lazyLoad"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
 
-var SEEK_ACCURACY = 0.3;
-function VideoPlayerBase(_ref) {
-  var src = _ref.src,
-    _ref$browserControl = _ref.browserControl,
-    browserControl = _ref$browserControl === void 0 ? false : _ref$browserControl,
-    _ref$muted = _ref.muted,
-    muted = _ref$muted === void 0 ? false : _ref$muted,
-    onChangeDuration = _ref.onChangeDuration,
-    onChangeTime = _ref.onChangeTime,
-    onChangeVolume = _ref.onChangeVolume,
-    onChangePlay = _ref.onChangePlay,
-    onCanPlay = _ref.onCanPlay,
-    onWaiting = _ref.onWaiting,
-    time = _ref.time,
-    volume = _ref.volume,
-    _ref$play = _ref.play,
-    play = _ref$play === void 0 ? false : _ref$play,
-    _ref$loop = _ref.loop,
-    loop = _ref$loop === void 0 ? false : _ref$loop,
-    _ref$autoPlay = _ref.autoPlay,
-    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-    _ref$lazyLoad = _ref.lazyLoad,
-    lazyLoad = _ref$lazyLoad === void 0 ? false : _ref$lazyLoad,
-    className = _ref.className;
+var VideoPlayerBase = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(function (props, ref) {
+  var src = props.src,
+    _props$browserControl = props.browserControl,
+    browserControl = _props$browserControl === void 0 ? false : _props$browserControl,
+    _props$muted = props.muted,
+    muted = _props$muted === void 0 ? false : _props$muted,
+    onChangeDuration = props.onChangeDuration,
+    onChangeTime = props.onChangeTime,
+    onChangeVolume = props.onChangeVolume,
+    onChangePlay = props.onChangePlay,
+    onCanPlay = props.onCanPlay,
+    onWaiting = props.onWaiting,
+    _props$loop = props.loop,
+    loop = _props$loop === void 0 ? false : _props$loop,
+    _props$autoPlay = props.autoPlay,
+    autoPlay = _props$autoPlay === void 0 ? false : _props$autoPlay,
+    _props$lazyLoad = props.lazyLoad,
+    lazyLoad = _props$lazyLoad === void 0 ? false : _props$lazyLoad,
+    anotherProps = _objectWithoutProperties(props, _excluded);
   var videoRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null);
   var isSeekingRef = (0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(false);
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+  var play = function play() {
+    var _videoRef$current;
+    return (_videoRef$current = videoRef.current) === null || _videoRef$current === void 0 ? void 0 : _videoRef$current.play();
+  };
+  var pause = function pause() {
+    var _videoRef$current2;
+    return (_videoRef$current2 = videoRef.current) === null || _videoRef$current2 === void 0 ? void 0 : _videoRef$current2.pause();
+  };
+  var switchPlay = function switchPlay() {
     var video = videoRef.current;
-    if (!video || time == null) return;
-    try {
-      if (Math.abs(video.currentTime - time) > SEEK_ACCURACY) {
-        isSeekingRef.current = true;
-        video.currentTime = time;
-      }
-    } catch (error) {
-      console.error("Ошибка перемотки:", error);
+    if (!video) return false;
+    var isPlay = video.paused;
+    if (isPlay) {
+      video.play();
+    } else {
+      video.pause();
     }
-  }, [time]);
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+    return isPlay;
+  };
+  var setTime = function setTime(time) {
     var video = videoRef.current;
-    if (!video || volume == null) return;
-    try {
-      video.volume = volume;
-    } catch (error) {
-      console.error("Ошибка изменения громкости:", error);
+    if (!video) return;
+    if (isFinite(time)) {
+      video.currentTime = time;
     }
-  }, [volume]);
-  (0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
+  };
+  var setVolume = function setVolume(volume) {
     var video = videoRef.current;
     if (!video) return;
-    try {
-      if (play) {
-        video.play()["catch"](function (error) {
-          console.error("Ошибка воспроизведения:", error);
-          onChangePlay === null || onChangePlay === void 0 || onChangePlay(false);
-        });
-      } else {
-        video.pause();
-      }
-    } catch (error) {
-      console.error("Ошибка управления воспроизведением:", error);
+    if (isFinite(volume)) {
+      video.volume = volume;
     }
-  }, [play]);
+  };
+  (0,react__WEBPACK_IMPORTED_MODULE_1__.useImperativeHandle)(ref, function () {
+    return {
+      obj: videoRef.current,
+      play: play,
+      pause: pause,
+      switchPlay: switchPlay,
+      setTime: setTime,
+      setVolume: setVolume,
+      get time() {
+        var _videoRef$current3;
+        return (_videoRef$current3 = videoRef.current) === null || _videoRef$current3 === void 0 ? void 0 : _videoRef$current3.currentTime;
+      },
+      get volume() {
+        var _videoRef$current4;
+        return (_videoRef$current4 = videoRef.current) === null || _videoRef$current4 === void 0 ? void 0 : _videoRef$current4.volume;
+      }
+    };
+  });
   var onTimeUpdate = function onTimeUpdate(event) {
     if (!isSeekingRef.current) {
       var currentTime = event.currentTarget.currentTime;
@@ -72837,7 +72911,7 @@ function VideoPlayerBase(_ref) {
   var onSeeking = function onSeeking() {
     isSeekingRef.current = true;
   };
-  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("video", {
+  return (0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("video", _objectSpread({
     src: src,
     controls: browserControl,
     muted: muted,
@@ -72850,13 +72924,12 @@ function VideoPlayerBase(_ref) {
     onWaiting: onWaiting,
     autoPlay: autoPlay,
     onVolumeChange: onVolumeUpdate,
-    ref: videoRef,
     onSeeked: onSeeked,
     onSeeking: onSeeking,
-    preload: lazyLoad ? "none" : "auto",
-    className: className
-  });
-}
+    preload: lazyLoad ? "metadata" : "auto",
+    ref: videoRef
+  }, anotherProps));
+});
 
 /***/ }),