@newtonschool/react_proctoring_library 0.0.7 → 0.0.10

package/dist/components/ProctorApp.js

@@ -43,6 +43,7 @@ const ProctorApp = _ref => {
   const webcamReference = (0, _react.useRef)(null);
   const canvasReference = (0, _react.useRef)(null);
   const statistics = (0, _react.useRef)(_defaults.INITIAL_STATISTICS);
+  const gpuAvailable = (0, _utils.isGPUAvailable)();
   const [audioPermission, setAudioPermission] = (0, _react.useState)(false);
   const [videoPermission, setVideoPermission] = (0, _react.useState)(false);
   const firstFullScreenDone = (0, _react.useRef)(false);
@@ -51,8 +52,18 @@ const ProctorApp = _ref => {
     setFullscreen,
     fullScreenExitCount
   } = (0, _hooks.useFullscreenData)(firstFullScreenDone);
-  const [userCount, lookedAwayCount] = (0, _useWebcamData.default)(webcamReference, canvasReference);
+  const [userCount, lookedAwayCount] = gpuAvailable ? (0, _useWebcamData.default)(webcamReference, canvasReference) : [-1, -1];
   const tabSwitchCount = (0, _hooks.useTabSwitchCount)(firstFullScreenDone);
+  (0, _react.useEffect)(() => {
+    if (!gpuAvailable & shouldSendDataOnBreach) {
+      (0, _utils.sendDataOnBreach)(statistics, {
+        userCount,
+        tabSwitchCount,
+        fullScreenExitCount,
+        lookedAwayCount
+      }, proctoringIdentifier, sendData);
+    }
+  }, []);
   (0, _react.useEffect)(() => {
     (0, _utils.removeStatsFromLocalStorage)(proctoringIdentifier);
   }, [proctoringIdentifier]);

package/dist/constants/defaults.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.initialValues = exports.glancePercentageToPass = exports.evaluateVideoIntervalInSeconds = exports.bodyPixConfigs = exports.INITIAL_STATISTICS = void 0;
+exports.initialValues = exports.gpuTypes = exports.glancePercentageToPass = exports.evaluateVideoIntervalInSeconds = exports.bodyPixConfigs = exports.INITIAL_STATISTICS = void 0;
 const initialValues = {
   tabSwitchCount: 0,
   userCount: 0,
@@ -35,4 +35,6 @@ exports.bodyPixConfigs = bodyPixConfigs;
 const glancePercentageToPass = 60;
 exports.glancePercentageToPass = glancePercentageToPass;
 const evaluateVideoIntervalInSeconds = 1;
-exports.evaluateVideoIntervalInSeconds = evaluateVideoIntervalInSeconds;
+exports.evaluateVideoIntervalInSeconds = evaluateVideoIntervalInSeconds;
+const gpuTypes = ["apple", "amd", "radeon", "nvidia", "geforce"];
+exports.gpuTypes = gpuTypes;

package/dist/hooks/index.js

@@ -3,12 +3,6 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useAudioVideoPermissions", {
-  enumerable: true,
-  get: function get() {
-    return _useAudioVideoPermissions.default;
-  }
-});
 Object.defineProperty(exports, "useFullscreenData", {
   enumerable: true,
   get: function get() {
@@ -34,6 +28,4 @@ var _usePageVisibility = _interopRequireDefault(require("./usePageVisibility"));
 
 var _useTabSwitchCount = _interopRequireDefault(require("./useTabSwitchCount"));
 
-var _useAudioVideoPermissions = _interopRequireDefault(require("./useAudioVideoPermissions"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/hooks/useFullScreenData.js

@@ -24,7 +24,7 @@ function useFullscreenData(firstFullScreenDone) {
       setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
     }
 
-    if (!firstFullScreenDone.current) {
+    if (isFullscreen && !firstFullScreenDone.current) {
       firstFullScreenDone.current = true;
     }
   }, [isFullscreen, firstFullScreenDone]);

package/dist/utils/gpuUtils.js

@@ -0,0 +1,22 @@
+"use strict";
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+require("core-js/modules/es.array.includes.js");
+
+require("core-js/modules/es.string.includes.js");
+
+var _defaults = require("../constants/defaults");
+
+const isGPUAvailable = () => {
+  const canvas = document.createElement("canvas");
+  const webgl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+  const debugInfo = webgl.getExtension("webgl_debug_renderer_info");
+  const gpu = webgl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL).toLowerCase();
+
+  for (const gpuType of _defaults.gpuTypes) {
+    if (gpu.includes(gpuType)) return true;
+  }
+
+  return false;
+};

package/dist/utils/index.js

@@ -63,6 +63,12 @@ Object.defineProperty(exports, "isArrayValid", {
     return _arrayUtils.isArrayValid;
   }
 });
+Object.defineProperty(exports, "isGPUAvailable", {
+  enumerable: true,
+  get: function get() {
+    return _gpuUtils.isGPUAvailable;
+  }
+});
 Object.defineProperty(exports, "isWebcamVideoValid", {
   enumerable: true,
   get: function get() {
@@ -102,4 +108,6 @@ var _browserUtils = require("./browserUtils");
 
 var _breachUtils = require("./breachUtils");
 
-var _arrayUtils = require("./arrayUtils");
+var _arrayUtils = require("./arrayUtils");
+
+var _gpuUtils = require("./gpuUtils");

package/package.json

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

package/dist/components/FullScreenPermission.js

@@ -1,84 +0,0 @@
-"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,61 +0,0 @@
-"use strict";
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-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 = _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, {
-    className: "canvas-video",
-    ref: webcamReference
-  }), /*#__PURE__*/_react.default.createElement("canvas", {
-    className: "canvas-video",
-    ref: canvasReference
-  })), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
-    md: 6
-  }, /*#__PURE__*/_react.default.createElement("canvas", {
-    id: "glanceTrackerCanvas",
-    style: {
-      display: "none"
-    }
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      position: "absolute",
-      marginLeft: "auto",
-      marginRight: "auto",
-      left: 0,
-      right: 0,
-      top: "35rem",
-      textAlign: "center",
-      zindex: 9
-    }
-  }, text.USER_COUNT_LABEL, ": ", userCount, /*#__PURE__*/_react.default.createElement("br", null), isWatching ? text.WATCHING_SCREEN : text.NOT_WATCHING_SCREEN));
-};
-
-var _default = FullScreenTestInWebcam;
-exports.default = _default;

package/dist/components/ResponseModal.js

@@ -1,71 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ResponseModal;
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-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(_ref) {
-  let {
-    firstTimeFullScreen,
-    setFirstTimeFullScreen,
-    isFullscreen,
-    setFullscreen,
-    setFullScreenExitCount,
-    fullScreenMessage
-  } = _ref;
-  const [show, setShow] = (0, _react.useState)(true);
-
-  const closeResponseModal = () => {
-    if (firstTimeFullScreen) {
-      setFirstTimeFullScreen(false);
-    }
-
-    setShow(false);
-  };
-
-  const handleNo = () => {
-    if (firstTimeFullScreen) {
-      setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
-    }
-
-    closeResponseModal();
-  };
-
-  const openFullscreen = () => {
-    closeResponseModal();
-    setFullscreen();
-  };
-
-  (0, _react.useEffect)(() => {
-    if (!isFullscreen) {
-      setShow(true);
-    }
-  }, [isFullscreen]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Modal, {
-    show: show,
-    onHide: closeResponseModal,
-    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.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: handleNo
-  }, text.NO), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
-    variant: "primary",
-    onClick: openFullscreen
-  }, text.YES))));
-}

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

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

package/dist/components/permissions/audio-video-permission.js

@@ -1,35 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-require("./audio-video-permission.scss");
-
-var _blockedPermission = require("./blocked-permission");
-
-var _initialScreen = require("./initial-screen");
-
-var _newtonSchoolLogo = _interopRequireDefault(require("../../assets/images/newton-school-logo.png"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const AudioVideoPermission = () => {
-  const isBlocked = false;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    alt: "browser-permission-img",
-    className: isBlocked ? "background2" : "background"
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    alt: "logo",
-    className: "logoImg",
-    src: _newtonSchoolLogo.default
-  }), isBlocked ? /*#__PURE__*/_react.default.createElement(_blockedPermission.BlockedPermission, null) : /*#__PURE__*/_react.default.createElement(_initialScreen.InitialScreen, null));
-};
-
-var _default = AudioVideoPermission;
-exports.default = _default;

package/dist/components/permissions/audio-video-permission.scss

@@ -1,228 +0,0 @@
-.container {
-  height: 100%;
-  padding: 20px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.background {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: #7dc2ad;
-  z-index: -1;
-}
-.background2 {
-  @extend .background;
-  background-color: #ebac9c;
-}
-
-@media only screen and (max-width: 900px) {
-  .logoImg {
-    position: relative !important;
-    display: block;
-    top: auto !important;
-    left: auto !important;
-    margin-bottom: 20px;
-  }
-}
-
-.imageContainer {
-  height: 300px;
-  width: 300px;
-  position: relative;
-  img {
-    position: absolute;
-    left: 0;
-    max-width: 100%;
-    max-height: 100%;
-    min-width: 100%;
-    min-height: 100%;
-  }
-}
-.list_items {
-  margin-top: 40px;
-}
-.list_items li {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  counter-increment: order;
-  margin-top: 40px;
-}
-.list_items li:after {
-  content: "";
-  position: absolute;
-  margin-left: 6px;
-  width: 1px;
-  height: 100%;
-  background-color: rgba(16, 16, 16, 0.2);
-}
-.list_items li:last-child:after {
-  display: none;
-}
-.list_items li:before {
-  content: counter(order);
-  z-index: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 20px;
-  height: 20px;
-  border: 1px solid rgba(16, 16, 16, 0.2);
-  border-radius: 50%;
-  margin-right: 20px;
-  font-size: 12px;
-  font-weight: bold;
-  line-height: 1;
-  color: rgba(16, 16, 16, 0.8);
-  background-color: #fff;
-  box-shadow: 0 0 0 2px #fff;
-}
-.imageTransition:hover {
-  animation: hideImage 0.5s ease-in-out;
-  animation-fill-mode: forwards;
-}
-
-@keyframes hideImage {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-.box {
-  width: 400px;
-  height: 600px;
-  border-radius: 20px;
-  background-color: rgb(255, 255, 255);
-  box-shadow: 5px 10px 8px rgba(60, 60, 60, 1);
-  display: flex;
-  flex-direction: column;
-}
-.videoStyles {
-  border-top-left-radius: 20px;
-  border-top-right-radius: 20px;
-}
-.messageContainer {
-  flex: 1;
-  padding: 20px;
-}
-.ripple {
-  position: relative;
-  flex: 1;
-  padding: 20px;
-  border-top: 1px solid rgba(0, 0, 0, 0.24);
-  button {
-    width: 100%;
-    background-color: #2b189b;
-    padding: 10px;
-    color: #ffffff;
-    border: none;
-    border-radius: 10px;
-    font: inherit;
-    cursor: pointer;
-    outline: inherit;
-    position: relative;
-    font-size: 18px;
-  }
-  button::before {
-    animation: ripple 1.5s ease-out;
-    animation-iteration-count: infinite;
-    background-color: inherit;
-    border-radius: inherit;
-    content: "";
-    height: 100%;
-    left: 50%;
-    position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 100%;
-  }
-}
-
-@keyframes ripple {
-  0% {
-    height: 100%;
-    opacity: 0;
-    width: 100%;
-  }
-
-  25% {
-    height: calc(100% + 8px);
-    opacity: 0.4;
-    width: calc(100% + 8px);
-  }
-
-  50% {
-    height: calc(100% + 12px);
-    opacity: 0;
-    width: calc(100% + 12px);
-  }
-
-  75% {
-    height: 100%;
-    opacity: 0;
-    width: 100%;
-  }
-
-  to {
-    height: 100%;
-    opacity: 0;
-    width: 100%;
-  }
-}
-.flexBox {
-  display: flex;
-  width: 100%;
-}
-.heading {
-  font-size: 20px;
-  font-weight: bold;
-  text-align: center;
-}
-.description {
-  margin-top: 20px;
-  text-align: center;
-  font-size: 14px;
-}
-
-.description_listing {
-  @extend .description;
-  margin-top: unset;
-  font-weight: 400;
-  margin-bottom: 20px;
-  font-size: 16px;
-  max-width: 90%;
-  text-align: start;
-}
-
-.logoImg {
-  position: fixed;
-  left: 20px;
-  top: 20px;
-  width: 200px;
-}
-
-.boxLarge {
-  @extend .box;
-  height: auto;
-  padding: 20px;
-}
-.urlHighlight {
-  width: 300px;
-  border-radius: 10px;
-  padding: 6px;
-  border: 1px solid rgba(16, 16, 16, 0.4);
-  img {
-    max-width: 100%;
-  }
-}
-.near_full_width {
-  max-width: 90%;
-}