@reactuses/core 3.0.0 → 3.0.2

package/dist/index.cjs

@@ -44,7 +44,7 @@ const createUpdateEffect = (hook) => (effect, deps) => {
 
 var useUpdateEffect = createUpdateEffect(React.useEffect);
 
-var index$4 = createUpdateEffect(React.useLayoutEffect);
+var index$3 = createUpdateEffect(React.useLayoutEffect);
 
 var _a;
 const isFunction$1 = (val) => typeof val === "function";
@@ -3412,35 +3412,98 @@ function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1)
   return state;
 }
 
-function useMediaDevices() {
+function useSupported(callback, sync = false) {
+  const [supported, setSupported] = React.useState(false);
+  const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
+  effect(() => {
+    setSupported(Boolean(callback()));
+  }, []);
+  return supported;
+}
+
+var __async$4 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useMediaDevices(options = {}) {
+  const { requestPermissions, constraints = { audio: true, video: true } } = options;
   const [state, setState] = React.useState({ devices: [] });
+  const isSupported = useSupported(
+    () => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices
+  );
+  const permissionGranted = React.useRef(false);
+  const stream = React.useRef(null);
+  const onChange = React.useCallback(() => {
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+      if (stream.current) {
+        stream.current.getTracks().forEach((t) => t.stop());
+        stream.current = null;
+      }
+      setState({
+        devices: devices.map(({ deviceId, groupId, kind, label }) => ({
+          deviceId,
+          groupId,
+          kind,
+          label
+        }))
+      });
+    }).catch(noop);
+  }, []);
+  const ensurePermissions = React.useCallback(() => __async$4(this, null, function* () {
+    if (!isSupported) {
+      return false;
+    }
+    if (permissionGranted.current) {
+      return true;
+    }
+    let state2 = void 0;
+    try {
+      state2 = (yield navigator.permissions.query({
+        name: "camera"
+      })).state;
+    } catch (error) {
+      state2 = "prompt";
+    }
+    if (state2 !== "granted") {
+      stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
+      onChange();
+      permissionGranted.current = true;
+    } else {
+      permissionGranted.current = false;
+    }
+    return permissionGranted.current;
+  }), [onChange, isSupported, constraints]);
   React.useEffect(() => {
-    let mounted = true;
-    const onChange = () => {
-      navigator.mediaDevices.enumerateDevices().then((devices) => {
-        if (mounted) {
-          setState({
-            devices: devices.map(({ deviceId, groupId, kind, label }) => ({
-              deviceId,
-              groupId,
-              kind,
-              label
-            }))
-          });
-        }
-      }).catch(noop);
-    };
+    if (!isSupported) {
+      return;
+    }
+    if (requestPermissions) {
+      ensurePermissions();
+    }
     on(navigator.mediaDevices, "devicechange", onChange);
     onChange();
     return () => {
-      mounted = false;
       off(navigator.mediaDevices, "devicechange", onChange);
     };
-  }, []);
-  return state;
+  }, [onChange, isSupported, requestPermissions, ensurePermissions]);
+  return [state, ensurePermissions];
 }
-const useMediaDevicesMock = () => ({ devices: [] });
-var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
   const { selector = "html", initialValue = "ltr" } = options;
@@ -5222,15 +5285,6 @@ const useCountDown = (time, format = getHMSTime, callback) => {
   return [hour, minute, secoud];
 };
 
-function useSupported(callback, sync = false) {
-  const [supported, setSupported] = React.useState(false);
-  const effect = sync ? useIsomorphicLayoutEffect : React.useEffect;
-  effect(() => {
-    setSupported(Boolean(callback()));
-  }, []);
-  return supported;
-}
-
 function useTextSelection() {
   const [selection, setSelection] = React.useState(null);
   const forceUpdate = useUpdate();
@@ -5604,7 +5658,7 @@ exports.useLatest = useLatest;
 exports.useLocalStorage = useLocalStorage;
 exports.useLongPress = useLongPress;
 exports.useMeasure = useMeasure;
-exports.useMediaDevices = index$3;
+exports.useMediaDevices = useMediaDevices;
 exports.useMediaQuery = useMediaQuery;
 exports.useMount = useMount;
 exports.useMountedState = useMountedState;
@@ -5646,7 +5700,7 @@ exports.useToggle = useToggle;
 exports.useUnmount = useUnmount;
 exports.useUpdate = useUpdate;
 exports.useUpdateEffect = useUpdateEffect;
-exports.useUpdateLayoutEffect = index$4;
+exports.useUpdateLayoutEffect = index$3;
 exports.useVirtualList = useVirtualList;
 exports.useWindowScroll = useWindowScroll;
 exports.useWindowSize = useWindowSize;

package/dist/index.d.ts

@@ -9,9 +9,9 @@ declare function useLatest<T>(value: T): MutableRefObject<T>;
 
 declare function useFirstMountState(): boolean;
 
-declare const _default$5: typeof useEffect | typeof react.useLayoutEffect;
+declare const _default$4: typeof useEffect | typeof react.useLayoutEffect;
 
-declare const _default$4: typeof react.useEffect | typeof useLayoutEffect;
+declare const _default$3: typeof react.useEffect | typeof useLayoutEffect;
 
 interface Serializer<T> {
     read(raw: string): T;
@@ -287,15 +287,29 @@ declare function useObjectUrl(object: Blob | MediaSource | undefined): string |
 
 declare function useIdle(ms?: number, initialState?: boolean, events?: (keyof WindowEventMap)[]): boolean;
 
-declare function useMediaDevices(): {
+interface UseMediaDeviceOptions {
+    /**
+     * Request for permissions immediately if it's not granted,
+     * otherwise label and deviceIds could be empty
+     *
+     * @default false
+     */
+    requestPermissions?: boolean;
+    /**
+     * Request for types of media permissions
+     *
+     * @default { audio: true, video: true }
+     */
+    constraints?: MediaStreamConstraints;
+}
+declare function useMediaDevices(options?: UseMediaDeviceOptions): readonly [{
     devices: {
         deviceId: string;
         groupId: string;
         kind: MediaDeviceKind;
         label: string;
     }[];
-};
-declare const _default$3: typeof useMediaDevices;
+}, () => Promise<boolean>];
 
 type UseTextDirectionValue = "ltr" | "rtl" | "auto";
 interface UseTextDirectionOptions {
@@ -852,4 +866,4 @@ declare function useSetState<T extends Record<string, any>>(initialState: T): re
 type UseMeasureRect = Omit<DOMRectReadOnly, "toJSON">;
 declare function useMeasure(target: BasicTarget, options?: ResizeObserverOptions): readonly [UseMeasureRect, () => void];
 
-export { ColorScheme, Contrast, CookieOptions, CookieState, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseMeasureRect, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, _default$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$5 as useUpdateEffect, _default$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+export { ColorScheme, Contrast, CookieOptions, CookieState, CursorState, EyeDropperOpenReturnType, GeneralPermissionDescriptor, IDisposable, IEvent, IEventOnce, IListener, INetworkInformation, IState, IUseNetworkState, KeyModifier, MousePressedOptions, MouseSourceType, OrientationState, RafLoopReturns, ScrollIntoViewAnimation, ScrollIntoViewParams, State, Status, Target, UseDarkOptions, UseDraggableOptions, UseElementBoundingOptions, UseEventEmitterReturn, UseEyeDropperReturn, UseFileDialogOptions, UseFpsOptions, UseFullScreenOptions, UseInfiniteScrollOptions, UseLongPressOptions, UseMeasureRect, UseMediaDeviceOptions, UseModifierOptions, UseScriptTagOptions, UseScrollOptions, UseStickyParams, UseTextDirectionOptions, UseTextDirectionValue, UseTimeoutFnOptions, UseVirtualListItem, UseVirtualListOptions, UseVirtualListReturn, WindowSize, getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, _default$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, _default$1 as useOnceEffect, _default as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, _default$4 as useUpdateEffect, _default$3 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/dist/index.mjs

@@ -36,7 +36,7 @@ const createUpdateEffect = (hook) => (effect, deps) => {
 
 var useUpdateEffect = createUpdateEffect(useEffect);
 
-var index$4 = createUpdateEffect(useLayoutEffect);
+var index$3 = createUpdateEffect(useLayoutEffect);
 
 var _a;
 const isFunction$1 = (val) => typeof val === "function";
@@ -3404,35 +3404,98 @@ function useIdle(ms = oneMinute, initialState = false, events = defaultEvents$1)
   return state;
 }
 
-function useMediaDevices() {
+function useSupported(callback, sync = false) {
+  const [supported, setSupported] = useState(false);
+  const effect = sync ? useIsomorphicLayoutEffect : useEffect;
+  effect(() => {
+    setSupported(Boolean(callback()));
+  }, []);
+  return supported;
+}
+
+var __async$4 = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+function useMediaDevices(options = {}) {
+  const { requestPermissions, constraints = { audio: true, video: true } } = options;
   const [state, setState] = useState({ devices: [] });
+  const isSupported = useSupported(
+    () => navigator && navigator.mediaDevices && navigator.mediaDevices.enumerateDevices
+  );
+  const permissionGranted = useRef(false);
+  const stream = useRef(null);
+  const onChange = useCallback(() => {
+    navigator.mediaDevices.enumerateDevices().then((devices) => {
+      if (stream.current) {
+        stream.current.getTracks().forEach((t) => t.stop());
+        stream.current = null;
+      }
+      setState({
+        devices: devices.map(({ deviceId, groupId, kind, label }) => ({
+          deviceId,
+          groupId,
+          kind,
+          label
+        }))
+      });
+    }).catch(noop);
+  }, []);
+  const ensurePermissions = useCallback(() => __async$4(this, null, function* () {
+    if (!isSupported) {
+      return false;
+    }
+    if (permissionGranted.current) {
+      return true;
+    }
+    let state2 = void 0;
+    try {
+      state2 = (yield navigator.permissions.query({
+        name: "camera"
+      })).state;
+    } catch (error) {
+      state2 = "prompt";
+    }
+    if (state2 !== "granted") {
+      stream.current = yield navigator.mediaDevices.getUserMedia(constraints);
+      onChange();
+      permissionGranted.current = true;
+    } else {
+      permissionGranted.current = false;
+    }
+    return permissionGranted.current;
+  }), [onChange, isSupported, constraints]);
   useEffect(() => {
-    let mounted = true;
-    const onChange = () => {
-      navigator.mediaDevices.enumerateDevices().then((devices) => {
-        if (mounted) {
-          setState({
-            devices: devices.map(({ deviceId, groupId, kind, label }) => ({
-              deviceId,
-              groupId,
-              kind,
-              label
-            }))
-          });
-        }
-      }).catch(noop);
-    };
+    if (!isSupported) {
+      return;
+    }
+    if (requestPermissions) {
+      ensurePermissions();
+    }
     on(navigator.mediaDevices, "devicechange", onChange);
     onChange();
     return () => {
-      mounted = false;
       off(navigator.mediaDevices, "devicechange", onChange);
     };
-  }, []);
-  return state;
+  }, [onChange, isSupported, requestPermissions, ensurePermissions]);
+  return [state, ensurePermissions];
 }
-const useMediaDevicesMock = () => ({ devices: [] });
-var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
   const { selector = "html", initialValue = "ltr" } = options;
@@ -5214,15 +5277,6 @@ const useCountDown = (time, format = getHMSTime, callback) => {
   return [hour, minute, secoud];
 };
 
-function useSupported(callback, sync = false) {
-  const [supported, setSupported] = useState(false);
-  const effect = sync ? useIsomorphicLayoutEffect : useEffect;
-  effect(() => {
-    setSupported(Boolean(callback()));
-  }, []);
-  return supported;
-}
-
 function useTextSelection() {
   const [selection, setSelection] = useState(null);
   const forceUpdate = useUpdate();
@@ -5553,4 +5607,4 @@ function useMeasure(target, options = {}) {
   return [rect, stop];
 }
 
-export { getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, index$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, index$3 as useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, index$4 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };
+export { getHMSTime, useActiveElement, useAsyncEffect, useClickOutSide as useClickOutside, useClipBorad as useClipboard, useControlled, useCookie, useCountDown, useCounter, useCustomCompareEffect, useCycleList, useDarkMode, useDebounce, useDebounceFn, useDeepCompareEffect, useDocumentVisibility, useDoubleClick, useDraggable, useDropZone, useElementBounding, useElementSize, useElementVisibility, useEvent, useEventEmitter, useEventListener, useEyeDropper, useFavicon, useFileDialog, useFirstMountState, useFocus, index$2 as useFps, useFullscreen, useGeolocation, useIdle, useInfiniteScroll, useIntersectionObserver, useInterval, useIsomorphicLayoutEffect, useKeyModifier, useLatest, useLocalStorage, useLongPress, useMeasure, useMediaDevices, useMediaQuery, useMount, useMountedState, useMouse, useMousePressed, useMutationObserver, useNetwork, useObjectUrl, index$1 as useOnceEffect, index as useOnceLayoutEffect, useOnline, useOrientation, usePageLeave, usePermission, usePreferredColorScheme, usePreferredContrast, usePreferredDark, usePrevious, useRafFn, useRafState, useReducedMotion, useResizeObserver, useScriptTag, useScroll, useScrollIntoView, useScrollLock, useSessionStorage, useSetState, useSticky, useSupported, useTextDirection, useTextSelection, useThrottle, useThrottleFn, useTimeout, useTimeoutFn, useTitle, useToggle, useUnmount, useUpdate, useUpdateEffect, index$3 as useUpdateLayoutEffect, useVirtualList, useWindowScroll, useWindowSize, useWindowsFocus };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactuses/core",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "license": "Unlicense",
   "homepage": "https://www.reactuse.com/",
   "repository": {