@onesy/ui-react 1.0.163 → 1.0.165

package/VideoPlayer/VideoPlayer.js

@@ -159,45 +159,18 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-VideoPlayer'
 });
 const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _SettingsMenuProps$Li;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _SettingsMenuProps$Li;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyVideoPlayer) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Line = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
-  }, [theme]);
-  const Surface = _react.default.useMemo(() => {
-    var _theme$elements2;
-    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
-  }, [theme]);
-  const Slider = _react.default.useMemo(() => {
-    var _theme$elements3;
-    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Slider) || _Slider.default;
-  }, [theme]);
-  const IconButton = _react.default.useMemo(() => {
-    var _theme$elements4;
-    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
-  }, [theme]);
-  const Expand = _react.default.useMemo(() => {
-    var _theme$elements5;
-    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
-  }, [theme]);
-  const Type = _react.default.useMemo(() => {
-    var _theme$elements6;
-    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
-  }, [theme]);
-  const Menu = _react.default.useMemo(() => {
-    var _theme$elements7;
-    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Menu) || _Menu.default;
-  }, [theme]);
-  const ListItem = _react.default.useMemo(() => {
-    var _theme$elements8;
-    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyVideoPlayer) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Surface) || _Surface.default;
+  const Slider = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Slider) || _Slider.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  const Expand = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Expand) || _Expand.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Type) || _Type.default;
+  const Menu = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Menu) || _Menu.default;
+  const ListItem = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.ListItem) || _ListItem.default;
   const {
       name,
       src,
@@ -310,7 +283,7 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       return rootDocument.pictureInPictureEnabled;
     }
   };
-  const startMediaSession = _react.default.useCallback(() => {
+  const startMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.metadata = new MediaMetadata({
         title: name
@@ -348,8 +321,8 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
       }
     }
-  }, [name]);
-  const updateMediaSession = _react.default.useCallback(() => {
+  };
+  const updateMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.setPositionState({
         duration: refs.duration.current,
@@ -357,40 +330,40 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         position: (0, _utils.clamp)(refs.time.current, 0, refs.duration.current)
       });
     }
-  }, [name]);
+  };
   refs.startMediaSession.current = startMediaSession;
   refs.updateMediaSession.current = updateMediaSession;
   const durationTime = duration_ || (meta === null || meta === void 0 ? void 0 : meta.duration);
-  const onVolumeChange = _react.default.useCallback(value => {
+  const onVolumeChange = value => {
     setVolume(value);
     refs.video.current.volume = value;
-  }, []);
-  const onTimeChange = _react.default.useCallback(value => {
-    setTime(value);
-    refs.video.current.currentTime = value;
+  };
+  const onTimeChange = value_0 => {
+    setTime(value_0);
+    refs.video.current.currentTime = value_0;
 
     // update MediaSession
     refs.updateMediaSession.current();
-  }, []);
-  const onPlaybackSpeed = _react.default.useCallback(value_ => {
-    const value = (0, _utils.clamp)(value_, 0, 2);
-    setPlaybackSpeed(value);
+  };
+  const onPlaybackSpeed = value_ => {
+    const value_1 = (0, _utils.clamp)(value_, 0, 2);
+    setPlaybackSpeed(value_1);
     setOpenMenu(null);
-    refs.video.current.playbackRate = value;
-  }, []);
-  const onForward = _react.default.useCallback(details => {
-    const part = refs.duration.current * 0.1;
-    const toMove = (0, _utils.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
-    const value = (0, _utils.clamp)(refs.time.current + toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onBackward = _react.default.useCallback(details => {
+    refs.video.current.playbackRate = value_1;
+  };
+  const onForward = details_0 => {
     const part = refs.duration.current * 0.1;
-    const toMove = (0, _utils.clamp)((details === null || details === void 0 ? void 0 : details.seekOffset) || part, 1, refs.duration.current);
-    const value = (0, _utils.clamp)(refs.time.current - toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onPlay = _react.default.useCallback(() => {
+    const toMove = (0, _utils.clamp)((details_0 === null || details_0 === void 0 ? void 0 : details_0.seekOffset) || part, 1, refs.duration.current);
+    const value_2 = (0, _utils.clamp)(refs.time.current + toMove, 0, refs.duration.current);
+    refs.onTimeChange.current(value_2);
+  };
+  const onBackward = details_1 => {
+    const part_0 = refs.duration.current * 0.1;
+    const toMove_0 = (0, _utils.clamp)((details_1 === null || details_1 === void 0 ? void 0 : details_1.seekOffset) || part_0, 1, refs.duration.current);
+    const value_3 = (0, _utils.clamp)(refs.time.current - toMove_0, 0, refs.duration.current);
+    refs.onTimeChange.current(value_3);
+  };
+  const onPlay = () => {
     try {
       setPlay(true);
       refs.video.current.play();
@@ -400,41 +373,41 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
       // update MediaSession
       refs.updateMediaSession.current();
-    } catch (error) {
-      console.error(`videoPlayer`, error);
+    } catch (error_0) {
+      console.error(`videoPlayer`, error_0);
     }
-  }, []);
-  const onPause = _react.default.useCallback(() => {
+  };
+  const onPause = () => {
     setPlay(false);
     refs.video.current.pause();
-  }, []);
-  const onStop = _react.default.useCallback(() => {
+  };
+  const onStop = () => {
     setPlay(false);
     refs.video.current.pause();
     refs.video.current.currentTime = 0;
-  }, []);
-  const onMute = _react.default.useCallback(() => {
+  };
+  const onMute = () => {
     setMuted(true);
     refs.video.current.muted = true;
-  }, []);
-  const onUnmute = _react.default.useCallback(() => {
+  };
+  const onUnmute = () => {
     setMuted(false);
     refs.video.current.muted = false;
-  }, []);
+  };
   refs.onPlay.current = onPlay;
   refs.onPause.current = onPause;
   refs.onTimeChange.current = onTimeChange;
   refs.onForward.current = onForward;
   refs.onBackward.current = onBackward;
   refs.onStop.current = onStop;
-  const init = _react.default.useCallback(() => {
+  const init = () => {
     var _refs$root$current2, _refs$root$current3, _refs$root$current4, _refs$root$current5;
     setLoaded(false);
     const video = refs.video.current;
     video.addEventListener('loadedmetadata', () => {
-      const value = video.duration;
-      if (!(0, _utils.is)('number', durationTime) && (0, _utils.is)('number', value)) {
-        if (refs.duration.current === undefined) setDuration(value);
+      const value_4 = video.duration;
+      if (!(0, _utils.is)('number', durationTime) && (0, _utils.is)('number', value_4)) {
+        if (refs.duration.current === undefined) setDuration(value_4);
         setLoaded(true);
       }
     });
@@ -442,17 +415,17 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       refs.onStop.current();
     });
     video.addEventListener('timeupdate', () => {
-      const value = video.currentTime;
-      if (!refs.updating.current && refs.time.current !== value) {
-        setTime(value);
+      const value_5 = video.currentTime;
+      if (!refs.updating.current && refs.time.current !== value_5) {
+        setTime(value_5);
 
         // update MediaSession
         refs.updateMediaSession.current();
       }
     });
     video.addEventListener('ratechange', () => {
-      const value = video.playbackRate;
-      setPlaybackSpeed(value);
+      const value_6 = video.playbackRate;
+      setPlaybackSpeed(value_6);
     });
 
     // start MediaSession
@@ -461,16 +434,16 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (refs.duration.current === undefined) setDuration(durationTime);
       setLoaded(true);
     }
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
     const methodPictureInPicture = () => {
-      if (rootDocument.pictureInPictureElement) {
+      if (rootDocument_0.pictureInPictureElement) {
         setPictureInPicture(true);
       } else {
         setPictureInPicture(false);
       }
     };
     const methodFullScreen = () => {
-      if (rootDocument.fullscreenElement) {
+      if (rootDocument_0.fullscreenElement) {
         setFullScreen(true);
       } else {
         setFullScreen(false);
@@ -494,20 +467,20 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     (_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 || _refs$root$current3.addEventListener('mousemove', methodMouseMove);
     (_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 || _refs$root$current4.addEventListener('touchstart', methodMouseMove);
     (_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 || _refs$root$current5.addEventListener('touchmove', methodMouseMove);
-    rootDocument.addEventListener('enterpictureinpicture', methodPictureInPicture);
-    rootDocument.addEventListener('leavepictureinpicture', methodPictureInPicture);
-    rootDocument.addEventListener('fullscreenchange', methodFullScreen);
+    rootDocument_0.addEventListener('enterpictureinpicture', methodPictureInPicture);
+    rootDocument_0.addEventListener('leavepictureinpicture', methodPictureInPicture);
+    rootDocument_0.addEventListener('fullscreenchange', methodFullScreen);
     video.src = src;
     return () => {
       var _refs$root$current6, _refs$root$current7, _refs$root$current8;
       (_refs$root$current6 = refs.root.current) === null || _refs$root$current6 === void 0 || _refs$root$current6.removeEventListener('mousemove', methodMouseMove);
       (_refs$root$current7 = refs.root.current) === null || _refs$root$current7 === void 0 || _refs$root$current7.removeEventListener('touchstart', methodMouseMove);
       (_refs$root$current8 = refs.root.current) === null || _refs$root$current8 === void 0 || _refs$root$current8.removeEventListener('touchmove', methodMouseMove);
-      rootDocument.removeEventListener('enterpictureinpicture', methodPictureInPicture);
-      rootDocument.removeEventListener('leavepictureinpicture', methodPictureInPicture);
-      rootDocument.removeEventListener('fullscreenchange', methodFullScreen);
+      rootDocument_0.removeEventListener('enterpictureinpicture', methodPictureInPicture);
+      rootDocument_0.removeEventListener('leavepictureinpicture', methodPictureInPicture);
+      rootDocument_0.removeEventListener('fullscreenchange', methodFullScreen);
     };
-  }, [src, durationTime, startMediaSession]);
+  };
   _react.default.useEffect(() => {
     if (loaded) {
       let urlNew = src;
@@ -534,63 +507,63 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (playing) refs.onPlay.current();
     }
   }, [quality]);
-  const onMouseEnter = _react.default.useCallback(() => {
+  const onMouseEnter = () => {
     setVolumeVisible(true);
-  }, []);
-  const onMouseLeave = _react.default.useCallback(() => {
+  };
+  const onMouseLeave = () => {
     setVolumeVisible(false);
-  }, []);
-  const onUpdating = _react.default.useCallback(() => {
+  };
+  const onUpdating = () => {
     setUpdating(refs.play.current ? 'play' : true);
     if (refs.play.current) onPause();
-  }, [onPause]);
-  const onUpdatingDone = _react.default.useCallback(() => {
+  };
+  const onUpdatingDone = () => {
     const updatingPrevious = refs.updating.current;
     setUpdating(false);
     if (updatingPrevious === 'play') onPlay();
-  }, [onPlay]);
-  const onFullScreen = _react.default.useCallback(async () => {
+  };
+  const onFullScreen = async () => {
     const root = refs.root.current;
     try {
       if (root.requestFullscreen) await root.requestFullscreen();else if (root.webkitRequestFullscreen) await root.webkitRequestFullscreen();else if (root.msRequestFullscreen) await root.msRequestFullscreen();
-    } catch (error) {}
-  }, []);
-  const onFullScreenExit = _react.default.useCallback(async () => {
+    } catch (error_1) {}
+  };
+  const onFullScreenExit = async () => {
     var _refs$root$current9;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current9 = refs.root.current) === null || _refs$root$current9 === void 0 ? void 0 : _refs$root$current9.ownerDocument) || window.document : undefined;
+    const rootDocument_1 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current9 = refs.root.current) === null || _refs$root$current9 === void 0 ? void 0 : _refs$root$current9.ownerDocument) || window.document : undefined;
     try {
-      if (rootDocument.exitFullscreen) await rootDocument.exitFullscreen();else if (rootDocument.webkitExitFullscreen) await rootDocument.webkitExitFullscreen();else if (rootDocument.msExitFullscreen) await rootDocument.msExitFullscreen();
-    } catch (error) {}
-  }, []);
-  const onPictureInPicture = _react.default.useCallback(async () => {
-    const video = refs.video.current;
+      if (rootDocument_1.exitFullscreen) await rootDocument_1.exitFullscreen();else if (rootDocument_1.webkitExitFullscreen) await rootDocument_1.webkitExitFullscreen();else if (rootDocument_1.msExitFullscreen) await rootDocument_1.msExitFullscreen();
+    } catch (error_2) {}
+  };
+  const onPictureInPicture = async () => {
+    const video_0 = refs.video.current;
     try {
-      if (video.requestPictureInPicture) await video.requestPictureInPicture();else if (video.webkitRequestPictureInPicture) await video.webkitRequestPictureInPicture();else if (video.msRequestPictureInPicture) await video.msRequestPictureInPicture();
-    } catch (error) {}
-  }, []);
-  const onPictureInPictureExit = _react.default.useCallback(async () => {
+      if (video_0.requestPictureInPicture) await video_0.requestPictureInPicture();else if (video_0.webkitRequestPictureInPicture) await video_0.webkitRequestPictureInPicture();else if (video_0.msRequestPictureInPicture) await video_0.msRequestPictureInPicture();
+    } catch (error_3) {}
+  };
+  const onPictureInPictureExit = async () => {
     var _refs$root$current0;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current0 = refs.root.current) === null || _refs$root$current0 === void 0 ? void 0 : _refs$root$current0.ownerDocument) || window.document : undefined;
+    const rootDocument_2 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current0 = refs.root.current) === null || _refs$root$current0 === void 0 ? void 0 : _refs$root$current0.ownerDocument) || window.document : undefined;
     try {
-      if (rootDocument.exitPictureInPicture) await rootDocument.exitPictureInPicture();else if (rootDocument.webkitExitPictureInPicture) await rootDocument.webkitExitPictureInPicture();else if (rootDocument.msExitPictureInPicture) await rootDocument.msExitPictureInPicture();
-    } catch (error) {}
-  }, []);
-  const onVideoClick = _react.default.useCallback(event => {
+      if (rootDocument_2.exitPictureInPicture) await rootDocument_2.exitPictureInPicture();else if (rootDocument_2.webkitExitPictureInPicture) await rootDocument_2.webkitExitPictureInPicture();else if (rootDocument_2.msExitPictureInPicture) await rootDocument_2.msExitPictureInPicture();
+    } catch (error_4) {}
+  };
+  const onVideoClick = event => {
     if (event.detail === 1) {
       !play ? onPlay() : onPause();
     }
     if (event.detail === 2) {
       !fullScreen ? onFullScreen() : onFullScreenExit();
     }
-  }, [play, fullScreen, onPlay, onPause, onFullScreen, onFullScreenExit]);
+  };
   _react.default.useEffect(() => {
     var _refs$root$current1;
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current1 = refs.root.current) === null || _refs$root$current1 === void 0 ? void 0 : _refs$root$current1.ownerDocument) || window.document : undefined;
-    rootDocument.addEventListener('mouseup', onUpdatingDone);
-    rootDocument.addEventListener('touchend', onUpdatingDone);
+    const rootDocument_3 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current1 = refs.root.current) === null || _refs$root$current1 === void 0 ? void 0 : _refs$root$current1.ownerDocument) || window.document : undefined;
+    rootDocument_3.addEventListener('mouseup', onUpdatingDone);
+    rootDocument_3.addEventListener('touchend', onUpdatingDone);
     return () => {
-      rootDocument.removeEventListener('mouseup', onUpdatingDone);
-      rootDocument.removeEventListener('touchend', onUpdatingDone);
+      rootDocument_3.removeEventListener('mouseup', onUpdatingDone);
+      rootDocument_3.removeEventListener('touchend', onUpdatingDone);
     };
   }, []);
   _react.default.useEffect(() => {
@@ -598,38 +571,38 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     init();
   }, [src]);
   const durationToValue = item => {
-    let value = '';
+    let value_7 = '';
     const separator = ':';
-    if (item.hour) value += `${(0, _utils.getLeadingZerosNumber)(item.hour, {
+    if (item.hour) value_7 += `${(0, _utils.getLeadingZerosNumber)(item.hour, {
       leadingZeros: 0
     })}`;
     if (item.minute) {
-      if (value) value += separator;
-      value += `${(0, _utils.getLeadingZerosNumber)(item.minute, {
+      if (value_7) value_7 += separator;
+      value_7 += `${(0, _utils.getLeadingZerosNumber)(item.minute, {
         leadingZeros: 0
       })}`;
     } else {
-      if (value) value += separator;
-      value += '0';
+      if (value_7) value_7 += separator;
+      value_7 += '0';
     }
     if (item.second) {
-      if (value) value += separator;
-      value += `${(0, _utils.getLeadingZerosNumber)(item.second, {
+      if (value_7) value_7 += separator;
+      value_7 += `${(0, _utils.getLeadingZerosNumber)(item.second, {
         leadingZeros: 1
       })}`;
     } else {
-      if (value) value += separator;
-      value += '00';
+      if (value_7) value_7 += separator;
+      value_7 += '00';
     }
-    return value;
+    return value_7;
   };
-  const onQuality = _react.default.useCallback(version => {
+  const onQuality = version => {
     setQuality(version);
     setOpenMenu(null);
-  }, []);
-  const onSettingsMenuClose = _react.default.useCallback(() => {
+  };
+  const onSettingsMenuClose = () => {
     setOpenMenu(null);
-  }, []);
+  };
   const getSettingsMenuItems = () => {
     const itemProps = {
       button: true,
@@ -690,15 +663,15 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         onClick: () => quality ? onQuality(null) : undefined,
         selected: !quality
       }, itemProps)));
-      versions === null || versions === void 0 || versions.forEach((version, index) => {
-        var _version$meta;
-        const isSelected = (quality === null || quality === void 0 ? void 0 : quality.id) === (version === null || version === void 0 ? void 0 : version.id);
+      versions === null || versions === void 0 || versions.forEach((version_0, index) => {
+        var _version_0$meta;
+        const isSelected = (quality === null || quality === void 0 ? void 0 : quality.id) === (version_0 === null || version_0 === void 0 ? void 0 : version_0.id);
         items.push(/*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
           key: index,
           primary: /*#__PURE__*/_react.default.createElement(Type, {
             version: "b3"
-          }, version === null || version === void 0 || (_version$meta = version.meta) === null || _version$meta === void 0 ? void 0 : _version$meta.resolution, "p"),
-          onClick: () => !isSelected ? onQuality(version) : undefined,
+          }, version_0 === null || version_0 === void 0 || (_version_0$meta = version_0.meta) === null || _version_0$meta === void 0 ? void 0 : _version_0$meta.resolution, "p"),
+          onClick: () => !isSelected ? onQuality(version_0) : undefined,
           selected: isSelected
         }, itemProps)));
       });
@@ -743,11 +716,11 @@ const VideoPlayer = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     poster = `${url}${(_url = url) !== null && _url !== void 0 && _url.includes('?') ? '&' : '?'}thumbnail=${thumbnail}`;
   }
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 1,
     direction: "column",

package/ViewSplit/ViewSplit.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ILine } from '../Line/Line';
 import { IElement, IPropsAny } from '../types';
-export type IViewSplit = Omit<ILine, 'onChange'> & {
+export declare type IViewSplit = Omit<ILine, 'onChange'> & {
     valueDefault?: number;
     value?: number;
     onChange?: (value: number) => any;