@onesy/ui-react
Version:
UI for React
426 lines (401 loc) • 19.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
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");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "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 = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _refs$root$current5;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _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_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Tooltip) || _Tooltip.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
const TextField = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.TextField) || _TextField.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
const ImageCrop = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.ImageCrop) || _ImageCrop.default;
const Portal = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Portal) || _Portal.default;
const {
ref,
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 = (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 = () => {
const value = !(touch || (0, _utils.isOS)('mobile'));
setInit(true);
setSupported(value);
if ((0, _utils.is)('function', onInit_)) onInit_(value);
};
_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;
}
};
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.default.useEffect(() => {
if (init) {
if (name_ !== name) setName(name_);
}
}, [name_]);
_react.default.useEffect(() => {
var _refs$root$current2;
const rootDocument_0 = (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_0.body.style.overflow = 'hidden';
} else {
setCanvasSelectorValue(false);
if (rootDocument_0.body.style.overflow === 'hidden') rootDocument_0.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 = async (track, version = 'canvas') => {
var _refs$root$current3;
const rootDocument_1 = (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_1.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_0 => item_0.style.removeProperty('visibility'));
if (version === 'canvas') return canvasElement;
const image = canvasElement.toDataURL(type, quality);
return image;
};
const make = async (version_0 = 'image', options = {}) => {
var _refs$root$current4;
const rootDocument_2 = (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_2.createElement('video');
let tracks;
const cleanUp = () => {
// Stop tracks
(tracks || []).forEach(item_1 => item_1.stop());
// Unload the element
refs.element.current = undefined;
};
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_0 = tracks[0];
const value_0 = await trackToValue(track_0, version_0);
// Clean up
cleanUp();
return value_0;
} catch (error) {
console.log('ScreenCapture make', error);
// Clean up
cleanUp();
}
};
const onView = async event_0 => {
setLoading(items => [...items, 'view']);
try {
const image_0 = await make();
(0, _utils.download)(name, image_0);
} catch (error_0) {
console.log('onView', error_0);
}
setLoading(items_0 => items_0.filter(item_2 => item_2 !== 'view'));
setDone(items_1 => [...items_1, 'view']);
setTimeout(() => {
setDone(items_2 => items_2.filter(item_3 => item_3 !== 'view'));
}, 1400);
if ((0, _utils.is)('function', onView_)) onView_(event_0);
};
// 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_1 => {
setLoading(items_3 => [...items_3, 'free']);
// Update canvas
try {
const valueCanvas = await make('canvas');
setCanvas(valueCanvas);
} catch (error_1) {
console.log('onFree', error_1);
}
setLoading(items_4 => items_4.filter(item_4 => item_4 !== 'free'));
if ((0, _utils.is)('function', onFree_)) onFree_(event_1);
};
const onFreeSave = event_2 => {
// Crop the canvas
const valueCanvas_0 = (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_0.toDataURL(type, quality);
(0, _utils.download)(name, uri, type);
// Clear the image
setCanvas('');
setDone(items_5 => [...items_5, 'free']);
setTimeout(() => {
setDone(items_6 => items_6.filter(item_5 => item_5 !== 'free'));
}, 1400);
if ((0, _utils.is)('function', onFreeSave_)) onFreeSave_(event_2);
};
const onFreeClose = event_3 => {
// Clear the image
setCanvas('');
if ((0, _utils.is)('function', onFreeClose_)) onFreeClose_(event_3);
};
const onImageCropSelectorChange = 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__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item_6 => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item_6);else ref.current = item_6;
}
refs.root.current = item_6;
},
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), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
gap: 1,
direction: "row",
align: "center",
justify: "center",
children: [view && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread(_objectSpread({
name: l('View')
}, tooltipProps), TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: onView,
loading: loading.includes('view'),
disabled: done.includes('view')
}, iconButtonProps), IconButtonProps), {}, {
children: done.includes('view') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
add: true,
in: true
}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconView, {})
}))
})), free && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread(_objectSpread({
name: canvas ? l('Save') : l('Free form')
}, tooltipProps), TooltipProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread(_objectSpread({
onClick: event_4 => canvas ? onFreeSave(event_4) : onFree(event_4),
loading: loading.includes('free'),
disabled: done.includes('free')
}, iconButtonProps), IconButtonProps), {}, {
children: done.includes('free') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Buttons.IconDoneAnimated, {
add: true,
in: true
}) : canvas ? /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDownload, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFree, {})
}))
}))]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextField, _objectSpread(_objectSpread({
name: l('Name'),
value: name,
onChange: onChange
}, textFieldProps), TextFieldProps)), canvas && /*#__PURE__*/(0, _jsxRuntime.jsx)(Portal, {
element: rootDocumentElement.body,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ScreenCapture', theme) && ['onesy-ScreenCapture-image-wrapper'], classes.wrapper]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageCrop, _objectSpread({
image: canvas,
onSelectorChange: onImageCropSelectorChange,
TooltipProps: {
portal: false
}
}, ImageCropProps))
})
})]
}));
};
ScreenCapture.displayName = 'onesy-ScreenCapture';
var _default = exports.default = ScreenCapture;