@bigbinary/neeto-media-recorder 1.0.8 → 1.0.10

package/index.js

@@ -1,18 +1,19 @@
 import { shallow } from 'zustand/shallow';
 import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import classNames from 'classnames';
+import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, UPLOAD_STATUS, ONE_MINUTE_IN_MILLISECONDS, ONE_SECOND_IN_MILLISECONDS, IS_EXTENSION, SCREEN_RECORDER_EVENT, UPLOAD_EVENT } from '@bigbinary/neeto-media-recorder/constants';
+import { screenRecorder, multipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
 import { Typography, Spinner, Button, Callout, Alert } from '@bigbinary/neetoui';
-import { isEmpty } from 'ramda';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
 import axios from 'axios';
-import { screenRecorder, multipartS3Uploader } from '@bigbinary/neeto-media-recorder/core';
-import { SCREEN_RECORDER_STATUS, SCREEN_RECORDER_ERROR, IS_SAFARI_EXTENSION, ONE_MINUTE_IN_MILLISECONDS, ONE_SECOND_IN_MILLISECONDS, IS_EXTENSION, SCREEN_RECORDER_EVENT, UPLOAD_EVENT, UPLOAD_STATUS } from '@bigbinary/neeto-media-recorder/constants';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
-import { isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import { Pause, Delete, Copy, Download } from '@bigbinary/neeto-icons';
-import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general';
 import { generatePublicUrl } from '@bigbinary/neeto-media-recorder/utils';
+import CopyToClipboardButton from '@bigbinary/neeto-molecules/CopyToClipboardButton';
+import { isEmpty } from 'ramda';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -454,8 +455,8 @@ try {
 var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 
 var baseUrl = "/api/v1/recordings";
-var create = function create(payload) {
-  return axios.post(baseUrl, payload);
+var create = function create() {
+  return axios.post(baseUrl);
 };
 var update = function update(_ref) {
   var id = _ref.id,
@@ -691,16 +692,16 @@ var Controls = function Controls(_ref) {
     className: "flex-shrink-0",
     size: "large",
     style: "text",
-    tooltipProps: {
-      content: t("neetoMediaRecorder.record.pause"),
-      position: "top"
-    },
     icon: function icon() {
       return /*#__PURE__*/React.createElement(Pause, {
         className: "nr-control-button__icon--neeto",
         size: 24
       });
     },
+    tooltipProps: {
+      content: t("neetoMediaRecorder.record.pause"),
+      position: "top"
+    },
     onClick: pauseRecording
   }), isStatus(SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/React.createElement(Button, {
     className: "flex-shrink-0",
@@ -738,16 +739,16 @@ var Controls = function Controls(_ref) {
     className: "flex-shrink-0",
     size: "large",
     style: "text",
-    tooltipProps: {
-      content: t("neetoMediaRecorder.record.discard"),
-      position: "top"
-    },
     icon: function icon() {
       return /*#__PURE__*/React.createElement(Delete, {
         className: "nr-control-button__icon--neeto",
         size: 24
       });
     },
+    tooltipProps: {
+      content: t("neetoMediaRecorder.record.discard"),
+      position: "top"
+    },
     onClick: function onClick() {
       return setIsDiscardAlertOpen(true);
     }
@@ -814,6 +815,11 @@ var downloadRecordingBlob = function downloadRecordingBlob(blob, name) {
   document.body.removeChild(linkElement);
   URL.revokeObjectURL(blobUrl);
 };
+var hasRecordingDiscarded = function hasRecordingDiscarded(_ref) {
+  var recorderStatus = _ref.recorderStatus,
+    uploadStatus = _ref.uploadStatus;
+  return recorderStatus === SCREEN_RECORDER_STATUS.stopped && uploadStatus === UPLOAD_STATUS.aborting;
+};
 
 var Timer = function Timer() {
   var _useTranslation = useTranslation(),
@@ -849,24 +855,34 @@ var UnSupportedBrowser = withT(function (_ref) {
 });
 
 var UploadingInProgress = function UploadingInProgress(_ref) {
-  var recordingId = _ref.recordingId,
-    recordingTitle = _ref.recordingTitle;
-  var _useState = useState(window.location.origin),
+  var recording = _ref.recording;
+  var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     baseURL = _useState2[0],
     setBaseURL = _useState2[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var handleRecordingBlobDownload = function handleRecordingBlobDownload() {
-    downloadRecordingBlob(screenRecorder.getWebmMediaBlob(), recordingTitle);
+    downloadRecordingBlob(screenRecorder.getWebmMediaBlob(), recording.title);
   };
   useEffect(function () {
-    if (!IS_EXTENSION) return;
+    if (!IS_EXTENSION) {
+      setBaseURL(window.location.origin);
+      return;
+    }
     chrome.storage.local.get("baseURL").then(function (_ref2) {
       var baseURL = _ref2.baseURL;
       setBaseURL(baseURL);
     });
   }, []);
+  useEffect(function () {
+    if (!window.document.hasFocus() || !recording.id || isEmpty(baseURL)) {
+      return;
+    }
+    copyToClipboard(generatePublicUrl(recording.id, baseURL), {
+      message: t("neetoMediaRecorder.record.copyToClipboardToastrMessage")
+    });
+  }, [recording.id, baseURL]);
   return /*#__PURE__*/React.createElement("div", {
     className: "flex h-screen w-full flex-col items-center justify-center"
   }, /*#__PURE__*/React.createElement("div", {
@@ -879,7 +895,7 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
     icon: Copy,
     label: t("neetoMediaRecorder.record.copyToClipboard"),
     style: "primary",
-    value: generatePublicUrl(recordingId, baseURL)
+    value: generatePublicUrl(recording.id, baseURL)
   }), /*#__PURE__*/React.createElement(Button, {
     icon: Download,
     style: "secondary",
@@ -894,6 +910,7 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
 var useRecorderStore = screenRecorder.useRecorderStore,
   restartRecording = screenRecorder.restartRecording,
   discardRecording = screenRecorder.discardRecording;
+var useMultipartS3UploadStore = multipartS3Uploader.useMultipartS3UploadStore;
 var MediaRecorder = function MediaRecorder(_ref, ref) {
   var _ref$onUploadComplete = _ref.onUploadComplete,
     onUploadComplete = _ref$onUploadComplete === void 0 ? noop : _ref$onUploadComplete,
@@ -901,26 +918,14 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     onDiscard = _ref$onDiscard === void 0 ? noop : _ref$onDiscard;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useState = useState(""),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    recordingId = _useState2[0],
-    setRecordingId = _useState2[1];
-  var _useState3 = useState(""),
+    isDiscardAlertOpen = _useState2[0],
+    setIsDiscardAlertOpen = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    uploadId = _useState4[0],
-    setUploadId = _useState4[1];
-  var _useState5 = useState(""),
-    _useState6 = _slicedToArray(_useState5, 2),
-    defaultRecordingTitle = _useState6[0],
-    setDefaultRecordingTitle = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    isDiscardAlertOpen = _useState8[0],
-    setIsDiscardAlertOpen = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isRestartAlertOpen = _useState10[0],
-    setIsRestartAlertOpen = _useState10[1];
+    isRestartAlertOpen = _useState4[0],
+    setIsRestartAlertOpen = _useState4[1];
   var _useRecorderStore = useRecorderStore(function (store) {
       return {
         status: store["status"],
@@ -931,48 +936,77 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     recorderStatus = _useRecorderStore.status,
     error = _useRecorderStore.error,
     countdownTimeLeft = _useRecorderStore.countdownTimeLeft;
+  var _useMultipartS3Upload = useMultipartS3UploadStore(function (store) {
+      return {
+        status: store["status"]
+      };
+    }, shallow),
+    uploadStatus = _useMultipartS3Upload.status;
   var _useRecorderStatus = useRecorderStatus(),
     isRecorderStatus = _useRecorderStatus.isStatus;
-  var _useMultipartS3Upload = useMultipartS3UploadStatus(),
-    isUploadStatus = _useMultipartS3Upload.isStatus;
+  var _useMultipartS3Upload2 = useMultipartS3UploadStatus(),
+    isUploadStatus = _useMultipartS3Upload2.isStatus;
   var _useCreateRecording = useCreateRecording({
-      onSuccess: function onSuccess(data) {
-        setDefaultRecordingTitle(data === null || data === void 0 ? void 0 : data.recording.title);
-        setRecordingId(data === null || data === void 0 ? void 0 : data.recording.id);
-        setUploadId(data === null || data === void 0 ? void 0 : data.uploadId);
+      onSuccess: function onSuccess(_ref2) {
+        var recording = _ref2.recording,
+          uploadId = _ref2.uploadId;
+        multipartS3Uploader.initialize(recording.id, uploadId);
+        var uploadStatus = useMultipartS3UploadStore.getState().status;
+        var recorderStatus = useRecorderStore.getState().status;
+        if (uploadStatus === UPLOAD_STATUS.uploading) {
+          multipartS3Uploader.completeUpload();
+        }
+        if (hasRecordingDiscarded({
+          recorderStatus: recorderStatus,
+          uploadStatus: uploadStatus
+        })) {
+          handleDiscardRecording();
+        }
       }
     }),
-    createRecording = _useCreateRecording.mutate;
+    createRecording = _useCreateRecording.mutate,
+    _useCreateRecording$d = _useCreateRecording.data,
+    _useCreateRecording$d2 = _useCreateRecording$d === void 0 ? {} : _useCreateRecording$d,
+    _useCreateRecording$d3 = _useCreateRecording$d2.recording,
+    recording = _useCreateRecording$d3 === void 0 ? {} : _useCreateRecording$d3;
   var _useRecordingUploadSu = useRecordingUploadSuccess(),
     markRecordingAsUploaded = _useRecordingUploadSu.mutate;
   var handleUploadComplete = function handleUploadComplete() {
-    return markRecordingAsUploaded(recordingId, {
+    return markRecordingAsUploaded(recording.id, {
       onSuccess: function onSuccess() {
-        return onUploadComplete(recordingId);
+        return onUploadComplete(recording.id);
       }
     });
   };
   var handleDiscardRecording = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var uploadStatus;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
             return multipartS3Uploader.abortUpload();
           case 2:
+            uploadStatus = useMultipartS3UploadStore.getState().status;
+            if (!(uploadStatus === UPLOAD_STATUS.aborting)) {
+              _context.next = 5;
+              break;
+            }
+            return _context.abrupt("return");
+          case 5:
             onDiscard();
-          case 3:
+          case 6:
           case "end":
             return _context.stop();
         }
       }, _callee);
     }));
     return function handleDiscardRecording() {
-      return _ref2.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   var handleRestartRecording = /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
@@ -987,7 +1021,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       }, _callee2);
     }));
     return function handleRestartRecording() {
-      return _ref3.apply(this, arguments);
+      return _ref4.apply(this, arguments);
     };
   }();
   var handleDiscardAlertClose = function handleDiscardAlertClose() {
@@ -1015,8 +1049,6 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     screenRecorder.startRecording();
   }, [recorderStatus, error]);
   useEffect(function () {
-    if (isEmpty(uploadId)) return undefined;
-    multipartS3Uploader.initialize(recordingId, uploadId);
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDataAvailable, multipartS3Uploader.push);
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStop, multipartS3Uploader.completeUpload);
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDiscard, handleDiscardRecording);
@@ -1029,7 +1061,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       screenRecorder.removeCallback(SCREEN_RECORDER_EVENT.onRestart, handleRestartRecording);
       multipartS3Uploader.removeCallback(UPLOAD_EVENT.onComplete, handleUploadComplete);
     };
-  }, [uploadId, recordingId]);
+  }, [recording]);
   useEffect(function () {
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onStart, createRecording);
     screenRecorder.addCallback(SCREEN_RECORDER_EVENT.onDiscardDuringCountdown, onDiscard);
@@ -1039,15 +1071,19 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
       screenRecorder.resetState();
     };
   }, []);
-  var shouldShowSafariExtensionCalloutToStartRecording = isRecorderStatus(SCREEN_RECORDER_STATUS.idle) && IS_SAFARI_EXTENSION && error == SCREEN_RECORDER_ERROR.None;
-  if (error === SCREEN_RECORDER_ERROR.UnSupportedBrowser) return /*#__PURE__*/React.createElement(UnSupportedBrowser, null);
+  var shouldShowSafariExtensionCalloutToStartRecording = isRecorderStatus(SCREEN_RECORDER_STATUS.idle) && IS_SAFARI_EXTENSION && error === SCREEN_RECORDER_ERROR.None;
+  if (error === SCREEN_RECORDER_ERROR.UnSupportedBrowser) {
+    return /*#__PURE__*/React.createElement(UnSupportedBrowser, null);
+  }
   if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS.uploading)) {
     return /*#__PURE__*/React.createElement(UploadingInProgress, {
-      recordingId: recordingId,
-      recordingTitle: defaultRecordingTitle
+      recording: recording
     });
   }
-  if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS.aborting)) {
+  if (hasRecordingDiscarded({
+    recorderStatus: recorderStatus,
+    uploadStatus: uploadStatus
+  })) {
     return /*#__PURE__*/React.createElement(AbortUpload, null);
   }
   return /*#__PURE__*/React.createElement("div", {
@@ -1069,9 +1105,9 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     className: "neeto-ui-bg-primary-100 neeto-ui-rounded-full flex h-32 w-32 items-center justify-center",
     style: "h1"
   }, countdownTimeLeft), /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.startsIn"))), isRecorderStatus(SCREEN_RECORDER_STATUS.recording, SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/React.createElement(Timer, null)), /*#__PURE__*/React.createElement(Controls, {
-    className: "mt-5",
     setIsDiscardAlertOpen: setIsDiscardAlertOpen,
-    setIsRestartAlertOpen: setIsRestartAlertOpen
+    setIsRestartAlertOpen: setIsRestartAlertOpen,
+    className: "mt-5"
   }), /*#__PURE__*/React.createElement(Alert, {
     isOpen: isDiscardAlertOpen,
     message: t("neetoMediaRecorder.record.discardConfirmation.message"),