@newtonschool/react_proctoring_library 0.0.43 → 0.0.44

package/dist/components/index.js

@@ -3,12 +3,6 @@
 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() {
@@ -27,7 +21,6 @@ Object.defineProperty(exports, "ProctoredContextApp", {
     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"));

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

@@ -1,14 +1,14 @@
 "use strict";
 
-require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/es.object.assign.js");
 require("core-js/modules/es.weak-map.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");
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.symbol.description.js");
 var _react = _interopRequireWildcard(require("react"));
 require("./index.scss");
 var _utils = require("../../utils");
@@ -18,8 +18,10 @@ 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 _webcamActivityTracker = _interopRequireDefault(require("../webcam-activity-tracker"));
 var _browserUtils = require("../../utils/browserUtils");
+var _screenshareActivityTracker = require("../screenshare-activity-tracker");
+var _dom = require("../../constants/dom");
 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; }
@@ -34,7 +36,6 @@ const ProctorApp = _ref => {
   let {
     proctoringIdentifier,
     customPermissionView = null,
-    shouldRenderChildren = false,
     permissionPassedProps = {},
     children,
     proctoredContext,
@@ -43,27 +44,14 @@ const ProctorApp = _ref => {
     getWebcamSnapshot = () => {},
     getScreengrab = () => {}
   } = _ref;
-  const [renderChildren, setRenderChildren] = (0, _react.useState)();
   const context = (0, _react.useContext)(proctoredContext);
   const {
     actions,
     permissions,
     references,
-    permissionSetter,
-    customProps,
-    customSetter
+    permissionSetter
   } = 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 {
@@ -75,20 +63,18 @@ const ProctorApp = _ref => {
     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)();
+      const screenshot = await (0, _webcamMicrophoneUtils.captureScreenshot)("#".concat(_dom.SCREENSHARE_REFERENCE_ID));
       getScreengrab(proctoringIdentifier, screenshot, isBreach, breachedParam);
     }
   }, [getScreengrab, proctoringIdentifier, proctorParams.screenshareSnapshots, permissions.screenshare]);
-  const sendWebcamSnapshot = (0, _react.useCallback)(function () {
+  const sendWebcamSnapshot = (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.webcamSnapshots && permissions.video) {
-      const webcamSnapshot = (0, _utils.captureWebcamSnapshot)(references.webcamReference);
-      if (references.webcamReference) {
-        getWebcamSnapshot(proctoringIdentifier, webcamSnapshot, isBreach, breachedParam);
-      }
+      const webcamSnapshot = await (0, _webcamMicrophoneUtils.captureScreenshot)("#".concat(_dom.WEBCAM_REFERENCE_ID));
+      getWebcamSnapshot(proctoringIdentifier, webcamSnapshot, isBreach, breachedParam);
     }
-  }, [proctoringIdentifier, getWebcamSnapshot, proctorParams.webcamSnapshots, permissions.video, references.webcamReference]);
+  }, [proctoringIdentifier, getWebcamSnapshot, proctorParams.webcamSnapshots, permissions.video]);
   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] : "";
@@ -124,31 +110,29 @@ const ProctorApp = _ref => {
       sendScreengrab(true, breachData.breachedParam);
     }
   }, [userCount, isTabSwitched, permissions.fullscreen, lookedAwayCount, sendProctoredParamValues, sendWebcamSnapshot, sendScreengrab, proctorParams]);
+  const shouldShowProctoredComponent = (0, _breachUtils.showProctoredComponent)(proctorParams, actions.hasAllPermission);
   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({
+  }, shouldShowProctoredComponent && children, !shouldShowProctoredComponent && 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, {
+    browserDetails: (0, _browserUtils.getBrowserDetails)()
+  }, permissionPassedProps)), !shouldShowProctoredComponent && !customPermissionView && /*#__PURE__*/_react.default.createElement(_permissions.Permission, {
     proctorParams: proctorParams,
     permissions: permissions,
     askPermission: actions.askPermission,
     hasAllPermission: actions.hasAllPermission
-  }), /*#__PURE__*/_react.default.createElement(_activityTracker.default, {
+  }), /*#__PURE__*/_react.default.createElement(_webcamActivityTracker.default, {
     proctorParams: proctorParams,
     setAudioPermission: permissionSetter.audio,
     setVideoPermission: permissionSetter.video,
     webcamReference: references.webcamReference,
-    canvasReference: references.canvasReference,
-    screenshareReference: references.screenshareReference
+    canvasReference: references.canvasReference
+  }), /*#__PURE__*/_react.default.createElement(_screenshareActivityTracker.ScreenshareActivityTracker, {
+    ref: references.screenshareReference
   }));
 };
 exports.ProctorApp = ProctorApp;

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

@@ -10,3 +10,10 @@
     height: 100%;
     overflow-y: scroll;
 }
+.captured-video-canvas {
+    position: absolute;
+    bottom: 0px;
+  }
+.hide {
+    visibility: hidden;
+}

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

@@ -35,7 +35,6 @@ const ProctoredContextApp = _ref => {
   const [audioPermisison, setAudioPermission] = (0, _react.useState)();
   const [videoPermission, setVideoPermission] = (0, _react.useState)();
   const [screensharePermission, setScreensharePermission] = (0, _react.useState)();
-  const [customRenderer, setCustomRenderer] = (0, _react.useState)();
   const webcamReference = (0, _react.useRef)(null);
   const canvasReference = (0, _react.useRef)(null);
   const screenshareReference = (0, _react.useRef)(null);
@@ -78,21 +77,15 @@ const ProctoredContextApp = _ref => {
         video: setVideoPermission,
         screenshare: setScreensharePermission
       },
-      customProps: {
-        childrenRenderer: customRenderer
-      },
-      customSetter: {
-        childrenRenderer: setCustomRenderer
-      },
       proctorParams,
       actions: {
         askPermission: askPermission,
         hasAllPermission: hasAllPermission
       },
       references: {
-        webcamReference: webcamReference,
-        canvasReference: canvasReference,
-        screenshareReference: screenshareReference
+        webcamReference,
+        canvasReference,
+        screenshareReference
       }
     })
   }, children);

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

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScreenshareActivityTracker = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _dom = require("../../constants/dom");
+var _webcamMicrophoneUtils = require("../../utils/webcamMicrophoneUtils");
+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 ScreenshareActivityTracker = /*#__PURE__*/(0, _react.forwardRef)((props, screenshareReference) => {
+  (0, _react.useEffect)(() => {
+    if (screenshareReference.stream) {
+      (0, _webcamMicrophoneUtils.collectScreenshare)(screenshareReference);
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("video", {
+    ref: screenshareReference,
+    className: "captured-video-canvas hide",
+    id: _dom.SCREENSHARE_REFERENCE_ID
+  });
+});
+exports.ScreenshareActivityTracker = ScreenshareActivityTracker;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+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 _dom = require("../../constants/dom");
+var _breachUtils = require("../../utils/breachUtils");
+var _browserUtils = require("../../utils/browserUtils");
+var _webcamMicrophoneUtils = require("../../utils/webcamMicrophoneUtils");
+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 WebcamActivityTracker = _ref => {
+  let {
+    proctorParams,
+    setAudioPermission,
+    setVideoPermission,
+    webcamReference
+  } = _ref;
+  (0, _react.useEffect)(() => {
+    if ((0, _browserUtils.isChrome)()) {
+      if ((0, _breachUtils.isWebcamRequired)(proctorParams)) {
+        (0, _webcamMicrophoneUtils.updateAudioPermissions)(setAudioPermission);
+        (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: () => {
+      setVideoPermission(true);
+    },
+    onUserMediaError: () => {
+      setVideoPermission(false);
+    },
+    className: "captured-video-canvas hide",
+    id: _dom.WEBCAM_REFERENCE_ID
+  })));
+};
+var _default = WebcamActivityTracker;
+exports.default = _default;

package/dist/constants/dom.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WEBCAM_REFERENCE_ID = exports.SCREENSHARE_REFERENCE_ID = void 0;
+const WEBCAM_REFERENCE_ID = "wc-ref";
+exports.WEBCAM_REFERENCE_ID = WEBCAM_REFERENCE_ID;
+const SCREENSHARE_REFERENCE_ID = "ss-ref";
+exports.SCREENSHARE_REFERENCE_ID = SCREENSHARE_REFERENCE_ID;

package/dist/hooks/useIsPageFocussed.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useIsPageFocussed;
+require("core-js/modules/web.dom-collections.iterator.js");
+var _react = require("react");
+var _utils = require("../utils");
+const focusEvent = (0, _utils.getFocusEventName)();
+const blurEvent = (0, _utils.getBlurEventName)();
+function useIsPageFocussed(isProctorParam) {
+  const [isFocussed, setIsFocussed] = (0, _react.useState)(true);
+  const updateVisibilityOnFocus = () => {
+    setIsFocussed(true);
+  };
+  const updateVisibilityOnBlur = () => {
+    setIsFocussed(false);
+  };
+  (0, _react.useEffect)(() => {
+    window.addEventListener(focusEvent, updateVisibilityOnFocus, false);
+    window.addEventListener(blurEvent, updateVisibilityOnBlur, false);
+    return () => {
+      window.removeEventListener(focusEvent, updateVisibilityOnFocus);
+      window.removeEventListener(blurEvent, updateVisibilityOnBlur);
+    };
+  }, []);
+  return isFocussed && isProctorParam;
+}

package/dist/hooks/usePageVisibility.js

@@ -15,9 +15,9 @@ function usePageVisibility(isProctorParam) {
   };
   (0, _react.useEffect)(() => {
     updateVisibility();
-    document.addEventListener(visibilityChangeEvent, updateVisibility, false);
+    window.addEventListener(visibilityChangeEvent, updateVisibility, false);
     return () => {
-      document.removeEventListener(visibilityChangeEvent, updateVisibility);
+      window.removeEventListener(visibilityChangeEvent, updateVisibility);
     };
   }, []);
   return isVisible && isProctorParam;

package/dist/utils/browserUtils.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isChrome = exports.getVisibilityChangeEventName = exports.getIsDocumentVisible = exports.getBrowserFullscreenElementProp = void 0;
+exports.isChrome = exports.getVisibilityChangeEventName = exports.getIsDocumentVisible = exports.getFocusEventName = exports.getBrowserFullscreenElementProp = exports.getBrowserDetails = exports.getBlurEventName = void 0;
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.string.match.js");
 const PROPERTY_TYPES = {
   HIDDEN: "hidden",
-  VISIBILITY_CHANGE: "visibilitychange"
+  VISIBILITY_CHANGE: "visibilitychange",
+  FOCUS: "focus",
+  BLUR: "blur"
 };
 const getBrowserPropPrefix = () => {
   if (typeof document.msHidden !== "undefined") {
@@ -30,6 +32,10 @@ const getBrowserDocumentProp = type => {
       return getBrowserPropForHidden();
     case PROPERTY_TYPES.VISIBILITY_CHANGE:
       return "".concat(getBrowserPropPrefix(), "visibilitychange");
+    case PROPERTY_TYPES.FOCUS:
+      return "focus";
+    case PROPERTY_TYPES.BLUR:
+      return "blur";
     default:
       return "";
   }
@@ -38,6 +44,10 @@ const getIsDocumentVisible = () => !document[getBrowserDocumentProp(PROPERTY_TYP
 exports.getIsDocumentVisible = getIsDocumentVisible;
 const getVisibilityChangeEventName = () => getBrowserDocumentProp(PROPERTY_TYPES.VISIBILITY_CHANGE);
 exports.getVisibilityChangeEventName = getVisibilityChangeEventName;
+const getFocusEventName = () => getBrowserDocumentProp(PROPERTY_TYPES.FOCUS);
+exports.getFocusEventName = getFocusEventName;
+const getBlurEventName = () => getBrowserDocumentProp(PROPERTY_TYPES.BLUR);
+exports.getBlurEventName = getBlurEventName;
 const getBrowserFullscreenElementProp = () => {
   if (typeof document.fullscreenElement !== "undefined") {
     return "fullscreenElement";
@@ -51,4 +61,8 @@ const getBrowserFullscreenElementProp = () => {
 };
 exports.getBrowserFullscreenElementProp = getBrowserFullscreenElementProp;
 const isChrome = () => !!navigator.userAgent.match(/chrome|chromium/i);
-exports.isChrome = isChrome;
+exports.isChrome = isChrome;
+const getBrowserDetails = () => ({
+  isChrome: isChrome()
+});
+exports.getBrowserDetails = getBrowserDetails;

package/dist/utils/index.js

@@ -21,12 +21,24 @@ Object.defineProperty(exports, "getAudioVideoPermission", {
     return _webcamMicrophoneUtils.getAudioVideoPermission;
   }
 });
+Object.defineProperty(exports, "getBlurEventName", {
+  enumerable: true,
+  get: function get() {
+    return _browserUtils.getBlurEventName;
+  }
+});
 Object.defineProperty(exports, "getBrowserFullscreenElementProp", {
   enumerable: true,
   get: function get() {
     return _browserUtils.getBrowserFullscreenElementProp;
   }
 });
+Object.defineProperty(exports, "getFocusEventName", {
+  enumerable: true,
+  get: function get() {
+    return _browserUtils.getFocusEventName;
+  }
+});
 Object.defineProperty(exports, "getIsDocumentVisible", {
   enumerable: true,
   get: function get() {

package/dist/utils/webcamMicrophoneUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateVideoPermissions = exports.updateStatistics = exports.updateAudioPermissions = exports.setupScreensharePermission = exports.isWebcamVideoValid = exports.getVideoPermissionQuery = exports.getVideoPermission = exports.getGlancePercentage = exports.getAudioVideoPermission = exports.getAudioPermissionQuery = exports.getAudioPermission = exports.captureWebcamSnapshot = exports.captureScreenshot = void 0;
+exports.updateVideoPermissions = exports.updateStatistics = exports.updateAudioPermissions = exports.setupScreensharePermission = exports.resetWebcamReference = exports.resetScreenshotReference = exports.isWebcamVideoValid = exports.getVideoPermissionQuery = exports.getVideoPermission = exports.getGlancePercentage = exports.getAudioVideoPermission = exports.getAudioPermissionQuery = exports.getAudioPermission = exports.collectScreenshare = exports.captureWebcamSnapshot = exports.captureScreenshot = void 0;
 require("core-js/modules/es.array-buffer.slice.js");
 require("core-js/modules/es.typed-array.uint8-array.js");
 require("core-js/modules/es.typed-array.fill.js");
@@ -115,10 +115,11 @@ const setupScreensharePermission = (setScreensharePermission, screenshareReferen
   const track = stream.getTracks()[0];
   if (track.getSettings().displaySurface === "monitor") {
     setScreensharePermission(true);
-    screenshareReference.current = stream;
+    screenshareReference.stream = stream;
+    collectScreenshare(screenshareReference);
     track.onended = e => {
       setScreensharePermission(false);
-      screenshareReference.current = null;
+      screenshareReference.current.srcObject = null;
     };
   } else {
     track.stop();
@@ -126,10 +127,25 @@ const setupScreensharePermission = (setScreensharePermission, screenshareReferen
     setScreensharePermission(false);
   }
 }).catch(e => {
-  screenshareReference.current = null;
+  resetScreenshotReference(screenshareReference);
   setScreensharePermission(false);
 });
 exports.setupScreensharePermission = setupScreensharePermission;
+const collectScreenshare = screenshareReference => {
+  screenshareReference.current.srcObject = screenshareReference.stream;
+  screenshareReference.current.onloadedmetadata = e => {
+    screenshareReference.current.play();
+  };
+};
+exports.collectScreenshare = collectScreenshare;
+const resetScreenshotReference = screenshareReference => {
+  screenshareReference.current = null;
+};
+exports.resetScreenshotReference = resetScreenshotReference;
+const resetWebcamReference = webcamReference => {
+  webcamReference.current = null;
+};
+exports.resetWebcamReference = resetWebcamReference;
 const getVideoPermissionQuery = () => navigator.permissions.query({
   name: "camera"
 });
@@ -158,9 +174,9 @@ const captureWebcamSnapshot = webcamReference => {
   }
 };
 exports.captureWebcamSnapshot = captureWebcamSnapshot;
-const captureScreenshot = async () => {
+const captureScreenshot = async elementIdSelector => {
   try {
-    const canvas = await (0, _html2canvas.default)(document.querySelector("#ss-ref"));
+    const canvas = await (0, _html2canvas.default)(document.querySelector(elementIdSelector));
     const b64Snapshot = canvas.toDataURL("image/jpeg");
     return b64DataURItoBlob(b64Snapshot);
   } catch (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonschool/react_proctoring_library",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "Used to proctor online tests",
   "author": "ayushkagrawal,shreyachandra,weastel",
   "main": "dist/index.js",

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

@@ -1,143 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.weak-map.js");
-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

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