@bigbinary/neeto-media-recorder 2.4.2 → 2.5.0

package/index.js

@@ -2,7 +2,7 @@ import { shallow } from 'zustand/shallow';
 import { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
-import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
+import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
 import { screenRecorder, multipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Alert from '@bigbinary/neetoui/Alert';
@@ -25,13 +25,56 @@ import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general
 import Close from '@bigbinary/neeto-icons/Close';
 import Download from '@bigbinary/neeto-icons/Download';
 import Copy from '@bigbinary/neeto-icons/Copy';
+import Refresh from '@bigbinary/neeto-icons/Refresh';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import ProgressBar from '@bigbinary/neetoui/ProgressBar';
 
 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%)}body .neeto-ui-modal__wrapper .neeto-ui-btn--style-danger{background:rgb(var(--neeto-ui-error-500))}.nrec-media-upload-loader{background:#d9d9d9;border-radius:14px;display:inline-block;height:10px;margin:0 auto;max-width:480px;overflow:hidden;position:relative;width:100%}.nrec-media-upload-loader:after{animation:movementLoader 3s linear infinite,barAnimation 1.5s linear infinite;background-color:#fff;background-image:linear-gradient(45deg,#268e6c 25%,#12805c 0,#12805c 50%,#268e6c 0,#268e6c 75%,#12805c 0,#12805c);background-size:1em 1em;border-radius:14px;box-sizing:border-box;content:\"\";height:10px;left:0;position:absolute;top:0;width:230px}@media only screen and (max-width:767px){.nrec-media-upload-loader:after{width:130px}}@keyframes barAnimation{0%{background-position:1em 0}to{background-position:0 0}}@keyframes movementLoader{0%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(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%)}body .neeto-ui-modal__wrapper .neeto-ui-btn--style-danger{background:rgb(var(--neeto-ui-error-500))}.nrec-media-upload-progress{margin:0 auto;max-width:480px}.nrec-media-upload-error{color:rgb(var(--neeto-ui-error-500))}.nrec-media-upload-loader{background:#d9d9d9;border-radius:14px;display:inline-block;height:10px;margin:0 auto;max-width:480px;overflow:hidden;position:relative;width:100%}.nrec-media-upload-loader:after{animation:movementLoader 3s linear infinite,barAnimation 1.5s linear infinite;background-color:#fff;background-image:linear-gradient(45deg,#268e6c 25%,#12805c 0,#12805c 50%,#268e6c 0,#268e6c 75%,#12805c 0,#12805c);background-size:1em 1em;border-radius:14px;box-sizing:border-box;content:\"\";height:10px;left:0;position:absolute;top:0;width:230px}@media only screen and (max-width:767px){.nrec-media-upload-loader:after{width:130px}}@keyframes barAnimation{0%{background-position:1em 0}to{background-position:0 0}}@keyframes movementLoader{0%{left:0;transform:translateX(-100%)}to{left:100%;transform:translateX(0)}}";
 n(css,{});
 
+function _typeof$1(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof$1 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof$1(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof$1(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof$1(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof$1(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
     var info = gen[key](arg);
@@ -124,9 +167,9 @@ function getDefaultExportFromCjs (x) {
 
 var regeneratorRuntime$1 = {exports: {}};
 
-var _typeof$1 = {exports: {}};
+var _typeof = {exports: {}};
 
-_typeof$1.exports;
+_typeof.exports;
 
 (function (module) {
 	function _typeof(obj) {
@@ -139,9 +182,9 @@ _typeof$1.exports;
 	  }, module.exports.__esModule = true, module.exports["default"] = module.exports), _typeof(obj);
 	}
 	module.exports = _typeof, module.exports.__esModule = true, module.exports["default"] = module.exports; 
-} (_typeof$1));
+} (_typeof));
 
-var _typeofExports = _typeof$1.exports;
+var _typeofExports = _typeof.exports;
 
 regeneratorRuntime$1.exports;
 
@@ -471,51 +514,17 @@ try {
 
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
-function _typeof(obj) {
-  "@babel/helpers - typeof";
-
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-    return typeof obj;
-  } : function (obj) {
-    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-  }, _typeof(obj);
-}
-
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
-
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
-
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
-}
-
 var ONE_SECOND_IN_MILLISECONDS = 1000;
 var ONE_MINUTE_IN_MILLISECONDS = 60 * ONE_SECOND_IN_MILLISECONDS;
 var ONE_HOUR_IN_MILLISECONDS = 60 * ONE_MINUTE_IN_MILLISECONDS;
-var HAS_CHROME_NAMESPACE = (typeof chrome === "undefined" ? "undefined" : _typeof(chrome)) === "object";
+var UPLOAD_STATUS = {
+  uploading: "uploading",
+  completed: "completed",
+  aborting: "aborting",
+  insufficient_data: "insufficient_data",
+  error: "error"
+};
+var HAS_CHROME_NAMESPACE = (typeof chrome === "undefined" ? "undefined" : _typeof$1(chrome)) === "object";
 var IS_EXTENSION = HAS_CHROME_NAMESPACE && isNotNil(chrome.extension);
 platform.name === "Safari";
 var MIME_TYPE = {
@@ -590,7 +599,7 @@ var downloadRecordingBlob = function downloadRecordingBlob(blob, name) {
 var hasRecordingDiscarded = function hasRecordingDiscarded(_ref) {
   var recorderStatus = _ref.recorderStatus,
     uploadStatus = _ref.uploadStatus;
-  return recorderStatus === SCREEN_RECORDER_STATUS.stopped && uploadStatus === UPLOAD_STATUS.aborting;
+  return recorderStatus === SCREEN_RECORDER_STATUS.stopped && uploadStatus === UPLOAD_STATUS$1.aborting;
 };
 var getRecorderTimeLimitInHumanFormat = function getRecorderTimeLimitInHumanFormat(timeInMs) {
   var minutes = Math.floor(timeInMs / (1000 * 60));
@@ -1040,7 +1049,10 @@ var generatePublicUrl = function generatePublicUrl(recordingId) {
 
 var UploadingInProgress = function UploadingInProgress(_ref) {
   var recording = _ref.recording,
-    onDiscard = _ref.onDiscard;
+    uploadProgress = _ref.uploadProgress,
+    uploadStatus = _ref.uploadStatus,
+    onDiscard = _ref.onDiscard,
+    onRetryUpload = _ref.onRetryUpload;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     baseURL = _useState2[0],
@@ -1090,9 +1102,12 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
           weight: "normal",
           children: t("neetoMediaRecorder.record.uploadingRecording")
         }), /*#__PURE__*/jsx("div", {
-          className: "pb-3",
-          children: /*#__PURE__*/jsx("span", {
-            className: "nrec-media-upload-loader"
+          className: "nrec-media-upload-progress pb-3",
+          children: uploadStatus === UPLOAD_STATUS.error ? /*#__PURE__*/jsx("div", {
+            className: "nrec-media-upload-error",
+            children: t("neetoMediaRecorder.common.uploadError")
+          }) : /*#__PURE__*/jsx(ProgressBar, {
+            progressPercentage: uploadProgress
           })
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none",
@@ -1114,6 +1129,12 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
           style: "tertiary",
           label: isMp4Supported() ? t("neetoMediaRecorder.record.downloadMp4") : t("neetoMediaRecorder.record.downloadWebm"),
           onClick: handleRecordingBlobDownload
+        }), /*#__PURE__*/jsx(Button, {
+          "data-cy": "recorder-retry-upload-button",
+          icon: Refresh,
+          label: "Retry",
+          style: "tertiary",
+          onClick: onRetryUpload
         }), /*#__PURE__*/jsx(Button, {
           "data-cy": "recorder-discard-recording-button",
           icon: Close,
@@ -1267,6 +1288,14 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isRestartAlertOpen = _useState4[0],
     setIsRestartAlertOpen = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    uploadProgress = _useState6[0],
+    setUploadProgress = _useState6[1];
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isRetryUpload = _useState8[0],
+    setIsRetryUpload = _useState8[1];
   var _useRecorderStore = useRecorderStore(function (store) {
       return {
         status: store["status"],
@@ -1297,10 +1326,10 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
         multipartS3Uploader.initialize(recording.id, uploadId);
         var uploadStatus = useMultipartS3UploadStore.getState().status;
         var recorderStatus = useRecorderStore.getState().status;
-        if (uploadStatus === UPLOAD_STATUS.uploading) {
+        if (uploadStatus === UPLOAD_STATUS$1.uploading || isRetryUpload) {
+          setIsRetryUpload(false);
           multipartS3Uploader.completeUpload();
-        }
-        if (hasRecordingDiscarded({
+        } else if (hasRecordingDiscarded({
           recorderStatus: recorderStatus,
           uploadStatus: uploadStatus
         })) {
@@ -1347,7 +1376,7 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
             return multipartS3Uploader.abortUpload();
           case 2:
             uploadStatus = useMultipartS3UploadStore.getState().status;
-            if (!(uploadStatus === UPLOAD_STATUS.aborting)) {
+            if (!(uploadStatus === UPLOAD_STATUS$1.aborting)) {
               _context2.next = 5;
               break;
             }
@@ -1391,6 +1420,35 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     restartRecording();
     setIsRestartAlertOpen(false);
   };
+  var handleUploadError = function handleUploadError() {
+    setUploadProgress(0);
+  };
+  var handleUploadProgress = function handleUploadProgress(progress) {
+    setUploadProgress(progress);
+  };
+  var handleReUpload = /*#__PURE__*/function () {
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            setIsRetryUpload(true);
+            setUploadProgress(0);
+            _context4.next = 4;
+            return multipartS3Uploader.abortUpload();
+          case 4:
+            multipartS3Uploader.resetState();
+            multipartS3Uploader.push(screenRecorder.getWebmMediaBlob());
+            handleCreateRecording();
+          case 7:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee4);
+    }));
+    return function handleReUpload() {
+      return _ref6.apply(this, arguments);
+    };
+  }();
   useImperativeHandle(ref, function () {
     return {
       handleDiscardRecording: function handleDiscardRecording() {
@@ -1433,17 +1491,22 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     return noop;
   }, [recorderStatus, error]);
   useEffect(function () {
-    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDataAvailable, multipartS3Uploader.push);
-    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStop, multipartS3Uploader.completeUpload);
-    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDiscard, handleDiscardRecording);
-    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onRestart, handleRestartRecording);
-    multipartS3Uploader.addCallback(UPLOAD_EVENT.onComplete, handleUploadComplete);
+    var _recorderCallbacks, _uploaderCallbacks;
+    var recorderCallbacks = (_recorderCallbacks = {}, _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDataAvailable, multipartS3Uploader.push), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onStop, multipartS3Uploader.completeUpload), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDiscard, handleDiscardRecording), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onRestart, handleRestartRecording), _recorderCallbacks);
+    var uploaderCallbacks = (_uploaderCallbacks = {}, _defineProperty(_uploaderCallbacks, UPLOAD_EVENT.onComplete, handleUploadComplete), _defineProperty(_uploaderCallbacks, UPLOAD_EVENT.onError, handleUploadError), _defineProperty(_uploaderCallbacks, UPLOAD_EVENT.onProgress, handleUploadProgress), _uploaderCallbacks);
+    Object.keys(recorderCallbacks).forEach(function (key) {
+      screenRecorder.addCallback(key, recorderCallbacks[key]);
+    });
+    Object.keys(uploaderCallbacks).forEach(function (key) {
+      multipartS3Uploader.addCallback(key, uploaderCallbacks[key]);
+    });
     return function () {
-      screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onDataAvailable, multipartS3Uploader.push);
-      screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onStop, multipartS3Uploader.completeUpload);
-      screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onDiscard, handleDiscardRecording);
-      screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onRestart, handleRestartRecording);
-      multipartS3Uploader.removeCallback(UPLOAD_EVENT.onComplete, handleUploadComplete);
+      Object.keys(recorderCallbacks).forEach(function (key) {
+        screenRecorder.removeCallback(key, recorderCallbacks[key]);
+      });
+      Object.keys(uploaderCallbacks).forEach(function (key) {
+        multipartS3Uploader.removeCallback(key, uploaderCallbacks[key]);
+      });
     };
   }, [recording.id]);
   useEffect(function () {
@@ -1456,7 +1519,7 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     };
   }, []);
   useEffect(function () {
-    if (!isUploadStatus(UPLOAD_STATUS.insufficient_data)) return;
+    if (!isUploadStatus(UPLOAD_STATUS$1.insufficient_data)) return;
     handleDiscardRecording();
   }, [uploadStatus]);
   var shouldShowSafariExtensionCalloutToStartRecording = isRecorderStatus(SCREEN_RECORDER_STATUS.idle) && IS_SAFARI_EXTENSION && error === SCREEN_RECORDER_ERROR.None;
@@ -1480,13 +1543,16 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
       })]
     });
   }
-  if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS.uploading)) {
+  if (isRetryUpload || isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS$1.uploading, UPLOAD_STATUS$1.error)) {
     return /*#__PURE__*/jsx(UploadingInProgress, {
       recording: recording,
-      onDiscard: handleDiscardRecording
+      uploadProgress: uploadProgress,
+      uploadStatus: uploadStatus,
+      onDiscard: handleDiscardRecording,
+      onRetryUpload: handleReUpload
     });
   }
-  if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS.completed)) {
+  if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS$1.completed)) {
     return /*#__PURE__*/jsx("div", {
       className: "h-screen w-full",
       children: /*#__PURE__*/jsx(PageLoader, {})