argous 1.2.242 → 1.2.244

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

@@ -7,10 +7,15 @@ export interface CamProps {
    * Component style
    */
   style?: object, 
+  /**
+   * constraints for cam audio and video
+   */
+  constraints?: object,
   /**
    * Function called on get stream
    */
   onGetStream?: (parameters: object) => void 
+
 }
 
 

package/dist/components/Cam/Cam.js

@@ -66,7 +66,7 @@ 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 = {
+var DEFAULT_VIDEO_CONSTRAINTS = {
     audio: false,
     video: {
         facingMode: 'user'
@@ -111,7 +111,7 @@ var camSnapshot = function (_a) {
 };
 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 _b = _a.id, id = _b === void 0 ? '' : _b, _c = _a.style, style = _c === void 0 ? {} : _c, onGetStream = _a.onGetStream, _d = _a.constraints, constraints = _d === void 0 ? DEFAULT_VIDEO_CONSTRAINTS : _d;
     var videoRef = react_1.useRef(null);
     var streamRef = react_1.useRef(null);
     var getStreamIntervalIdRef = react_1.useRef(null);
@@ -125,7 +125,7 @@ var Cam = function (_a) {
                     _a.label = 1;
                 case 1:
                     _a.trys.push([1, 3, , 4]);
-                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS)];
+                    return [4 /*yield*/, navigator.mediaDevices.getUserMedia(constraints)];
                 case 2:
                     stream = _a.sent();
                     stream.getTracks().forEach(function (track) {
@@ -149,7 +149,7 @@ var Cam = function (_a) {
                     return [2 /*return*/];
             }
         });
-    }); }, [onGetStream]);
+    }); }, [onGetStream, constraints]);
     var stopVideo = function (stream) { return (stream) && stream.getTracks().forEach(function (track) {
         track === null || track === void 0 ? void 0 : track.stop();
         track.enabled = false;
@@ -163,6 +163,7 @@ var Cam = function (_a) {
         };
     }, [getStream]);
     return react_1.default.createElement("div", { style: style, className: 'cam-div' },
+        console.log('videoRef', videoRef),
         react_1.default.createElement("video", { id: videoElementId, ref: videoRef, autoPlay: true }));
 };
 exports.default = Cam;

package/dist/components/PercentageDisplay/PercentageDisplay.d.ts

@@ -1,3 +1,6 @@
+import { TypographyVariant } from '@material-ui/core';
+
+
 export interface PercentageDisplayProps {
   /**
    * Identificação do elemento
@@ -6,7 +9,7 @@ export interface PercentageDisplayProps {
   /**
    * Porcentagem
    */
-  percentage?: number|string,
+  percentage?: (number|string),
   /**
    * Tamanho do componente
    */
@@ -34,9 +37,15 @@ export interface PercentageDisplayProps {
   /**
    * Cor de fundo da barra
    */
-  barBackgroundColor?: string
+  barBackgroundColor?: string,
+  /**
+   * Variant do componente Typography MUI
+   */
+  typographyVariant?: TypographyVariant
 }
 
+
 declare function PercentageDisplay(props: PercentageDisplayProps): JSX.Element
 
+
 export default PercentageDisplay;

package/dist/components/PercentageDisplay/PercentageDisplay.js

@@ -61,7 +61,9 @@ var useStyles = core_1.makeStyles({
         }
     },
     valueContainer: {
-        position: 'relative',
+        position: 'relative'
+    },
+    typography: {
         color: function (_a) {
             var color = _a.color;
             return color;
@@ -73,7 +75,7 @@ var useStyles = core_1.makeStyles({
     }
 });
 var PercentageDisplay = function (_a) {
-    var id = _a.id, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 50 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 6 : _d, _e = _a.fontSize, fontSize = _e === void 0 ? '0.9rem' : _e, _f = _a.color, color = _f === void 0 ? '#000' : _f, _g = _a.backgroundColor, backgroundColor = _g === void 0 ? '#fff' : _g, _h = _a.barColor, barColor = _h === void 0 ? '#00995d' : _h, _j = _a.barBackgroundColor, barBackgroundColor = _j === void 0 ? '#00995d26' : _j;
+    var id = _a.id, _b = _a.percentage, percentage = _b === void 0 ? 0 : _b, _c = _a.size, size = _c === void 0 ? 50 : _c, _d = _a.barWidth, barWidth = _d === void 0 ? 6 : _d, _e = _a.fontSize, fontSize = _e === void 0 ? '0.9rem' : _e, _f = _a.color, color = _f === void 0 ? '#000' : _f, _g = _a.typographyVariant, typographyVariant = _g === void 0 ? undefined : _g, _h = _a.backgroundColor, backgroundColor = _h === void 0 ? '#fff' : _h, _j = _a.barColor, barColor = _j === void 0 ? '#00995d' : _j, _k = _a.barBackgroundColor, barBackgroundColor = _k === void 0 ? '#00995d26' : _k;
     var progressBarWidth = size - barWidth;
     var classes = useStyles({ color: color, backgroundColor: backgroundColor, barColor: barColor, barBackgroundColor: barBackgroundColor, size: size, progressBarWidth: progressBarWidth, fontSize: fontSize });
     var percentageDisplayProgressId = id + "-percentageDisplayProgress";
@@ -84,9 +86,12 @@ var PercentageDisplay = function (_a) {
             return;
         progressBar.style.background = "conic-gradient(" + barColor + " " + porcentagem * 3.6 + "deg, " + barBackgroundColor + " " + porcentagem * 3.6 + "deg)";
     }, [barBackgroundColor, barColor, percentage, percentageDisplayProgressId]);
-    react_1.useEffect(function () { return createProgress(); }, [percentage, createProgress]);
+    react_1.useEffect(function () {
+        createProgress();
+    }, [percentage, createProgress]);
     return react_1.default.createElement("div", { className: classes.container },
         react_1.default.createElement("div", { id: percentageDisplayProgressId, className: classes.circularProgress },
-            react_1.default.createElement("div", { className: classes.valueContainer }, percentage + "%")));
+            react_1.default.createElement("div", { className: classes.valueContainer },
+                react_1.default.createElement(core_1.Typography, { variant: typographyVariant, className: classes.typography }, percentage + "%"))));
 };
 exports.default = PercentageDisplay;

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

@@ -7,10 +7,15 @@ export interface CamProps {
    * Component style
    */
   style?: object, 
+  /**
+   * constraints for cam audio and video
+   */
+  constraints?: object,
   /**
    * Function called on get stream
    */
   onGetStream?: (parameters: object) => void 
+
 }
 
 

package/lib/components/Cam/Cam.js

@@ -9,7 +9,7 @@ const GET_STREAM_INTERVAL_TIMEOUT = 3000;
 const VIDEO_ID = 'cam-video';
 const CANVAS_ID = 'cam-canvas';
 
-const VIDEO_CONSTRAINTS = { 
+const DEFAULT_VIDEO_CONSTRAINTS = { 
   audio: false, 
   video: { 
     facingMode: 'user' 
@@ -51,7 +51,7 @@ export const camSnapshot = ({ e = undefined, download = false, camComponentId =
 };
 
 
-const Cam = ({ id = '', style = {}, onGetStream }) => {
+const Cam = ({ id = '', style = {}, onGetStream, constraints = DEFAULT_VIDEO_CONSTRAINTS }) => {
 
   const videoRef = useRef(null);
   const streamRef = useRef(null);
@@ -62,7 +62,7 @@ const Cam = ({ id = '', style = {}, onGetStream }) => {
     let stream = null;
 
     try {
-      stream = await navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS);
+      stream = await navigator.mediaDevices.getUserMedia(constraints);
       stream.getTracks().forEach((track) => {
         if (track.kind === 'video') track.enabled = true;
       });
@@ -76,7 +76,7 @@ const Cam = ({ id = '', style = {}, onGetStream }) => {
       streamRef.current = stream;
       (typeof onGetStream === 'function') && onGetStream({ stream });
     } else if (stream) stopVideo(stream);
-  }, [onGetStream]);
+  }, [onGetStream, constraints]);
 
   const stopVideo = (stream) => (stream) && stream.getTracks().forEach((track) => {
     track?.stop();
@@ -94,6 +94,7 @@ const Cam = ({ id = '', style = {}, onGetStream }) => {
 
 
   return <div style={style} className='cam-div'>
+    {console.log('videoRef', videoRef)}
     <video id={videoElementId} ref={videoRef} autoPlay />
   </div>;
 };

package/lib/components/PercentageDisplay/PercentageDisplay.d.ts

@@ -1,3 +1,6 @@
+import { TypographyVariant } from '@material-ui/core';
+
+
 export interface PercentageDisplayProps {
   /**
    * Identificação do elemento
@@ -6,7 +9,7 @@ export interface PercentageDisplayProps {
   /**
    * Porcentagem
    */
-  percentage?: number|string,
+  percentage?: (number|string),
   /**
    * Tamanho do componente
    */
@@ -34,9 +37,15 @@ export interface PercentageDisplayProps {
   /**
    * Cor de fundo da barra
    */
-  barBackgroundColor?: string
+  barBackgroundColor?: string,
+  /**
+   * Variant do componente Typography MUI
+   */
+  typographyVariant?: TypographyVariant
 }
 
+
 declare function PercentageDisplay(props: PercentageDisplayProps): JSX.Element
 
+
 export default PercentageDisplay;

package/lib/components/PercentageDisplay/PercentageDisplay.js

@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles, Typography } from '@material-ui/core';
 import React, { useCallback, useEffect } from 'react';
 
+
 const useStyles = makeStyles({
   container: {
     display: 'grid',
@@ -23,12 +24,15 @@ const useStyles = makeStyles({
     }
   },
   valueContainer: {
-    position: 'relative',
+    position: 'relative'
+  },
+  typography: {
     color: ({ color }) => color,
     fontSize: ({ fontSize }) => fontSize
   }
 });
 
+
 const PercentageDisplay = ({ 
   id,
   percentage = 0,
@@ -36,6 +40,7 @@ const PercentageDisplay = ({
   barWidth = 6,
   fontSize = '0.9rem',
   color = '#000',
+  typographyVariant = undefined,
   backgroundColor = '#fff',
   barColor = '#00995d',
   barBackgroundColor = '#00995d26'
@@ -51,15 +56,22 @@ const PercentageDisplay = ({
     if (!progressBar) return;
     progressBar.style.background = `conic-gradient(${barColor} ${porcentagem * 3.6}deg, ${barBackgroundColor} ${porcentagem * 3.6}deg)`;
   }, [barBackgroundColor, barColor, percentage, percentageDisplayProgressId]);
-  useEffect(() => createProgress(), [percentage, createProgress]);
+
+  useEffect(() => {
+    createProgress();
+  }, [percentage, createProgress]);
+
 
   return <div className={classes.container}>
     <div id={percentageDisplayProgressId} className={classes.circularProgress}>
       <div className={classes.valueContainer}>
-        {`${percentage}%`}
+        <Typography variant={typographyVariant} className={classes.typography}>
+          {`${percentage}%`}
+        </Typography>
       </div>
     </div>
   </div>;
 };
 
+
 export default PercentageDisplay;

package/package.json

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