@onesy/ui-react 1.0.129 → 1.0.131

package/ScreenCapture/ScreenCapture.js

@@ -1,344 +1,436 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialFitScreenW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFitScreenW100"));
-const IconMaterialDocumentScannerW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDocumentScannerW100"));
-const IconMaterialCropFreeW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCropFreeW100"));
-const IconMaterialDownloadW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDownloadW100"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const Surface_1 = __importDefault(require("../Surface"));
-const TextField_1 = __importDefault(require("../TextField"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const ImageCrop_1 = __importDefault(require("../ImageCrop"));
-const Portal_1 = __importDefault(require("../Portal"));
-const Line_1 = __importDefault(require("../Line"));
-const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
-const Buttons_1 = require("../Buttons/Buttons");
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        padding: `${theme.methods.space.value(2.5, 'px')} ${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`,
-        borderRadius: theme.methods.shape.radius.value('rg', 'px')
-    },
-    wrapper: {
-        inset: '0',
-        position: 'fixed',
-        background: '#000',
-        zIndex: theme.z_index.tooltip + 4
-    }
-}), { name: 'onesy-ScreenCapture' });
-const ScreenCapture = react_1.default.forwardRef((props_, ref) => {
-    var _a;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyScreenCapture) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const TextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.TextField) || TextField_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const ImageCrop = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ImageCrop) || ImageCrop_1.default; }, [theme]);
-    const Portal = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Portal) || Portal_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', nameDefault, name: name_ = `onesy-screenshot.${props.type !== undefined ? props.type.split('/')[1] : 'png'}`, onChangeName, view = true, entirePage = true, free = true, type = `image/png`, quality = 1, onInit: onInit_, onView: onView_, onEntirePage: onEntirePage_, onFree: onFree_, onFreeSave: onFreeSave_, onFreeClose: onFreeClose_, IconView = IconMaterialFitScreenW100_1.default, IconEntirePage = IconMaterialDocumentScannerW100_1.default, IconFree = IconMaterialCropFreeW100_1.default, IconDownload = IconMaterialDownloadW100_1.default, TextFieldProps, TooltipProps, IconButtonProps, ImageCropProps = {
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialFitScreenW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFitScreenW100"));
+var _IconMaterialDocumentScannerW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDocumentScannerW100"));
+var _IconMaterialCropFreeW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCropFreeW100"));
+var _IconMaterialDownloadW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDownloadW100"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _TextField = _interopRequireDefault(require("../TextField"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _ImageCrop = _interopRequireDefault(require("../ImageCrop"));
+var _Portal = _interopRequireDefault(require("../Portal"));
+var _Line = _interopRequireDefault(require("../Line"));
+var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
+var _Buttons = require("../Buttons/Buttons");
+var _utils2 = require("../utils");
+const _excluded = ["tonal", "color", "nameDefault", "name", "onChangeName", "view", "entirePage", "free", "type", "quality", "onInit", "onView", "onEntirePage", "onFree", "onFreeSave", "onFreeClose", "IconView", "IconEntirePage", "IconFree", "IconDownload", "TextFieldProps", "TooltipProps", "IconButtonProps", "ImageCropProps", "Component", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const useStyle = (0, _styleReact.style)(theme => ({
+  root: {
+    padding: `${theme.methods.space.value(2.5, 'px')} ${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`,
+    borderRadius: theme.methods.shape.radius.value('rg', 'px')
+  },
+  wrapper: {
+    inset: '0',
+    position: 'fixed',
+    background: '#000',
+    zIndex: theme.z_index.tooltip + 4
+  }
+}), {
+  name: 'onesy-ScreenCapture'
+});
+const ScreenCapture = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _refs$root$current5;
+  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.onesyScreenCapture) === 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 Tooltip = _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.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const Surface = _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.Surface) || _Surface.default;
+  }, [theme]);
+  const TextField = _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.TextField) || _TextField.default;
+  }, [theme]);
+  const IconButton = _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.IconButton) || _IconButton.default;
+  }, [theme]);
+  const ImageCrop = _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.ImageCrop) || _ImageCrop.default;
+  }, [theme]);
+  const Portal = _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.Portal) || _Portal.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      nameDefault,
+      name: name_ = `onesy-screenshot.${props.type !== undefined ? props.type.split('/')[1] : 'png'}`,
+      onChangeName,
+      view = true,
+      entirePage = true,
+      free = true,
+      type = `image/png`,
+      quality = 1,
+      onInit: onInit_,
+      onView: onView_,
+      onEntirePage: onEntirePage_,
+      onFree: onFree_,
+      onFreeSave: onFreeSave_,
+      onFreeClose: onFreeClose_,
+      IconView = _IconMaterialFitScreenW.default,
+      IconEntirePage = _IconMaterialDocumentScannerW.default,
+      IconFree = _IconMaterialCropFreeW.default,
+      IconDownload = _IconMaterialDownloadW.default,
+      TextFieldProps,
+      TooltipProps,
+      IconButtonProps,
+      ImageCropProps = {
         type: `image/png`,
         quality: 1
-    }, Component = 'div', className } = props, other = __rest(props, ["tonal", "color", "nameDefault", "name", "onChangeName", "view", "entirePage", "free", "type", "quality", "onInit", "onView", "onEntirePage", "onFree", "onFreeSave", "onFreeClose", "IconView", "IconEntirePage", "IconFree", "IconDownload", "TextFieldProps", "TooltipProps", "IconButtonProps", "ImageCropProps", "Component", "className"]);
-    const { classes } = useStyle();
-    const [init, setInit] = react_1.default.useState(false);
-    const [name, setName] = react_1.default.useState(nameDefault !== undefined ? nameDefault : name_);
-    const [loading, setLoading] = react_1.default.useState([]);
-    const [done, setDone] = react_1.default.useState([]);
-    const [canvas, setCanvas] = react_1.default.useState();
-    const [canvasSelectorValue, setCanvasSelectorValue] = react_1.default.useState();
-    const [supported, setSupported] = react_1.default.useState(true);
-    const refs = {
-        root: react_1.default.useRef(null),
-        canvas: react_1.default.useRef(null),
-        canvasSelectorValue: react_1.default.useRef(null),
-        element: react_1.default.useRef(null)
-    };
-    const touch = (0, useMediaQuery_1.default)('(pointer: coarse)', { element: refs.root.current });
-    refs.canvas.current = canvas;
-    refs.canvasSelectorValue.current = canvasSelectorValue;
-    const onInit = react_1.default.useCallback(() => {
-        const value = !(touch || (0, utils_1.isOS)('mobile'));
-        setInit(true);
-        setSupported(value);
-        if ((0, utils_1.is)('function', onInit_))
-            onInit_(value);
-    }, [touch, onInit_]);
-    react_1.default.useEffect(() => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const method = (event) => {
-            switch (event.key) {
-                case 'V':
-                case 'v':
-                    if (event.metaKey && event.shiftKey)
-                        onView(event);
-                    break;
-                // case 'E':
-                // case 'e':
-                //   if (event.metaKey && event.shiftKey) onEntirePage(event as any);
-                //   break;
-                case 'F':
-                case 'f':
-                    if (event.metaKey && event.shiftKey)
-                        onFree(event);
-                    break;
-                case 'S':
-                case 's':
-                    if (event.metaKey) {
-                        if (refs.canvas.current)
-                            onFreeSave(event);
-                    }
-                    break;
-                case 'Enter':
-                    if (refs.canvas.current)
-                        onFreeSave(event);
-                    break;
-                case 'Escape':
-                    if (refs.canvas.current)
-                        onFreeClose(event);
-                    break;
-                default:
-                    break;
-            }
-        };
-        rootDocument.addEventListener('keydown', method);
-        onInit();
-        return () => {
-            // Clean up
-            rootDocument.removeEventListener('keydown', method);
-            if (refs.canvas.current) {
-                setCanvas('');
-                if (rootDocument.body.style.overflow === 'hidden')
-                    rootDocument.body.style.removeProperty('overflow');
-            }
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (init) {
-            if (name_ !== name)
-                setName(name_);
-        }
-    }, [name_]);
-    react_1.default.useEffect(() => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        if (canvas) {
-            rootDocument.body.style.overflow = 'hidden';
-        }
-        else {
-            setCanvasSelectorValue(false);
-            if (rootDocument.body.style.overflow === 'hidden')
-                rootDocument.body.style.removeProperty('overflow');
-        }
-    }, [canvas]);
-    const onChange = (value_) => {
-        // Update inner or controlled
-        if (!props.hasOwnProperty('value'))
-            setName(value_);
-        if ((0, utils_1.is)('function', onChangeName))
-            onChangeName(value_);
+      },
+      Component = 'div',
+      className
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = _react.default.useState(false);
+  const [name, setName] = _react.default.useState(nameDefault !== undefined ? nameDefault : name_);
+  const [loading, setLoading] = _react.default.useState([]);
+  const [done, setDone] = _react.default.useState([]);
+  const [canvas, setCanvas] = _react.default.useState();
+  const [canvasSelectorValue, setCanvasSelectorValue] = _react.default.useState();
+  const [supported, setSupported] = _react.default.useState(true);
+  const refs = {
+    root: _react.default.useRef(null),
+    canvas: _react.default.useRef(null),
+    canvasSelectorValue: _react.default.useRef(null),
+    element: _react.default.useRef(null)
+  };
+  const touch = (0, _useMediaQuery.default)('(pointer: coarse)', {
+    element: refs.root.current
+  });
+  refs.canvas.current = canvas;
+  refs.canvasSelectorValue.current = canvasSelectorValue;
+  const onInit = _react.default.useCallback(() => {
+    const value = !(touch || (0, _utils.isOS)('mobile'));
+    setInit(true);
+    setSupported(value);
+    if ((0, _utils.is)('function', onInit_)) onInit_(value);
+  }, [touch, onInit_]);
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    const method = event => {
+      switch (event.key) {
+        case 'V':
+        case 'v':
+          if (event.metaKey && event.shiftKey) onView(event);
+          break;
+
+        // case 'E':
+        // case 'e':
+        //   if (event.metaKey && event.shiftKey) onEntirePage(event as any);
+
+        //   break;
+
+        case 'F':
+        case 'f':
+          if (event.metaKey && event.shiftKey) onFree(event);
+          break;
+        case 'S':
+        case 's':
+          if (event.metaKey) {
+            if (refs.canvas.current) onFreeSave(event);
+          }
+          break;
+        case 'Enter':
+          if (refs.canvas.current) onFreeSave(event);
+          break;
+        case 'Escape':
+          if (refs.canvas.current) onFreeClose(event);
+          break;
+        default:
+          break;
+      }
     };
-    const trackToValue = react_1.default.useCallback(async (track, version = 'canvas') => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const canvasElement = document.createElement('canvas');
-        const { width, height } = track.getSettings();
-        canvasElement.width = width || window.innerWidth;
-        canvasElement.height = height || window.innerHeight;
-        // Hide elements
-        const elements = Array.from(rootDocument.body.querySelectorAll('.onesy-ScreenCapture-root')).map((element) => {
-            if (element.parentElement.classList.contains('onesy-Move-root'))
-                return element.parentElement;
-            return element;
-        });
-        elements.forEach((item) => item.style.visibility = 'hidden');
-        // Wait for media options window to hide
-        await (0, utils_1.wait)(414);
-        // Draw the frame
-        canvasElement.getContext('2d').drawImage(refs.element.current, 0, 0);
-        // Unhide the elements
-        elements.forEach((item) => item.style.removeProperty('visibility'));
-        if (version === 'canvas')
-            return canvasElement;
-        const image = canvasElement.toDataURL(type, quality);
-        return image;
-    }, [type, quality]);
-    const make = react_1.default.useCallback(async (version = 'image', options = {}) => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        refs.element.current = rootDocument.createElement('video');
-        let tracks;
-        const cleanUp = () => {
-            // Stop tracks
-            (tracks || []).forEach(item => item.stop());
-            // Unload the element
-            refs.element.current = undefined;
-        };
-        try {
-            refs.element.current.srcObject = await window.navigator.mediaDevices.getDisplayMedia(Object.assign({ preferCurrentTab: true }, options));
-            const mediaStream = refs.element.current.srcObject;
-            if (!mediaStream)
-                throw new Error('No media stream');
-            // Required to work
-            await refs.element.current.play();
-            tracks = mediaStream.getVideoTracks();
-            const track = tracks[0];
-            const value = await trackToValue(track, version);
-            // Clean up
-            cleanUp();
-            return value;
-        }
-        catch (error) {
-            console.log('ScreenCapture make', error);
-            // Clean up
-            cleanUp();
-        }
-    }, []);
-    const onView = react_1.default.useCallback(async (event) => {
-        setLoading(items => [...items, 'view']);
-        try {
-            const image = await make();
-            (0, utils_1.download)(name, image);
-        }
-        catch (error) {
-            console.log('onView', error);
-        }
-        setLoading(items => items.filter(item => item !== 'view'));
-        setDone(items => [...items, 'view']);
-        setTimeout(() => {
-            setDone(items => items.filter(item => item !== 'view'));
-        }, 1400);
-        if ((0, utils_1.is)('function', onView_))
-            onView_(event);
-    }, [name, make]);
-    // const onEntirePage = async (event: React.MouseEvent<any>) => {
-    //   setLoading(items => [...items, 'entirePage']);
-    //   try {
-    //     const rootDocument = isEnvironment('browser') ? (refs.root.current?.ownerDocument || window.document) : undefined;
-    //     await elementToCanvas(rootDocument.body, {
-    //       response: 'download',
-    //       filter: ['.onesy-Widgets-root', '#onesy-screen-capture'],
-    //       download: {
-    //         name,
-    //         type,
-    //         quality
-    //       }
-    //     });
-    //   }
-    //   catch (error) {
-    //     console.log('onEntirePage', error);
-    //   }
-    //   setLoading(items => items.filter(item => item !== 'entirePage'));
-    //   setDone(items => [...items, 'entirePage']);
-    //   setTimeout(() => {
-    //     setDone(items => items.filter(item => item !== 'entirePage'));
-    //   }, 1400);
-    //   if (is('function', onEntirePage_)) onEntirePage_(event);
-    // };
-    const onFree = async (event) => {
-        setLoading(items => [...items, 'free']);
-        // Update canvas
-        try {
-            const valueCanvas = await make('canvas');
-            setCanvas(valueCanvas);
-        }
-        catch (error) {
-            console.log('onFree', error);
-        }
-        setLoading(items => items.filter(item => item !== 'free'));
-        if ((0, utils_1.is)('function', onFree_))
-            onFree_(event);
-    };
-    const onFreeSave = (event) => {
-        // Crop the canvas
-        const valueCanvas = (0, utils_1.canvasCrop)(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
-        // Download the image from canvas datauri
-        // of the image type and quality, name
-        const uri = valueCanvas.toDataURL(type, quality);
-        (0, utils_1.download)(name, uri, type);
-        // Clear the image
-        setCanvas('');
-        setDone(items => [...items, 'free']);
-        setTimeout(() => {
-            setDone(items => items.filter(item => item !== 'free'));
-        }, 1400);
-        if ((0, utils_1.is)('function', onFreeSave_))
-            onFreeSave_(event);
-    };
-    const onFreeClose = (event) => {
-        // Clear the image
+    rootDocument.addEventListener('keydown', method);
+    onInit();
+    return () => {
+      // Clean up
+      rootDocument.removeEventListener('keydown', method);
+      if (refs.canvas.current) {
         setCanvas('');
-        if ((0, utils_1.is)('function', onFreeClose_))
-            onFreeClose_(event);
-    };
-    const onImageCropSelectorChange = react_1.default.useCallback((values) => {
-        setCanvasSelectorValue(values);
-    }, []);
-    const iconButtonProps = {
-        tonal,
-        color: 'inherit',
-        elevation: false
+        if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
+      }
     };
-    const textFieldProps = {
-        tonal,
-        color: 'inherit',
-        version: 'text',
-        size: 'small',
-        fullWidth: true
-    };
-    const tooltipProps = {
-        position: 'top',
-        portal: false,
-        interactive: false
+  }, []);
+  _react.default.useEffect(() => {
+    if (init) {
+      if (name_ !== name) setName(name_);
+    }
+  }, [name_]);
+  _react.default.useEffect(() => {
+    var _refs$root$current2;
+    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;
+    if (canvas) {
+      rootDocument.body.style.overflow = 'hidden';
+    } else {
+      setCanvasSelectorValue(false);
+      if (rootDocument.body.style.overflow === 'hidden') rootDocument.body.style.removeProperty('overflow');
+    }
+  }, [canvas]);
+  const onChange = value_ => {
+    // Update inner or controlled
+    if (!props.hasOwnProperty('value')) setName(value_);
+    if ((0, _utils.is)('function', onChangeName)) onChangeName(value_);
+  };
+  const trackToValue = _react.default.useCallback(async (track, version = 'canvas') => {
+    var _refs$root$current3;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+    const canvasElement = document.createElement('canvas');
+    const {
+      width,
+      height
+    } = track.getSettings();
+    canvasElement.width = width || window.innerWidth;
+    canvasElement.height = height || window.innerHeight;
+
+    // Hide elements
+    const elements = Array.from(rootDocument.body.querySelectorAll('.onesy-ScreenCapture-root')).map(element => {
+      if (element.parentElement.classList.contains('onesy-Move-root')) return element.parentElement;
+      return element;
+    });
+    elements.forEach(item => item.style.visibility = 'hidden');
+
+    // Wait for media options window to hide
+    await (0, _utils.wait)(414);
+
+    // Draw the frame
+    canvasElement.getContext('2d').drawImage(refs.element.current, 0, 0);
+
+    // Unhide the elements
+    elements.forEach(item => item.style.removeProperty('visibility'));
+    if (version === 'canvas') return canvasElement;
+    const image = canvasElement.toDataURL(type, quality);
+    return image;
+  }, [type, quality]);
+  const make = _react.default.useCallback(async (version = 'image', options = {}) => {
+    var _refs$root$current4;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.ownerDocument) || window.document : undefined;
+    refs.element.current = rootDocument.createElement('video');
+    let tracks;
+    const cleanUp = () => {
+      // Stop tracks
+      (tracks || []).forEach(item => item.stop());
+
+      // Unload the element
+      refs.element.current = undefined;
     };
-    if (!supported)
-        return null;
-    const rootDocumentElement = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Surface, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, id: 'onesy-screen-capture', tonal: tonal, color: color, gap: 0, direction: 'column', align: 'center', Component: Line, AdditionalProps: {
-            Component
-        }, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('ScreenCapture', theme) && [
-                'onesy-ScreenCapture-root'
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center' }, { children: [view && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('View') }, tooltipProps, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: onView, loading: loading.includes('view'), disabled: done.includes('view') }, iconButtonProps, IconButtonProps, { children: done.includes('view') ? (0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { add: true, in: true }) : (0, jsx_runtime_1.jsx)(IconView, {}) })) }))), free && ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: canvas ? l('Save') : l('Free form') }, tooltipProps, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: (event) => canvas ? onFreeSave(event) : onFree(event), loading: loading.includes('free'), disabled: done.includes('free') }, iconButtonProps, IconButtonProps, { children: done.includes('free') ? (0, jsx_runtime_1.jsx)(Buttons_1.IconDoneAnimated, { add: true, in: true }) : canvas ? (0, jsx_runtime_1.jsx)(IconDownload, {}) : (0, jsx_runtime_1.jsx)(IconFree, {}) })) })))] })), (0, jsx_runtime_1.jsx)(TextField, Object.assign({ name: l('Name'), value: name, onChange: onChange }, textFieldProps, TextFieldProps)), canvas && ((0, jsx_runtime_1.jsx)(Portal, Object.assign({ element: rootDocumentElement.body }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('ScreenCapture', theme) && [
-                            'onesy-ScreenCapture-image-wrapper'
-                        ],
-                        classes.wrapper
-                    ]) }, { children: (0, jsx_runtime_1.jsx)(ImageCrop, Object.assign({ image: canvas, onSelectorChange: onImageCropSelectorChange, TooltipProps: {
-                            portal: false
-                        } }, ImageCropProps)) })) })))] })));
+    try {
+      refs.element.current.srcObject = await window.navigator.mediaDevices.getDisplayMedia(_objectSpread({
+        preferCurrentTab: true
+      }, options));
+      const mediaStream = refs.element.current.srcObject;
+      if (!mediaStream) throw new Error('No media stream');
+
+      // Required to work
+      await refs.element.current.play();
+      tracks = mediaStream.getVideoTracks();
+      const track = tracks[0];
+      const value = await trackToValue(track, version);
+
+      // Clean up
+      cleanUp();
+      return value;
+    } catch (error) {
+      console.log('ScreenCapture make', error);
+
+      // Clean up
+      cleanUp();
+    }
+  }, []);
+  const onView = _react.default.useCallback(async event => {
+    setLoading(items => [...items, 'view']);
+    try {
+      const image = await make();
+      (0, _utils.download)(name, image);
+    } catch (error) {
+      console.log('onView', error);
+    }
+    setLoading(items => items.filter(item => item !== 'view'));
+    setDone(items => [...items, 'view']);
+    setTimeout(() => {
+      setDone(items => items.filter(item => item !== 'view'));
+    }, 1400);
+    if ((0, _utils.is)('function', onView_)) onView_(event);
+  }, [name, make]);
+
+  // const onEntirePage = async (event: React.MouseEvent<any>) => {
+  //   setLoading(items => [...items, 'entirePage']);
+
+  //   try {
+  //     const rootDocument = isEnvironment('browser') ? (refs.root.current?.ownerDocument || window.document) : undefined;
+
+  //     await elementToCanvas(rootDocument.body, {
+  //       response: 'download',
+
+  //       filter: ['.onesy-Widgets-root', '#onesy-screen-capture'],
+
+  //       download: {
+  //         name,
+  //         type,
+  //         quality
+  //       }
+  //     });
+  //   }
+  //   catch (error) {
+  //     console.log('onEntirePage', error);
+  //   }
+
+  //   setLoading(items => items.filter(item => item !== 'entirePage'));
+
+  //   setDone(items => [...items, 'entirePage']);
+
+  //   setTimeout(() => {
+  //     setDone(items => items.filter(item => item !== 'entirePage'));
+  //   }, 1400);
+
+  //   if (is('function', onEntirePage_)) onEntirePage_(event);
+  // };
+
+  const onFree = async event => {
+    setLoading(items => [...items, 'free']);
+
+    // Update canvas
+    try {
+      const valueCanvas = await make('canvas');
+      setCanvas(valueCanvas);
+    } catch (error) {
+      console.log('onFree', error);
+    }
+    setLoading(items => items.filter(item => item !== 'free'));
+    if ((0, _utils.is)('function', onFree_)) onFree_(event);
+  };
+  const onFreeSave = event => {
+    // Crop the canvas
+    const valueCanvas = (0, _utils.canvasCrop)(refs.canvas.current, refs.canvasSelectorValue.current.left, refs.canvasSelectorValue.current.top, refs.canvasSelectorValue.current.width, refs.canvasSelectorValue.current.height);
+
+    // Download the image from canvas datauri
+    // of the image type and quality, name
+    const uri = valueCanvas.toDataURL(type, quality);
+    (0, _utils.download)(name, uri, type);
+
+    // Clear the image
+    setCanvas('');
+    setDone(items => [...items, 'free']);
+    setTimeout(() => {
+      setDone(items => items.filter(item => item !== 'free'));
+    }, 1400);
+    if ((0, _utils.is)('function', onFreeSave_)) onFreeSave_(event);
+  };
+  const onFreeClose = event => {
+    // Clear the image
+    setCanvas('');
+    if ((0, _utils.is)('function', onFreeClose_)) onFreeClose_(event);
+  };
+  const onImageCropSelectorChange = _react.default.useCallback(values => {
+    setCanvasSelectorValue(values);
+  }, []);
+  const iconButtonProps = {
+    tonal,
+    color: 'inherit',
+    elevation: false
+  };
+  const textFieldProps = {
+    tonal,
+    color: 'inherit',
+    version: 'text',
+    size: 'small',
+    fullWidth: true
+  };
+  const tooltipProps = {
+    position: 'top',
+    portal: false,
+    interactive: false
+  };
+  if (!supported) return null;
+  const rootDocumentElement = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 ? void 0 : _refs$root$current5.ownerDocument) || window.document : undefined;
+  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    id: "onesy-screen-capture",
+    tonal: tonal,
+    color: color,
+    gap: 0,
+    direction: "column",
+    align: "center",
+    Component: Line,
+    AdditionalProps: {
+      Component
+    },
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScreenCapture', theme) && ['onesy-ScreenCapture-root'], className, classes.root])
+  }, other), /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "center"
+  }, view && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: l('View')
+  }, tooltipProps, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: onView,
+    loading: loading.includes('view'),
+    disabled: done.includes('view')
+  }, iconButtonProps, IconButtonProps), done.includes('view') ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+    add: true,
+    in: true
+  }) : /*#__PURE__*/_react.default.createElement(IconView, null))), free && /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    name: canvas ? l('Save') : l('Free form')
+  }, tooltipProps, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    onClick: event => canvas ? onFreeSave(event) : onFree(event),
+    loading: loading.includes('free'),
+    disabled: done.includes('free')
+  }, iconButtonProps, IconButtonProps), done.includes('free') ? /*#__PURE__*/_react.default.createElement(_Buttons.IconDoneAnimated, {
+    add: true,
+    in: true
+  }) : canvas ? /*#__PURE__*/_react.default.createElement(IconDownload, null) : /*#__PURE__*/_react.default.createElement(IconFree, null)))), /*#__PURE__*/_react.default.createElement(TextField, (0, _extends2.default)({
+    name: l('Name'),
+    value: name,
+    onChange: onChange
+  }, textFieldProps, TextFieldProps)), canvas && /*#__PURE__*/_react.default.createElement(Portal, {
+    element: rootDocumentElement.body
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScreenCapture', theme) && ['onesy-ScreenCapture-image-wrapper'], classes.wrapper])
+  }, /*#__PURE__*/_react.default.createElement(ImageCrop, (0, _extends2.default)({
+    image: canvas,
+    onSelectorChange: onImageCropSelectorChange,
+    TooltipProps: {
+      portal: false
+    }
+  }, ImageCropProps)))));
 });
 ScreenCapture.displayName = 'onesy-ScreenCapture';
-exports.default = ScreenCapture;
+var _default = exports.default = ScreenCapture;