@bigbinary/neeto-media-recorder 2.5.8 → 2.6.1

package/index.js

@@ -1,9 +1,9 @@
 import { shallow } from 'zustand/shallow';
-import { useState, useEffect, forwardRef, useImperativeHandle, useRef } from 'react';
+import { useEffect, useState, forwardRef, useRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
 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 { screenRecorder, useMultipartS3UploadStatus, getMultipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Alert from '@bigbinary/neetoui/Alert';
 import Button from '@bigbinary/neetoui/Button';
@@ -942,23 +942,39 @@ var Controls = function Controls(_ref) {
   });
 };
 
-var useMultipartS3UploadStatus = function useMultipartS3UploadStatus() {
-  var useMultipartS3UploadStore = multipartS3Uploader.useMultipartS3UploadStore;
-  var _useMultipartS3Upload = useMultipartS3UploadStore(function (store) {
-      return {
-        status: store["status"]
+var useHandleErrors = function useHandleErrors(_ref) {
+  var error = _ref.error,
+    recorderStatus = _ref.recorderStatus;
+  var _useRecorderStatus = useRecorderStatus(),
+    isRecorderStatus = _useRecorderStatus.isStatus;
+  useEffect(function () {
+    if (error === SCREEN_RECORDER_ERROR.UnSupportedBrowser) return noop;
+    if (error === SCREEN_RECORDER_ERROR.FailedToStart) return noop;
+    if (!isRecorderStatus(SCREEN_RECORDER_STATUS.idle) || error === SCREEN_RECORDER_ERROR.NotAllowedError || error === SCREEN_RECORDER_ERROR.MicPermissionDenied || IS_SAFARI_EXTENSION) {
+      if (error !== SCREEN_RECORDER_ERROR.MicPermissionDenied) return noop;
+      var cleanupFunction = noop;
+      window.navigator.permissions.query({
+        name: "microphone"
+      })
+      // eslint-disable-next-line promise/prefer-await-to-then
+      .then(function (micPermission) {
+        var handleChange = function handleChange() {
+          if (micPermission.state === "granted") {
+            screenRecorder.startRecording();
+          }
+        };
+        micPermission.addEventListener("change", handleChange);
+        cleanupFunction = function cleanupFunction() {
+          return micPermission.removeEventListener("change", handleChange);
+        };
+      });
+      return function () {
+        cleanupFunction();
       };
-    }, shallow),
-    status = _useMultipartS3Upload.status;
-  var isStatus = function isStatus() {
-    for (var _len = arguments.length, statuses = new Array(_len), _key = 0; _key < _len; _key++) {
-      statuses[_key] = arguments[_key];
     }
-    return statuses.includes(status);
-  };
-  return {
-    isStatus: isStatus
-  };
+    screenRecorder.startRecording();
+    return noop;
+  }, [recorderStatus, error]);
 };
 
 var Timer = function Timer() {
@@ -1232,7 +1248,6 @@ var _window;
 var useRecorderStore = screenRecorder.useRecorderStore,
   restartRecording = screenRecorder.restartRecording,
   discardRecording = screenRecorder.discardRecording;
-var useMultipartS3UploadStore = multipartS3Uploader.useMultipartS3UploadStore;
 var globalProps = ((_window = window) === null || _window === void 0 ? void 0 : _window.globalProps) || {};
 var MediaRecorder = function MediaRecorder(_ref, ref) {
   var _ref$onUploadComplete = _ref.onUploadComplete,
@@ -1259,6 +1274,12 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isRetryUpload = _useState8[0],
     setIsRetryUpload = _useState8[1];
+  var recordingRef = useRef({});
+
+  /**
+   * @type {React.MutableRefObject<Promise<unknown> | null>}
+   */
+  var createRecordingPromise = useRef(null);
   var _useRecorderStore = useRecorderStore(function (store) {
       return {
         status: store["status"],
@@ -1271,23 +1292,19 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     error = _useRecorderStore.error,
     countdownTimeLeft = _useRecorderStore.countdownTimeLeft,
     showTimeLimitWarning = _useRecorderStore.showTimeLimitWarning;
-  var _useMultipartS3Upload = useMultipartS3UploadStore(function (store) {
-      return {
-        status: store["status"]
-      };
-    }, shallow),
-    uploadStatus = _useMultipartS3Upload.status;
   var _useRecorderStatus = useRecorderStatus(),
     isRecorderStatus = _useRecorderStatus.isStatus;
-  var _useMultipartS3Upload2 = useMultipartS3UploadStatus(),
-    isUploadStatus = _useMultipartS3Upload2.isStatus;
+  var _useMultipartS3Upload = useMultipartS3UploadStatus(),
+    isUploadStatus = _useMultipartS3Upload.isStatus,
+    uploadStatus = _useMultipartS3Upload.status;
   var shouldShowTimeLimitWarning = showTimeLimitWarning && isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused);
   var _useCreateRecording = useCreateRecording({
       onSuccess: function onSuccess(_ref2) {
         var recording = _ref2.recording,
           uploadId = _ref2.uploadId;
-        multipartS3Uploader.initialize(recording.id, uploadId);
-        var uploadStatus = useMultipartS3UploadStore.getState().status;
+        var multipartS3Uploader = getMultipartS3Uploader();
+        multipartS3Uploader.setRecording(recording.id, uploadId);
+        var uploadStatus = multipartS3Uploader.status;
         var recorderStatus = useRecorderStore.getState().status;
         if (uploadStatus === UPLOAD_STATUS$1.uploading || isRetryUpload) {
           setIsRetryUpload(false);
@@ -1296,15 +1313,19 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
           recorderStatus: recorderStatus,
           uploadStatus: uploadStatus
         })) {
-          handleDiscardRecording();
+          handleDiscardRecording({
+            forceAbort: true
+          });
         }
       }
     }),
-    createRecording = _useCreateRecording.mutate,
+    createRecording = _useCreateRecording.mutateAsync,
+    isCreatingRecording = _useCreateRecording.isPending,
     _useCreateRecording$d = _useCreateRecording.data,
     _useCreateRecording$d2 = _useCreateRecording$d === void 0 ? {} : _useCreateRecording$d,
     _useCreateRecording$d3 = _useCreateRecording$d2.recording,
     recording = _useCreateRecording$d3 === void 0 ? {} : _useCreateRecording$d3;
+  recordingRef.current = recording;
   var handleCreateRecording = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var deviceInfo;
@@ -1315,7 +1336,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
             return getDeviceInfo();
           case 2:
             deviceInfo = _context.sent;
-            createRecording(deviceInfo);
+            createRecordingPromise.current = createRecording(deviceInfo);
           case 4:
           case "end":
             return _context.stop();
@@ -1327,26 +1348,32 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     };
   }();
   var handleUploadComplete = function handleUploadComplete() {
-    return onUploadComplete(recording.id);
+    var _recordingRef$current;
+    return onUploadComplete((_recordingRef$current = recordingRef.current) === null || _recordingRef$current === void 0 ? void 0 : _recordingRef$current.id);
   };
   var handleDiscardRecording = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
-      var uploadStatus;
+      var _ref5,
+        _ref5$forceAbort,
+        forceAbort,
+        multipartS3Uploader,
+        _args2 = arguments;
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            _context2.next = 2;
-            return multipartS3Uploader.abortUpload();
-          case 2:
-            uploadStatus = useMultipartS3UploadStore.getState().status;
-            if (!(uploadStatus === UPLOAD_STATUS$1.aborting)) {
-              _context2.next = 5;
+            _ref5 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref5$forceAbort = _ref5.forceAbort, forceAbort = _ref5$forceAbort === void 0 ? false : _ref5$forceAbort;
+            multipartS3Uploader = getMultipartS3Uploader();
+            _context2.next = 4;
+            return multipartS3Uploader.abortUpload(forceAbort);
+          case 4:
+            if (!(multipartS3Uploader.status === UPLOAD_STATUS$1.aborting)) {
+              _context2.next = 6;
               break;
             }
             return _context2.abrupt("return");
-          case 5:
-            onDiscard();
           case 6:
+            onDiscard();
+          case 7:
           case "end":
             return _context2.stop();
         }
@@ -1356,32 +1383,22 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       return _ref4.apply(this, arguments);
     };
   }();
-  var handleRestartRecording = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
-          case 0:
-            _context3.next = 2;
-            return multipartS3Uploader.abortUpload();
-          case 2:
-            multipartS3Uploader.resetState();
-          case 3:
-          case "end":
-            return _context3.stop();
-        }
-      }, _callee3);
-    }));
-    return function handleRestartRecording() {
-      return _ref5.apply(this, arguments);
-    };
-  }();
-  var handleDiscardAlertClose = function handleDiscardAlertClose() {
+  var handleRestartRecording = function handleRestartRecording() {
+    getMultipartS3Uploader().abortUpload();
+  };
+  var onDiscardAlertClose = function onDiscardAlertClose() {
+    return setIsDiscardAlertOpen(false);
+  };
+  var onRestartAlertClose = function onRestartAlertClose() {
+    return setIsRestartAlertOpen(false);
+  };
+  var handleConfirmDiscard = function handleConfirmDiscard() {
     discardRecording();
-    setIsDiscardAlertOpen(false);
+    onDiscardAlertClose();
   };
-  var handleRestartAlertClose = function handleRestartAlertClose() {
+  var handleConfirmRestart = function handleConfirmRestart() {
     restartRecording();
-    setIsRestartAlertOpen(false);
+    onRestartAlertClose();
   };
   var handleUploadError = function handleUploadError() {
     setUploadProgress(0);
@@ -1389,29 +1406,18 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
   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);
-    };
-  }();
+  var handleReUpload = function handleReUpload() {
+    var multipartS3Uploader = getMultipartS3Uploader();
+    setIsRetryUpload(true);
+    setUploadProgress(0);
+    multipartS3Uploader.abortUpload();
+
+    // Create a new multipartS3Uploader instance to push the blob
+    getMultipartS3Uploader({
+      initialize: true
+    }).push(screenRecorder.getWebmMediaBlob());
+    handleCreateRecording();
+  };
   useImperativeHandle(ref, function () {
     return {
       handleDiscardRecording: function handleDiscardRecording() {
@@ -1422,63 +1428,62 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       }
     };
   });
-  var asyncCleanupFunc = useRef(null);
+  useHandleErrors({
+    error: error,
+    recorderStatus: recorderStatus
+  });
   useEffect(function () {
-    if (error === SCREEN_RECORDER_ERROR.UnSupportedBrowser) return noop;
-    if (error === SCREEN_RECORDER_ERROR.NotSupportedError) return noop;
-    if (error === SCREEN_RECORDER_ERROR.InvalidStateError) return noop;
-    if (!isRecorderStatus(SCREEN_RECORDER_STATUS.idle) || error === SCREEN_RECORDER_ERROR.NotAllowedError || error === SCREEN_RECORDER_ERROR.MicPermissionDenied || IS_SAFARI_EXTENSION) {
-      if (error !== SCREEN_RECORDER_ERROR.MicPermissionDenied) return noop;
-      window.navigator.permissions.query({
-        name: "microphone"
-      })
-      // eslint-disable-next-line promise/prefer-await-to-then
-      .then(function (micPermission) {
-        var handleChange = function handleChange() {
-          if (micPermission.state === "granted") {
-            screenRecorder.startRecording();
-          }
-        };
-        micPermission.addEventListener("change", handleChange);
-        asyncCleanupFunc.current = function () {
-          return micPermission.removeEventListener("change", handleChange);
-        };
+    var _cleanupFunction = noop;
+    var handleOnScreenRecorderStart = function handleOnScreenRecorderStart() {
+      var _recorderCallbacks, _uploaderCallbacks;
+      var multipartS3Uploader = getMultipartS3Uploader({
+        initialize: true
       });
-      return function () {
-        if (!asyncCleanupFunc.current) return;
-        asyncCleanupFunc.current();
-        asyncCleanupFunc.current = null;
-      };
-    }
-    screenRecorder.startRecording();
-    return noop;
-  }, [recorderStatus, error]);
-  useEffect(function () {
-    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 () {
+      var recorderCallbacks = (_recorderCallbacks = {}, _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDataAvailable, multipartS3Uploader.push), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onStop, _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              if (!createRecordingPromise.current) {
+                _context3.next = 4;
+                break;
+              }
+              _context3.next = 3;
+              return createRecordingPromise.current;
+            case 3:
+              createRecordingPromise.current = null;
+            case 4:
+              multipartS3Uploader.completeUpload();
+            case 5:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }))), _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.removeCallback(key, recorderCallbacks[key]);
+        screenRecorder.addCallback(key, recorderCallbacks[key]);
       });
       Object.keys(uploaderCallbacks).forEach(function (key) {
-        multipartS3Uploader.removeCallback(key, uploaderCallbacks[key]);
+        multipartS3Uploader.addCallback(key, uploaderCallbacks[key]);
       });
+      _cleanupFunction = function cleanupFunction() {
+        Object.keys(recorderCallbacks).forEach(function (key) {
+          screenRecorder.removeCallback(key, recorderCallbacks[key]);
+        });
+        Object.keys(uploaderCallbacks).forEach(function (key) {
+          multipartS3Uploader.removeCallback(key, uploaderCallbacks[key]);
+        });
+        multipartS3Uploader.removeCallback(UPLOAD_EVENT.onAbort, _cleanupFunction);
+      };
+      multipartS3Uploader.addCallback(UPLOAD_EVENT.onAbort, _cleanupFunction);
+      handleCreateRecording();
     };
-  }, [recording.id]);
-  useEffect(function () {
-    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, handleCreateRecording);
+    screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, handleOnScreenRecorderStart);
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDiscardDuringCountdown, onDiscard);
     return function () {
       screenRecorder.revokePermissions();
-      multipartS3Uploader.resetState();
       screenRecorder.resetState();
+      _cleanupFunction();
     };
   }, []);
   useEffect(function () {
@@ -1489,7 +1494,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
   if (error === SCREEN_RECORDER_ERROR.UnSupportedBrowser) {
     return /*#__PURE__*/jsx(UnSupportedBrowser, {});
   }
-  if (error === SCREEN_RECORDER_ERROR.NotSupportedError || error === SCREEN_RECORDER_ERROR.InvalidStateError) {
+  if (error === SCREEN_RECORDER_ERROR.FailedToStart) {
     return /*#__PURE__*/jsxs("div", {
       className: "flex h-screen w-full flex-col items-center justify-center gap-4",
       children: [/*#__PURE__*/jsx(Callout, {
@@ -1506,7 +1511,14 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       })]
     });
   }
-  if (isRetryUpload || isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS$1.uploading, UPLOAD_STATUS$1.error)) {
+  var isBeingUploadedOrHasErrorUploading = isUploadStatus(UPLOAD_STATUS$1.uploading, UPLOAD_STATUS$1.error);
+  if (hasRecordingDiscarded({
+    recorderStatus: recorderStatus,
+    uploadStatus: uploadStatus
+  })) {
+    return /*#__PURE__*/jsx(AbortUpload, {});
+  }
+  if (isRetryUpload || isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && (isCreatingRecording || isBeingUploadedOrHasErrorUploading)) {
     return /*#__PURE__*/jsx(UploadingInProgress, {
       recording: recording,
       uploadProgress: uploadProgress,
@@ -1521,12 +1533,6 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       children: /*#__PURE__*/jsx(PageLoader, {})
     });
   }
-  if (hasRecordingDiscarded({
-    recorderStatus: recorderStatus,
-    uploadStatus: uploadStatus
-  })) {
-    return /*#__PURE__*/jsx(AbortUpload, {});
-  }
   return /*#__PURE__*/jsxs("div", {
     className: "flex h-screen w-full flex-col items-center justify-start py-10 xl:py-14 2xl:py-20",
     children: [/*#__PURE__*/jsxs("div", {
@@ -1599,19 +1605,15 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       message: t("neetoMediaRecorder.record.discardConfirmation.message"),
       submitButtonLabel: t("neetoMediaRecorder.record.discard"),
       title: t("neetoMediaRecorder.record.discardConfirmation.title"),
-      onClose: function onClose() {
-        return setIsDiscardAlertOpen(false);
-      },
-      onSubmit: handleDiscardAlertClose
+      onClose: onDiscardAlertClose,
+      onSubmit: handleConfirmDiscard
     }), /*#__PURE__*/jsx(Alert, {
       isOpen: isRestartAlertOpen,
       message: t("neetoMediaRecorder.record.restartConfirmation.message"),
       submitButtonLabel: t("neetoMediaRecorder.record.restart"),
       title: t("neetoMediaRecorder.record.restartConfirmation.title"),
-      onClose: function onClose() {
-        return setIsRestartAlertOpen(false);
-      },
-      onSubmit: handleRestartAlertClose
+      onClose: onRestartAlertClose,
+      onSubmit: handleConfirmRestart
     })]
   });
 };