@newtonschool/react_proctoring_library 0.0.1 → 0.0.2

package/README.md

@@ -1,66 +1,70 @@
-# Welcome to react_proctoring_library · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Newton-School/proctoring_react/blob/main/LICENSE) [![npm (scoped)](https://img.shields.io/npm/v/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
-
-Hi! **react_proctoring_library** is a user friendly, easy to use and your _one-stop_ [npm library](https://www.npmjs.com/package/react_proctoring_library) which will provide you the ability to proctor all your exams, tests, quizzes, Playgrounds, almost everything you need to proctor with the minimum effort possible. We have used [body-pix](https://www.npmjs.com/package/@tensorflow-models/body-pix) model from [tensorflow](https://www.tensorflow.org/) library to detect if user is looking outside the screen, multiple people visible in camera. We have also implemented tab switching tracker and full screen exit tracker.
-
-## Why?
-
-- In these times when most of the exams are conducted online, a lot of us want some sort of mechanism which could make their life easy while taking online test and **react_proctoring_library** has done this for you.
-
-Future Plans?
-
-- Detection of multiple persons via Audio.
-
-
-## Installation
-
-You must have [React](https://reactjs.org/) v16.8 or above installed in your project to use this proctoring library.
-
-If you want, you can also [create a new react app](https://reactjs.org/docs/create-a-new-react-app.html) using `npx create-react-app my-new-app` command.
-
-Once you have a react app, just type
-`npm install react_proctoring_library` in your terminal and if everything goes fine, you are good to go.
-
-## Props
-
-| Props               | isRequired | ParamsType    | Description                                                                                                                              |
-| ------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
-| `TestComponent`     | Yes        | JSX Component | The Component which you want to proctor                                                                                                  |
-| `testIdentifier`    | Yes        | String        | A unique string to identify every test                                                                                                   |
-| `fullScreenMessage` | Optional   | String        | If you want your test to run only in full screen mode, this message will appear instead of TestComponent whenever User exits Full Screen |
-
-## Documentation
-
-Currently, **react_proctoring_library** comes with 2 things:
-
-- `ProctorApp` - A Component which will help you in proctoring
-- `Object getStatistics(string: testIdentifier)` - A function which will return a data Object with all Statistics
-  about breaches.
-
-```
-import { ProctorApp, getStatistics } from  'react_proctoring_library';
-function  Test(props) {
-	return (
-		<div>
-			<h1>Proctoring Window</h1>
-		</div>
-	);
-}
-
-function  App() {
-	const testIdentifier = 'unique-proctoring-identifier';
-	const fullScreenMessage = 'This test can only be completed in Full Screen Mode, do you want to start this test?';
-	const  getStats = e  => {
-		e.preventDefault();
-		console.log(getStatistics(testIdentifier));
-	};
-	return (
-		<div className="App">
-			<ProctorApp TestComponent={Test} testIdentifier={testIdentifier} fullScreenMessage={fullScreenMessage} />
-		</div>
-		<button  onClick={getStats}>Get Statistics</button>
-	);
-}
-
-export default App;
-```
-
+# Welcome to react_proctoring_library · [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/Newton-School/proctoring_react/blob/main/LICENSE) [![npm (scoped)](https://img.shields.io/npm/v/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![npm bundle size (minified)](https://img.shields.io/bundlephobia/min/proctoring_react.svg)](https://www.npmjs.com/package/react_proctoring_library) [![CircleCI Status](https://circleci.com/gh/facebook/react.svg?style=shield&circle-token=:circle-token)](https://circleci.com/gh/facebook/react) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://reactjs.org/docs/how-to-contribute.html#your-first-pull-request)
+
+Hi! **react_proctoring_library** is a user friendly, easy to use and your _one-stop_ [npm library](https://www.npmjs.com/package/react_proctoring_library) which will provide you the ability to proctor all your exams, tests, quizzes, playgrounds, almost everything you need to proctor with the minimum effort possible. We have used [body-pix](https://www.npmjs.com/package/@tensorflow-models/body-pix) model from [tensorflow](https://www.tensorflow.org/) library to detect if user is looking outside the screen, multiple people visible in camera. We have also implemented tab switching tracker and full screen exit tracker.
+
+## Why?
+
+- In these times when most of the exams are conducted online, a lot of us want some sort of mechanism which could make their life easy while taking online test and **react_proctoring_library** has done this for you.
+
+Future Plans?
+
+- Detection of multiple persons via Audio.
+- Provision of videos of the proctored sessios.
+- Screenshots when proctoring params are breached.
+
+## Installation
+
+You must have [React](https://reactjs.org/) v16.8 or above installed in your project to use this proctoring library.
+
+If you want, you can also [create a new react app](https://reactjs.org/docs/create-a-new-react-app.html) using `npx create-react-app my-new-app` command.
+
+Once you have a react app, just type
+`npm install react_proctoring_library` in your terminal and if everything goes fine, you are good to go.
+
+## Props
+
+| Props                  | isRequired | ParamsType    | Description                                                                                                                              |
+| ---------------------- | ---------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `children`   | Yes        | JSX Component | The Component which you want to proctor                                                                                                  |
+| `proctoringIdentifier` | Yes        | String        | A unique string to identify every test                                                                                                   |
+| `proctoringParams`     | Optional   | Object   {userCount tabSwitch, fullscreenExit, lookedAway}     | Parameters on which the screen is proctored. By default, all parameters are true                                                                    |
+| `shouldSendDataOnBreach`    | Optional   | Boolean     | True if data needs to be sent on breach, else False. Default is False           |
+| `sendData`                  | Optional   | Function     | if shouldSendDataOnBreach is True, this callback is called with the details of the breach on every breach                                                                                        |
+
+## Documentation
+
+Currently, **react_proctoring_library** comes with 2 things:
+
+- `ProctorApp` - A Component which will help you in proctoring
+- `Object getStatistics(string: proctoringIdentifier)` - A function which will return a data Object with all Statistics
+  about breaches.
+
+```
+import { ProctorApp, getStatistics } from  'react_proctoring_library';
+function Test(props) {
+	return (
+		<div>
+			<h1>Proctoring Window</h1>
+		</div>
+	);
+}
+
+function App() {
+	const proctoringIdentifier = 'unique-proctoring-identifier';
+
+	const  getStats = e  => {
+		e.preventDefault();
+		console.log(getStatistics(proctoringIdentifier));
+	};
+	return (
+		<div className="App">
+			<ProctorApp proctoringIdentifier={proctoringIdentifier}>
+				<Test />
+			</ProctorApp>
+		</div>
+		<button  onClick={getStats}>Get Statistics</button>
+	);
+}
+
+export default App;
+```

package/dist/components/FullScreenPermission.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FullScreenPermission;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("./full-screen-permission.scss");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+var text = _interopRequireWildcard(require("../constants/text"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function FullScreenPermission(_ref) {
+  let {
+    firstTimeFullScreen,
+    setFirstTimeFullScreen,
+    isFullscreen,
+    setFullscreen,
+    setFullScreenExitCount,
+    fullScreenPermissionTexts
+  } = _ref;
+  const [show, setShow] = (0, _react.useState)(true);
+
+  const closePermissionModal = () => {
+    if (firstTimeFullScreen) {
+      setFirstTimeFullScreen(false);
+    }
+
+    setShow(false);
+  };
+
+  const handleNo = () => {
+    if (firstTimeFullScreen) {
+      setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
+    }
+
+    closePermissionModal();
+  };
+
+  const switchToFullscreenMode = () => {
+    closePermissionModal();
+    setFullscreen();
+  };
+
+  (0, _react.useEffect)(() => {
+    if (!isFullscreen) {
+      setShow(true);
+    }
+  }, [isFullscreen]);
+  const {
+    title = "",
+    message = "",
+    deny = "",
+    allow = "",
+    errorMessage = ""
+  } = fullScreenPermissionTexts;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h1", {
+    className: "error-message"
+  }, errorMessage ? errorMessage : text.FULLSCREEN_ERROR_MESSAGE), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+    show: show,
+    onHide: closePermissionModal,
+    size: "lg",
+    backdrop: "static",
+    "aria-labelledby": "contained-modal-title-vcenter",
+    centered: true
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, title ? title : text.FULLSCREEN_PERMISSION_TITLE)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, {
+    className: "dialog-message"
+  }, message ? message : text.MESSAGE), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "secondary",
+    onClick: handleNo
+  }, deny ? deny : text.DENY), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "primary",
+    onClick: switchToFullscreenMode
+  }, allow ? allow : text.ALLOW))));
+}

package/dist/components/FullScreenTestInWebcam.js

@@ -1,5 +1,7 @@
 "use strict";
 
+require("core-js/modules/web.dom-collections.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,11 +13,21 @@ var _reactWebcam = _interopRequireDefault(require("react-webcam"));
 
 var _reactBootstrap = require("react-bootstrap");
 
+var text = _interopRequireWildcard(require("../constants/text"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FullScreenTestInWebcam = props => {
-  const webcamReference = props.webcamRef,
-        canvasReference = props.canvasRef;
+const FullScreenTestInWebcam = _ref => {
+  let {
+    webcamReference,
+    canvasReference,
+    userCount,
+    isWatching
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
     md: 6
   }, /*#__PURE__*/_react.default.createElement(_reactWebcam.default, {
@@ -29,20 +41,20 @@ const FullScreenTestInWebcam = props => {
   }, /*#__PURE__*/_react.default.createElement("canvas", {
     id: "glanceTrackerCanvas",
     style: {
-      display: 'none'
+      display: "none"
     }
   })), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      position: 'absolute',
-      marginLeft: 'auto',
-      marginRight: 'auto',
+      position: "absolute",
+      marginLeft: "auto",
+      marginRight: "auto",
       left: 0,
       right: 0,
-      top: '35rem',
-      textAlign: 'center',
+      top: "35rem",
+      textAlign: "center",
       zindex: 9
     }
-  }, "user count: ", props.userCount, /*#__PURE__*/_react.default.createElement("br", null), props.isWatching ? 'You are watching the screen' : 'You are not watching'));
+  }, text.USER_COUNT_LABEL, ": ", userCount, /*#__PURE__*/_react.default.createElement("br", null), isWatching ? text.WATCHING_SCREEN : text.NOT_WATCHING_SCREEN));
 };
 
 var _default = FullScreenTestInWebcam;

package/dist/components/ProctorApp.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProctorApp = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ = require(".");
+
+var _utils = require("../utils");
+
+var _hooks = require("../hooks");
+
+var _defaults = require("../constants/defaults");
+
+var _permissions = require("./permissions");
+
+var _useWebcamData = _interopRequireDefault(require("../hooks/useWebcamData"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ProctorApp = _ref => {
+  let {
+    proctoringIdentifier,
+    children,
+    proctoringParams = {
+      userCount: true,
+      tabSwitch: true,
+      fullscreenExit: true,
+      lookedAway: true
+    },
+    sendData = () => {},
+    shouldSendDataOnBreach = false
+  } = _ref;
+  const webcamReference = (0, _react.useRef)(null);
+  const canvasReference = (0, _react.useRef)(null);
+  const statistics = (0, _react.useRef)(_defaults.INITIAL_STATISTICS);
+  const [audioPermission, setAudioPermission] = (0, _react.useState)(false);
+  const [videoPermission, setVideoPermission] = (0, _react.useState)(false);
+  const {
+    isFullscreen,
+    setFullscreen,
+    fullScreenExitCount
+  } = (0, _hooks.useFullscreenData)();
+  const [userCount, lookedAwayCount] = (0, _useWebcamData.default)(webcamReference, canvasReference);
+  const tabSwitchCount = (0, _hooks.useTabSwitchCount)();
+  (0, _react.useEffect)(() => {
+    (0, _utils.removeStatsFromLocalStorage)(proctoringIdentifier);
+  }, [proctoringIdentifier]);
+  (0, _react.useEffect)(() => {
+    if (shouldSendDataOnBreach) {
+      (0, _utils.sendDataOnBreach)(statistics, {
+        userCount,
+        tabSwitchCount,
+        fullScreenExitCount,
+        lookedAwayCount
+      }, proctoringIdentifier, sendData);
+    }
+
+    (0, _utils.updateStatistics)(statistics, tabSwitchCount, fullScreenExitCount, lookedAwayCount, userCount);
+    (0, _utils.addOrUpdateStatsToLocalStorage)(proctoringIdentifier, statistics.current);
+  }, [userCount, tabSwitchCount, fullScreenExitCount, lookedAwayCount, proctoringIdentifier, sendData, shouldSendDataOnBreach]);
+
+  if (proctoringIdentifier === undefined) {
+    // todo
+    return;
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_permissions.Permission, {
+    isFullscreen: isFullscreen,
+    audioPermisison: audioPermission,
+    videoPermission: videoPermission,
+    setFullscreen: setFullscreen
+  }), /*#__PURE__*/_react.default.createElement(_.ActivityTracker, {
+    setAudioPermission: setAudioPermission,
+    setVideoPermission: setVideoPermission,
+    webcamReference: webcamReference,
+    canvasReference: canvasReference
+  }), isFullscreen && audioPermission && videoPermission && children);
+};
+
+exports.ProctorApp = ProctorApp;
+var _default = ProctorApp;
+exports.default = _default;

package/dist/components/ResponseModal.js

@@ -11,26 +11,34 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactBootstrap = require("react-bootstrap");
 
+var text = _interopRequireWildcard(require("../constants/text"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function ResponseModal(props) {
+function ResponseModal(_ref) {
+  let {
+    firstTimeFullScreen,
+    setFirstTimeFullScreen,
+    isFullscreen,
+    setFullscreen,
+    setFullScreenExitCount,
+    fullScreenMessage
+  } = _ref;
   const [show, setShow] = (0, _react.useState)(true);
 
-  const displayResponseModal = () => setShow(true);
-
   const closeResponseModal = () => {
-    if (props.firstTimeFullScreen) {
-      props.setFirstTimeFullScreen(false);
+    if (firstTimeFullScreen) {
+      setFirstTimeFullScreen(false);
     }
 
     setShow(false);
   };
 
-  const handleNoOption = () => {
-    if (props.firstTimeFullScreen) {
-      props.setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
+  const handleNo = () => {
+    if (firstTimeFullScreen) {
+      setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
     }
 
     closeResponseModal();
@@ -38,14 +46,14 @@ function ResponseModal(props) {
 
   const openFullscreen = () => {
     closeResponseModal();
-    props.SetCanOpenFullScreen();
+    setFullscreen();
   };
 
   (0, _react.useEffect)(() => {
-    if (!props.canOpenFullScreen) {
-      displayResponseModal();
+    if (!isFullscreen) {
+      setShow(true);
     }
-  }, [props.canOpenFullScreen]);
+  }, [isFullscreen]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
     show: show,
     onHide: closeResponseModal,
@@ -53,11 +61,11 @@ function ResponseModal(props) {
     backdrop: "static",
     "aria-labelledby": "contained-modal-title-vcenter",
     centered: true
-  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, "Full Screen Permission")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, props.fullScreenMessage), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Header, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Title, null, text.FULLSCREEN_PERMISSION_TITLE)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, null, fullScreenMessage), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: "secondary",
-    onClick: handleNoOption
-  }, "No"), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    onClick: handleNo
+  }, text.NO), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
     variant: "primary",
     onClick: openFullscreen
-  }, "Yes"))));
+  }, text.YES))));
 }

package/dist/components/activity-tracker/index.js

@@ -0,0 +1,144 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.match.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactWebcam = _interopRequireDefault(require("react-webcam"));
+
+var _utils = require("../../utils");
+
+var _webcamMicrophoneUtils = require("../../utils/webcamMicrophoneUtils");
+
+require("./index.scss");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const isChrome = !!navigator.userAgent.match(/chrome|chromium/i);
+
+const ActivityTracker = _ref => {
+  let {
+    webcamReference,
+    canvasReference,
+    setAudioPermission,
+    setVideoPermission
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    if (isChrome) {
+      (0, _webcamMicrophoneUtils.updateVideoPermissions)(setVideoPermission);
+      (0, _webcamMicrophoneUtils.updateAudioPermissions)(setAudioPermission);
+      (0, _webcamMicrophoneUtils.getVideoPermissionQuery)().then(status => {
+        status.onchange = evt => {
+          (0, _webcamMicrophoneUtils.updateVideoPermissions)(setVideoPermission);
+        };
+      }).catch(err => {
+        console.log("Video Permission", err);
+      });
+      (0, _webcamMicrophoneUtils.getAudioPermissionQuery)().then(status => {
+        status.onchange = evt => {
+          (0, _webcamMicrophoneUtils.updateAudioPermissions)(setAudioPermission);
+        };
+      }).catch(err => {
+        (0, _webcamMicrophoneUtils.updateAudioPermissions)("Audio Permission", err);
+      });
+    }
+  }, [setVideoPermission, setAudioPermission]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactWebcam.default, {
+    audio: true,
+    muted: true,
+    ref: webcamReference,
+    onUserMedia: stream => {
+      if (!isChrome) {
+        const {
+          audio,
+          video
+        } = (0, _utils.getAudioVideoPermission)(stream);
+        setAudioPermission(audio);
+        setVideoPermission(video);
+
+        stream.onaddtrack = p => {
+          const {
+            audio,
+            video
+          } = (0, _utils.getAudioVideoPermission)(stream);
+          setAudioPermission(audio);
+          setVideoPermission(video);
+        };
+
+        stream.onremovetrack = p => {
+          const {
+            audio,
+            video
+          } = (0, _utils.getAudioVideoPermission)(stream);
+          setAudioPermission(audio);
+          setVideoPermission(video);
+        };
+
+        stream.onactive = p => {
+          const {
+            audio,
+            video
+          } = (0, _utils.getAudioVideoPermission)(stream);
+          setAudioPermission(audio);
+          setVideoPermission(video);
+        };
+
+        stream.oninactive = e => {
+          setAudioPermission(false);
+          setVideoPermission(false);
+        };
+
+        const audioTracks = stream.getAudioTracks().filter(track => track.enabled && track.label);
+        audioTracks.forEach(track => {
+          track.onended = e => {
+            const audio = (0, _utils.getAudioPermission)(stream);
+            setAudioPermission(audio, e.currentTarget.id);
+          };
+
+          track.onmute = e => {
+            const audio = (0, _utils.getAudioPermission)(stream);
+            setAudioPermission(audio, e.currentTarget.id);
+          };
+
+          track.onunmute = e => {
+            const audio = (0, _utils.getAudioPermission)(stream);
+            setAudioPermission(audio);
+          };
+        });
+        const videoTracks = stream.getVideoTracks().filter(track => track.enabled && track.label);
+        videoTracks.forEach(track => {
+          track.onended = e => {
+            const video = (0, _utils.getVideoPermission)(stream, e.currentTarget.id);
+            setVideoPermission(video);
+          };
+        });
+      }
+    },
+    onUserMediaError: error => {
+      if (!isChrome) {
+        setVideoPermission(false);
+        setAudioPermission(false);
+      }
+    },
+    className: "captured-video-canvas"
+  }), /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: canvasReference,
+    className: "captured-video-canvas"
+  }));
+};
+
+var _default = ActivityTracker;
+exports.default = _default;

package/dist/components/activity-tracker/index.scss

@@ -0,0 +1,4 @@
+.captured-video-canvas {
+  visibility: hidden;
+  position: absolute;
+}

package/dist/components/full-screen-permission.scss

@@ -0,0 +1,8 @@
+.error-message {
+  display: flex;
+  justify-content: center;
+  font-size: large;
+}
+.dialog-message {
+  font-size: medium;
+}