@bigbinary/neeto-media-recorder 2.7.16 → 2.7.18

package/index.js

@@ -1,7 +1,9 @@
 import { shallow } from 'zustand/shallow';
 import { useState, useRef, useCallback, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useMutation, isCancelledError } from '@tanstack/react-query';
 import classNames from 'classnames';
 import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import Browser from '@bigbinary/neeto-icons/Browser';
 import { SCREEN_RECORDER_STATUS, UPLOAD_STATUS as UPLOAD_STATUS$1, ONE_SECOND_IN_MILLISECONDS as ONE_SECOND_IN_MILLISECONDS$1, MIME_TYPE as MIME_TYPE$1, ONE_MINUTE_IN_MILLISECONDS as ONE_MINUTE_IN_MILLISECONDS$1, IS_EXTENSION as IS_EXTENSION$1, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, MIC_NOT_WORKING_SILENCE_TIMEOUT, SCREEN_RECORDER_EVENT, COUNTDOWN_TIME, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
 import { screenRecorder, useMultipartS3UploadStatus, getMultipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
@@ -10,7 +12,6 @@ import Button from '@bigbinary/neetoui/Button';
 import Callout from '@bigbinary/neetoui/Callout';
 import Typography from '@bigbinary/neetoui/Typography';
 import { useTranslation, Trans } from 'react-i18next';
-import { useMutation } from '@tanstack/react-query';
 import axios from 'axios';
 import platform from 'platform';
 import { isNotNil, isEmpty } from 'ramda';
@@ -660,14 +661,14 @@ var AbortUpload = withT(function (_ref) {
         className: "w-full space-y-2 text-center",
         children: [/*#__PURE__*/jsxs(Typography, {
           className: "select-none",
-          "data-cy": "recorder-discarding-recording-message",
+          "data-testid": "recorder-discarding-recording-message",
           style: "h2",
           children: [t("neetoMediaRecorder.record.discardingVideo"), /*#__PURE__*/jsx(Spinner, {
             className: "ml-3"
           })]
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none",
-          "data-cy": "recorder-do-not-leave-page-message",
+          "data-testid": "recorder-do-not-leave-page-message",
           children: t("neetoMediaRecorder.record.doNotLeaveThePage")
         })]
       })
@@ -803,37 +804,39 @@ var Controls = function Controls(_ref) {
       "neeto-ui-rounded-lg neeto-ui-border-gray-200 border-2": hasRecordingStarted
     }, className, isNotEmpty(classNames))),
     children: [shouldShowSelectScreenButton && /*#__PURE__*/jsxs("div", {
-      className: "mt-4 flex gap-4",
+      className: "flex gap-4",
       children: [/*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
-        "data-cy": "media-recorder-record-button",
+        "data-testid": "media-recorder-record-button",
         icon: function icon() {
           return /*#__PURE__*/jsx(Computer, {
-            size: 28
+            size: 20
           });
         },
+        iconPosition: "left",
         label: t("neetoMediaRecorder.record.selectScreen"),
         loading: isStatus(SCREEN_RECORDER_STATUS.acquiring_media),
         size: "large",
         onClick: startRecording
       }), /*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
-        "data-cy": "media-recorder-discard-button",
+        "data-testid": "media-recorder-discard-button",
         icon: function icon() {
           return /*#__PURE__*/jsx(Delete, {
-            size: 28
+            size: 20
           });
         },
+        iconPosition: "left",
         label: t("neetoMediaRecorder.record.discard"),
         size: "large",
         style: "danger",
         onClick: onDiscard
       })]
     }), shouldShowGrantMicPermissionButton && /*#__PURE__*/jsxs("div", {
-      className: "mt-4 flex gap-4",
+      className: "flex gap-4",
       children: [/*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
-        "data-cy": "media-recorder-no-audio-button",
+        "data-testid": "media-recorder-no-audio-button",
         label: t("neetoMediaRecorder.record.iDontNeedAudio"),
         size: "large",
         style: "danger",
@@ -845,9 +848,10 @@ var Controls = function Controls(_ref) {
         }
       }), /*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
-        "data-cy": "media-recorder-grant-microphone-permission-button",
+        "data-testid": "media-recorder-grant-microphone-permission-button",
         icon: Unlock,
-        iconSize: 28,
+        iconPosition: "left",
+        iconSize: 20,
         label: t("neetoMediaRecorder.record.grantMicPermission"),
         size: "large",
         onClick: startRecording
@@ -856,7 +860,7 @@ var Controls = function Controls(_ref) {
       className: "flex items-center gap-3",
       children: [/*#__PURE__*/jsx(Button, {
         className: "nrec-done-button flex-shrink-0",
-        "data-cy": "media-recorder-stop-button",
+        "data-testid": "media-recorder-stop-button",
         icon: function icon() {
           return /*#__PURE__*/jsx(StopIcon, {
             size: 28
@@ -871,7 +875,7 @@ var Controls = function Controls(_ref) {
       })]
     }), isStatus(SCREEN_RECORDER_STATUS.recording) && /*#__PURE__*/jsx(Button, {
       className: "flex-shrink-0",
-      "data-cy": "media-recorder-pause-button",
+      "data-testid": "media-recorder-pause-button",
       style: "text",
       tooltipProps: {
         content: t("neetoMediaRecorder.record.pause"),
@@ -884,7 +888,7 @@ var Controls = function Controls(_ref) {
       })
     }), isStatus(SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/jsx(Button, {
       className: "flex-shrink-0",
-      "data-cy": "media-recorder-play-button",
+      "data-testid": "media-recorder-play-button",
       style: "text",
       tooltipProps: {
         content: t("neetoMediaRecorder.record.resume"),
@@ -898,7 +902,7 @@ var Controls = function Controls(_ref) {
       className: "flex items-center gap-3",
       children: [/*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
-        "data-cy": "media-recorder-restart-button",
+        "data-testid": "media-recorder-restart-button",
         style: "text",
         tooltipProps: {
           content: t("neetoMediaRecorder.record.restart"),
@@ -912,7 +916,7 @@ var Controls = function Controls(_ref) {
         })
       }), /*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
-        "data-cy": "media-recorder-discard-button",
+        "data-testid": "media-recorder-discard-button",
         style: "text",
         tooltipProps: {
           content: t("neetoMediaRecorder.record.discard"),
@@ -1148,19 +1152,19 @@ var Timer = function Timer() {
     elapsedTime = _useRecorderStore.elapsedTime;
   return /*#__PURE__*/jsxs("div", {
     className: "mb-4 flex flex-col items-center justify-center",
-    "data-cy": "recorder-timer-wrapper",
+    "data-testid": "recorder-timer-wrapper",
     children: [/*#__PURE__*/jsx(Typography, {
       className: "neeto-ui-text-4xl mb-3 flex justify-center",
-      "data-cy": "recorder-timer-elapsed-time",
+      "data-testid": "recorder-timer-elapsed-time",
       weight: "semibold",
       children: getTimeString(elapsedTime)
     }), /*#__PURE__*/jsx(Typography, {
       className: "mb-2",
-      "data-cy": "recorder-recording-in-progress-message",
+      "data-testid": "recorder-recording-in-progress-message",
       style: "h3",
       children: t("neetoMediaRecorder.record.inProgress")
     }), /*#__PURE__*/jsx(Typography, {
-      "data-cy": "recorder-do-not-leave-page-message",
+      "data-testid": "recorder-do-not-leave-page-message",
       style: "body2",
       children: t("neetoMediaRecorder.record.doNotLeaveThePage")
     })]
@@ -1173,7 +1177,7 @@ var UnSupportedBrowser = withT(function (_ref) {
     className: "flex h-screen w-full items-center justify-center",
     children: /*#__PURE__*/jsx(Callout, {
       className: "p-5",
-      "data-cy": "recorder-unsupported-browser-callout",
+      "data-testid": "recorder-unsupported-browser-callout",
       style: "danger",
       children: t("neetoMediaRecorder.unsupportedBrowser")
     })
@@ -1278,12 +1282,12 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
         className: "w-full pb-6 text-center",
         children: [/*#__PURE__*/jsx(Typography, {
           className: "select-none pb-6",
-          "data-cy": "please-dont-close-this-tab",
+          "data-testid": "please-dont-close-this-tab",
           style: "h1",
           children: t("neetoMediaRecorder.record.pleaseDontCloseThisTab")
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none pb-3",
-          "data-cy": "recorder-uploading-recording-message",
+          "data-testid": "recorder-uploading-recording-message",
           style: "h2",
           weight: "normal",
           children: t("neetoMediaRecorder.record.uploadingRecording")
@@ -1297,33 +1301,33 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
           })
         }), /*#__PURE__*/jsx(Typography, {
           className: "select-none",
-          "data-cy": "recorder-do-not-leave-page-message",
+          "data-testid": "recorder-do-not-leave-page-message",
           style: "body2",
           children: t("neetoMediaRecorder.record.copyLinkDescription")
         })]
       }), /*#__PURE__*/jsxs("div", {
         className: "flex flex-wrap items-center justify-center gap-3",
         children: [/*#__PURE__*/jsx(CopyToClipboardButton, {
-          "data-cy": "recorder-copy-link-button",
+          "data-testid": "recorder-copy-link-button",
           icon: Copy,
           label: t("neetoMediaRecorder.record.copyToClipboard"),
           style: "tertiary",
           value: generatePublicUrl(recording.id, baseURL)
         }), /*#__PURE__*/jsx(Button, {
-          "data-cy": "recorder-download-webm-button",
+          "data-testid": "recorder-download-webm-button",
           icon: Download,
           style: "tertiary",
           label: isMp4Supported() ? t("neetoMediaRecorder.record.downloadMp4") : t("neetoMediaRecorder.record.downloadWebm"),
           onClick: handleRecordingBlobDownload
         }), /*#__PURE__*/jsx(Button, {
-          "data-cy": "recorder-retry-upload-button",
+          "data-testid": "recorder-retry-upload-button",
           disabled: isRetryUpload,
           icon: Refresh,
           label: t("neetoMediaRecorder.record.retry"),
           style: "tertiary",
           onClick: onRetryUpload
         }), /*#__PURE__*/jsx(Button, {
-          "data-cy": "recorder-discard-recording-button",
+          "data-testid": "recorder-discard-recording-button",
           icon: Close,
           label: t("neetoMediaRecorder.record.discardRecording"),
           style: "tertiary",
@@ -1568,25 +1572,49 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     }
   }, [elapsedTime]);
   recordingRef.current = recording;
+  var handleCreateRecordingError = function handleCreateRecordingError(error) {
+    if (isCancelledError(error)) return;
+    screenRecorder.setError(SCREEN_RECORDER_ERROR.FailedToStart);
+    onError(SCREEN_RECORDER_ERROR.FailedToStart);
+  };
   var handleCreateRecording = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var payload;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             payload = {
               folderId: folderId
             };
-            _context.next = 3;
+            _context2.next = 3;
             return getDeviceInfo(mimeType);
           case 3:
-            payload.deviceInfo = _context.sent;
-            createRecordingPromise.current = createRecording(payload);
+            payload.deviceInfo = _context2.sent;
+            createRecordingPromise.current = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+              return _regeneratorRuntime.wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _context.prev = 0;
+                    _context.next = 3;
+                    return createRecording(payload);
+                  case 3:
+                    _context.next = 8;
+                    break;
+                  case 5:
+                    _context.prev = 5;
+                    _context.t0 = _context["catch"](0);
+                    handleCreateRecordingError(_context.t0);
+                  case 8:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee, null, [[0, 5]]);
+            }))();
           case 5:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }));
     return function handleCreateRecording() {
       return _ref3.apply(this, arguments);
@@ -1597,35 +1625,35 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     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 _ref5,
-        _ref5$forceAbort,
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var _ref6,
+        _ref6$forceAbort,
         forceAbort,
         multipartS3Uploader,
-        _args2 = arguments;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+        _args3 = arguments;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            _ref5 = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : {}, _ref5$forceAbort = _ref5.forceAbort, forceAbort = _ref5$forceAbort === void 0 ? false : _ref5$forceAbort;
+            _ref6 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref6$forceAbort = _ref6.forceAbort, forceAbort = _ref6$forceAbort === void 0 ? false : _ref6$forceAbort;
             multipartS3Uploader = getMultipartS3Uploader();
-            _context2.next = 4;
+            _context3.next = 4;
             return multipartS3Uploader.abortUpload(forceAbort);
           case 4:
             if (!(multipartS3Uploader.status === UPLOAD_STATUS$1.aborting)) {
-              _context2.next = 6;
+              _context3.next = 6;
               break;
             }
-            return _context2.abrupt("return");
+            return _context3.abrupt("return");
           case 6:
             onDiscard();
           case 7:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return function handleDiscardRecording() {
-      return _ref4.apply(this, arguments);
+      return _ref5.apply(this, arguments);
     };
   }();
   var handleRestartRecording = function handleRestartRecording() {
@@ -1697,15 +1725,15 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       var multipartS3Uploader = getMultipartS3Uploader({
         initialize: true
       });
-      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) {
+      var recorderCallbacks = (_recorderCallbacks = {}, _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDataAvailable, multipartS3Uploader.push), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onStop, _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
             case 0:
               if (!createRecordingPromise.current) {
-                _context3.next = 4;
+                _context4.next = 4;
                 break;
               }
-              _context3.next = 3;
+              _context4.next = 3;
               return createRecordingPromise.current;
             case 3:
               createRecordingPromise.current = null;
@@ -1713,9 +1741,9 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
               multipartS3Uploader.completeUpload();
             case 5:
             case "end":
-              return _context3.stop();
+              return _context4.stop();
           }
-        }, _callee3);
+        }, _callee4);
       }))), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDiscard, handleDiscardRecording), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onRestart, handleRestartRecording), _recorderCallbacks);
       var uploaderCallbacks = (_uploaderCallbacks2 = {}, _defineProperty(_uploaderCallbacks2, UPLOAD_EVENT.onComplete, handleUploadComplete), _defineProperty(_uploaderCallbacks2, UPLOAD_EVENT.onError, handleUploadError), _defineProperty(_uploaderCallbacks2, UPLOAD_EVENT.onProgress, handleUploadProgress), _uploaderCallbacks2);
       Object.keys(recorderCallbacks).forEach(function (key) {
@@ -1757,7 +1785,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       className: "flex h-screen w-full flex-col items-center justify-center gap-4",
       children: [/*#__PURE__*/jsx(Callout, {
         className: "p-5",
-        "data-cy": "recorder-unsupported-browser-callout",
+        "data-testid": "recorder-unsupported-browser-callout",
         style: "danger",
         children: t("neetoMediaRecorder.notSupportedError")
       }), /*#__PURE__*/jsx(Button, {
@@ -1798,18 +1826,28 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       className: classNames("w-full max-w-3xl"),
       children: [/*#__PURE__*/jsx(UseDesktopAppCallout, {}), error === SCREEN_RECORDER_ERROR.InsufficientData && /*#__PURE__*/jsx(Callout, {
         className: "mb-2 p-3",
-        "data-cy": "recorder-insufficient-data-error-callout",
+        "data-testid": "recorder-insufficient-data-error-callout",
         style: "danger",
         children: t("neetoMediaRecorder.insufficientDataError")
       }), error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/jsxs("div", {
-        className: "flex flex-col items-center",
-        children: [/*#__PURE__*/jsx(Typography, {
-          className: "mb-2",
+        className: "flex flex-col items-center pt-10",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "mb-6 flex justify-center",
+          children: /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full flex h-16 w-16 items-center justify-center",
+            children: /*#__PURE__*/jsx(Browser, {
+              className: "neeto-ui-text-gray-600",
+              size: 40
+            })
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "mb-3 text-center",
           style: "h3",
           children: t("neetoMediaRecorder.record.screenSharePermissionDeniedTitle", {
             appName: appName
           })
         }), /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-600 text-center leading-normal",
           children: /*#__PURE__*/jsx(Trans, {
             i18nKey: "neetoMediaRecorder.record.screenSharePermissionDenied",
             components: {
@@ -1833,17 +1871,17 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
         }), /*#__PURE__*/jsx(AllowMicAccess, {})]
       }), isRecorderStatus(SCREEN_RECORDER_STATUS.acquiring_media) && /*#__PURE__*/jsx(Callout, {
         className: "mb-2 p-3",
-        "data-cy": "recorder-grant-permission-info-callout",
+        "data-testid": "recorder-grant-permission-info-callout",
         style: "info",
         children: t("neetoMediaRecorder.record.grantPermissionMessage")
       }), shouldShowSafariExtensionCalloutToStartRecording && /*#__PURE__*/jsx(Callout, {
         className: "mx-auto mb-2 w-1/2 p-3",
-        "data-cy": "recorder-start-recording-info-callout",
+        "data-testid": "recorder-start-recording-info-callout",
         style: "info",
         children: t("neetoMediaRecorder.record.clickToStartRecording")
       }), shouldShowTimeLimitWarning && /*#__PURE__*/jsx(Callout, {
         className: "mx-auto mb-2 w-1/2 p-3",
-        "data-cy": "recorder-time-limit-warning-callout",
+        "data-testid": "recorder-time-limit-warning-callout",
         style: "warning",
         children: /*#__PURE__*/jsx(Typography, {
           component: "span",
@@ -1864,7 +1902,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
         })
       }), isRecorderStatus(SCREEN_RECORDER_STATUS.media_acquired, SCREEN_RECORDER_STATUS.restarting) && /*#__PURE__*/jsxs("div", {
         className: "neeto-ui-rounded-lg mx-auto mb-8 flex w-full max-w-4xl flex-col items-center justify-center p-12",
-        "data-cy": "recorder-countdown-wrapper",
+        "data-testid": "recorder-countdown-wrapper",
         children: [/*#__PURE__*/jsx("div", {
           className: "relative mb-8",
           children: /*#__PURE__*/jsxs("div", {