@reactuses/core 3.0.0 → 3.0.1

package/dist/index.cjs

@@ -3412,34 +3412,95 @@ 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;
+    }
+    const permissionStatus = yield navigator.permissions.query({
+      name: "camera"
+    });
+    if (permissionStatus.state !== "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: [] });
+const useMediaDevicesMock = () => [{ devices: [] }, () => {
+}];
 var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -5222,15 +5283,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();

package/dist/index.d.ts

@@ -287,15 +287,32 @@ 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>];
+declare const _default$3: typeof useMediaDevices | (() => ((() => void) | {
+    devices: never[];
+})[]);
 
 type UseTextDirectionValue = "ltr" | "rtl" | "auto";
 interface UseTextDirectionOptions {
@@ -852,4 +869,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, _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 };

package/dist/index.mjs

@@ -3404,34 +3404,95 @@ 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;
+    }
+    const permissionStatus = yield navigator.permissions.query({
+      name: "camera"
+    });
+    if (permissionStatus.state !== "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: [] });
+const useMediaDevicesMock = () => [{ devices: [] }, () => {
+}];
 var index$3 = isNavigator && !!navigator.mediaDevices ? useMediaDevices : useMediaDevicesMock;
 
 function useTextDirection(options = {}) {
@@ -5214,15 +5275,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();

package/package.json

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