@newtonschool/react_proctoring_library 0.0.6 → 0.0.9

package/dist/components/ProctorApp.js

@@ -45,13 +45,14 @@ const ProctorApp = _ref => {
   const statistics = (0, _react.useRef)(_defaults.INITIAL_STATISTICS);
   const [audioPermission, setAudioPermission] = (0, _react.useState)(false);
   const [videoPermission, setVideoPermission] = (0, _react.useState)(false);
+  const firstFullScreenDone = (0, _react.useRef)(false);
   const {
     isFullscreen,
     setFullscreen,
     fullScreenExitCount
-  } = (0, _hooks.useFullscreenData)();
+  } = (0, _hooks.useFullscreenData)(firstFullScreenDone);
   const [userCount, lookedAwayCount] = (0, _useWebcamData.default)(webcamReference, canvasReference);
-  const tabSwitchCount = (0, _hooks.useTabSwitchCount)();
+  const tabSwitchCount = (0, _hooks.useTabSwitchCount)(firstFullScreenDone);
   (0, _react.useEffect)(() => {
     (0, _utils.removeStatsFromLocalStorage)(proctoringIdentifier);
   }, [proctoringIdentifier]);

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

@@ -15,9 +15,8 @@ var _utils = require("../utils");
 
 const browserFullscreenElementProp = (0, _utils.getBrowserFullscreenElementProp)();
 
-function useFullscreenData() {
+function useFullscreenData(firstFullScreenDone) {
   const fullScreenElement = (0, _react.useRef)(document.documentElement);
-  const firstFullScreenDone = (0, _react.useRef)(false);
   const [isFullscreen, setIsFullscreen] = (0, _react.useState)(document[browserFullscreenElementProp] != null);
   const [fullScreenExitCount, setFullScreenExitCount] = (0, _react.useState)(_defaults.initialValues.fullScreenExitCount);
   (0, _react.useEffect)(() => {
@@ -25,10 +24,10 @@ function useFullscreenData() {
       setFullScreenExitCount(fullScreenExitCount => fullScreenExitCount + 1);
     }
 
-    if (!firstFullScreenDone.current) {
+    if (isFullscreen && !firstFullScreenDone.current) {
       firstFullScreenDone.current = true;
     }
-  }, [isFullscreen]);
+  }, [isFullscreen, firstFullScreenDone]);
 
   const setFullscreen = () => {
     if (!fullScreenElement || !fullScreenElement.current) {

package/dist/hooks/useTabSwitchCount.js

@@ -13,13 +13,13 @@ var _defaults = require("../constants/defaults");
 
 var _ = require(".");
 
-function useTabSwitchCount() {
+function useTabSwitchCount(firstFullScreenDone) {
   const isTabVisible = (0, _.usePageVisibility)();
   const [tabSwitchCount, setTabSwitchCount] = (0, _react.useState)(_defaults.initialValues.tabSwitchCount);
   (0, _react.useEffect)(() => {
-    if (!isTabVisible) {
+    if (!isTabVisible && firstFullScreenDone.current) {
       setTabSwitchCount(tabSwitchCount => tabSwitchCount + 1);
     }
-  }, [isTabVisible]);
+  }, [isTabVisible, firstFullScreenDone]);
   return tabSwitchCount;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonschool/react_proctoring_library",
-  "version": "0.0.6",
+  "version": "0.0.9",
   "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%;
-}

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

@@ -1,76 +0,0 @@
-"use strict";
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BlockedPermission = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _urlVideoPermissionHighlight = _interopRequireDefault(require("../../assets/images/url-video-permission-highlight.png"));
-
-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 }; }
-
-// import givePermission from "../../assets/videos/give-permission.mp4";
-const BlockedPermission = () => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "boxLarge"
-  }, /*#__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: "../../assets/videos/give-permission",
-    type: "video/mp4"
-  }), text.VIDEO_UNSUPPORTED_IN_BROWSER)), /*#__PURE__*/_react.default.createElement("p", {
-    className: "heading"
-  }, text.BROWSER_BLOCKED_PERMISSION), /*#__PURE__*/_react.default.createElement("ol", {
-    className: "list_items"
-  }, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "near_full_width"
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "description_listing"
-  }, text.BROWSER_BLOCKED_PERMISSION_DIRECTION), /*#__PURE__*/_react.default.createElement("div", {
-    className: "urlHighlight"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    alt: "url_video_permission_highlight",
-    src: _urlVideoPermissionHighlight.default
-  })))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "near_full_width"
-  }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "description_listing"
-  }, text.BROWSER_BLOCKED_PERMISSION_DIALOG), /*#__PURE__*/_react.default.createElement("div", {
-    className: "imageContainer"
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    alt: "video_micro_permissions_given",
-    src: "/videos/vid_micro_permissions_given.png"
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    alt: "video_micro_permissions",
-    src: "/videos/vid_micro_permissions.png",
-    className: "imageTransition"
-  })))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("p", {
-    className: "description_listing"
-  }, text.BROWSER_BLOCKED_PERMISSION_NEXT_STEP))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "flexBox"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "ripple"
-  }, /*#__PURE__*/_react.default.createElement("button", null, text.BROWSER_BLOCKED_PERMISSION_RESOLVED_RECHECK))));
-};
-
-exports.BlockedPermission = BlockedPermission;