@onesy/ui-react 1.0.163 → 1.0.165

package/esm/Type/Type.js

@@ -189,12 +189,12 @@ const useStyle = styleMethod(theme => ({
 });
 const Type = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyType?.props?.default), props_), [props_]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyType?.props?.default), props_);
   const {
-      color = 'inherit',
-      responsive = true,
+      color: t0,
+      responsive: t1,
       priority,
-      version = 'b2',
+      version: t2,
       align,
       transform,
       size,
@@ -208,6 +208,9 @@ const Type = /*#__PURE__*/React.forwardRef((props_, ref) => {
       children
     } = props,
     other = _objectWithoutProperties(props, _excluded);
+  const color = t0 === undefined ? "inherit" : t0;
+  const responsive = t1 === undefined ? true : t1;
+  const version = t2 === undefined ? "b2" : t2;
   const {
     classes
   } = useStyle();
@@ -216,24 +219,30 @@ const Type = /*#__PURE__*/React.forwardRef((props_, ref) => {
   };
   let Component = Component_;
   const map = {
-    h1: ['d1', 'd2', 'd3', 'h1'],
-    h2: ['h2'],
-    h3: ['h3'],
-    h4: ['h4', 't1', 't2', 't3'],
-    h5: ['h5', 'l1', 'l2', 'l3'],
-    p: ['b1', 'b2', 'b3', 'm1', 'm2', 'm3']
+    h1: ["d1", "d2", "d3", "h1"],
+    h2: ["h2"],
+    h3: ["h3"],
+    h4: ["h4", "t1", "t2", "t3"],
+    h5: ["h5", "l1", "l2", "l3"],
+    p: ["b1", "b2", "b3", "m1", "m2", "m3"]
   };
   Object.keys(map).forEach(item => {
-    if (map[item].includes(version) && !Component) Component = item;
+    if (map[item].includes(version) && !Component) {
+      Component = item;
+    }
   });
-  if (!Component) Component = 'p';
+  if (!Component) {
+    Component = "p";
+  }
   if (!classes[`color_${color}`]) {
     styles.root.color = color;
   }
-  if (size !== undefined) styles.root.fontSize = size;
+  if (size !== undefined) {
+    styles.root.fontSize = size;
+  }
   return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
-    className: classNames([staticClassName('Type', theme) && ['onesy-Type-root', version && `onesy-Type-version-${version}`, size && is('string', size) && `onesy-Type-size-${size}`, disabled && `onesy-Type-disabled`], className, classes.root, classes[`version_${version}`], responsive && classes[`version_${version}_responsive`], classes[`color_${color}`], priority && classes[`priority_${priority}`], align && classes[`align_${align}`], transform && classes[`transform_${transform}`], fullWidth && classes.fullWidth, disabled && classes.disabled]),
+    className: classNames([staticClassName("Type", theme) && ["onesy-Type-root", version && `onesy-Type-version-${version}`, size && is("string", size) && `onesy-Type-size-${size}`, disabled && "onesy-Type-disabled"], className, classes.root, classes[`version_${version}`], responsive && classes[`version_${version}_responsive`], classes[`color_${color}`], priority && classes[`priority_${priority}`], align && classes[`align_${align}`], transform && classes[`transform_${transform}`], fullWidth && classes.fullWidth, disabled && classes.disabled]),
     style: _objectSpread(_objectSpread({
       whiteSpace,
       fontWeight: weight

package/esm/VideoPlayer/VideoPlayer.js

@@ -154,15 +154,15 @@ const useStyle = styleMethod(theme => ({
 const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const theme = useOnesyTheme();
   const l = theme.l;
-  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyVideoPlayer?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
-  const Slider = React.useMemo(() => theme?.elements?.Slider || SliderElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
-  const Expand = React.useMemo(() => theme?.elements?.Expand || ExpandElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
-  const ListItem = React.useMemo(() => theme?.elements?.ListItem || ListItemElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyVideoPlayer?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Surface = theme?.elements?.Surface || SurfaceElement;
+  const Slider = theme?.elements?.Slider || SliderElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
+  const Expand = theme?.elements?.Expand || ExpandElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Menu = theme?.elements?.Menu || MenuElement;
+  const ListItem = theme?.elements?.ListItem || ListItemElement;
   const {
       name,
       src,
@@ -274,7 +274,7 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       return rootDocument.pictureInPictureEnabled;
     }
   };
-  const startMediaSession = React.useCallback(() => {
+  const startMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.metadata = new MediaMetadata({
         title: name
@@ -312,8 +312,8 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }
       }
     }
-  }, [name]);
-  const updateMediaSession = React.useCallback(() => {
+  };
+  const updateMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.setPositionState({
         duration: refs.duration.current,
@@ -321,40 +321,40 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         position: clamp(refs.time.current, 0, refs.duration.current)
       });
     }
-  }, [name]);
+  };
   refs.startMediaSession.current = startMediaSession;
   refs.updateMediaSession.current = updateMediaSession;
   const durationTime = duration_ || meta?.duration;
-  const onVolumeChange = React.useCallback(value => {
+  const onVolumeChange = value => {
     setVolume(value);
     refs.video.current.volume = value;
-  }, []);
-  const onTimeChange = React.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.useCallback(value_ => {
-    const value = clamp(value_, 0, 2);
-    setPlaybackSpeed(value);
+  };
+  const onPlaybackSpeed = value_ => {
+    const value_1 = clamp(value_, 0, 2);
+    setPlaybackSpeed(value_1);
     setOpenMenu(null);
-    refs.video.current.playbackRate = value;
-  }, []);
-  const onForward = React.useCallback(details => {
-    const part = refs.duration.current * 0.1;
-    const toMove = clamp(details?.seekOffset || part, 1, refs.duration.current);
-    const value = clamp(refs.time.current + toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onBackward = React.useCallback(details => {
+    refs.video.current.playbackRate = value_1;
+  };
+  const onForward = details_0 => {
     const part = refs.duration.current * 0.1;
-    const toMove = clamp(details?.seekOffset || part, 1, refs.duration.current);
-    const value = clamp(refs.time.current - toMove, 0, refs.duration.current);
-    refs.onTimeChange.current(value);
-  }, []);
-  const onPlay = React.useCallback(() => {
+    const toMove = clamp(details_0?.seekOffset || part, 1, refs.duration.current);
+    const value_2 = 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 = clamp(details_1?.seekOffset || part_0, 1, refs.duration.current);
+    const value_3 = clamp(refs.time.current - toMove_0, 0, refs.duration.current);
+    refs.onTimeChange.current(value_3);
+  };
+  const onPlay = () => {
     try {
       setPlay(true);
       refs.video.current.play();
@@ -364,40 +364,40 @@ const VideoPlayer = /*#__PURE__*/React.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.useCallback(() => {
+  };
+  const onPause = () => {
     setPlay(false);
     refs.video.current.pause();
-  }, []);
-  const onStop = React.useCallback(() => {
+  };
+  const onStop = () => {
     setPlay(false);
     refs.video.current.pause();
     refs.video.current.currentTime = 0;
-  }, []);
-  const onMute = React.useCallback(() => {
+  };
+  const onMute = () => {
     setMuted(true);
     refs.video.current.muted = true;
-  }, []);
-  const onUnmute = React.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.useCallback(() => {
+  const init = () => {
     setLoaded(false);
     const video = refs.video.current;
     video.addEventListener('loadedmetadata', () => {
-      const value = video.duration;
-      if (!is('number', durationTime) && is('number', value)) {
-        if (refs.duration.current === undefined) setDuration(value);
+      const value_4 = video.duration;
+      if (!is('number', durationTime) && is('number', value_4)) {
+        if (refs.duration.current === undefined) setDuration(value_4);
         setLoaded(true);
       }
     });
@@ -405,17 +405,17 @@ const VideoPlayer = /*#__PURE__*/React.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
@@ -424,16 +424,16 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (refs.duration.current === undefined) setDuration(durationTime);
       setLoaded(true);
     }
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.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);
@@ -457,19 +457,19 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     refs.root.current?.addEventListener('mousemove', methodMouseMove);
     refs.root.current?.addEventListener('touchstart', methodMouseMove);
     refs.root.current?.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 () => {
       refs.root.current?.removeEventListener('mousemove', methodMouseMove);
       refs.root.current?.removeEventListener('touchstart', methodMouseMove);
       refs.root.current?.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.useEffect(() => {
     if (loaded) {
       let urlNew = src;
@@ -495,60 +495,60 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       if (playing) refs.onPlay.current();
     }
   }, [quality]);
-  const onMouseEnter = React.useCallback(() => {
+  const onMouseEnter = () => {
     setVolumeVisible(true);
-  }, []);
-  const onMouseLeave = React.useCallback(() => {
+  };
+  const onMouseLeave = () => {
     setVolumeVisible(false);
-  }, []);
-  const onUpdating = React.useCallback(() => {
+  };
+  const onUpdating = () => {
     setUpdating(refs.play.current ? 'play' : true);
     if (refs.play.current) onPause();
-  }, [onPause]);
-  const onUpdatingDone = React.useCallback(() => {
+  };
+  const onUpdatingDone = () => {
     const updatingPrevious = refs.updating.current;
     setUpdating(false);
     if (updatingPrevious === 'play') onPlay();
-  }, [onPlay]);
-  const onFullScreen = React.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.useCallback(async () => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    } catch (error_1) {}
+  };
+  const onFullScreenExit = async () => {
+    const rootDocument_1 = isEnvironment('browser') ? refs.root.current?.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.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.useCallback(async () => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+      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 () => {
+    const rootDocument_2 = isEnvironment('browser') ? refs.root.current?.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.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.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    rootDocument.addEventListener('mouseup', onUpdatingDone);
-    rootDocument.addEventListener('touchend', onUpdatingDone);
+    const rootDocument_3 = isEnvironment('browser') ? refs.root.current?.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.useEffect(() => {
@@ -556,38 +556,38 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     init();
   }, [src]);
   const durationToValue = item => {
-    let value = '';
+    let value_7 = '';
     const separator = ':';
-    if (item.hour) value += `${getLeadingZerosNumber(item.hour, {
+    if (item.hour) value_7 += `${getLeadingZerosNumber(item.hour, {
       leadingZeros: 0
     })}`;
     if (item.minute) {
-      if (value) value += separator;
-      value += `${getLeadingZerosNumber(item.minute, {
+      if (value_7) value_7 += separator;
+      value_7 += `${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 += `${getLeadingZerosNumber(item.second, {
+      if (value_7) value_7 += separator;
+      value_7 += `${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.useCallback(version => {
+  const onQuality = version => {
     setQuality(version);
     setOpenMenu(null);
-  }, []);
-  const onSettingsMenuClose = React.useCallback(() => {
+  };
+  const onSettingsMenuClose = () => {
     setOpenMenu(null);
-  }, []);
+  };
   const getSettingsMenuItems = () => {
     const itemProps = {
       button: true,
@@ -647,14 +647,14 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         onClick: () => quality ? onQuality(null) : undefined,
         selected: !quality
       }, itemProps)));
-      versions?.forEach((version, index) => {
-        const isSelected = quality?.id === version?.id;
+      versions?.forEach((version_0, index) => {
+        const isSelected = quality?.id === version_0?.id;
         items.push(/*#__PURE__*/React.createElement(ListItem, _extends({
           key: index,
           primary: /*#__PURE__*/React.createElement(Type, {
             version: "b3"
-          }, version?.meta?.resolution, "p"),
-          onClick: () => !isSelected ? onQuality(version) : undefined,
+          }, version_0?.meta?.resolution, "p"),
+          onClick: () => !isSelected ? onQuality(version_0) : undefined,
           selected: isSelected
         }, itemProps)));
       });
@@ -697,11 +697,11 @@ const VideoPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     poster = `${url}${url?.includes('?') ? '&' : '?'}thumbnail=${thumbnail}`;
   }
   return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if (is('function', ref)) ref(item);else ref.current = item;
+        if (is('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     gap: 1,
     direction: "column",