@onesy/ui-react 1.0.164 → 1.0.165

package/esm/AudioPlayer/AudioPlayer.js

@@ -114,15 +114,15 @@ const useStyle = styleMethod(theme => ({
 const AudioPlayer = /*#__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?.onesyAudioPlayer?.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?.onesyAudioPlayer?.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,
@@ -211,7 +211,7 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.play.current = play;
   refs.updating.current = updating;
   refs.startMediaSessionOnPlay.current = startMediaSessionOnPlay;
-  const startMediaSession = React.useCallback(() => {
+  const startMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.metadata = new MediaMetadata({
         title: name
@@ -249,8 +249,8 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }
       }
     }
-  }, [name]);
-  const updateMediaSession = React.useCallback(() => {
+  };
+  const updateMediaSession = () => {
     if ('mediaSession' in navigator) {
       window.navigator.mediaSession.setPositionState({
         duration: refs.duration.current,
@@ -258,40 +258,40 @@ const AudioPlayer = /*#__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.audio.current.volume = value;
-  }, []);
-  const onTimeChange = React.useCallback(value => {
-    setTime(value);
-    refs.audio.current.currentTime = value;
+  };
+  const onTimeChange = value_0 => {
+    setTime(value_0);
+    refs.audio.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.audio.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.audio.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.audio.current.play();
@@ -301,42 +301,42 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
       // update MediaSession
       refs.updateMediaSession.current();
-    } catch (error) {
-      console.error(`AudioPlayer`, error);
+    } catch (error_0) {
+      console.error(`AudioPlayer`, error_0);
     }
-  }, []);
-  const onPause = React.useCallback(() => {
+  };
+  const onPause = () => {
     setPlay(false);
     refs.audio.current.pause();
-  }, []);
-  const onStop = React.useCallback(() => {
+  };
+  const onStop = () => {
     setPlay(false);
     refs.audio.current.pause();
     refs.audio.current.currentTime = 0;
-  }, []);
-  const onMute = React.useCallback(() => {
+  };
+  const onMute = () => {
     setMuted(true);
     refs.audio.current.muted = true;
-  }, []);
-  const onUnmute = React.useCallback(() => {
+  };
+  const onUnmute = () => {
     setMuted(false);
     refs.audio.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 rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
     refs.audio.current = rootDocument.createElement('audio');
     const audio = refs.audio.current;
     audio.addEventListener('loadedmetadata', () => {
-      const value = audio.duration;
-      if (!is('number', durationTime) && is('number', value)) {
-        if (refs.duration.current === undefined) setDuration(value);
+      const value_4 = audio.duration;
+      if (!is('number', durationTime) && is('number', value_4)) {
+        if (refs.duration.current === undefined) setDuration(value_4);
         setLoaded(true);
       }
     });
@@ -344,17 +344,17 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       refs.onStop.current();
     });
     audio.addEventListener('timeupdate', () => {
-      const value = audio.currentTime;
-      if (!refs.updating.current && refs.time.current !== value) {
-        setTime(value);
+      const value_5 = audio.currentTime;
+      if (!refs.updating.current && refs.time.current !== value_5) {
+        setTime(value_5);
 
         // update MediaSession
         refs.updateMediaSession.current();
       }
     });
     audio.addEventListener('ratechange', () => {
-      const value = audio.playbackRate;
-      setPlaybackSpeed(value);
+      const value_6 = audio.playbackRate;
+      setPlaybackSpeed(value_6);
     });
 
     // start MediaSession
@@ -364,7 +364,7 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
       setLoaded(true);
     }
     audio.src = src;
-  }, [src, durationTime, startMediaSession]);
+  };
   React.useEffect(() => {
     if (loaded) {
       let urlNew = src;
@@ -384,28 +384,28 @@ const AudioPlayer = /*#__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]);
+  };
   React.useEffect(() => {
-    const rootDocument = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
-    rootDocument.addEventListener('mouseup', onUpdatingDone);
-    rootDocument.addEventListener('touchend', onUpdatingDone);
+    const rootDocument_0 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+    rootDocument_0.addEventListener('mouseup', onUpdatingDone);
+    rootDocument_0.addEventListener('touchend', onUpdatingDone);
     return () => {
-      rootDocument.removeEventListener('mouseup', onUpdatingDone);
-      rootDocument.removeEventListener('touchend', onUpdatingDone);
+      rootDocument_0.removeEventListener('mouseup', onUpdatingDone);
+      rootDocument_0.removeEventListener('touchend', onUpdatingDone);
     };
   }, []);
   React.useEffect(() => {
@@ -413,38 +413,38 @@ const AudioPlayer = /*#__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,
@@ -533,11 +533,11 @@ const AudioPlayer = /*#__PURE__*/React.forwardRef((props_, ref) => {
     disabled
   }, SliderProps);
   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",

package/esm/AudioRecorder/AudioRecorder.js

@@ -64,12 +64,12 @@ const useStyle = styleMethod(theme => ({
 const AudioRecorder = /*#__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?.onesyAudioRecorder?.props?.default), props_), [props_]);
-  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
-  const Fade = React.useMemo(() => theme?.elements?.Fade || FadeElement, [theme]);
-  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
-  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
-  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAudioRecorder?.props?.default), props_);
+  const Line = theme?.elements?.Line || LineElement;
+  const Fade = theme?.elements?.Fade || FadeElement;
+  const Type = theme?.elements?.Type || TypeElement;
+  const Tooltip = theme?.elements?.Tooltip || TooltipElement;
+  const IconButton = theme?.elements?.IconButton || IconButtonElement;
   const {
       size = 'regular',
       pause = true,
@@ -131,7 +131,7 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setValue(refs.valuePaused.current + (OnesyDate.milliseconds - refs.startedAt.current));
     refs.animationFrame.current = requestAnimationFrame(update);
   };
-  const onStart = React.useCallback(async event => {
+  const onStart = async event => {
     // MediaStream
     try {
       const stream = await navigator.mediaDevices.getUserMedia({
@@ -152,7 +152,7 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
       });
 
       // stop
-      refs.mediaRecorder.current.addEventListener('stop', event_ => {
+      refs.mediaRecorder.current.addEventListener('stop', event__0 => {
         const tracks = stream.getTracks();
         tracks.forEach(track => track.stop());
       });
@@ -177,8 +177,8 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
 
     // previous action
     refs.previousAction.current = 'start';
-  }, [onStart_, onError]);
-  const onPause = React.useCallback(event => {
+  };
+  const onPause = event_0 => {
     // media recorder
     if (refs.mediaRecorder.current) refs.mediaRecorder.current.pause();
 
@@ -189,12 +189,12 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     // Remember previous value
     refs.valuePaused.current = refs.value.current;
     setStatus('paused');
-    if (is('function', onPause_)) onPause_(event);
+    if (is('function', onPause_)) onPause_(event_0);
 
     // previous action
     refs.previousAction.current = 'pause';
-  }, [onPause_]);
-  const onStop = React.useCallback(event => {
+  };
+  const onStop = event_1 => {
     // media recorder
     if (refs.mediaRecorder.current) refs.mediaRecorder.current.stop();
     clear();
@@ -202,11 +202,11 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     setValue(0);
     refs.valuePaused.current = 0;
     refs.value.current = 0;
-    if (is('function', onStop_)) onStop_(event);
-  }, [onStop_]);
-  const onConfirm = React.useCallback(async event => {
+    if (is('function', onStop_)) onStop_(event_1);
+  };
+  const onConfirm = async event_2 => {
     // Stop
-    onStop(event);
+    onStop(event_2);
 
     // duration
     if (refs.previousAction.current === 'resume') {
@@ -226,15 +226,15 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     });
     try {
       blob = await audioFix(blob);
-    } catch (error) {
-      console.log('AudioRecorder onConfirm error', error);
+    } catch (error_0) {
+      console.log('AudioRecorder onConfirm error', error_0);
     }
 
     // clean up
     refs.mediaRecorderBytes.current = [];
     if (is('function', onConfirm_)) onConfirm_(blob, meta);
-  }, [onStop, onConfirm_]);
-  const onResume = React.useCallback(event => {
+  };
+  const onResume = event_3 => {
     // media recorder
     if (refs.mediaRecorder.current) refs.mediaRecorder.current.resume();
 
@@ -244,11 +244,11 @@ const AudioRecorder = /*#__PURE__*/React.forwardRef((props_, ref) => {
     // ~60+ fps
     refs.animationFrame.current = requestAnimationFrame(update);
     setStatus('running');
-    if (is('function', onResume_)) onResume_(event);
+    if (is('function', onResume_)) onResume_(event_3);
 
     // previous action
     refs.previousAction.current = 'resume';
-  }, [onResume_]);
+  };
   const valueFormat = valueNew_ => {
     let valueNew = '';
     const valueDuration = duration(valueNew_, undefined, true, undefined, ['hour', 'minute', 'second', 'millisecond']);