@bigbinary/neeto-media-recorder 2.7.35 → 2.7.37

package/index.js

@@ -11,7 +11,7 @@ import axios from 'axios';
 import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Toastr from '@bigbinary/neetoui/Toastr';
 import platform from 'platform';
-import { isNotNil } from 'ramda';
+import { isNotNil, min } from 'ramda';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import Typography from '@bigbinary/neetoui/Typography';
 import Spinner from '@bigbinary/neetoui/Spinner';
@@ -507,6 +507,14 @@ var UPLOAD_STATUS = {
   insufficient_data: "insufficient_data",
   error: "error"
 };
+var TOTAL_RETRIES = 15;
+var INITIAL_RETRY_DELAY = 4000;
+var MAX_RETRY_DELAY = 16000;
+var DEFAULT_RETRY_CONFIG = {
+  retries: TOTAL_RETRIES,
+  retryDelay: INITIAL_RETRY_DELAY,
+  retryableStatuses: []
+};
 var HAS_CHROME_NAMESPACE = (typeof chrome === "undefined" ? "undefined" : _typeof$1(chrome)) === "object";
 var IS_EXTENSION = HAS_CHROME_NAMESPACE && isNotNil(chrome.extension);
 var IS_SAFARI = platform.name === "Safari";
@@ -549,6 +557,11 @@ var getSupportedMimeType = function getSupportedMimeType() {
   })) !== null && _candidates$find !== void 0 ? _candidates$find : null;
 };
 
+var sleep = function sleep(delay) {
+  return new Promise(function (resolve) {
+    return setTimeout(resolve, delay);
+  });
+};
 var generatePublicUrl = function generatePublicUrl(recordingId) {
   var baseURL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
   return "".concat(baseURL, "/watch/").concat(recordingId);
@@ -804,28 +817,257 @@ var copyRecordingLinkToClipboardOnStop = function copyRecordingLinkToClipboardOn
   }))();
 };
 
+function _createClass(e, r, t) {
+  return Object.defineProperty(e, "prototype", {
+    writable: !1
+  }), e;
+}
+
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: !0,
+      configurable: !0
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: !1
+  }), e && _setPrototypeOf(t, e);
+}
+
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == _typeof$1(e) || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+
+function _isNativeFunction(t) {
+  try {
+    return -1 !== Function.toString.call(t).indexOf("[native code]");
+  } catch (n) {
+    return "function" == typeof t;
+  }
+}
+
+function _isNativeReflectConstruct$1() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() {
+    return !!t;
+  })();
+}
+
+function _construct(t, e, r) {
+  if (_isNativeReflectConstruct$1()) return Reflect.construct.apply(null, arguments);
+  var o = [null];
+  o.push.apply(o, e);
+  var p = new (t.bind.apply(t, o))();
+  return r && _setPrototypeOf(p, r.prototype), p;
+}
+
+function _wrapNativeSuper(t) {
+  var r = "function" == typeof Map ? new Map() : void 0;
+  return _wrapNativeSuper = function _wrapNativeSuper(t) {
+    if (null === t || !_isNativeFunction(t)) return t;
+    if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
+    if (void 0 !== r) {
+      if (r.has(t)) return r.get(t);
+      r.set(t, Wrapper);
+    }
+    function Wrapper() {
+      return _construct(t, arguments, _getPrototypeOf(this).constructor);
+    }
+    return Wrapper.prototype = Object.create(t.prototype, {
+      constructor: {
+        value: Wrapper,
+        enumerable: !1,
+        writable: !0,
+        configurable: !0
+      }
+    }), _setPrototypeOf(Wrapper, t);
+  }, _wrapNativeSuper(t);
+}
+
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var RetryError = /*#__PURE__*/function (_Error) {
+  _inherits(RetryError, _Error);
+  var _super = _createSuper(RetryError);
+  function RetryError(message) {
+    _classCallCheck(this, RetryError);
+    return _super.call(this, message);
+  }
+  return _createClass(RetryError);
+}( /*#__PURE__*/_wrapNativeSuper(Error));
+var buildRetryableApi = function buildRetryableApi(apiConnector) {
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_RETRY_CONFIG,
+    _ref$retries = _ref.retries,
+    retries = _ref$retries === void 0 ? TOTAL_RETRIES : _ref$retries,
+    _ref$retryDelay = _ref.retryDelay,
+    retryDelay = _ref$retryDelay === void 0 ? INITIAL_RETRY_DELAY : _ref$retryDelay;
+  return /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(apiConnectorArgs) {
+      var _config$signal, _config$signal2;
+      var _apiConnectorArgs$con, config, remainingAttempts, shouldCancelRetries, _error$config, _error$response, _error$response2;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _apiConnectorArgs$con = apiConnectorArgs.config, config = _apiConnectorArgs$con === void 0 ? null : _apiConnectorArgs$con; // If the signal is already aborted before we start, addEventListener("abort")
+            // will never fire — so we'd otherwise run the full retry/backoff schedule
+            // against an aborted request.
+            if (!(config !== null && config !== void 0 && (_config$signal = config.signal) !== null && _config$signal !== void 0 && _config$signal.aborted)) {
+              _context.next = 3;
+              break;
+            }
+            throw new RetryError("Request cancelled or request retries exhausted");
+          case 3:
+            remainingAttempts = retries + 1;
+            shouldCancelRetries = false;
+            config === null || config === void 0 ? void 0 : (_config$signal2 = config.signal) === null || _config$signal2 === void 0 ? void 0 : _config$signal2.addEventListener("abort", function () {
+              shouldCancelRetries = true;
+            });
+          case 6:
+            if (!(remainingAttempts-- && !shouldCancelRetries)) {
+              _context.next = 30;
+              break;
+            }
+            _context.prev = 7;
+            _context.next = 10;
+            return apiConnector(apiConnectorArgs);
+          case 10:
+            return _context.abrupt("return", _context.sent);
+          case 13:
+            _context.prev = 13;
+            _context.t0 = _context["catch"](7);
+            if (!axios.isCancel(_context.t0)) {
+              _context.next = 17;
+              break;
+            }
+            throw _context.t0;
+          case 17:
+            logger.error("buildRetryableApi -> Failed to connect, remainingAttempts:", _context.t0 === null || _context.t0 === void 0 ? void 0 : (_error$config = _context.t0.config) === null || _error$config === void 0 ? void 0 : _error$config.url, (_error$response = _context.t0.response) === null || _error$response === void 0 ? void 0 : _error$response.status, remainingAttempts);
+            if (!(((_error$response2 = _context.t0.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.status) !== 401 && remainingAttempts > 0)) {
+              _context.next = 27;
+              break;
+            }
+            logger.info("buildRetryableApi -> Failed to connect -> retry in:", retryDelay);
+            _context.next = 22;
+            return sleep(retryDelay);
+          case 22:
+            retryDelay = min(retryDelay * 2, MAX_RETRY_DELAY);
+            if (!shouldCancelRetries) {
+              _context.next = 25;
+              break;
+            }
+            throw _context.t0;
+          case 25:
+            _context.next = 28;
+            break;
+          case 27:
+            throw _context.t0;
+          case 28:
+            _context.next = 6;
+            break;
+          case 30:
+            throw new RetryError("Request cancelled or request retries exhausted");
+          case 31:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[7, 13]]);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+};
+
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var baseUrl = "/api/v1/recordings";
-var create = function create(payload) {
+var create = function create() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    payload = _ref.payload,
+    config = _ref.config;
   return axios.post(baseUrl, {
     recording: _objectSpread$2(_objectSpread$2({}, payload), {}, {
       isMp4: isMp4Supported(payload.deviceInfo.mimeType)
     })
-  });
+  }, config);
 };
+var retryableCreate = buildRetryableApi(create);
 var recordingsApi = {
-  create: create
+  create: retryableCreate
 };
 
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useCreateRecording = function useCreateRecording(options) {
   return useMutation(_objectSpread$1({
-    mutationFn: recordingsApi.create
+    mutationFn: function mutationFn(payload) {
+      return recordingsApi.create({
+        payload: payload
+      });
+    }
   }, options));
 };
 
+var createPrefixedLogger = function createPrefixedLogger(prefix) {
+  return {
+    info: function info() {
+      var _logger;
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      return (_logger = logger).info.apply(_logger, [prefix].concat(args));
+    },
+    error: function error() {
+      var _logger2;
+      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+        args[_key2] = arguments[_key2];
+      }
+      return (_logger2 = logger).error.apply(_logger2, [prefix].concat(args));
+    },
+    warn: function warn() {
+      var _logger3;
+      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+        args[_key3] = arguments[_key3];
+      }
+      return (_logger3 = logger).warn.apply(_logger3, [prefix].concat(args));
+    },
+    debug: function debug() {
+      var _logger4;
+      for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+        args[_key4] = arguments[_key4];
+      }
+      return (_logger4 = logger).debug.apply(_logger4, [prefix].concat(args));
+    }
+  };
+};
+
 var AbortUpload = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/jsx("div", {
@@ -1775,6 +2017,7 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
 };
 
 var _window;
+var recorderLogger = createPrefixedLogger("[MediaRecorder]");
 var useRecorderStore = screenRecorder.useRecorderStore,
   restartRecording = screenRecorder.restartRecording,
   discardRecording = screenRecorder.discardRecording;
@@ -1829,6 +2072,11 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     setBaseURL = _useState10[1];
   var recordingRef = useRef({});
   var baseURLRef = useRef("");
+  // Cleanup tied to the current screenRecorder/multipartS3Uploader wiring.
+  // Lifted out of the wiring useEffect so a restart can tear down the old
+  // wiring synchronously instead of waiting on the aborted uploader's
+  // onAbort callback (which can be 30+ seconds on a flaky network).
+  var activeCleanupRef = useRef(noop);
   useEffect(function () {
     var fetchBaseURL = /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -1941,7 +2189,19 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     }
   }, [elapsedTime]);
   var handleCreateRecordingError = function handleCreateRecordingError(error) {
-    if (isCancelledError(error)) return;
+    var _error$response, _error$response2;
+    if (isCancelledError(error)) {
+      recorderLogger.info("handleCreateRecording -> cancelled");
+      return;
+    }
+    recorderLogger.error("handleCreateRecording -> failed", {
+      name: error === null || error === void 0 ? void 0 : error.name,
+      message: error === null || error === void 0 ? void 0 : error.message,
+      code: error === null || error === void 0 ? void 0 : error.code,
+      responseStatus: error === null || error === void 0 ? void 0 : (_error$response = error.response) === null || _error$response === void 0 ? void 0 : _error$response.status,
+      responseStatusText: error === null || error === void 0 ? void 0 : (_error$response2 = error.response) === null || _error$response2 === void 0 ? void 0 : _error$response2.statusText,
+      stack: error === null || error === void 0 ? void 0 : error.stack
+    });
     screenRecorder.setError(SCREEN_RECORDER_ERROR.CreateRecordingError);
     onError(SCREEN_RECORDER_ERROR.CreateRecordingError);
   };
@@ -2035,6 +2295,13 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
   }();
   var handleRestartRecording = function handleRestartRecording() {
     if (!upload) return;
+    // Detach the old uploader's push/onStop/etc. from the screenRecorder
+    // before abortUpload runs. Otherwise the restarted MediaRecorder's
+    // chunks would fan out to both the aborting old uploader and the new
+    // one — and the old uploader wouldn't release its push registration
+    // until its onAbort callback fired.
+    activeCleanupRef.current();
+    activeCleanupRef.current = noop;
     getMultipartS3Uploader().abortUpload();
   };
   var onDiscardAlertClose = function onDiscardAlertClose() {
@@ -2105,9 +2372,11 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     requested: requested
   });
   useEffect(function () {
-    var _cleanupFunction = noop;
     var handleOnScreenRecorderStart = function handleOnScreenRecorderStart() {
       var _recorderCallbacks, _uploaderCallbacks2;
+      // Tear down any wiring left over from a previous start before adding
+      // a fresh set. Safe to call even on the very first start (noop).
+      activeCleanupRef.current();
       var multipartS3Uploader = upload ? getMultipartS3Uploader({
         initialize: true
       }) : null;
@@ -2144,21 +2413,33 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
       Object.keys(recorderCallbacks).forEach(function (key) {
         screenRecorder.addCallback(key, recorderCallbacks[key]);
       });
-      if (!upload) return;
+      if (!upload) {
+        activeCleanupRef.current = function () {
+          Object.keys(recorderCallbacks).forEach(function (key) {
+            screenRecorder.removeCallback(key, recorderCallbacks[key]);
+          });
+          activeCleanupRef.current = noop;
+        };
+        return;
+      }
       var uploaderCallbacks = (_uploaderCallbacks2 = {}, _defineProperty(_uploaderCallbacks2, UPLOAD_EVENT.onComplete, handleUploadComplete), _defineProperty(_uploaderCallbacks2, UPLOAD_EVENT.onError, handleUploadError), _defineProperty(_uploaderCallbacks2, UPLOAD_EVENT.onProgress, handleUploadProgress), _uploaderCallbacks2);
       Object.keys(uploaderCallbacks).forEach(function (key) {
         multipartS3Uploader.addCallback(key, uploaderCallbacks[key]);
       });
-      _cleanupFunction = function cleanupFunction() {
+      var 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.removeCallback(UPLOAD_EVENT.onAbort, cleanupFunction);
+        if (activeCleanupRef.current === cleanupFunction) {
+          activeCleanupRef.current = noop;
+        }
       };
-      multipartS3Uploader.addCallback(UPLOAD_EVENT.onAbort, _cleanupFunction);
+      activeCleanupRef.current = cleanupFunction;
+      multipartS3Uploader.addCallback(UPLOAD_EVENT.onAbort, cleanupFunction);
       handleCreateRecording();
     };
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, handleOnScreenRecorderStart);
@@ -2166,7 +2447,7 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     return function () {
       screenRecorder.revokePermissions();
       screenRecorder.resetState();
-      _cleanupFunction();
+      activeCleanupRef.current();
     };
   }, []);
   useEffect(function () {