@bigbinary/neeto-media-recorder 2.7.29-beta.1 → 2.7.29-beta.2

package/index.js

@@ -8,8 +8,9 @@ import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
 import Alert from '@bigbinary/neetoui/Alert';
 import { Trans, useTranslation } from 'react-i18next';
 import axios from 'axios';
+import Toastr from '@bigbinary/neetoui/Toastr';
 import platform from 'platform';
-import { isNotNil, isEmpty } from 'ramda';
+import { isNotNil } from 'ramda';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import Typography from '@bigbinary/neetoui/Typography';
 import Spinner from '@bigbinary/neetoui/Spinner';
@@ -22,7 +23,6 @@ import Pause from '@bigbinary/neeto-icons/Pause';
 import Unlock from '@bigbinary/neeto-icons/Unlock';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Browser from '@bigbinary/neeto-icons/Browser';
-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';
@@ -548,6 +548,11 @@ var getSupportedMimeType = function getSupportedMimeType() {
   })) !== null && _candidates$find !== void 0 ? _candidates$find : null;
 };
 
+var generatePublicUrl = function generatePublicUrl(recordingId) {
+  var baseURL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
+  return "".concat(baseURL, "/watch/").concat(recordingId);
+};
+
 var formatTime = function formatTime(time) {
   return Math.floor(time).toString().padStart(2, "0");
 };
@@ -659,6 +664,74 @@ var isMp4Supported = function isMp4Supported() {
   return mimeType.includes(MIME_TYPE$1.mp4);
 };
 
+/**
+ * Copy a recording's public link to the clipboard while preserving Safari's
+ * transient user activation. Must be invoked synchronously inside a user
+ * gesture handler (e.g. button onClick).
+ *
+ * Safari (WebKit) refuses navigator.clipboard.write[Text] outside a user
+ * gesture, so the post-recording auto-copy cannot be done in a useEffect.
+ * Since `recording.id` is only known once the create-recording POST resolves,
+ * we keep the gesture alive across that wait by handing
+ * navigator.clipboard.write a ClipboardItem backed by a Promise<Blob>; Safari
+ * preserves the activation until the promise settles.
+ *
+ * @param {Object} params
+ * @param {React.RefObject<Promise<unknown> | null>} params.createRecordingPromise
+ * @param {React.RefObject<{ id?: string | number }>} params.recordingRef
+ * @param {React.RefObject<string>} params.baseURLRef
+ * @param {string} params.successMessage Toastr message shown on success.
+ */
+var copyRecordingLinkToClipboardOnStop = function copyRecordingLinkToClipboardOnStop(_ref3) {
+  var _navigator$clipboard;
+  var createRecordingPromise = _ref3.createRecordingPromise,
+    recordingRef = _ref3.recordingRef,
+    baseURLRef = _ref3.baseURLRef,
+    successMessage = _ref3.successMessage;
+  if (typeof window.ClipboardItem !== "function" || !((_navigator$clipboard = navigator.clipboard) !== null && _navigator$clipboard !== void 0 && _navigator$clipboard.write)) {
+    return;
+  }
+  var linkBlobPromise = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _recordingRef$current;
+    var recordingId, baseURL;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          if (!(createRecordingPromise !== null && createRecordingPromise !== void 0 && createRecordingPromise.current)) {
+            _context2.next = 3;
+            break;
+          }
+          _context2.next = 3;
+          return createRecordingPromise.current;
+        case 3:
+          recordingId = recordingRef === null || recordingRef === void 0 ? void 0 : (_recordingRef$current = recordingRef.current) === null || _recordingRef$current === void 0 ? void 0 : _recordingRef$current.id;
+          baseURL = baseURLRef === null || baseURLRef === void 0 ? void 0 : baseURLRef.current;
+          if (!(!recordingId || !baseURL)) {
+            _context2.next = 7;
+            break;
+          }
+          throw new Error("Recording id or base URL unavailable");
+        case 7:
+          return _context2.abrupt("return", new Blob([generatePublicUrl(recordingId, baseURL)], {
+            type: "text/plain"
+          }));
+        case 8:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }))();
+
+  // Swallow the unhandled rejection on the inner promise; clipboard.write
+  // already observes it, but we don't want stray unhandled rejection logs.
+  linkBlobPromise["catch"](noop);
+  navigator.clipboard.write([new ClipboardItem({
+    "text/plain": linkBlobPromise
+  })]).then(function () {
+    return Toastr.success(successMessage);
+  })["catch"](noop);
+};
+
 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";
@@ -1052,13 +1125,13 @@ var Controls = function Controls(_ref) {
   var setIsRestartAlertOpen = _ref.setIsRestartAlertOpen,
     setIsDiscardAlertOpen = _ref.setIsDiscardAlertOpen,
     onDiscard = _ref.onDiscard,
+    onStopRecording = _ref.onStopRecording,
     requested = _ref.requested,
     appName = _ref.appName;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var startRecording = screenRecorder.startRecording,
     pauseRecording = screenRecorder.pauseRecording,
-    stopRecording = screenRecorder.stopRecording,
     resumeRecording = screenRecorder.resumeRecording,
     useRecorderStore = screenRecorder.useRecorderStore,
     setAudioConfiguration = screenRecorder.setAudioConfiguration;
@@ -1148,7 +1221,7 @@ var Controls = function Controls(_ref) {
         label: t("neetoMediaRecorder.record.done"),
         size: "large",
         style: "danger-text",
-        onClick: stopRecording
+        onClick: onStopRecording
       }), /*#__PURE__*/jsx("div", {
         className: "neeto-ui-bg-gray-200 h-10 w-0.5"
       })]
@@ -1535,68 +1608,21 @@ var UnSupportedBrowser = withT(function (_ref) {
   });
 });
 
-var generatePublicUrl = function generatePublicUrl(recordingId) {
-  var baseURL = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.location.origin;
-  return "".concat(baseURL, "/watch/").concat(recordingId);
-};
-
 var UploadingInProgress = function UploadingInProgress(_ref) {
-  var recording = _ref.recording,
+  var _ref$baseURL = _ref.baseURL,
+    baseURL = _ref$baseURL === void 0 ? "" : _ref$baseURL,
+    recording = _ref.recording,
     uploadProgress = _ref.uploadProgress,
     uploadStatus = _ref.uploadStatus,
     onDiscard = _ref.onDiscard,
     onRetryUpload = _ref.onRetryUpload,
     isRetryUpload = _ref.isRetryUpload;
-  var _useState = useState(""),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    baseURL = _useState2[0],
-    setBaseURL = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isDiscardAlertOpen = _useState4[0],
-    setIsDiscardAlertOpen = _useState4[1];
+    isDiscardAlertOpen = _useState2[0],
+    setIsDiscardAlertOpen = _useState2[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  useEffect(function () {
-    var fetchBaseURL = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-        var _yield$chrome$storage, baseURL;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (IS_EXTENSION) {
-                _context.next = 3;
-                break;
-              }
-              setBaseURL(window.location.origin);
-              return _context.abrupt("return");
-            case 3:
-              _context.next = 5;
-              return chrome.storage.local.get("baseURL");
-            case 5:
-              _yield$chrome$storage = _context.sent;
-              baseURL = _yield$chrome$storage.baseURL;
-              setBaseURL(baseURL);
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function fetchBaseURL() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    fetchBaseURL();
-  }, []);
-  useEffect(function () {
-    if (!window.document.hasFocus() || !recording.id || isEmpty(baseURL)) {
-      return;
-    }
-    copyToClipboard(generatePublicUrl(recording.id, baseURL), {
-      message: t("neetoMediaRecorder.record.copyToClipboardToastrMessage")
-    });
-  }, [recording.id, baseURL]);
   var handleRecordingBlobDownload = function handleRecordingBlobDownload() {
     var _recording$title;
     downloadRecordingBlob(screenRecorder.getWebmMediaBlob(), (_recording$title = recording.title) !== null && _recording$title !== void 0 ? _recording$title : "NeetoRecord-recording");
@@ -1725,7 +1751,47 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     _useState8 = _slicedToArray(_useState7, 2),
     isRetryUpload = _useState8[0],
     setIsRetryUpload = _useState8[1];
+  var _useState9 = useState(""),
+    _useState10 = _slicedToArray(_useState9, 2),
+    baseURL = _useState10[0],
+    setBaseURL = _useState10[1];
   var recordingRef = useRef({});
+  var baseURLRef = useRef("");
+  useEffect(function () {
+    var fetchBaseURL = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var origin, _yield$chrome$storage, extensionBaseURL;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (IS_EXTENSION) {
+                _context.next = 5;
+                break;
+              }
+              origin = window.location.origin;
+              baseURLRef.current = origin;
+              setBaseURL(origin);
+              return _context.abrupt("return");
+            case 5:
+              _context.next = 7;
+              return chrome.storage.local.get("baseURL");
+            case 7:
+              _yield$chrome$storage = _context.sent;
+              extensionBaseURL = _yield$chrome$storage.baseURL;
+              baseURLRef.current = extensionBaseURL || "";
+              setBaseURL(extensionBaseURL || "");
+            case 11:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function fetchBaseURL() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    fetchBaseURL();
+  }, []);
   var _useAudioIsCapturing = useAudioIsCapturing({
       isMicOn: isMicOn
     }),
@@ -1764,9 +1830,9 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     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;
+      onSuccess: function onSuccess(_ref3) {
+        var recording = _ref3.recording,
+          uploadId = _ref3.uploadId;
         var multipartS3Uploader = getMultipartS3Uploader();
         multipartS3Uploader.setRecording(recording.id, uploadId);
         multipartS3Uploader.setMimeType(mimeType);
@@ -1809,95 +1875,106 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
     onError(SCREEN_RECORDER_ERROR.CreateRecordingError);
   };
   var handleCreateRecording = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
       var payload;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
             if (upload) {
-              _context2.next = 2;
+              _context3.next = 2;
               break;
             }
-            return _context2.abrupt("return");
+            return _context3.abrupt("return");
           case 2:
             payload = {
               folderId: folderId
             };
-            _context2.next = 5;
+            _context3.next = 5;
             return getDeviceInfo(mimeType);
           case 5:
-            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) {
+            payload.deviceInfo = _context3.sent;
+            createRecordingPromise.current = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+              return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+                while (1) switch (_context2.prev = _context2.next) {
                   case 0:
-                    _context.prev = 0;
-                    _context.next = 3;
+                    _context2.prev = 0;
+                    _context2.next = 3;
                     return createRecording(payload);
                   case 3:
-                    _context.next = 8;
+                    _context2.next = 8;
                     break;
                   case 5:
-                    _context.prev = 5;
-                    _context.t0 = _context["catch"](0);
-                    handleCreateRecordingError(_context.t0);
+                    _context2.prev = 5;
+                    _context2.t0 = _context2["catch"](0);
+                    handleCreateRecordingError(_context2.t0);
                   case 8:
                   case "end":
-                    return _context.stop();
+                    return _context2.stop();
                 }
-              }, _callee, null, [[0, 5]]);
+              }, _callee2, null, [[0, 5]]);
             }))();
           case 7:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3);
     }));
     return function handleCreateRecording() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
+  var handleStopRecording = function handleStopRecording() {
+    if (upload) {
+      copyRecordingLinkToClipboardOnStop({
+        createRecordingPromise: createRecordingPromise,
+        recordingRef: recordingRef,
+        baseURLRef: baseURLRef,
+        successMessage: t("neetoMediaRecorder.record.copyToClipboardToastrMessage")
+      });
+    }
+    screenRecorder.stopRecording();
+  };
   var handleUploadComplete = function handleUploadComplete() {
     var _recordingRef$current;
     return onUploadComplete((_recordingRef$current = recordingRef.current) === null || _recordingRef$current === void 0 ? void 0 : _recordingRef$current.id);
   };
   var handleDiscardRecording = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-      var _ref6,
-        _ref6$forceAbort,
+    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var _ref7,
+        _ref7$forceAbort,
         forceAbort,
         multipartS3Uploader,
-        _args3 = arguments;
-      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-        while (1) switch (_context3.prev = _context3.next) {
+        _args4 = arguments;
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
           case 0:
-            _ref6 = _args3.length > 0 && _args3[0] !== undefined ? _args3[0] : {}, _ref6$forceAbort = _ref6.forceAbort, forceAbort = _ref6$forceAbort === void 0 ? false : _ref6$forceAbort;
+            _ref7 = _args4.length > 0 && _args4[0] !== undefined ? _args4[0] : {}, _ref7$forceAbort = _ref7.forceAbort, forceAbort = _ref7$forceAbort === void 0 ? false : _ref7$forceAbort;
             if (upload) {
-              _context3.next = 4;
+              _context4.next = 4;
               break;
             }
             onDiscard();
-            return _context3.abrupt("return");
+            return _context4.abrupt("return");
           case 4:
             multipartS3Uploader = getMultipartS3Uploader();
-            _context3.next = 7;
+            _context4.next = 7;
             return multipartS3Uploader.abortUpload(forceAbort);
           case 7:
             if (!(multipartS3Uploader.status === UPLOAD_STATUS$1.aborting)) {
-              _context3.next = 9;
+              _context4.next = 9;
               break;
             }
-            return _context3.abrupt("return");
+            return _context4.abrupt("return");
           case 9:
             onDiscard();
           case 10:
           case "end":
-            return _context3.stop();
+            return _context4.stop();
         }
-      }, _callee3);
+      }, _callee4);
     }));
     return function handleDiscardRecording() {
-      return _ref5.apply(this, arguments);
+      return _ref6.apply(this, arguments);
     };
   }();
   var handleRestartRecording = function handleRestartRecording() {
@@ -1972,25 +2049,25 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
       var multipartS3Uploader = upload ? getMultipartS3Uploader({
         initialize: true
       }) : null;
-      var recorderCallbacks = (_recorderCallbacks = {}, _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDataAvailable, upload ? multipartS3Uploader.push : noop), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onStop, _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      var recorderCallbacks = (_recorderCallbacks = {}, _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDataAvailable, upload ? multipartS3Uploader.push : noop), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onStop, _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
         var blob;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               if (upload) {
-                _context4.next = 5;
+                _context5.next = 5;
                 break;
               }
               blob = screenRecorder.getWebmMediaBlob();
               RequestedRecordingCallback(blob);
               onRecordingCompleted(blob);
-              return _context4.abrupt("return");
+              return _context5.abrupt("return");
             case 5:
               if (!createRecordingPromise.current) {
-                _context4.next = 9;
+                _context5.next = 9;
                 break;
               }
-              _context4.next = 8;
+              _context5.next = 8;
               return createRecordingPromise.current;
             case 8:
               createRecordingPromise.current = null;
@@ -1998,9 +2075,9 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
               multipartS3Uploader.completeUpload();
             case 10:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4);
+        }, _callee5);
       }))), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onDiscard, handleDiscardRecording), _defineProperty(_recorderCallbacks, SCREEN_RECORDER_EVENT.onRestart, handleRestartRecording), _recorderCallbacks);
       Object.keys(recorderCallbacks).forEach(function (key) {
         screenRecorder.addCallback(key, recorderCallbacks[key]);
@@ -2053,6 +2130,7 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
   }
   if (isRetryUpload || isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && (isCreatingRecording || isBeingUploadedOrHasErrorUploading)) {
     return /*#__PURE__*/jsx(UploadingInProgress, {
+      baseURL: baseURL,
       isRetryUpload: isRetryUpload,
       recording: recording,
       uploadProgress: uploadProgress,
@@ -2088,7 +2166,8 @@ var MediaRecorder$1 = function MediaRecorder(_ref, ref) {
       onDiscard: onDiscard,
       requested: requested,
       setIsDiscardAlertOpen: setIsDiscardAlertOpen,
-      setIsRestartAlertOpen: setIsRestartAlertOpen
+      setIsRestartAlertOpen: setIsRestartAlertOpen,
+      onStopRecording: handleStopRecording
     }), /*#__PURE__*/jsx(Alert, {
       isOpen: isDiscardAlertOpen,
       message: t("neetoMediaRecorder.record.discardConfirmation.message"),