@onesy/ui-react
Version:
UI for React
345 lines (344 loc) • 19.3 kB
JavaScript
;
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 = {
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_);
};
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
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
};
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_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)) })) })))] })));
});
ScreenCapture.displayName = 'onesy-ScreenCapture';
exports.default = ScreenCapture;