@bigbinary/neeto-media-recorder 1.3.10 → 1.3.12

package/index.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, UPLOAD_STATUS, ONE_MINUTE_IN_MILLISECONDS, ONE_SECOND_IN_MILLISECONDS, IS_EXTENSION, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
 import { screenRecorder, multipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
-import { Typography, Button, Callout, Alert } from '@bigbinary/neetoui';
+import { Typography, Spinner, Button, Callout, Alert } from '@bigbinary/neetoui';
 import { useTranslation, Trans } from 'react-i18next';
 import { useMutation } from 'react-query';
 import axios from 'axios';
@@ -17,7 +17,7 @@ import { generatePublicUrl } from '@bigbinary/neeto-media-recorder/utils';
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".nrec-done-button{background-color:rgb(var(--neeto-ui-error-100));padding:8px 12px}.nrec-done-button:hover{box-shadow:0 0 0 3px rgba(var(--neeto-ui-error-500),15%)}.nrec-ellipsis-anim{margin-left:2px}.nrec-ellipsis-anim span{-webkit-animation:nrec-ellipsis-dot 2s infinite;animation:nrec-ellipsis-dot 2s infinite;font-size:32px}.nrec-ellipsis-anim span:first-child{-webkit-animation-delay:0s;animation-delay:0s}.nrec-ellipsis-anim span:nth-child(2){-webkit-animation-delay:.3s;animation-delay:.3s}.nrec-ellipsis-anim span:nth-child(3){-webkit-animation-delay:.6s;animation-delay:.6s}@-webkit-keyframes nrec-ellipsis-dot{0%{opacity:0}50%{opacity:1}to{opacity:0}}@keyframes nrec-ellipsis-dot{0%{opacity:0}50%{opacity:1}to{opacity:0}}";
+var css = ".nrec-done-button{background-color:rgb(var(--neeto-ui-error-100));padding:8px 12px}.nrec-done-button:hover{box-shadow:0 0 0 3px rgba(var(--neeto-ui-error-500),15%)}";
 n(css,{});
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -509,15 +509,17 @@ var AbortUpload = withT(function (_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-col items-center justify-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-col items-center justify-start py-10 2xl:py-20"
+    className: "flex h-full w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20"
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-2 text-center"
   }, /*#__PURE__*/React.createElement(Typography, {
+    className: "select-none",
     "data-cy": "recorder-discarding-recording-message",
     style: "h2"
-  }, t("neetoMediaRecorder.record.discardingVideo"), /*#__PURE__*/React.createElement("span", {
-    className: "nrec-ellipsis-anim"
-  }, /*#__PURE__*/React.createElement("span", null, "."), /*#__PURE__*/React.createElement("span", null, "."), /*#__PURE__*/React.createElement("span", null, "."))), /*#__PURE__*/React.createElement(Typography, {
+  }, t("neetoMediaRecorder.record.discardingVideo"), /*#__PURE__*/React.createElement(Spinner, {
+    className: "ml-3"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "select-none",
     "data-cy": "recorder-do-not-leave-page-message"
   }, t("neetoMediaRecorder.record.doNotLeaveThePage")))));
 });
@@ -920,15 +922,17 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-col items-center justify-center"
   }, /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-col items-center justify-start py-10 2xl:py-20"
+    className: "flex h-full w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20"
   }, /*#__PURE__*/React.createElement("div", {
     className: "w-full space-y-2 pb-6 text-center"
   }, /*#__PURE__*/React.createElement(Typography, {
+    className: "select-none",
     "data-cy": "recorder-uploading-recording-message",
     style: "h2"
-  }, t("neetoMediaRecorder.record.uploadingRecording"), /*#__PURE__*/React.createElement("span", {
-    className: "nrec-ellipsis-anim"
-  }, /*#__PURE__*/React.createElement("span", null, "."), /*#__PURE__*/React.createElement("span", null, "."), /*#__PURE__*/React.createElement("span", null, "."))), /*#__PURE__*/React.createElement(Typography, {
+  }, t("neetoMediaRecorder.record.uploadingRecording"), /*#__PURE__*/React.createElement(Spinner, {
+    className: "ml-3 select-none"
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "select-none",
     "data-cy": "recorder-do-not-leave-page-message"
   }, t("neetoMediaRecorder.record.doNotLeaveThePage"))), /*#__PURE__*/React.createElement("div", {
     className: "flex flex-wrap items-center justify-center gap-4"
@@ -1142,7 +1146,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     return /*#__PURE__*/React.createElement(AbortUpload, null);
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: "flex h-screen w-full flex-col items-center justify-start py-10 2xl:py-20"
+    className: "flex h-screen w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20"
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames("w-full max-w-3xl")
   }, error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/React.createElement(Callout, {