@onesy/ui-react 1.0.0

package/esm/ScreenCapture/ScreenCapture.js

@@ -0,0 +1,402 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
+import React from 'react';
+import { canvasCrop, download, is, isEnvironment, isOS, wait } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialFitScreen from '@amaui/icons-material-rounded-react/IconMaterialFitScreenW100';
+import IconMaterialDocumentScanner from '@amaui/icons-material-rounded-react/IconMaterialDocumentScannerW100';
+import IconMaterialCropFree from '@amaui/icons-material-rounded-react/IconMaterialCropFreeW100';
+import IconMaterialDownload from '@amaui/icons-material-rounded-react/IconMaterialDownloadW100';
+import TooltipElement from '../Tooltip';
+import SurfaceElement from '../Surface';
+import TextFieldElement from '../TextField';
+import IconButtonElement from '../IconButton';
+import ImageCropElement from '../ImageCrop';
+import PortalElement from '../Portal';
+import LineElement from '../Line';
+import useMediaQuery from '../useMediaQuery';
+import { IconDoneAnimated } from '../Buttons/Buttons';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(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.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScreenCapture?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const TextField = React.useMemo(() => theme?.elements?.TextField || TextFieldElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const ImageCrop = React.useMemo(() => theme?.elements?.ImageCrop || ImageCropElement, [theme]);
+  const Portal = React.useMemo(() => theme?.elements?.Portal || PortalElement, [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 = IconMaterialFitScreen,
+      IconEntirePage = IconMaterialDocumentScanner,
+      IconFree = IconMaterialCropFree,
+      IconDownload = IconMaterialDownload,
+      TextFieldProps,
+      TooltipProps,
+      IconButtonProps,
+      ImageCropProps = {
+        type: `image/png`,
+        quality: 1
+      },
+      Component = 'div',
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const [init, setInit] = React.useState(false);
+  const [name, setName] = React.useState(nameDefault !== undefined ? nameDefault : name_);
+  const [loading, setLoading] = React.useState([]);
+  const [done, setDone] = React.useState([]);
+  const [canvas, setCanvas] = React.useState();
+  const [canvasSelectorValue, setCanvasSelectorValue] = React.useState();
+  const [supported, setSupported] = React.useState(true);
+  const refs = {
+    root: React.useRef(undefined),
+    canvas: React.useRef(undefined),
+    canvasSelectorValue: React.useRef(undefined),
+    element: React.useRef()
+  };
+  const touch = useMediaQuery('(pointer: coarse)', {
+    element: refs.root.current
+  });
+  refs.canvas.current = canvas;
+  refs.canvasSelectorValue.current = canvasSelectorValue;
+  const onInit = React.useCallback(() => {
+    const value = !(touch || isOS('mobile'));
+    setInit(true);
+    setSupported(value);
+    if (is('function', onInit_)) onInit_(value);
+  }, [touch, onInit_]);
+  React.useEffect(() => {
+    const rootDocument = isEnvironment('browser') ? 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.useEffect(() => {
+    if (init) {
+      if (name_ !== name) setName(name_);
+    }
+  }, [name_]);
+  React.useEffect(() => {
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.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 (is('function', onChangeName)) onChangeName(value_);
+  };
+  const trackToValue = React.useCallback(async function (track) {
+    let version = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'canvas';
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.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 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.useCallback(async function () {
+    let version = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'image';
+    let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    const rootDocument = isEnvironment('browser') ? refs.root.current?.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(_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.useCallback(async event => {
+    setLoading(items => [...items, 'view']);
+    try {
+      const image = await make();
+      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 (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 (is('function', onFree_)) onFree_(event);
+  };
+  const onFreeSave = event => {
+    // Crop the canvas
+    const valueCanvas = 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);
+    download(name, uri, type);
+
+    // Clear the image
+    setCanvas('');
+    setDone(items => [...items, 'free']);
+    setTimeout(() => {
+      setDone(items => items.filter(item => item !== 'free'));
+    }, 1400);
+    if (is('function', onFreeSave_)) onFreeSave_(event);
+  };
+  const onFreeClose = event => {
+    // Clear the image
+    setCanvas('');
+    if (is('function', onFreeClose_)) onFreeClose_(event);
+  };
+  const onImageCropSelectorChange = React.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 = isEnvironment('browser') ? refs.root.current?.ownerDocument || window.document : undefined;
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: item => {
+      if (ref) {
+        if (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: classNames([staticClassName('ScreenCapture', theme) && ['onesy-ScreenCapture-root'], className, classes.root])
+  }, other), /*#__PURE__*/React.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "center"
+  }, view && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    label: "View"
+  }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: onView,
+    loading: loading.includes('view'),
+    disabled: done.includes('view')
+  }, iconButtonProps, IconButtonProps), done.includes('view') ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+    add: true,
+    in: true
+  }) : /*#__PURE__*/React.createElement(IconView, null))), free && /*#__PURE__*/React.createElement(Tooltip, _extends({
+    label: canvas ? 'Save' : 'Free form'
+  }, tooltipProps, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
+    onClick: event => canvas ? onFreeSave(event) : onFree(event),
+    loading: loading.includes('free'),
+    disabled: done.includes('free')
+  }, iconButtonProps, IconButtonProps), done.includes('free') ? /*#__PURE__*/React.createElement(IconDoneAnimated, {
+    add: true,
+    in: true
+  }) : canvas ? /*#__PURE__*/React.createElement(IconDownload, null) : /*#__PURE__*/React.createElement(IconFree, null)))), /*#__PURE__*/React.createElement(TextField, _extends({
+    label: "Name",
+    value: name,
+    onChange: onChange
+  }, textFieldProps, TextFieldProps)), canvas && /*#__PURE__*/React.createElement(Portal, {
+    element: rootDocumentElement.body
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames([staticClassName('ScreenCapture', theme) && ['onesy-ScreenCapture-image-wrapper'], classes.wrapper])
+  }, /*#__PURE__*/React.createElement(ImageCrop, _extends({
+    image: canvas,
+    onSelectorChange: onImageCropSelectorChange,
+    TooltipProps: {
+      portal: false
+    }
+  }, ImageCropProps)))));
+});
+ScreenCapture.displayName = 'onesy-ScreenCapture';
+export default ScreenCapture;

package/esm/ScreenCapture/index.js

@@ -0,0 +1 @@
+export { default } from './ScreenCapture';