@newtonschool/react_proctoring_library 0.0.33 → 0.0.35

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

@@ -0,0 +1,164 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactWebcam = _interopRequireDefault(require("react-webcam"));
+
+var _utils = require("../../utils");
+
+var _breachUtils = require("../../utils/breachUtils");
+
+var _browserUtils = require("../../utils/browserUtils");
+
+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 ActivityTracker = _ref => {
+  let {
+    proctorParams,
+    webcamReference,
+    canvasReference,
+    screenshareReference,
+    setAudioPermission,
+    setVideoPermission
+  } = _ref;
+  const screenshareVideoReference = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    if (screenshareReference.current) {
+      screenshareVideoReference.current.srcObject = screenshareReference.current;
+
+      screenshareVideoReference.current.onloadedmetadata = e => {
+        screenshareVideoReference.current.play();
+      };
+    }
+
+    return () => {
+      screenshareVideoReference.current.srcObject = null;
+    };
+  }, [screenshareReference.current]);
+  (0, _react.useEffect)(() => {
+    if ((0, _browserUtils.isChrome)()) {
+      if ((0, _breachUtils.isWebcamRequired)(proctorParams)) {
+        (0, _webcamMicrophoneUtils.updateVideoPermissions)(setVideoPermission);
+        (0, _webcamMicrophoneUtils.updateAudioPermissions)(setAudioPermission);
+        (0, _webcamMicrophoneUtils.getVideoPermissionQuery)().then(status => {
+          status.onchange = evt => {
+            (0, _webcamMicrophoneUtils.updateVideoPermissions)(setVideoPermission);
+          };
+        }).catch(err => {});
+        (0, _webcamMicrophoneUtils.getAudioPermissionQuery)().then(status => {
+          status.onchange = evt => {
+            (0, _webcamMicrophoneUtils.updateAudioPermissions)(setAudioPermission);
+          };
+        }).catch(err => {
+          (0, _webcamMicrophoneUtils.updateAudioPermissions)("Audio Permission", err);
+        });
+      }
+    }
+  }, [setVideoPermission, setAudioPermission, proctorParams]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _breachUtils.isWebcamRequired)(proctorParams) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactWebcam.default, {
+    audio: true,
+    muted: true,
+    screenshotFormat: "image/jpeg",
+    ref: webcamReference,
+    onUserMedia: stream => {
+      if (!(0, _browserUtils.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 (!(0, _browserUtils.isChrome)()) {
+        setVideoPermission(false);
+        setAudioPermission(false);
+      }
+    },
+    className: "hide"
+  }), /*#__PURE__*/_react.default.createElement("canvas", {
+    ref: canvasReference,
+    className: "captured-video-canvas hide",
+    id: "wc-ref"
+  })), /*#__PURE__*/_react.default.createElement("video", {
+    ref: screenshareVideoReference,
+    className: "captured-video-canvas hide",
+    id: "ss-ref"
+  }));
+};
+
+var _default = ActivityTracker;
+exports.default = _default;

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

@@ -0,0 +1,7 @@
+.captured-video-canvas {
+  position: absolute;
+  bottom: 0px;
+}
+.hide {
+  visibility: hidden;
+}

package/dist/components/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ActivityTracker", {
+  enumerable: true,
+  get: function get() {
+    return _activityTracker.default;
+  }
+});
+Object.defineProperty(exports, "FullScreenPermission", {
+  enumerable: true,
+  get: function get() {
+    return _permissions.FullScreenPermission;
+  }
+});
+Object.defineProperty(exports, "ProctorApp", {
+  enumerable: true,
+  get: function get() {
+    return _Loadable.default;
+  }
+});
+Object.defineProperty(exports, "ProctoredContextApp", {
+  enumerable: true,
+  get: function get() {
+    return _Loadable2.default;
+  }
+});
+
+var _activityTracker = _interopRequireDefault(require("./activity-tracker"));
+
+var _permissions = require("./permissions");
+
+var _Loadable = _interopRequireDefault(require("./proctor-app/Loadable"));
+
+var _Loadable2 = _interopRequireDefault(require("./proctor-context-app/Loadable"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/permissions/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Permission = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+var _askPermission = _interopRequireDefault(require("../../assets/videos/ask-permission.mp4"));
+
+require("./index.scss");
+
+var text = _interopRequireWildcard(require("../../constants/text"));
+
+var _permissionBody = require("./permission-body");
+
+var _breachUtils = require("../../utils/breachUtils");
+
+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 Permission = _ref => {
+  let {
+    proctorParams,
+    permissions,
+    askPermission,
+    hasAllPermission
+  } = _ref;
+  const showPermissionModal = !hasAllPermission((0, _breachUtils.getRequiredPermissionsFromProctorParams)(proctorParams));
+  return /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
+    show: showPermissionModal,
+    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, text.PERMISSION_TITLE)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Body, {
+    className: "font-medium"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      borderRadius: "20px"
+    }
+  }, /*#__PURE__*/_react.default.createElement("video", {
+    className: "videoStyles",
+    width: "100%",
+    height: "240",
+    autoPlay: true,
+    muted: true,
+    loop: true,
+    playsInline: true
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: _askPermission.default
+  }), text.VIDEO_UNSUPPORTED_IN_BROWSER)), /*#__PURE__*/_react.default.createElement(_permissionBody.PermissionBody, {
+    showFullscreenText: !permissions.fullscreen,
+    showAudioPermissionText: !permissions.audio && (0, _breachUtils.isWebcamRequired)(proctorParams),
+    showVideoPermissionText: !permissions.video && (0, _breachUtils.isWebcamRequired)(proctorParams),
+    showScreensharePermission: !permissions.screenshare && proctorParams.screenshareSnapshots
+  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal.Footer, null, !permissions.screenshare && proctorParams.screenshareSnapshots && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    onClick: () => {
+      askPermission(['screenshare']);
+    }
+  }, text.ALLOW_SCREENSHARE), !permissions.fullscreen && proctorParams.fullscreenExit && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
+    variant: "primary",
+    onClick: () => {
+      askPermission(['fullscreen']);
+    }
+  }, text.ALLOW_FULLSCREEN)));
+};
+
+exports.Permission = Permission;

package/dist/components/permissions/index.scss

@@ -0,0 +1,6 @@
+.modal-dialog {
+  width: 400px;
+}
+.video-permission-img {
+  width: 200px;
+}

package/dist/components/permissions/permission-body.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PermissionBody = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _urlVideoPermissionHighlight = _interopRequireDefault(require("../../assets/images/url-video-permission-highlight.png"));
+
+require("./index.scss");
+
+var text = _interopRequireWildcard(require("../../constants/text"));
+
+var _browserUtils = require("../../utils/browserUtils");
+
+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 PermissionBody = _ref => {
+  let {
+    showFullscreenText,
+    showAudioPermissionText,
+    showVideoPermissionText,
+    showScreensharePermission
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "mb-2"
+  }, text.PERMISSION_GENERIC), showScreensharePermission && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mb-2"
+  }, !(0, _browserUtils.isChrome)() && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("strong", null, "Please switch to chrome"), /*#__PURE__*/_react.default.createElement("br", null)), /*#__PURE__*/_react.default.createElement("span", {
+    className: "pr-2 font-weight-bold"
+  }, "Screenshare:"), text.PERMISSION_SCREENSHARE), showAudioPermissionText && showVideoPermissionText ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "mb-2"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pr-2 font-weight-bold"
+  }, "Camera/Microphone:"), text.PERMISSION_AUDIO_VIDEO) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showVideoPermissionText && /*#__PURE__*/_react.default.createElement("div", {
+    className: "mb-2"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pr-2 font-weight-bold"
+  }, "Camera:"), text.PERMISSION_VIDEO), showAudioPermissionText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pr-2 font-weight-bold"
+  }, "Microphone:"), text.PERMISSION_AUDIO)), (showAudioPermissionText || showVideoPermissionText) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "d-flex justify-content-center"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: "video-permission-img",
+    alt: "url_video_permission_highlight",
+    src: _urlVideoPermissionHighlight.default
+  })), showFullscreenText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pr-2 font-weight-bold"
+  }, "Fullscreen:"), text.PERMISSION_FULLSCREEN));
+};
+
+exports.PermissionBody = PermissionBody;

package/dist/components/proctor-app/Loadable.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loadable = _interopRequireDefault(require("../../utils/loadable"));
+
+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; }
+
+var _default = (0, _loadable.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./index"))), {
+  fallback: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)
+});
+
+exports.default = _default;

package/dist/components/proctor-app/index.js

@@ -0,0 +1,181 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProctorApp = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.promise.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("./index.scss");
+
+var _utils = require("../../utils");
+
+var _hooks = require("../../hooks");
+
+var _permissions = require("../permissions");
+
+var _useWebcamData = _interopRequireDefault(require("../../hooks/useWebcamData"));
+
+var _breachUtils = require("../../utils/breachUtils");
+
+var _webcamMicrophoneUtils = require("../../utils/webcamMicrophoneUtils");
+
+var _defaults = require("../../constants/defaults");
+
+var _activityTracker = _interopRequireDefault(require("../activity-tracker"));
+
+var _browserUtils = require("../../utils/browserUtils");
+
+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; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const isWebcamProcessingReliable = (0, _utils.isGPUAvailable)();
+
+const ProctorApp = _ref => {
+  let {
+    proctoringIdentifier,
+    customPermissionView = null,
+    shouldRenderChildren = false,
+    permissionPassedProps = {},
+    children,
+    proctoredContext,
+    config,
+    getProctorParamValues = () => {},
+    getWebcamSnapshot = () => {},
+    getScreengrab = () => {}
+  } = _ref;
+  const [renderChildren, setRenderChildren] = (0, _react.useState)();
+  const context = (0, _react.useContext)(proctoredContext);
+  const {
+    actions,
+    permissions,
+    references,
+    permissionSetter,
+    customProps,
+    customSetter
+  } = context;
+  (0, _react.useEffect)(() => {
+    if (customProps.childrenRenderer === undefined) {
+      setRenderChildren(!shouldRenderChildren);
+    } else {
+      setRenderChildren(customProps.childrenRenderer);
+    }
+  }, [customProps]);
+  const CustomPermissionView = customPermissionView;
+  const browserDetails = {
+    isChrome: (0, _browserUtils.isChrome)()
+  };
+  const proctorParams = (0, _react.useMemo)(() => _objectSpread(_objectSpread({}, _defaults.defaultConfig), config.proctorParams), [config.proctorParams]);
+  const statistics = (0, _react.useRef)((0, _breachUtils.getInitialStats)(proctorParams));
+  const {
+    recurring = false,
+    recurringFetchInterval = 0
+  } = config;
+  const recurringFetchIntervalRef = (0, _react.useRef)(null);
+  const sendScreengrab = (0, _react.useCallback)(async function () {
+    let isBreach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    let breachedParam = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+
+    if (proctorParams.screenshareSnapshots && permissions.screenshare) {
+      const screenshot = await (0, _webcamMicrophoneUtils.captureScreenshot)();
+      getScreengrab(proctoringIdentifier, screenshot, isBreach, breachedParam);
+    }
+  }, [getScreengrab, proctoringIdentifier, proctorParams.screenshareSnapshots, permissions.screenshare]);
+  const sendWebcamSnapshot = (0, _react.useCallback)(function () {
+    let isBreach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    let breachedParam = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+
+    if (proctorParams.webcamSnapshots && permissions.video) {
+      const webcamSnapshot = (0, _utils.captureWebcamSnapshot)(references.webcamReference);
+
+      if (references.webcamReference) {
+        getWebcamSnapshot(proctoringIdentifier, webcamSnapshot, isBreach, breachedParam);
+      }
+    }
+  }, [proctoringIdentifier, getWebcamSnapshot, proctorParams.webcamSnapshots, permissions.video, references.webcamReference]);
+  const sendProctoredParamValues = (0, _react.useCallback)(function () {
+    let isBreach = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    let breachParam = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "";
+    getProctorParamValues(proctoringIdentifier, statistics.current, isBreach, breachParam);
+  }, [proctoringIdentifier, getProctorParamValues]);
+  const [userCount, lookedAwayCount] = (0, _useWebcamData.default)(references.webcamReference, references.canvasReference, proctorParams);
+  const isTabSwitched = !(0, _hooks.usePageVisibility)(proctorParams.tabSwitch);
+  (0, _react.useEffect)(() => {
+    if (recurring) {
+      recurringFetchIntervalRef.current = setInterval(() => {
+        sendProctoredParamValues();
+        sendWebcamSnapshot();
+        sendScreengrab();
+      }, recurringFetchInterval);
+    }
+
+    return () => {
+      clearInterval(recurringFetchIntervalRef.current);
+    };
+  }, [recurring, recurringFetchInterval, sendProctoredParamValues, sendWebcamSnapshot, sendScreengrab]);
+  (0, _react.useEffect)(() => {
+    const currentStats = {
+      userCount,
+      isTabSwitched,
+      isFullScreen: permissions.fullscreen,
+      lookedAwayCount,
+      isWebcamDataNotReliable: !isWebcamProcessingReliable
+    };
+    const breachData = (0, _breachUtils.getDataOnBreach)(statistics, currentStats, proctorParams);
+    (0, _utils.updateStatistics)(statistics, currentStats, proctorParams);
+
+    if (breachData) {
+      sendProctoredParamValues(true, breachData.breachedParam);
+      sendWebcamSnapshot(true, breachData.breachedParam);
+      sendScreengrab(true, breachData.breachedParam);
+    }
+  }, [userCount, isTabSwitched, permissions.fullscreen, lookedAwayCount, sendProctoredParamValues, sendWebcamSnapshot, sendScreengrab, proctorParams]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(proctorParams.copyPasteProctoring ? "disable-copy-paste fullwidth fullheight" : "fullwidth fullheight")
+  }, (0, _breachUtils.showProctoredComponent)(proctorParams, actions.hasAllPermission) && renderChildren && children, !((0, _breachUtils.showProctoredComponent)(proctorParams, actions.hasAllPermission) && renderChildren) && customPermissionView && /*#__PURE__*/_react.default.createElement(CustomPermissionView, _extends({
+    permissions: permissions,
+    hasAllPermission: actions.hasAllPermission,
+    askPermission: actions.askPermission,
+    references: references,
+    actions: actions,
+    browserDetails: browserDetails,
+    renderChildren: () => {
+      setRenderChildren(true);
+      customSetter.childrenRenderer(true);
+    }
+  }, permissionPassedProps)), !((0, _breachUtils.showProctoredComponent)(proctorParams, actions.hasAllPermission) && renderChildren) && !customPermissionView && /*#__PURE__*/_react.default.createElement(_permissions.Permission, {
+    proctorParams: proctorParams,
+    permissions: permissions,
+    askPermission: actions.askPermission,
+    hasAllPermission: actions.hasAllPermission
+  }), /*#__PURE__*/_react.default.createElement(_activityTracker.default, {
+    proctorParams: proctorParams,
+    setAudioPermission: permissionSetter.audio,
+    setVideoPermission: permissionSetter.video,
+    webcamReference: references.webcamReference,
+    canvasReference: references.canvasReference,
+    screenshareReference: references.screenshareReference
+  }));
+};
+
+exports.ProctorApp = ProctorApp;
+var _default = ProctorApp;
+exports.default = _default;

package/dist/components/proctor-app/index.scss

@@ -0,0 +1,12 @@
+.disable-copy-paste {
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+.fullwidth {
+    width: 100%;
+}
+.fullheight {
+    height: 100%;
+    overflow-y: scroll;
+}

package/dist/components/proctor-context-app/Loadable.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.promise.js");
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _loadable = _interopRequireDefault(require("../../utils/loadable"));
+
+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; }
+
+var _default = (0, _loadable.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require("./index"))), {
+  fallback: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null)
+});
+
+exports.default = _default;