argous 1.2.220 → 1.2.221

package/dist/components/Cam/Cam.d.ts

@@ -0,0 +1,19 @@
+export interface CamProps {
+  /**
+   * ID
+   */
+  id: string, 
+  /**
+   * Component style
+   */
+  style?: object, 
+  /**
+   * Function called on get stream
+   */
+  onGetStream?: (parameters: object) => void 
+}
+
+
+declare function Cam(props: CamProps): JSX.Element
+
+export default Cam;

package/dist/components/Cam/Cam.js

@@ -0,0 +1,168 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.camSnapshot = void 0;
+var utils_1 = require("../../utils");
+require("./cam.css");
+var moment_1 = __importDefault(require("moment"));
+var react_1 = __importStar(require("react"));
+var GET_STREAM_INTERVAL_TIMEOUT = 3000;
+var VIDEO_ID = 'cam-video';
+var CANVAS_ID = 'cam-canvas';
+var VIDEO_CONSTRAINTS = {
+    audio: false,
+    video: {
+        facingMode: 'user'
+    }
+};
+var createVideoElementId = function (id) {
+    if (id === void 0) { id = ''; }
+    return (id) ? id + "-" + VIDEO_ID : VIDEO_ID;
+};
+var createCanvasElementId = function (id) {
+    if (id === void 0) { id = ''; }
+    return (id) ? id + "-" + CANVAS_ID : CANVAS_ID;
+};
+var camSnapshot = function (_a) {
+    var _b = _a.e, e = _b === void 0 ? undefined : _b, _c = _a.download, download = _c === void 0 ? false : _c, _d = _a.camComponentId, camComponentId = _d === void 0 ? '' : _d;
+    var status = false, file = undefined, linkElement = undefined, canvasElement = undefined;
+    var videoElementId = createVideoElementId(camComponentId);
+    var videoElement = document.getElementById(videoElementId);
+    if (videoElement) {
+        canvasElement = document.createElement('canvas');
+        if (canvasElement) {
+            var canvasElementId = createCanvasElementId(camComponentId);
+            canvasElement.id = canvasElementId;
+            var canvasContext2D = canvasElement.getContext('2d');
+            if (canvasContext2D) {
+                canvasElement.width = videoElement.offsetWidth;
+                canvasElement.height = videoElement.offsetHeight;
+                canvasContext2D.drawImage(videoElement, 0, 0, videoElement.offsetWidth, videoElement.offsetHeight);
+                linkElement = document.createElement('a');
+                linkElement.download = "Capture_" + moment_1.default(new Date()).format('DD-MM-YYYY_HH:mm:ss') + ".png";
+                var dataUrl = canvasElement.toDataURL('image/png');
+                linkElement.href = dataUrl;
+                var blob = utils_1.dataUrlToBlob(dataUrl);
+                if (blob)
+                    file = new File([blob], linkElement.download, { type: blob.type });
+            }
+        }
+    }
+    (linkElement && file) && (status = true);
+    (linkElement && download) && linkElement.click();
+    return { e: e, status: status, file: file, link: linkElement, canvas: canvasElement };
+};
+exports.camSnapshot = camSnapshot;
+var Cam = function (_a) {
+    var _b = _a.id, id = _b === void 0 ? '' : _b, _c = _a.style, style = _c === void 0 ? {} : _c, onGetStream = _a.onGetStream;
+    var videoRef = react_1.useRef(null);
+    var streamRef = react_1.useRef(null);
+    var getStreamIntervalIdRef = react_1.useRef(null);
+    var videoElementId = createVideoElementId(id);
+    var getStream = react_1.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var stream, error_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    stream = null;
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS)];
+                case 2:
+                    stream = _a.sent();
+                    stream.getTracks().forEach(function (track) {
+                        if (track.kind === 'video')
+                            track.enabled = true;
+                    });
+                    return [3 /*break*/, 4];
+                case 3:
+                    error_1 = _a.sent();
+                    console.error(error_1);
+                    return [3 /*break*/, 4];
+                case 4:
+                    if ((stream && !streamRef.current) || (!stream && streamRef.current)) {
+                        videoRef.current.srcObject = stream;
+                        stopVideo(streamRef.current);
+                        streamRef.current = stream;
+                        (typeof onGetStream === 'function') && onGetStream({ stream: stream });
+                    }
+                    else if (stream)
+                        stopVideo(stream);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [onGetStream]);
+    var stopVideo = function (stream) { return (stream) && stream.getTracks().forEach(function (track) {
+        track === null || track === void 0 ? void 0 : track.stop();
+        track.enabled = false;
+    }); };
+    react_1.useEffect(function () {
+        getStream();
+        getStreamIntervalIdRef.current = setInterval(function () { return getStream(); }, GET_STREAM_INTERVAL_TIMEOUT);
+        return function () {
+            clearInterval(getStreamIntervalIdRef.current);
+            stopVideo(streamRef.current);
+        };
+    }, [getStream]);
+    return react_1.default.createElement("div", { style: style, className: 'cam-div' },
+        react_1.default.createElement("video", { id: videoElementId, ref: videoRef, autoPlay: true }));
+};
+exports.default = Cam;

package/dist/components/Cam/cam.css

@@ -0,0 +1,8 @@
+.cam-div {
+    display: grid;
+}
+
+video {
+    width: 100%;
+    background-color: #000;
+}

package/dist/components/Cam/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Cam';
+export * from './Cam';

package/dist/components/Cam/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var Cam_1 = require("./Cam");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Cam_1).default; } });

package/dist/components/Carousel/Carousel.d.ts

@@ -66,6 +66,6 @@ export interface CarouselProps {
 }
 
 
-declare function Carousel(props: CarouselProps) : JSX.Element
+declare function Carousel(props: CarouselProps): JSX.Element
 
 export default Carousel;

package/dist/components/index.d.ts

@@ -166,4 +166,7 @@ export { default as Zoom } from './Zoom';
 export * from './Zoom';
 
 export { default as Carousel } from './Carousel';
-export * from './Carousel';
+export * from './Carousel';
+
+export { default as Cam } from './Cam';
+export * from './Cam';

package/dist/components/index.js

@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AutoCompleteFavorites = exports.UtilAutoComplete = exports.ThreadLog = exports.TextArea = exports.Tabs = exports.TablePicker = exports.Stepper = exports.SimpleTable = exports.Select = exports.ProgressBar = exports.Programa = exports.Pagination = exports.OutputText = exports.OtpInput = exports.MultipleSelect = exports.MonthPicker = exports.ModalProvider = exports.MenuBar = exports.MaterialButton = exports.ListSelect = exports.InputTags = exports.Input = exports.ImageResizeButton = exports.ImageResize = exports.Highlight = exports.FormVisualizer = exports.FileUploader = exports.FilePreparer = exports.DropArea = exports.Compartilhar = exports.Collapse = exports.CartaoUsuario = exports.Calendar = exports.Cabecalho = exports.Button = exports.BarraFerramentas = exports.BarChart = exports.AutoComplete = exports.ArgousSimpleTable = exports.ArgousProgressBar = exports.ArgousPagination = exports.ArgousInput = exports.ArgousComplexTableToolbar = exports.ArgousComplexTableHead = exports.ArgousComplexTableBody = exports.ArgousComplexTable = exports.ArgousComplexPagination = exports.ArgousAvatar = exports.ArgousAction = exports.Alert = void 0;
-exports.Carousel = exports.Zoom = exports.TextToHtml = exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
+exports.Cam = exports.Carousel = exports.Zoom = exports.TextToHtml = exports.UserCard = exports.HalfGauge = exports.PercentageDisplay = void 0;
 var Alert_1 = require("./Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 __exportStar(require("./Alert"), exports);
@@ -182,3 +182,6 @@ __exportStar(require("./Zoom"), exports);
 var Carousel_1 = require("./Carousel");
 Object.defineProperty(exports, "Carousel", { enumerable: true, get: function () { return __importDefault(Carousel_1).default; } });
 __exportStar(require("./Carousel"), exports);
+var Cam_1 = require("./Cam");
+Object.defineProperty(exports, "Cam", { enumerable: true, get: function () { return __importDefault(Cam_1).default; } });
+__exportStar(require("./Cam"), exports);

package/lib/components/Cam/Cam.d.ts

@@ -0,0 +1,19 @@
+export interface CamProps {
+  /**
+   * ID
+   */
+  id: string, 
+  /**
+   * Component style
+   */
+  style?: object, 
+  /**
+   * Function called on get stream
+   */
+  onGetStream?: (parameters: object) => void 
+}
+
+
+declare function Cam(props: CamProps): JSX.Element
+
+export default Cam;

package/lib/components/Cam/Cam.js

@@ -0,0 +1,102 @@
+import { dataUrlToBlob } from '../../utils';
+import './cam.css';
+import moment from 'moment';
+import React, { useCallback, useEffect, useRef } from 'react';
+
+
+const GET_STREAM_INTERVAL_TIMEOUT = 3000;
+
+const VIDEO_ID = 'cam-video';
+const CANVAS_ID = 'cam-canvas';
+
+const VIDEO_CONSTRAINTS = { 
+  audio: false, 
+  video: { 
+    facingMode: 'user' 
+  } 
+};
+
+const createVideoElementId = (id = '') => (id) ? `${id}-${VIDEO_ID}` : VIDEO_ID;
+const createCanvasElementId = (id = '') => (id) ? `${id}-${CANVAS_ID}` : CANVAS_ID;
+
+export const camSnapshot = ({ e = undefined, download = false, camComponentId = '' }) => {
+  let status = false, file = undefined, linkElement = undefined, canvasElement = undefined;
+  const videoElementId = createVideoElementId(camComponentId);
+  const videoElement = document.getElementById(videoElementId);
+
+  if (videoElement) {
+    canvasElement = document.createElement('canvas');
+    if (canvasElement) {
+      const canvasElementId = createCanvasElementId(camComponentId);
+      canvasElement.id = canvasElementId;
+      const canvasContext2D = canvasElement.getContext('2d');
+      if (canvasContext2D) {
+        canvasElement.width = videoElement.offsetWidth;
+        canvasElement.height = videoElement.offsetHeight;
+        canvasContext2D.drawImage(videoElement, 0, 0, videoElement.offsetWidth, videoElement.offsetHeight);
+
+        linkElement = document.createElement('a');
+        linkElement.download = `Capture_${moment(new Date()).format('DD-MM-YYYY_HH:mm:ss')}.png`;
+        const dataUrl = canvasElement.toDataURL('image/png');
+        linkElement.href = dataUrl;
+
+        const blob = dataUrlToBlob(dataUrl);
+        if (blob) file = new File([blob], linkElement.download, { type: blob.type });
+      }
+    }
+  }
+  (linkElement && file) && (status = true);
+  (linkElement && download) && linkElement.click();
+  return { e, status, file, link: linkElement, canvas: canvasElement };
+};
+
+
+const Cam = ({ id = '', style = {}, onGetStream }) => {
+
+  const videoRef = useRef(null);
+  const streamRef = useRef(null);
+  const getStreamIntervalIdRef = useRef(null);
+  const videoElementId = createVideoElementId(id);
+
+  const getStream = useCallback(async () => {
+    let stream = null;
+
+    try {
+      stream = await navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS);
+      stream.getTracks().forEach((track) => {
+        if (track.kind === 'video') track.enabled = true;
+      });
+    } catch (error) {
+      console.error(error);
+    }
+
+    if ((stream && !streamRef.current) || (!stream && streamRef.current)) {
+      videoRef.current.srcObject = stream;
+      stopVideo(streamRef.current);
+      streamRef.current = stream;
+      (typeof onGetStream === 'function') && onGetStream({ stream });
+    } else if (stream) stopVideo(stream);
+  }, [onGetStream]);
+
+  const stopVideo = (stream) => (stream) && stream.getTracks().forEach((track) => {
+    track?.stop();
+    track.enabled = false;
+  });
+
+  useEffect(() => {
+    getStream();
+    getStreamIntervalIdRef.current = setInterval(() => getStream(), GET_STREAM_INTERVAL_TIMEOUT);
+    return () => {
+      clearInterval(getStreamIntervalIdRef.current);
+      stopVideo(streamRef.current);
+    };
+  }, [getStream]);
+
+
+  return <div style={style} className='cam-div'>
+    <video id={videoElementId} ref={videoRef} autoPlay />
+  </div>;
+};
+
+
+export default Cam;

package/lib/components/Cam/cam.css

@@ -0,0 +1,8 @@
+.cam-div {
+    display: grid;
+}
+
+video {
+    width: 100%;
+    background-color: #000;
+}

package/lib/components/Cam/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Cam';
+export * from './Cam';

package/lib/components/Cam/index.js

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

package/lib/components/Carousel/Carousel.d.ts

@@ -66,6 +66,6 @@ export interface CarouselProps {
 }
 
 
-declare function Carousel(props: CarouselProps) : JSX.Element
+declare function Carousel(props: CarouselProps): JSX.Element
 
 export default Carousel;

package/lib/components/index.d.ts

@@ -166,4 +166,7 @@ export { default as Zoom } from './Zoom';
 export * from './Zoom';
 
 export { default as Carousel } from './Carousel';
-export * from './Carousel';
+export * from './Carousel';
+
+export { default as Cam } from './Cam';
+export * from './Cam';

package/lib/components/index.js

@@ -164,4 +164,7 @@ export { default as Zoom } from './Zoom';
 export * from './Zoom';
 
 export { default as Carousel } from './Carousel';
-export * from './Carousel';
+export * from './Carousel';
+
+export { default as Cam } from './Cam';
+export * from './Cam';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "argous",
-  "version": "1.2.220",
+  "version": "1.2.221",
   "description": "Argous.",
   "main": "lib/index.js",
   "author": "Carlos Schneider",