@bigbinary/neeto-media-recorder 1.1.3 → 1.2.0

package/index.js

@@ -5,15 +5,16 @@ 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 { useTranslation } from 'react-i18next';
+import { useTranslation, Trans } from 'react-i18next';
 import { useMutation } from 'react-query';
 import axios from 'axios';
+import platform from 'platform';
+import { isNotNil, isEmpty } from 'ramda';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
-import { Pause, Delete, Copy, Download } from '@bigbinary/neeto-icons';
+import { Pause, Delete, Copy, Download, Close } from '@bigbinary/neeto-icons';
 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 {
@@ -484,15 +485,6 @@ var useRecordingUploadSuccess = function useRecordingUploadSuccess() {
   });
 };
 
-var AbortUpload = withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "flex h-screen w-full flex-col items-center justify-center"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex h-full w-full flex-col items-center justify-center space-y-4"
-  }, /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.discardingVideo")), /*#__PURE__*/React.createElement(Spinner, null)));
-});
-
 function _typeof(obj) {
   "@babel/helpers - typeof";
 
@@ -503,6 +495,20 @@ function _typeof(obj) {
   }, _typeof(obj);
 }
 
+var HAS_CHROME_NAMESPACE = (typeof chrome === "undefined" ? "undefined" : _typeof(chrome)) === "object";
+HAS_CHROME_NAMESPACE && isNotNil(chrome.extension);
+platform.name === "Safari";
+var PERMISSIONS_HELP_DOC = "https://neetorecordhelp.neetokb.com/p/a-10efcfd7";
+
+var AbortUpload = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex h-screen w-full flex-col items-center justify-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex h-full w-full flex-col items-center justify-center space-y-4"
+  }, /*#__PURE__*/React.createElement(Typography, null, t("neetoMediaRecorder.record.discardingVideo")), /*#__PURE__*/React.createElement(Spinner, null)));
+});
+
 function _toPrimitive(input, hint) {
   if (_typeof(input) !== "object" || input === null) return input;
   var prim = input[Symbol.toPrimitive];
@@ -855,11 +861,16 @@ var UnSupportedBrowser = withT(function (_ref) {
 });
 
 var UploadingInProgress = function UploadingInProgress(_ref) {
-  var recording = _ref.recording;
+  var recording = _ref.recording,
+    onDiscard = _ref.onDiscard;
   var _useState = useState(""),
     _useState2 = _slicedToArray(_useState, 2),
     baseURL = _useState2[0],
     setBaseURL = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isDiscardAlertOpen = _useState4[0],
+    setIsDiscardAlertOpen = _useState4[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var handleRecordingBlobDownload = function handleRecordingBlobDownload() {
@@ -901,7 +912,23 @@ var UploadingInProgress = function UploadingInProgress(_ref) {
     label: t("neetoMediaRecorder.record.downloadWebm"),
     style: "secondary",
     onClick: handleRecordingBlobDownload
-  }))));
+  }), /*#__PURE__*/React.createElement(Button, {
+    icon: Close,
+    label: t("neetoMediaRecorder.record.discardRecording"),
+    style: "secondary",
+    onClick: function onClick() {
+      return setIsDiscardAlertOpen(true);
+    }
+  }))), /*#__PURE__*/React.createElement(Alert, {
+    isOpen: isDiscardAlertOpen,
+    message: t("neetoMediaRecorder.record.discardConfirmation.message"),
+    submitButtonLabel: t("neetoMediaRecorder.record.discard"),
+    title: t("neetoMediaRecorder.record.discardConfirmation.title"),
+    onClose: function onClose() {
+      return setIsDiscardAlertOpen(false);
+    },
+    onSubmit: onDiscard
+  }));
 };
 
 var useRecorderStore = screenRecorder.useRecorderStore,
@@ -1074,7 +1101,8 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
   }
   if (isRecorderStatus(SCREEN_RECORDER_STATUS.stopped) && isUploadStatus(UPLOAD_STATUS.uploading)) {
     return /*#__PURE__*/React.createElement(UploadingInProgress, {
-      recording: recording
+      recording: recording,
+      onDiscard: handleDiscardRecording
     });
   }
   if (hasRecordingDiscarded({
@@ -1090,7 +1118,17 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
   }, error === SCREEN_RECORDER_ERROR.NotAllowedError && /*#__PURE__*/React.createElement(Callout, {
     className: "mb-2 p-3",
     style: "danger"
-  }, t("neetoMediaRecorder.record.permissionDeniedMessage")), isRecorderStatus(SCREEN_RECORDER_STATUS.acquiring_media) && /*#__PURE__*/React.createElement(Callout, {
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMediaRecorder.record.permissionDeniedMessage",
+    components: {
+      a: /*#__PURE__*/React.createElement("a", {
+        className: "neeto-ui-text-primary-800",
+        href: PERMISSIONS_HELP_DOC,
+        rel: "noreferrer",
+        target: "_blank"
+      })
+    }
+  }))), isRecorderStatus(SCREEN_RECORDER_STATUS.acquiring_media) && /*#__PURE__*/React.createElement(Callout, {
     className: "mb-2 p-3",
     style: "info"
   }, t("neetoMediaRecorder.record.grantPermissionMessage")), shouldShowSafariExtensionCalloutToStartRecording && /*#__PURE__*/React.createElement(Callout, {