@bigbinary/neeto-media-recorder 2.6.10 → 2.6.12-beta.1

package/index.js

@@ -18,9 +18,9 @@ import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Computer from '@bigbinary/neeto-icons/Computer';
-import Delete from '@bigbinary/neeto-icons/Delete';
 import Pause from '@bigbinary/neeto-icons/Pause';
 import Unlock from '@bigbinary/neeto-icons/Unlock';
+import Delete from '@bigbinary/neeto-icons/Delete';
 import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Close from '@bigbinary/neeto-icons/Close';
 import Download from '@bigbinary/neeto-icons/Download';
@@ -527,7 +527,7 @@ var MIME_TYPE = {
  // 2 hours
 
 var getSupportedMimeType = function getSupportedMimeType() {
-  return MIME_TYPE.webmH264;
+  return MIME_TYPE.mp4;
 };
 
 var formatTime = function formatTime(time) {
@@ -578,41 +578,44 @@ var getRecorderTimeLimitInHumanFormat = function getRecorderTimeLimitInHumanForm
 var getDeviceInfo = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
     var _yield$chrome$storage, _platform$os;
-    var isCameraEnabled;
+    var mimeType,
+      isCameraEnabled,
+      _args = arguments;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
         case 0:
+          mimeType = _args.length > 0 && _args[0] !== undefined ? _args[0] : getSupportedMimeType();
           if (!IS_EXTENSION$1) {
-            _context.next = 15;
+            _context.next = 16;
             break;
           }
-          _context.next = 3;
+          _context.next = 4;
           return chrome.storage.local.get("isCameraOn");
-        case 3:
+        case 4:
           _context.t2 = _yield$chrome$storage = _context.sent;
           _context.t1 = _context.t2 === null;
           if (_context.t1) {
-            _context.next = 7;
+            _context.next = 8;
             break;
           }
           _context.t1 = _yield$chrome$storage === void 0;
-        case 7:
+        case 8:
           if (!_context.t1) {
-            _context.next = 11;
+            _context.next = 12;
             break;
           }
           _context.t3 = void 0;
-          _context.next = 12;
+          _context.next = 13;
           break;
-        case 11:
-          _context.t3 = _yield$chrome$storage.isCameraOn;
         case 12:
+          _context.t3 = _yield$chrome$storage.isCameraOn;
+        case 13:
           _context.t0 = _context.t3;
-          _context.next = 16;
+          _context.next = 17;
           break;
-        case 15:
-          _context.t0 = false;
         case 16:
+          _context.t0 = false;
+        case 17:
           isCameraEnabled = _context.t0;
           return _context.abrupt("return", {
             os: (_platform$os = platform.os) === null || _platform$os === void 0 ? void 0 : _platform$os.toString(),
@@ -620,9 +623,10 @@ var getDeviceInfo = /*#__PURE__*/function () {
             browser: "".concat(platform.name, " v").concat(platform.version),
             isCameraEnabled: isCameraEnabled,
             isMicEnabled: !!screenRecorder.audioConfiguration,
-            displaySurface: screenRecorder.displaySurface
+            displaySurface: screenRecorder.displaySurface,
+            mimeType: mimeType
           });
-        case 18:
+        case 19:
         case "end":
           return _context.stop();
       }
@@ -633,7 +637,8 @@ var getDeviceInfo = /*#__PURE__*/function () {
   };
 }();
 var isMp4Supported = function isMp4Supported() {
-  return getSupportedMimeType() === MIME_TYPE$1.mp4;
+  var mimeType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getSupportedMimeType();
+  return mimeType === MIME_TYPE$1.mp4;
 };
 
 var baseUrl = "/api/v1/recordings";
@@ -641,7 +646,7 @@ var create = function create(deviceInfo) {
   return axios.post(baseUrl, {
     recording: {
       deviceInfo: deviceInfo,
-      isMp4: isMp4Supported()
+      isMp4: isMp4Supported(deviceInfo.mimeType)
     }
   });
 };
@@ -875,45 +880,33 @@ var Controls = function Controls(_ref) {
     }), isStatus(SCREEN_RECORDER_STATUS.recording) && /*#__PURE__*/jsx(Button, {
       className: "flex-shrink-0",
       "data-cy": "media-recorder-pause-button",
-      size: "large",
       style: "text",
-      icon: function icon() {
-        return /*#__PURE__*/jsx(Pause, {
-          className: "nr-control-button__icon--neeto",
-          size: 28
-        });
-      },
       tooltipProps: {
         content: t("neetoMediaRecorder.record.pause"),
         position: "top"
       },
-      onClick: pauseRecording
+      onClick: pauseRecording,
+      children: /*#__PURE__*/jsx(Pause, {
+        className: "nr-control-button__icon--neeto",
+        size: 28
+      })
     }), isStatus(SCREEN_RECORDER_STATUS.paused) && /*#__PURE__*/jsx(Button, {
       className: "flex-shrink-0",
       "data-cy": "media-recorder-play-button",
-      icon: function icon() {
-        return /*#__PURE__*/jsx(PlayIcon, {
-          size: 28
-        });
-      },
-      size: "large",
       style: "text",
       tooltipProps: {
         content: t("neetoMediaRecorder.record.resume"),
         position: "top"
       },
-      onClick: resumeRecording
+      onClick: resumeRecording,
+      children: /*#__PURE__*/jsx(PlayIcon, {
+        size: 28
+      })
     }), hasRecordingStarted && /*#__PURE__*/jsxs("div", {
       className: "flex items-center gap-3",
       children: [/*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
         "data-cy": "media-recorder-restart-button",
-        icon: function icon() {
-          return /*#__PURE__*/jsx(RestartIcon, {
-            size: 28
-          });
-        },
-        size: "large",
         style: "text",
         tooltipProps: {
           content: t("neetoMediaRecorder.record.restart"),
@@ -921,25 +914,25 @@ var Controls = function Controls(_ref) {
         },
         onClick: function onClick() {
           return setIsRestartAlertOpen(true);
-        }
+        },
+        children: /*#__PURE__*/jsx(RestartIcon, {
+          size: 28
+        })
       }), /*#__PURE__*/jsx(Button, {
         className: "flex-shrink-0",
         "data-cy": "media-recorder-discard-button",
-        size: "large",
         style: "text",
-        icon: function icon() {
-          return /*#__PURE__*/jsx(Delete, {
-            className: "nr-control-button__icon--neeto",
-            size: 28
-          });
-        },
         tooltipProps: {
           content: t("neetoMediaRecorder.record.discard"),
           position: "top"
         },
         onClick: function onClick() {
           return setIsDiscardAlertOpen(true);
-        }
+        },
+        children: /*#__PURE__*/jsx(Delete, {
+          className: "nr-control-button__icon--neeto",
+          size: 28
+        })
       })]
     })]
   });
@@ -1284,7 +1277,9 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
     _ref$onDiscard = _ref.onDiscard,
     onDiscard = _ref$onDiscard === void 0 ? noop : _ref$onDiscard,
     _ref$appName = _ref.appName,
-    appName = _ref$appName === void 0 ? globalProps.appName : _ref$appName;
+    appName = _ref$appName === void 0 ? globalProps.appName : _ref$appName,
+    _ref$mimeType = _ref.mimeType,
+    mimeType = _ref$mimeType === void 0 ? getSupportedMimeType() : _ref$mimeType;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _useState = useState(false),
@@ -1335,6 +1330,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
           uploadId = _ref2.uploadId;
         var multipartS3Uploader = getMultipartS3Uploader();
         multipartS3Uploader.setRecording(recording.id, uploadId);
+        multipartS3Uploader.setMimeType(mimeType);
         var uploadStatus = multipartS3Uploader.status;
         var recorderStatus = useRecorderStore.getState().status;
         if (uploadStatus === UPLOAD_STATUS$1.uploading || isRetryUpload) {
@@ -1364,7 +1360,7 @@ var MediaRecorder = function MediaRecorder(_ref, ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.next = 2;
-            return getDeviceInfo();
+            return getDeviceInfo(mimeType);
           case 2:
             deviceInfo = _context.sent;
             createRecordingPromise.current = createRecording(deviceInfo);